Javascript motion tween

[Navarone]

has anyone used the javascript motion tween for web site found here? http://jstween.blogspot.com/

I am tyring to use them for a web site that the client doesn't want flash but want's flash features. I have set up a development site and could use some input.

Rollover the first three menu options to see what I have done. The first thing I need to get working is control over the rollovers. If you rollover methodically the images appear and easeIn, when you rollout they should easeOut. Basically, this works but if you start mouse over the menu options more quickly the events don't fire correctly. I admit I am not sure I am doing anything correctly.

http://dev-incentra.virtualhorizons.com/home.aspx#

Thanks for any input or help.

[jwilliam]

I'm not intimately familiar with the library you're using, but here's an educated guess:

You're creating a new Tween object when the 'mosueover' event triggers and when the 'mouseout' event triggers. So, if you quickly mouse over a link and then mouse out before the animation is done, you effectively have two Tween objects pulling the menu in two different directions.

Try destroying any existing Tween objects before you make a new one.

[evildrummer]

I'm not used to the class your using either but heres my advice (I've done similar stuff before)

1) Stop one tween when another is activated.
2) Don't have static positions, in your tweens you've set by hand they're starting positions and ending positions, this should be done at runtime dynamically so that when you mouseoff halfway through a tween it starts from there instead of jumping about.
3) Remove all the JS from your HTML and stick it elsewhere
4) CSS set overflow-x hidden so that you don't get the annoying bottom (left/right) scroll bar moving about growing and shrinking.
5) Have it activated on click, I damned hate HUGE flashing FLYING things when I flick my mouse over a screen

[Navarone]

Thanks jwilliam and evildrummer, I appreciate your ideas. I know, the javascript is getting a little crowded in that anchor tag. I've not used the overflow-x would I set that for the page as a whole or for my particular div element? I would like to see how to do this dynamically.

[jwilliam]

I think you would do something like this:



body {
overflow-x: hidden;
}


I'm no CSS guru, so maybe evildrummer can confirm this... You can clean up your javascript a bit by doing this:




window.onload = function()
{

var link = document.getElementById('first_link');
addEvent(link, 'mouseover', function() { whatever... }, true);
addEvent(link, 'mouseout', function() { whatever... }, true);
... do this for all your link ...

}

function addEvent(o, type, func, prop)
{
if(!o) {
return;
}
if (!document.addEventListener && document.attachEvent) {
o.attachEvent("on" + type, func);
} else {
o.addEventListener(type, func, prop);
}
}



In the "whatever" part above, put the code that makes your menus move.

[evildrummer]

To hide horizontal scroll bars you first need to set all to scroll, otherwise both horizontal and vertical will be hidden.



body {
overflow: scroll;
overflow-x: hidden;
}


If you want to set that all in javascript dynamically then you end up with this:



body = document.getElementsByTagName('body');
body = body[0];
body.style.overflow = 'scroll';
body.style.overflowX = 'hidden';

[Navarone]

jwilliams, just want to make sure I follow you correctly; the first link is "home_btn"

Does this look correct. Now what do I do where I had my anchor tag? Sorry if that seems dumb, I'm confused.



window.onload = function()
{
var link = document.getElementById('home_btn');
addEvent(link, 'mouseover', function() {t1 = new Tween(document.getElementById('home').style,'left' ,Tween.elasticEaseOut,995,363,4,'px'); t1.start();javascript:Show('home'); }, true);
addEvent(link, 'mouseout', function() {t1 = new Tween(document.getElementById('home').style,'left' ,Tween.elasticEaseOut,363,995,4,'px');t1.start(); }, true);
}

[jwilliam]

Hey Navarone,

That looks pretty good to me. Instead of this:

javascript:Show('home');

just do this:

Show('home');

I probably would have put the event listeners on the anchors... but the events should bubble up to the divs, so it should work fine. Is it not working? If not, is it throwing any errors, and what are they?

Your test site is a little messed up so I can't fiddle with it. Let me know what's up...

[Navarone]

Whats wrong with the site? Is it not coming up?

I removed all the sliding parts except for the home button until I get the tweening set properly.
The only thing I notice is when I first rollover the home button, nothing happens. If I rollout then rollover it fires.

[jwilliam]

I'm using FF2 right now and all I can see is your background and a tiny sliver of the content at the very top.

[Navarone]

I had to remove the following code from the body in the css. Try checking FF again it should be working. I have FF3 and it works ok.


overflow: scroll;
overflow-x: hidden;

[jwilliam]

Are you thinking about requiring the user to click the menu items? Honestly, it would be easier to implement and it would probably operate more smoothly.

[Navarone]

This is how it is supposed to work, when you rollover the menu item, the image with the bracket shows up only a little bit like a teaser that something else is there to be seen, if you mouse out, the image and bracket slide back out off the screen. When you click the menu item, the bracket and image slides out completely and come to rest. If then slide over another menu item, the same bounce in-bounce out occurs for that menu items bracket and image, if you click the other menu item then the first bracket and image slide off the screen and the new bracket and image slide on that you just clicked. Hope that makes sense. Thats how I would make it work in flash. But I can't use flash.