Need help using JQuery selectors

[wesley.bunton]

I am trying to use this jquery slide function that i found online.  It's a very basic slide plugin i suppose, which selects a div using the div's id tag.  I wanted to make my menu hide/reveal multiple divs and therefore I modified this function that I keep in my .js file to make things work theoretically. But for some reason I cannot get this to work and I think that it might be that my selectors are implemented wrong in my js file. Here is an example of what I've got which seems to work except for when I try my modified code:

$(document).ready(function() {

        $(".fadeNext_home").click(function(){  

                $("#home").fadeSliderToggle()

                 return false;

        })

});

This is the code that works in my js file:

        caller = this

  if($(caller).css("display") == "none"){

  $(caller).animate({

  opacity: 1,

  height: 'toggle'

  }, settings.speed, settings.easing);

        }else{

                $(caller).animate({

  opacity: 0,

  height: 'toggle'

  }, settings.speed, settings.easing);

        }

};

And this is a modified version with my own selector that does not work.  And I think it's because of the way that I'm trying to interact with an id tag that was not passed to the js file:

        if($(caller).css("display") == "none"){

               

                if($("#home").css("display") != "none"){

                        $("#home").animate({

                                opacity: 0,

                                height: 'toggle'

                        }, settings.speed, settings.easing);

                }


I'm new to jquery (obviously) and would appriciate any help.  Thanks so much!

thanks,
wes

[Dhruva Sagar]

Bracket's don't match in your javascript code.

The if($(caller).css("display") == "none") { <-- bracket is not closed.

Thanks & Regards,
Dhruva Sagar.


Samuel Goldwyn  - "I'm willing to admit that I may not always be right, but I am never wrong."

On Tue, Nov 3, 2009 at 8:58 AM, wesley.bunton <wesley.bunton@...> wrote:

I am trying to use this jquery slide function that i found online.  It's a
very basic slide plugin i suppose, which selects a div using the div's id
tag.  I wanted to make my menu hide/reveal multiple divs and therefore I
modified this function that I keep in my .js file to make things work
theoretically. But for some reason I cannot get this to work and I think
that it might be that my selectors are implemented wrong in my js file. Here
is an example of what I've got which seems to work except for when I try my
modified code:

$(document).ready(function() {

       $(".fadeNext_home").click(function(){

               $("#home").fadeSliderToggle()

                return false;

       })

});

This is the code that works in my js file:

       caller = this

       if($(caller).css("display") == "none"){

               $(caller).animate({

                       opacity: 1,

                       height: 'toggle'

               }, settings.speed, settings.easing);

       }else{

               $(caller).animate({

                       opacity: 0,

                       height: 'toggle'

               }, settings.speed, settings.easing);

       }

};

And this is a modified version with my own selector that does not work.  And
I think it's because of the way that I'm trying to interact with an id tag
that was not passed to the js file:

       if($(caller).css("display") == "none"){



               if($("#home").css("display") != "none"){

                       $("#home").animate({

                               opacity: 0,

                               height: 'toggle'

                       }, settings.speed, settings.easing);

               }


I'm new to jquery (obviously) and would appriciate any help.  Thanks so
much!

thanks,
wes
--
View this message in context: http://old.nabble.com/Need-help-using-JQuery-selectors-tp26159956s27240p26159956.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.

[captaincarp]

Hi Wesley,
1. you are only closing one of your IF statements (with a '}')
2. worth making sure you using display:none consistently and not visibility:hidden anywhere

might help dunno?!

wesley.bunton wrote:

        if($(caller).css("display") == "none"){
       

                if($("#home").css("display") != "none"){

                        $("#home").animate({

                                opacity: 0,

                                height: 'toggle'

                        }, settings.speed, settings.easing);

                }


I'm new to jquery (obviously) and would appriciate any help.  Thanks so much!

thanks,
wes

[wesley.bunton]

Sorry if I wasn't clear enough.  Perhaps this will help, this is my full function that is not working.  I don't think that I have any problems with syntax, because the basic version of this worked just fine, it would hide/reveal each div okay, but I want it to make it check and hide an visible div's before revealing the clicked one.  Therefore I think my problem is with the selector, because the base case I had used a "caller" variable I think which was passed to the js file, and my modification is trying to use a selector such as $home but that doesn't seem to work at all.

Thanks for the help guys, i really appreciate the quick responses.


 jQuery.fn.fadeSliderToggle = function(settings) {

  settings = jQuery.extend({

                speed:500,

                easing : "swing"

        }, settings)

       

        caller = this

  if($(caller).css("display") == "none"){

  $(caller).animate({

  opacity: 1,

  height: 'toggle'

  }, settings.speed, settings.easing);

        }else{

                $(caller).animate({

  opacity: 0,

  height: 'toggle'

  }, settings.speed, settings.easing);

        }

};



 jQuery.fn.fadeSliderToggle = fuction(settings) {

        settings = jQuery.extend({

                speed:500,

                easing : "swing"

        }, settings)



        caller = this

        if($(caller).css("display") == "none"){

               

                if($("#home").css("display") != "none"){

                        $("#home").animate({

                                opacity: 0,

                                height: 'toggle'

                        }, settings.speed, settings.easing);

                }



                if($("#div2").css("display") != "none"){

                        $("#div2").animate({

                                opacity: 0,

                                height: 'toggle'

                        }, settings.speed, settings.easing);

                }



                if($("#div3").css("display") != "none"){

                        $("#div3").animate({

                                opacity: 0,

                                height: 'toggle'

                        }, settings.speed, settings.easing);

                }



                if($("#div4").css("display") != "none"){

                        $("#div4").animate({

                                opacity: 0,

                                height: 'toggle'

                        }, settings.speed, settings.easing);

                }

               

                $(caller).animate({

                        opacity: 1,

                        height: 'toggle'

                }, settings.speed, settings.easing);



        }



};