Computer Hope
Internet & Networking => Web design => Topic started by: rockerest 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:
<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 == 0 && $current == 'class="current"')
{
$current = 'class="current left"';
$slide = "onclick=\"go_here('$base$link',0)\"";
}
elseif ($i == 0 && $current == '')
{
$current = 'class="left"';
$slide = "onclick=\"slide_hor('joiner',-65);shake_it('content');go_here('$base$link',500)\"";
}
elseif ($i == 1 && $current == 'class="current"')
{
$current = 'class="current right"';
$slide = "onclick=\"go_here('$base$link',0)\"";
}
elseif ($i == 1 && $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:
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:
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.
-
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?
-
Haha, sure thing.
-rock
-
Thanks! Hopefully help will be along soon enough.
-
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.
-
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.
-
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