Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 329
  • Last Modified:

Custom jquery dropdown - one at a time - buggy

At this site: ryanbent.com I am working on a custom dropdown using jQuery where I have only ONE dropdown box show at a time,

e.g. if you click contact, then click about, contact will slide back up, and about will slidedown.

To be more specific try this, clck: contact then about then portfolio then contact, see on on the last click it just hides and has a different behavior. Now try clicking the others again, see what is happening?

The first three clicks seem to work fine, but after that you will see what happens. It just fades away and the pattern is lost.

My jQuery is below, I broke it in to different sections, and they all look good.

Thoughts?

Thanks,

Ryan
$("#contact,#about,#portfolio").click(function(){  
                $('#top').css({'z-index':'50'})
                $("#fuzz").fadeIn();  
        return false;  
        });
        function HideMenu(){
                //$('.open').stop().animate({'top':'-480px'},500,"linear");
                $(this).removeClass("open");
                $("#fuzz").fadeOut();
        }
        function checkMenu(){$('.open').slideUp().removeClass("open")}
        $('#contact').toggle(function(){
                checkMenu();
                $('#contact-pull').show().animate({'top':'-50px'}).addClass("open");
                //$('#contact-pull').slideDown();
        }, function() {
                HideMenu();
                $('#contact-pull').animate({'top':'-180px'})
        });     
        $('#about').toggle(function() {
                checkMenu();         
                $('#about-pull').show().animate({'top':'55px'}).addClass("open");                
                // $('#about-pull').slideDown();
        }, function() {
                HideMenu();
                $('#about-pull').animate({'top':'-465px'})
        });     
        $('#portfolio').toggle(function(){
                checkMenu();
                $('#portfolio-pull').animate({'top':'75px'}).addClass("open");
        }, function() {
                HideMenu();
                $('#portfolio-pull').animate({'top':'-150px'});
        });

Open in new window

0
catonthecouchproductions
Asked:
catonthecouchproductions
  • 8
  • 5
1 Solution
 
HaloWebProjectsCommented:
much better to use click instead of toggle... esp in this case...

have a attribute added to the menu links which will contain the state of visibility of its content section...

then upon click, you can see what value is set and thus determine what to do, to show or hide the section... and after you done it, set the attribute's value to the newly changed state...
0
 
catonthecouchproductionsAuthor Commented:
this is what I have, check out the source code of the site. I can try click, see the method im doing?

Ryan
0
 
HaloWebProjectsCommented:
granted, you are correct... however what I meant was not to use toggle here at all... you can use the links's custom attributes in order to store content's display state... so then you dont need toggle anymore when you can determine the visibility state of the links content upon clicking on the link
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
catonthecouchproductionsAuthor Commented:
Ok, I get that part, that makes sense. But do you see what it does now? If you follow that pattern it works, then after the three I said it gets all messed up.

I will switch toggle to click. I have two functions that check the state.

Ryan
0
 
HaloWebProjectsCommented:
also  here

function HideMenu(){
                //$('.open').stop().animate({'top':'-480px'},500,"linear");
                $(this).removeClass("open");
                $("#fuzz").fadeOut();
        }

$(this).removeClass("open");  -  there is no reference for "this" reference... so the class "open" does not get removed when this function gets called
0
 
catonthecouchproductionsAuthor Commented:
Let me try this and go through and switch to click, thank you!
0
 
catonthecouchproductionsAuthor Commented:
Then change this to the class?

$(this).removeClass("open");
0
 
catonthecouchproductionsAuthor Commented:
What do you think of this?

Instead of toggle, use click which just gets fired once, so on click then animate down. This will remove the close function of the toggle, and instead I can have the function test for it?, so all toggles go to click like you suggested and minimize those functions.

Something like that?
0
 
catonthecouchproductionsAuthor Commented:
Check out the code, along those lines?

On click, run checkmenu (if open classs then close?)
then animate back down

Thanks,

Ryan
function checkMenu(){$('.open').slideUp().removeClass("open")}

	$('#contact').click(function(){
		checkMenu();
		$('#contact-pull').show().animate({'top':'-50px'}).addClass("open");
		//$('#contact-pull').slideDown();
	});     
	$('#about').click(function() {
		checkMenu();         
		$('#about-pull').show().animate({'top':'55px'}).addClass("open");                
		// $('#about-pull').slideDown();
	});     
	$('#portfolio').click(function(){
		checkMenu();
		$('#portfolio-pull').animate({'top':'75px'}).addClass("open");
	});

Open in new window

0
 
catonthecouchproductionsAuthor Commented:
If you check http://ryanbent.com/ now, i think the code is throwing it in a loop with running that function over again.

Ryan
0
 
catonthecouchproductionsAuthor Commented:
What would be the best way to just check for DONt execute on last one clicked.
0
 
HaloWebProjectsCommented:
why cant you use something like this:


$(function(){

	$('a.resume').lightBox();
	$("#fuzz").css("height", $(document).height());
	
	$('#contact, #about, #portfolio').click(function(){
		
		if ($('#'+$(this).attr('id')+'-pull').hasClass('open')) {
			$('#'+$(this).attr('id')+'-pull').removeClass('open');
			$("#fuzz").fadeOut();
		} else {
			$('#top').css({'z-index':'50'});
			$("#fuzz").fadeIn(); 
			$('#'+$(this).attr('id')+'-pull').slideToggle().addClass("open");
		}
		
		return false;
	});     


});

Open in new window

0
 
HaloWebProjectsCommented:
even cleaner
$(function(){

	$('a.resume').lightBox();
	$("#fuzz").css("height", $(document).height());
	
	$('#contact, #about, #portfolio').click(function(){
		
		clicked_link_id = $(this).attr('id');
		
		if ($('#'+clicked_link_id+'-pull').hasClass('open')) {
			$('#'+clicked_link_id+'-pull').removeClass('open');
			$("#fuzz").fadeOut();
		} else {
			$('#top').css({'z-index':'50'});
			$("#fuzz").fadeIn(); 
			$('#'+clicked_link_id+'-pull').slideToggle().addClass("open");
		}
		
		return false;
	});     


});

Open in new window

0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 8
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now