Asked  7 Months ago    Answers:  5   Viewed   29 times

On the front page of a site I am building, several <div>s use the CSS :hover pseudo-class to add a border when the mouse is over them. One of the <div>s contains a <form> which, using jQuery, will keep the border if an input within it has focus. This works perfectly except that IE6 does not support :hover on any elements other than <a>s. So, for this browser only we are using jQuery to mimic CSS :hover using the $(#element).hover() method. The only problem is, now that jQuery handles both the form focus() and hover(), when an input has focus then the user moves the mouse in and out, the border goes away.

I was thinking we could use some kind of conditional to stop this behavior. For instance, if we tested on mouse out if any of the inputs had focus, we could stop the border from going away. AFAIK, there is no :focus selector in jQuery, so I'm not sure how to make this happen. Any ideas?



jQuery 1.6+

jQuery added a :focus selector so we no longer need to add it ourselves. Just use $("..").is(":focus")

jQuery 1.5 and below

Edit: As times change, we find better methods for testing focus, the new favorite is this gist from Ben Alman:

jQuery.expr[':'].focus = function( elem ) {
  return elem === document.activeElement && ( elem.type || elem.href );

Quoted from Mathias Bynens here:

Note that the (elem.type || elem.href) test was added to filter out false positives like body. This way, we make sure to filter out all elements except form controls and hyperlinks.

You're defining a new selector. See Plugins/Authoring. Then you can do:

if ($("...").is(":focus")) {



Any jQuery

If you just want to figure out which element has focus, you can use


If you aren't sure if the version will be 1.6 or lower, you can add the :focus selector if it is missing:

(function ( $ ) {
    var filters = $.expr[":"];
    if ( !filters.focus ) { 
        filters.focus = function( elem ) {
           return elem === document.activeElement && ( elem.type || elem.href );
})( jQuery );
Tuesday, June 1, 2021
answered 7 Months ago

Rather than creating a new link element and appending it to the head, you could retrieve the contents of the stylesheet with an AJAX call, and insert it into an inline style block. That way, you can use jQuery's 'complete' callback to fire off your check.

$('#theme-selector a').click(function(){
  var path = $(this).attr('href');
  $.get(path, function(response){
   //Check if the user theme element is in place - if not, create it.
   if (!$('#userTheme').length) $('head').append('<style id="userTheme"></style>');

   //populate the theme element with the new style (replace the old one if necessary)

  //Check whatever you want about the new style:

I haven't actually tested this code, so there may be some syntax-y errors, but the logic should be sound enough.

Thursday, June 10, 2021
answered 6 Months ago

try this:

if(parseInt($("selector").val()) > 99) {
    /*if it is*/

or if you are checking it on change:

     if(parseInt(this.value) > 99){
        /*if it is*/

Edit as said in the below comments, it might be better to use parseFloat instead of parseInt to compare the numbers

Thursday, August 5, 2021
answered 4 Months ago
var validate= false;
$('#requestForm input').each(function(){
    if($(this).val() != '' || $(this).attr('checked'))
        validate = true;
    alert('Please select at least one filter');
    return false;
else { 
    Run my code
Thursday, August 12, 2021
answered 4 Months ago

I wrote the original code mentioned here and have fixed the menu problem Peter was having:

Friday, August 20, 2021
answered 4 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :