Welcome guest. Before posting on our computer help forum, you must register. Click here it's easy and free.

Author Topic: Javascript: wait for action to finish before executing another  (Read 33095 times)

0 Members and 1 Guest are viewing this topic.

rockerest

    Topic Starter


    Hopeful
    • Yes
  • Experience: Experienced
  • OS: Windows 7
Javascript: wait for action to finish before executing another
« on: October 15, 2009, 10:59:14 AM »
I'll try to describe my problem with words first and then throw some code at you.

I am using Scriptaculous on my website to slide a small div left and right when the user clicks a link.
The code executes properly and I'm mostly very happy with it.
However, the function called to slide the div is interrupted by the link they are clicking loading.  So it starts out sliding, but as soon as the link loads, it pops over to the final destination.  It looks bad and I want the full slide to happen before the page even knows it needs to load another page.

As I said, I'm using Scriptaculous.

Here's the code to generate my menubar:

Code: [Select]
<div id="menucontainer">
<div id="menunav" class="clear">
<ul>
<?php
            
$base "http://www.thomasrandolph.info/";
$num count($tmpl->labels);
for ($i 0$i $num$i++)
{
$label $tmpl->labels[$i];
$link $tmpl->links[$i];
                    
if ($i == $tmpl->current)
{
$current 'class="current"';
}
else
{
$current '';
}
                    
                    if (
$i == && $current == 'class="current"')
                    {
                    
$current 'class="current left"';
                        
$slide "onclick=\"go_here('$base$link',0)\"";
                    }
                    elseif (
$i == && $current == '')
                    {
                    
$current 'class="left"';
                        
$slide "onclick=\"slide_hor('joiner',-65);shake_it('content');go_here('$base$link',500)\"";
                    }
                    elseif (
$i == && $current == 'class="current"')
                    {
                    
$current 'class="current right"';
                        
$slide "onclick=\"go_here('$base$link',0)\"";
                    }
                    elseif (
$i == && $current == '')
                    {
                    
$current 'class="right"';
                        
$slide "onclick=\"slide_hor('joiner',65);shake_it('content');go_here('$base$link',500)\"";
                    }
print "\n<li>\n <a $current $slide>\n <span>$label</span>\n </a>\n</li>";
}
?>

</ul>
</div>
</div>

As you can see, I'm using a javascript function to go to the link instead of an href.  The only reason I'm doing this currently is because I thought it would be easier to "pause" the browser before following the link if it were javascript.

Here's the javascript code that the menubar loads:

Code: [Select]
function slide_hor(id, x)
{
new Effect.Move(id,
{ 'x': x,
y: 0,
mode: 'relative',
transition: Effect.Transitions.linear
}
);
}

function shake_it(ident)
{
new Effect.Shake(ident, {distance: 1, duration: .4});
}

and here's two small global functions that a few things use:

Code: [Select]
function go_here(loc, delay_ms)
{
pause_exec(delay_ms)
window.location=loc;
}

function pause_exec(ms)
{
var date = new Date();
var curDate = null;

do { curDate = new Date(); }
while(curDate-date < ms);
}

Finally, here's the page in the wild:

http://www.thomasrandolph.info

So in summary:
I need the sliding effect from Scriptaculous to FINISH it's motion before the link loads so that the animation is not interrupted.

Thanks
-rock

p.s.
The delay function just pauses the whole browser, including the sliding effect so it just causes a visible jump, too.
In general, the PEBKAC.  Whether it's now or was three weeks ago, the PEBKAC.
Unsafe browsing and general computer / internet illiteracy IS the users problem.  Don't have sex if you don't know how to use a condom.
Also, there are 10 types of people in the world, those who understand binary, and those who don't.

kpac

  • Web moderator
  • Moderator


  • Hacker

  • kpac®
  • Thanked: 184
    • Yes
    • Yes
    • Yes
  • Certifications: List
  • Computer: Specs
  • Experience: Expert
  • OS: Windows 7
Re: Javascript: wait for action to finish before executing another
« Reply #1 on: October 16, 2009, 12:55:38 PM »
I'm sorry I can't help, but I want to compliment you on writing and describing the problem in excellent detail, using a descriptive topic title, and including some source code to work with.

Because this post was so well done, do I have your permission to link to this in the "Please read first" post as an example?

rockerest

    Topic Starter


    Hopeful
    • Yes
  • Experience: Experienced
  • OS: Windows 7
Re: Javascript: wait for action to finish before executing another
« Reply #2 on: October 16, 2009, 02:40:05 PM »
Haha, sure thing.

-rock
In general, the PEBKAC.  Whether it's now or was three weeks ago, the PEBKAC.
Unsafe browsing and general computer / internet illiteracy IS the users problem.  Don't have sex if you don't know how to use a condom.
Also, there are 10 types of people in the world, those who understand binary, and those who don't.

kpac

  • Web moderator
  • Moderator


  • Hacker

  • kpac®
  • Thanked: 184
    • Yes
    • Yes
    • Yes
  • Certifications: List
  • Computer: Specs
  • Experience: Expert
  • OS: Windows 7
Re: Javascript: wait for action to finish before executing another
« Reply #3 on: October 16, 2009, 02:45:30 PM »
Thanks! Hopefully help will be along soon enough.

LyndaMarroquin

  • Guest
Re: Javascript: wait for action to finish before executing another
« Reply #4 on: February 26, 2010, 11:11:17 AM »
Are you using the script as it is? I'm trying to do this on my site with the same script and it just doesn't work. Maybe it needs editing or updating.

zxcvbnm9

  • Guest
Re: Javascript: wait for action to finish before executing another
« Reply #5 on: February 26, 2010, 09:08:22 PM »
I have seen a good idea here http://dev.opera.com/articles/view/timing-and-synchronization-in-javascript/
I think it may be helpful for you.

rockerest

    Topic Starter


    Hopeful
    • Yes
  • Experience: Experienced
  • OS: Windows 7
Re: Javascript: wait for action to finish before executing another
« Reply #6 on: March 03, 2010, 01:12:19 PM »
Are you using the script as it is? I'm trying to do this on my site with the same script and it just doesn't work. Maybe it needs editing or updating.

Make sure you've got script.aculo.us set up correctly.
Better yet, start using jQuery!  I moved over and it's been GREAT! :)

I have seen a good idea here http://dev.opera.com/articles/view/timing-and-synchronization-in-javascript/
I think it may be helpful for you.

I'll have to read that later.  Very long!  Thanks though.

-rock
In general, the PEBKAC.  Whether it's now or was three weeks ago, the PEBKAC.
Unsafe browsing and general computer / internet illiteracy IS the users problem.  Don't have sex if you don't know how to use a condom.
Also, there are 10 types of people in the world, those who understand binary, and those who don't.