CODEWITHSUNDEEP
javascriptjqueryiosipadsafari
Matt
Matt

Reputation: 89

jQuery :not() Selector iOS5 compatible?

I am using the following block of jQuery in my clients wordpress blog:

  jQuery(this)
      .children(":not('.previewTitle, .previewBody')")
      .fadeTo(fadeTime, activeOpacity, function(){
      //some code
});

This code fades the parent container (this), but not the two inner containers .previewTitle and .previewBody as I would like. This code works in all major browser versions except iOS (5) Safari - does anyone have any idea why iOS has beef with me?

Thanks!

EDIT: Ive checked your test code over a few times, but I really cannot see a difference. Here is my full code:

jQuery(thumbs).hover(
            function(){
                jQuery(this).children(":not(.previewTitle, .previewBody)").fadeTo(fadeTime, activeOpacity, function(){
                    //Display Preview Body once faded in
                    strId = jQuery(this).closest('div').attr('id'); //Get parent DIV ID
                    jQuery('#previewTitle' + strId.substr(9)).show();
                    jQuery('#previewBody' + strId.substr(9)).show();
                });
            },
            function(){
                // Only fade out if the user hasn't clicked the thumb
                if(!jQuery(this).hasClass(clickedClass)) 
                {
                    //Fade out of thumbnail..
                    jQuery(this).children(":not(.previewTitle, .previewBody)").fadeTo(fadeTime, inactiveOpacity, function(){
                        //Hide Preview Body once faded out
                        strId = jQuery(this).closest('div').attr('id'); //Get parent DIV ID
                        jQuery('#previewTitle' + strId.substr(9)).hide();
                        jQuery('#previewBody' + strId.substr(9)).hide();
                    });
                }
            });

Upvotes: 0

Views: 615

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074138

You don't put the argument to :not in quotes, just:

jQuery(this).children(":not(.previewTitle, .previewBody)").fadeTo(....
//            no quote ----^              no quote ----^

:not accepts a selector, not a string. I'm intrigued it works on other browsers with the quotes...

Other than that, it should work. It works for me on iOS 4.3.2 (my wife's iPad): Live copy | source

HTML:

<p>Click anywhere in the shaded container:</p>
<div id="container">
  <p>Child that will fade</p>
  <p>Another that will fade</p>
  <p class="previewTitle">previewTitle - won't fade</p>
  <p>Another that will</p>
  <p class="previewBody">previewBody - won't fade</p>
  <p>Another that will</p>
</div>

JavaScript:

jQuery(function($) {

  $("#container").click(function() {
    $(this)
      .children(":not('.previewTitle, .previewBody')")
      .fadeTo("slow", "0.2");
  });

});

...but I don't have iOS 5 handy to test.

Side note:

This code fades the parent container (this), but not the two inner containers .previewTitle and .previewBody as I would like.

The code you've quoted doesn't fade the parent container at all. It fades all of its children except the two listed. That's not the same thing.

Upvotes: 3

Related Questions