[xfodder]

i posted this in the javascript forum without noticing there was a jquery sub-forum. im reposting it, rather that moving because when i posted before it messed up my user name.

hey people,

im developing a personal site at the moment, using jquery (1.4.1) to create a tabbed accordion menu system ... rather than me trying to explain what that is, take a look at it over here: http://www.digitalsicness.net/beta2 i am rather new to jquery (and javascript) ... i can get by, but i still have a lot to learn ...

now the problem i am having is if you click on the menu items fairly quickly (pressing the menu items as fast as you can) two of the sections load stacked on top of each other. i have researched around and have found that using callbacks might possibly fix my problem ... but i cant seem to figure our how to implement a callback with my system.

i know the likelihood of someone actually pressing my menu that fast is slim ... but it is really bothering me can anyone offer a suggestion, or point me in the right direction?

also if anyone has suggestions for anything else you may see wrong with my code go right ahead ... i have attached my js file to make it easier to view my code.

 $(document).ready(function(){
        $('#about').hide();
        $('#contact').hide();
        $('#work').hide();
        var $activeMenu = null;
        $activeMenu = ('#about');

        $('#toggle_about').click(function () {
                if ($activeMenu == '#about') {
                $('#about').slideToggle(600); }
                else {
                $($activeMenu).slideUp(600, function() {$('#about').slideDown(600);}); }
                $activeMenu = ("#about");
                $('#contactBox a').removeClass('menuSelected');
                $('#workBox a').removeClass('menuSelected');
                $('#aboutBox a').toggleClass('menuSelected');
                return false; 
    });
        
        $('#toggle_contact').click(function () { 
                if ($activeMenu == '#contact') {
                $('#contact').slideToggle(600); }
                else {
                $($activeMenu).slideUp(600, function() {$('#contact').slideDown(600);}); }
                $activeMenu = ("#contact");
                $('#aboutBox a').removeClass('menuSelected');
                $('#workBox a').removeClass('menuSelected');
                $('#contactBox a').toggleClass('menuSelected');
                return false; 
        });
        
        $('#toggle_work').click(function () {
                if ($activeMenu == '#work') {
                $('#work').slideToggle(600); }
                else {
                $($activeMenu).slideUp(600, function() {$('#work').slideDown(600);}); }
                $activeMenu = ("#work");
                $('#aboutBox a').removeClass('menuSelected');
                $('#contactBox a').removeClass('menuSelected');
                $('#workBox a').toggleClass('menuSelected');
                return false; 
        });     
        
 });

[Wimpy]

You might have to use the .stop()-effect-utility-function to stop the activemenu from continuing its sliding before you slide it up, if you don't the events will be executed "concurrently" and might lead to unexpected results, try:

 $(document).ready(function(){
        $('#about').hide();
        $('#contact').hide();
        $('#work').hide();
        var $activeMenu = null;
        $activeMenu = ('#about');

        $('#toggle_about').click(function () {
                if ($activeMenu == '#about') {
                $('#about').stop().slideToggle(600); }
                else {
                $($activeMenu).stop().slideUp(600, function() {$('#about').stop().slideDown(600);}); }
                $activeMenu = ("#about");
                $('#contactBox a').removeClass('menuSelected');
                $('#workBox a').removeClass('menuSelected');
                $('#aboutBox a').toggleClass('menuSelected');
                return false; 
    });
        
        $('#toggle_contact').click(function () { 
                if ($activeMenu == '#contact') {
                $('#contact').stop().slideToggle(600); }
                else {
                $($activeMenu).stop().slideUp(600, function() {$('#contact').stop().slideDown(600);}); }
                $activeMenu = ("#contact");
                $('#aboutBox a').removeClass('menuSelected');
                $('#workBox a').removeClass('menuSelected');
                $('#contactBox a').toggleClass('menuSelected');
                return false; 
        });
        
        $('#toggle_work').click(function () {
                if ($activeMenu == '#work') {
                $('#work').stop().slideToggle(600); }
                else {
                $($activeMenu).stop().slideUp(600, function() {$('#work').stop().slideDown(600);}); }
                $activeMenu = ("#work");
                $('#aboutBox a').removeClass('menuSelected');
                $('#contactBox a').removeClass('menuSelected');
                $('#workBox a').toggleClass('menuSelected');
                return false; 
        });     
        
 });

I haven't tested this, but I hope it helps!

[xfodder]

wow. i have been really busy the past months so i haven't had an opportunity to check d.i.c

i tried your suggested code wimpy, and it improves the sliding but sometimes the slider gets stuck in mid slide ... hard to explain, hopefully you know what i mean.

again, thank you very much for the suggestion

[xfodder]

i did a little more testing and i have found that once the slider has been stopped, its as if jquery remembers the position at which it was stopped ... so the next time you call that slider it will only slide to that point.

Is there a way to get jquery to restart after the stop function has been called?

[oomlaut]

Looking at http://api.jquery.com/stop/

would setting the second argument of .stop() to true solve this by essentially force-finishing the animation?

[xfodder]

ah yes, getting closer. thank you very much oomlaut! it skips to the end of the animation before stopping now thank you i noticed that i still get my original problem occasionally but ill see if putting in a few more stop() arguments fix that.

again thank you both