SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: One time event?

  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,053
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    One time event?

    I use this simple function for a vertical accordion menu:
    Code:
    	$(document).ready(function () {
    		$( ".menu dd" ).hide();
    		$( ".menu a:not(.subitem)" ).click(function(e){
    			$( ".menu dd:visible" ).slideUp( "slow" );
    			$( this ).parent().next().slideDown( "slow" );
    			return false;
    		});
    	});
    And it is actually working fine exept for one small thing. When you click on a link that has a submenu it is executed right. But if by accident you click on the same link again the entire slideUp/slideDown event is executed again. I tried the one time event .one():
    Code:
      $( ".menu a:not(.subitem)" ).one().click(function(e){
    but that isn't working. What should I do to make the event just occurs ones while the sub menu is open.

    Thank you
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,858
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Hi donboe,

    Could you post a quick demo of the accordion?

  3. #3
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    It's this one: cantonamsterdam.nl/canton-menu.php.
    • Click on "Voorgerechten", and the submenu is rolling out.
    • Then click again on "Voorgerechten", then the submenu is rolling in first, and back out immediately afterwards.

    I think there has to be added a toggling if/else statement to see if the submenu is visible or not. If not visible > open submenu, else > close submenu.
    How to do in jQuery ... don't know, but Pullo or some other will have the simple code for that, I guess.

  4. #4
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,053
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Francky. That is the page I am referring to yes. I have no clue either how to adjust that. Probably Pullo indeed will
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  5. #5
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Ha, with some Googlin' I found jQuery has a simple built-in function to toggle a submenu with a roll-out / roll-in effect: slideToggle() !


    If I apply this to your menu-menu, it can be something like this:

    Code JavaScript:
    <script>
    $( "#vooraf" ).click(function() {
    	$( "#voorafSubs" ).slideToggle( "slow" );
    });
     
    $( "#hoofd" ).click(function() {
    	$( "#hoofdSubs" ).slideToggle( "slow" );
    });
     
    $( "#menulijst" ).click(function() {
    	$( "#menulijstSubs" ).slideToggle( "slow" );
    });
    </script>


    Note: I should start with the complete Menu's, and then the "losse Gerechten" (loose Dishes). Are there no "Desserts"? Or a "Drankenkaart" (Drinks menu), to be complete?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Francky I think donboe needs the other menus to close when one opens (as usual with accordions).

    This should work buy is a bit long winded.

    Code:
    $(document).ready(function () {
    		$( ".menu dd" ).hide();
    		$( ".menu a:not(.subitem)" ).click(function(e){
    			var myTarget = $( this ).parent().next(); 
    			var dontSlide = 0;
    			if (myTarget.is(':visible')){dontSlide = 1}
    			$( ".menu dd:visible" ).slideUp( "slow" );
    			if (dontSlide == 0){
    					myTarget.slideDown( "slow" );
    					}
    			return false;
    		});
    	});
    Pullo will be able to tidy it up

  7. #7
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,053
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Francky I think donboe needs the other menus to close when one opens (as usual with accordions).

    This should work buy is a bit long winded.

    Code:
    $(document).ready(function () {
    		$( ".menu dd" ).hide();
    		$( ".menu a:not(.subitem)" ).click(function(e){
    			var myTarget = $( this ).parent().next(); 
    			var dontSlide = 0;
    			if (myTarget.is(':visible')){dontSlide = 1}
    			$( ".menu dd:visible" ).slideUp( "slow" );
    			if (dontSlide == 0){
    					myTarget.slideDown( "slow" );
    					}
    			return false;
    		});
    	});
    Pullo will be able to tidy it up
    Hahahahaha. Thank you Paul. This is nearly what I am looking for! It just slide up again when clicking the parent again and not down again. But I am looking for away that it isn't sliding at all when the parent is clicked again while the sub is open!
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  8. #8
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,858
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Sorry for the delayed response, I was tied up all day.

    Anyways, I think this is what you're after:

    Code JavaScript:
    $(".menu dd").hide();
    $(".menu dt").click(function(){
      var $menuItem = $(this),
          isAccordion = $menuItem.find(">:first-child").hasClass("accordeon"),
          accordionIsVisible = $menuItem.next().is(":visible")
     
      if(!(isAccordion && accordionIsVisible)){
        $(".menu dd:visible").slideUp("slow");
        $menuItem.next().slideDown("slow");
      }
    });

    Demo.

    Hope I understood what you are trying to do correctly.
    Last edited by Pullo; Jan 13, 2014 at 14:52. Reason: Forgot demo url

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by donboe View Post
    . But I am looking for away that it isn't sliding at all when the parent is clicked again while the sub is open!
    Then how will you close it? I usually like to close the accordion once I've used it otherwise it takes up space on the page.

  10. #10
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Then how will you close it?
    By clicking on another item, or never.
    But I agree: it's more userfriendly to close a thing with the same link as with which you opened it.

  11. #11
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,053
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi there,

    Sorry for the delayed response, I was tied up all day.

    Anyways, I think this is what you're after:

    Code JavaScript:
    $(".menu dd").hide();
    $(".menu dt").click(function(){
      var $menuItem = $(this),
          isAccordion = $menuItem.find(">:first-child").hasClass("accordeon"),
          accordionIsVisible = $menuItem.next().is(":visible")
     
      if(!(isAccordion && accordionIsVisible)){
        $(".menu dd:visible").slideUp("slow");
        $menuItem.next().slideDown("slow");
      }
    });

    Demo.

    Hope I understood what you are trying to do correctly.
    Hi Pullo. That is indeed what I was looking for. It all seems so simple when you see it. I was struggling for hours. Thanks to Paul I was a step nearer and now It is like I would like to. So thanks again. Also thanks to Paul and Francky
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  12. #12
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,858
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    No probs

    Bear in mind what Paul said with the default accordion behaviour, however.
    I often do the same thing (i.e. shut it, to stop it taking up space, especially if viewing on a small screen).
    Would it really hurt to offer this to your users?

  13. #13
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,053
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo. I agree with both you and Paul, but this is how the client wants it, and Customer is King
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)


Bookmarks

Posting Permissions

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