SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question JQuery - open closed indicators - Novice to Ninja book

    This question comes from the book: JQuery: Novice to Ninja
    Chapter 5: 03_open_closed_indicators.
    (see zipped my files.)

    This seems simple, but I'm totally lost with my logic.
    (1) I've filtered the first item to be open when the page is loaded.
    (2) When the first panel is open, the cooresponding open / close indicator (which is simply one small image) points the wrong way, or acts improperly.

    My Question
    What code am i missing that would handle the open/closed arrows appropriately if the first item was open on load?


    My js code

    Code:
    $(document).ready(function(){
    				   
    $( '#menu > li > ul' ) 
    	.click(function( e ){
    		e.stopPropagation();
    	})
    .filter(':not(:first)')
    .hide();
    
      $('#menu > li').toggle(function(){
    	  $(this)
          .css('background-position', 'right -20px')
          .find('ul').slideDown();
      }, function(){
      	$( this )
          .css('background-position', 'right top')
          .find('ul').slideUp();
      });
    });
    I've messed around with the code for way too long and can't figure it out. Any help appreciated.

    Also,(not essential) how easy is it to add an expand / collapse all buttons? Though I have some ideas as to how to approach this.
    Attached Files Attached Files

  2. #2
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To get the arrow to appear right you need to set the background-position correctly.

    My first thought was to modify the first statement to hide everything and then show the first time.

    Code JavaScript:
    	$( "#menu > li > ul" ).click(function( e ){
    									e.stopPropagation();
    				}).hide()
    				.first().parent().css('background-position', 'right -20px')
    				.find("ul").slideDown();

    This gives the right initial effect but the title needs to be clicked twice to close it the first time. That is toggle assumes it is closed.

    An alternative approach is to set up a class "openmenu" which has a style

    Code CSS:
    .openmenu {
    	background-position : right -20px;
    }

    This can then act as a toggle indicator.


    Code JavaScript:
    	$( "#menu > li > ul" ).click(function( e ){
    									e.stopPropagation();
    				}).hide()
    				.first().parent().addClass("openmenu")
    				.find("ul").slideDown();
     
    	$("#menu > li").click( function(evt) {
    					if ($(this).hasClass("openmenu")) {
    						$(this).removeClass("openmenu");
    						$(this).find("ul").slideUp();
    					} else {
    						$(this).addClass("openmenu");
    						$(this).find("ul").slideDown();
    					}
    					evt.preventDefault();
    		});

  3. #3
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PhilipToop, I really appreciate the reply! I'll give it a try and let you know.

    Brandon

  4. #4
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Hi again. Very close. I have understood your comments and attempted to apply the solution, which for the most part worked! The double click (via toggle) has been corrected. However, the following code will now not substitute the correct arrow positioning (Stays in down position, as if not recognizing the open menu class, which has been added to my css):

    Code:
    	$( "#menu > li > ul" ).click(function( e ){
    									e.stopPropagation();
    				}).hide()
    				.first().parent().addClass("openmenu")
    				.find("ul").slideDown();
     
    	$("#menu > li").click( function(evt) {
    					if ($(this).hasClass("openmenu")) {
    						$(this).removeClass("openmenu");
    						$(this).find("ul").slideUp();
    					} else {
    						$(this).addClass("openmenu");
    						$(this).find("ul").slideDown();
    					}
    					evt.preventDefault();
    		});
    Very weird.
    I tried using the .css('background-position', 'right -20px') throughout your example code instead using the "openmenu" class.

  5. #5
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you change the style so that it is


    Code:
    <style type="text/css">
    #menu .openmenu {
    	background-position: right -20px;
    }
    it should solve the problem. the style #menu li in menu.css was taking precedence. By adding the #menu before the .openmenu we can change that.

  6. #6
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It worked! Sorry for all the questions but I was determined to (with some assistance) do this properly without a plugin. Thanks again, I am encouraged to keep moving forward!


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
  •