Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Sep 2009
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question jquery assistance needed

    Hi,

    So, being totally new at javascript/jquery I am trying to create a script that will basically slide down a hidden div, that when you click the close link inside that panel will slide it closed. I would like to use this with a few links.

    I started out with the following jquery code:

    $(document).ready(function(){

    //Expand & Close Toolbox Panel
    $(".toolbox").click(function(){
    $("#popup-toolbox").slideToggle("slow");
    $(this).toggleClass("active"); return false;

    });
    //
    });

    This worked for the box that I wanted with the toolbox link, with the exception that I could not get it to toggle closed with the close link.

    I tried to add this for another link:

    //Expand & Close CMS Login Panel
    $(".popup").click(function(){
    $("#popup-cms").slideToggle("slow");
    $(this).toggleClass(""); return false;

    But now, the toolbox link does not open it's hidden div they all open, the pop-up cms div. And when I added that second part they also will close if you click inside the div (this wasn't happening before with just the toolbox defined)

    So my question is how do I fix this so that my links will each slide down their respective div when clicked on and how can I make the close button work?

    Also, if i didn't want to set the position of the hidden div via css is there a way to define that in jquery?

    Any assistance with this is really appreciated. I'm just getting myself more confused as I try to fix it.

    I have a testing site set up here: http://www.designfoxmediaworks.com/slidetest

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    This here:

    $("#popup-cms").slideToggle("slow");

    Is what is showing and hiding your element with an id of "popup-cms". You've put that inside the "click" function for any element with a class of "popup", which covers a lot of elements.

    I think one mistake you're making is you think you have to manually change the class of the element you want to hide and show, but jQuery does that for you-- you don't need to call toggleClass() here, just use that slideToggle() function.

  • #3
    New Coder
    Join Date
    Sep 2009
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok, so I would have to change the popup-cms part and get rid of the toggleClass but how would I go about getting my close link inside each element to work.

  • #4
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    That's the beauty of the slideToggle()-- you call it once to show, and call it again to hide.

  • #5
    New Coder
    Join Date
    Sep 2009
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts
    if i take out my:

    $(this).toggleClass("active"); return false;

    the popups no longer work

  • #6
    New Coder
    Join Date
    Sep 2009
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I was trying this to open and close one of the boxes:

    //Expand & Close Toolbox Panel
    $(".toolbox").click(function(){
    $("#popup-toolbox").slideToggle("slow");
    $(this).toggleClass("active"); return false;

    });

    $(".close").click(function(){
    $("#popup-toolbox").slideToggle("slow");
    $(this).toggleClass("active"); return false;
    });

    but that doesn't make the close link work. it just makes anywhere you click on in the box close.

  • #7
    New Coder
    Join Date
    Sep 2009
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts
    any other suggestions?

  • #8
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    I really don't know why you're still bothering with toggleClass. You simply don't need to use it. It's screwing you up more than it's helping.

    slideToggle() will do everything for you. It changes the element to show and hide it, you don't have to worry about changing any css class.

  • #9
    New Coder
    Join Date
    Sep 2009
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts
    like i stated in an earlier post. when i remove it from the code and test it. the slidetoggle no longer shows the hidden div. it ceases to function at all.

    could you give me an example of how it would work without using the toggle class then as maybe i am writing something wrong when i remove the togggleclass from the code.

    Quote Originally Posted by Fumigator View Post
    I really don't know why you're still bothering with toggleClass. You simply don't need to use it. It's screwing you up more than it's helping.

    slideToggle() will do everything for you. It changes the element to show and hide it, you don't have to worry about changing any css class.

  • #10
    New Coder
    Join Date
    Sep 2009
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts
    any further thoughts or examples?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •