[jQuery] Re: Can't seem to figure out this simple toggle situation...
Thanks Anantha...that worked well. I don't understand this line, however: if ( test.find('img:visible').attr('src') ) It's the .attr('src'), in particular, that I don't understand. What does that part do? Rick -Original Message- From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf Of morris...@ingenious.org Sent: Wednesday, September 23, 2009 11:12 PM To: jQuery (English) Subject: [jQuery] Re: Can't seem to figure out this simple toggle situation... Rick, lets assume that you are calling your function on document read ... and your select statement is getting the correct image ... with this line ... (if its not getting called and your not getting the correct image then this needs to be fixed first) var img = $(this).parent().previous().find('img'); this is the main line that is wrong ... if( img.css('visiblity', 'visible') ) as it is actually setting the style to visible ... let try this assuming you are calling this function and selecting the correct image. function selectFeaturedProperties() { $('.featured').live('click', function() { /* select the td wrapping the image */ var test = $(this).parent().previous(); /* select the img thats visible and grab the src of the image, i would normally do .html() to see if the object had something in it to return true but this should work since the img tag would not have that */ if( test.find('img:visible').attr('src') ){ /* grab the visible image and fade out */ test.find('img').fadeOut(250); } else { /* grab the hidden image and fade in */ test.find('img').fadeIn(250); } }); } On Sep 23, 9:46 pm, "Rick Faircloth" wrote: > I've got this HTML: > > > > > > > > style="visibility:hidden;"> > > > > style="visibility:visible;"> > > > > > > > > #streetNumber# > #streetName#, #city#, #state# > > > > > > The "icon_accept.gif" at the beginning of each row in the table is either > hidden or visible. > > I want to be able toggle the visibility by clicking on the address, which > has the class of "featured". > > I've tried this jQuery (and many other variations). > > function selectFeaturedProperties() { > > $('.featured').live('click', function() { > > var img = $(this).parent().previous().find('img'); > > if ( img.css('visiblity', 'visible') ) > > { img.fadeOut(250); } > > else { img.fadeIn(250); } > > }); > > } > > Something's obviously wrong, but I don't know which part. > > Ideas? (Seems like this should be simple, but I'm just not getting it.) > > Thanks, > > Rick > > > --- > > "Those who hammer their guns into plows will plow for those who do not." - > Thomas Jefferson
[jQuery] Re: Can't seem to figure out this simple toggle situation...
On Sep 23, 11:11 pm, "morris...@ingenious.org" wrote: > Rick, > > lets assume that you are calling your function on document ready ... > and your select statement is getting the correct image ... with this > line ... (if its not getting called and your not getting the correct > image then this needs to be fixed first) > > var img = $(this).parent().previous().find('img'); > > this is the main line that is wrong ... > > if ( img.css('visiblity', 'visible') ) > > as it is actually setting the style to visible ... > > let try this assuming you are calling this function and selecting the > correct image. > > function selectFeaturedProperties() { > > $('.featured').live('click', function() { > > /* select the td wrapping the image */ > var test = $(this).parent().previous(); > > /* select the img thats visible and grab the src of the image, i > would normally do .html() to see if the object had something in it to > return true but this should work since the img tag would not have that > */ > if ( test.find('img:visible').attr('src') ){ > /* grab the visible image and fade out */ > test.find('img').fadeOut(250); > } else { > /* grab the hidden image and fade in */ > test.find('img').fadeIn(250); > } > > }); > > } > > On Sep 23, 9:46 pm, "Rick Faircloth" wrote: > > > I've got this HTML: > > > > > > > > > > > > > style="visibility:hidden;"> > > > > > > > style="visibility:visible;"> > > > > > > > > > > > > #streetNumber# > > #streetName#, #city#, #state# > > > > > > > > > The "icon_accept.gif" at the beginning of each row in the table is either > > hidden or visible. > > > I want to be able toggle the visibility by clicking on the address, which > > has the class of "featured". > > > I've tried this jQuery (and many other variations). > > > function selectFeaturedProperties() { > > > $('.featured').live('click', function() { > > > var img = $(this).parent().previous().find('img'); > > > if ( img.css('visiblity', 'visible') ) > > > { img.fadeOut(250); } > > > else { img.fadeIn(250); } > > > }); > > > } > > > Something's obviously wrong, but I don't know which part. > > > Ideas? (Seems like this should be simple, but I'm just not getting it.) > > > Thanks, > > > Rick > > > > > --- > > > "Those who hammer their guns into plows will plow for those who do not." - > > Thomas Jefferson
[jQuery] Re: Can't seem to figure out this simple toggle situation...
Rick, lets assume that you are calling your function on document read ... and your select statement is getting the correct image ... with this line ... (if its not getting called and your not getting the correct image then this needs to be fixed first) var img = $(this).parent().previous().find('img'); this is the main line that is wrong ... if( img.css('visiblity', 'visible') ) as it is actually setting the style to visible ... let try this assuming you are calling this function and selecting the correct image. function selectFeaturedProperties() { $('.featured').live('click', function() { /* select the td wrapping the image */ var test = $(this).parent().previous(); /* select the img thats visible and grab the src of the image, i would normally do .html() to see if the object had something in it to return true but this should work since the img tag would not have that */ if( test.find('img:visible').attr('src') ){ /* grab the visible image and fade out */ test.find('img').fadeOut(250); } else { /* grab the hidden image and fade in */ test.find('img').fadeIn(250); } }); } On Sep 23, 9:46 pm, "Rick Faircloth" wrote: > I've got this HTML: > > > > > > > > style="visibility:hidden;"> > > > > style="visibility:visible;"> > > > > > > > > #streetNumber# > #streetName#, #city#, #state# > > > > > > The "icon_accept.gif" at the beginning of each row in the table is either > hidden or visible. > > I want to be able toggle the visibility by clicking on the address, which > has the class of "featured". > > I've tried this jQuery (and many other variations). > > function selectFeaturedProperties() { > > $('.featured').live('click', function() { > > var img = $(this).parent().previous().find('img'); > > if ( img.css('visiblity', 'visible') ) > > { img.fadeOut(250); } > > else { img.fadeIn(250); } > > }); > > } > > Something's obviously wrong, but I don't know which part. > > Ideas? (Seems like this should be simple, but I'm just not getting it.) > > Thanks, > > Rick > > > --- > > "Those who hammer their guns into plows will plow for those who do not." - > Thomas Jefferson