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 5 of 5
  1. #1
    New Coder
    Join Date
    Aug 2008
    Location
    Essex, UK
    Posts
    39
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Sliding Menu Modification - new problem

    Evening folks,

    Have just discovered jQuery and have implemented a sliding menu on my new personal site that's currently in development.

    The menu works brilliantly, no issues at all, but I'm wondering how I'd go about making one slight modification.

    Code:
    // jQuery Menu
    $(document).ready(function(){
    
    	// Set default menu states	
    	expanded = $('li.expanded > h1');
    	expanded.css('cursor', 'pointer');
    	jQuery.each(expanded, function(){
    		$(this).text('- ' + $(this).text());
    	});
    	collapsed = $('li.collapsed > h1');
    	collapsed.css('cursor', 'pointer').next('ul').css('display', 'none');
    	jQuery.each(collapsed, function(){
    		$(this).text('+ ' + $(this).text());
    	});
    	
    	// Switch menu states when the menu headers are clicked
    	$('li.toggleable > h1').click(function(){
    		menu_header = $(this);
    		menu_header.next('ul').slideToggle('normal');
    		if (menu_header.text().substring(0, 2) == '+ ')
    			menu_header.text('- ' + menu_header.text().substring(2));
    		else if (menu_header.text().substring(0, 2) == '- ')
    			menu_header.text('+ ' + menu_header.text().substring(2));
    	});
    
    });
    What I want to modify is the + it adds to collapsed parts of the menu and the - it adds to the expanded parts of the menu. Instead of the + and - I'd like to have an image instead.

    Any advice how I go about changing the code to do this?

    As always, thanks in advance :-)
    Last edited by urbanbutterfly; 06-10-2009 at 05:33 PM.

  • #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
    Simply insert your <img> tags in place of the "-" and "+".

  • #3
    New Coder
    Join Date
    Aug 2008
    Location
    Essex, UK
    Posts
    39
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks for the reply, this is what I thought I could do, but it actually prints the <img> tag as text instead of interpreting the HTML.

    Am I missing something blindingly obvious? I know the answer's probably yes, but be gentle anyway

  • #4
    New Coder
    Join Date
    Aug 2008
    Location
    Essex, UK
    Posts
    39
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Have managed to resolve this now.

    Have cottoned on that $(this).text('- ' etc should be $(this).html('- ' and it didn't help I was referencing my image by the wrong filename

    D'oh.

  • #5
    New Coder
    Join Date
    Aug 2008
    Location
    Essex, UK
    Posts
    39
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Further to this, I've noticed since I've made these changes, the images no longer swap when the menu headers are toggled. Can anyone shed any light as to where I've made a mistake in my code?

    Thanks in advance.

    Code:
    // jQuery Menu
    $(document).ready(function(){
    
    	// Set default menu states	
    	expanded = $('li.expanded > h1');
    	expanded.css('cursor', 'pointer');
    	jQuery.each(expanded, function(){
    		$(this).html('<img src="images/up.gif" />' + $(this).html());
    	});
    	collapsed = $('li.collapsed > h1');
    	collapsed.css('cursor', 'pointer').next('ul').css('display', 'none');
    	jQuery.each(collapsed, function(){
    		$(this).html('<img src="images/down.gif" />' + $(this).html());
    	});
    	
    	// Switch menu states when the menu headers are clicked
    	$('li.toggleable > h1').click(function(){
    		menu_header = $(this);
    		menu_header.next('ul').slideToggle('normal');
    		if (menu_header.html().substring(0, 2) == '<img src="images/down.gif" />')
    			menu_header.html('<img src="images/up.gif" />' + menu_header.html().substring(2));
    		else if (menu_header.html().substring(0, 2) == '<img src="images/up.gif" />')
    			menu_header.html('<img src="images/down.gif" />' + menu_header.html().substring(2));
    	});
    
    });


  •  

    Posting Permissions

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