www.webdeveloper.com
Results 1 to 3 of 3

Thread: getting the right code... some help would be useful!

  1. #1
    Join Date
    Feb 2010
    Posts
    14

    getting the right code... some help would be useful!

    Hello fellas,

    I've been working my brain out in the past two days with one jQuery script and no final result. I did managed to chop the 'thousands' of lines and reduced them to a few.
    I had set up a test page which can be found here: http://forweb.ro/easing/

    I'm using jQuery easing but most likely my problem is not related to this. Is more related in getting the proper code.
    What I'm trying to achieve: I will have a left handed menu with several elements, let's say 7. Each of the menu elements will have a short description before taking them to the actual page. Here's where jQuery interfears. When menu is clicked the related description should push the content to the right side and this description should, obviously, slide till it's seen. Done this!

    Here's my problem. Menu's are working perfectly, but only individually and I need them to behave like: when, let's say 'about', is clicked to bring up the about related description, but in this instance ( with the about description opened ) when another element is clicked, call it 'blog', the menu should slide back to the left side entirely ( it should close the about description ) and immediately open the 'blog' description. All this with only one action.

    I'm definitely sure that this is very 'doable', but I'm really, really a beginner in jQuery means. Didn't want to spoil your time so I struggled, but unfortunately no luck.

    Is there out somebody who knows the answer for my problem? Or at least an idea of how to get this thing to work?

    Thanks!

  2. #2
    Join Date
    Jul 2005
    Location
    USA
    Posts
    912
    Try something like this:
    Code:
    $(document).ready(function(){
    	$('a.main').click(
    		function(){
    			var el = $(this);
    			var isHidden = $('.hidden').is('.shown').length == 0 ? false : true;
    			
    			if(isHidden)
    			{
    				$('.hidden').is('.shown').animate({left:0},'slow',function(){
    					$(this).removeClass('hidden');
    					el.next('.hidden').animate({left:600},1500, 'expoinout',function(){
    						$(this).addClass('shown');
    					});
    				});
    			}
    			else
    			{
    				el.next('.hidden').animate({left:600},1500, 'expoinout',function(){
    					$(this).addClass('shown');
    				});
    			}
    		}
    	);
    });
    You need to reduce your function so that it makes sense when you say it:

    When a user clicks a link and a hidden section is shown, hide the hidden section and show the new section, otherwise, just show the new section
    Last edited by Webnerd; 07-03-2010 at 10:57 PM.

  3. #3
    Join Date
    Feb 2010
    Posts
    14
    @Webnerd - thanks heaps for your reply!!!
    I was trying to reduce my function, that's where I got stuck ( beside that it wasn't working properly ) because I said before I'm really new to this type of language.

    Mate, my happiness was spoiled: the function didn't work. I receive this error in FF
    'Error: $(".hidden").is(".shown").animate is not a function
    Source File: http://forweb.ro/easing/
    Line: 19'
    any idea why's doing this?

    Thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles