JavaScript - Animated Scrolling Pages With Effects?

I have an animated gif of a door opening on my site. The animated gif is triggered onclick. (It's triggered only when the user clicks on a certain part of the door, hence the image map). This is the current code:

<img src="img/door_admin_static.gif" width="229" height=401"
alt="admindoor" usemap="#admin" name="animate">
<map name="admin">
<area shape ="rect" coords ="65,165,236,501"
onClick="document.images.animate.src='img/door_admin.gif';
return true"
href ="admin.html" rel="nofollow" target="_self" alt="admin" />
</map>


What is supposed to happen is that after the user clicks, the animation of the door opening runs, and then the user is taken to the page linked to that door (in this case, admin.html). As it is now, the user is taken immediately to the admin.html page, so they never get to see the animation run. I need some kind of code that makes it so that the user is taken to the admin.html only after the animation is complete.

Any help would be greatly appreciated!!

Hello, i wanna make animated news bar like the one in the top of site alibaba.com, so how can i do that, anybody have any kind of tutorial for any thing like this please ?

thanks

Hey guys, I'd like to think this is fairly simple but unfortunately my knowldege of jquery is limited to using prebuilt scripts and changing a few variables to get what i need. I created a drop down menu with a slide down/up animation for submenus, which worked out just as I wanted. I ran into troubles though when trying to add a nested menu to the drop down, but with a slide animation going from left to right. I'm sure my explanation isn't very clear, so please take a look
http://www.palousehillscomputing.com...rop/index.html
The nested submenu I am speaking of should only open when hovering occurs on the 'Item 01' link, but as you can see it also opens when hovering over the buyers link. Secondly, my attempt to slide from left to right on this ul is not working. It seems to be sliding down even though this was not defined in the code. I've tried playing around with it for a while now and can't seem to figure this out so I'd appreciate if someone pointed me in the right direction. Thanks

I am trying to do what I thought was a very simple animated menu. I have a heading at the top of a website - which is just a png. I have a menu that is simply a div with a few options on it arranged horizontally. There's no submenus, it's just a very simple horizontal list.

All I am trying to do is to hide the menu and then when you mouseover the heading, it will drop down. When you mouseout, it will move back up. It would be great if it faded in as it moved down too.

Am sure it's probably very simple, but I've looked all over Google and I can't find a simple solution that doesn't do X, Y and Z that I don't want or need in this project. I just need a very simple script that I stand half a hope of understanding!

Hi, I searched the web for a button that can be animated, as well as dynamic. but I couldn't find one, so I decided to try my hand at creating one.

My method is similar to a post made by Bram2: http://codingforums.com/showthread.php?t=153326, however, I have found my code to be unreliable and it doesn't apply only to the area where the table is, instead of spreading across the screen.

The reason for trying to create a button this way is because I'm lazy, I don't want to create a new button in a graphics editor, spending hours trying to make it uniform with the rest of the buttons on the page, every time I want a new button. Doing it this way will also enable to have buttons with mulitple lines of text.

I am fairly new to javascript, so I am wondering if anyone can give me a hand making it more reliable or pointing me to a script that has already been created.

I put the button Here instead of filling the post with code.

Please look at it before telling me it can be done with the <button> tag, because I tried before posting here.

thanks,
grayatrox

Edit:I have managed to get the code to do what I wanted it to do, and more efficently too. Old code is commented out in the orginal webpage.

This is a working example on how to impliment the buttons.

javascript:

Code:

/*
Notes: 
	- Each button MUST have a unique name.
	- You may need to create a secondary function that the button can activate like I did with the go(url) function below.
	- Email me (grayatrox) at 238atrox@gmail.com for bugs, or to suggest improvements.
	- Yes I know tables within tables is bad, if you read through my code carefully you will see where I am talking about.
*/
function loadButton() { //preload the buttons. 
	image1 = new Image();
	image1.src = "images/button_up_L.png"; //button up left
	image2 = new Image();
	image2.src = "images/button_up_C.png"; //button up centre
	image3 = new Image();
	image3.src = "images/button_up_R.png"; //button up right
	image4 = new Image();
	image4.src = "images/button_down_L.png"; //button down left
	image5 = new Image();
	image5.src = "images/button_down_C.png"; //button down centre
	image6 = new Image();
	image6.src = "images/button_down_R.png"; //button down right
}

		
function createButton(buttonName, buttonText, buttonAction, id) { // create the code for a button
	output= "<table border='0' cellpadding='0' cellspacing='0' id="+buttonName+">";
	output=output+"<tr name="+buttonName+" onclick=\""+buttonAction+"\" onmouseover=\"changeButton('down', '"+buttonName+"')\" onmouseout=\"changeButton('up', '"+buttonName+"')\">";
	output=output+"<td align='right'><img id='"+buttonName+"_leftImage' src='images/button_up_L.png'/></td>";
	output=output+"<td id='"+buttonName+"_middleImage' align='middle' background='images/button_up_C.png'/>"+buttonText+"</td>";
	output=output+"<td align='left'><img id='"+buttonName+"_rightImage' src='images/button_up_R.png'/></td>";
	output=output+"</tr>";
	output=output+"</table>";
	return output;
}
		
function writeButton(buttonName, buttonText, buttonAction) { // write button immediatly below where function has been called
	document.write(createButton(buttonName, buttonText, buttonAction));
}	

function writeButtonInId(buttonName, buttonText, buttonAction, id) { // write the button in an id
	document.getElementById(id).innerHTML=createButton(buttonName, buttonText, buttonAction);
}
	
function changeButton(action, name) { // button animation
	if (action== "up") {
		document.getElementById(name+'_leftImage').src="images/button_up_L.png";
		document.getElementById(name+'_middleImage').style.backgroundImage ="url(images/button_up_C.png)";
		document.getElementById(name+'_rightImage').src="images/button_up_R.png";
	} else if (action== "down") {
		document.getElementById(name+'_leftImage').src="images/button_down_L.png";
		document.getElementById(name+'_middleImage').style.backgroundImage ="url(images/button_down_C.png)";
		document.getElementById(name+'_rightImage').src="images/button_down_R.png";
	}
}

function go(url) { // written becuase there were too many ' and ". You can do this for any javascript function (I hope)
	document.location=url;
}

Does anyone have an explanation for why animated .gifs might not animate in FF, Chrome, etc.? Only IE does it right for me.

I suspect it might have something to do with tables squeezing the graphic (if the .gif is inside a table with a 100% width cell... but even giving the cell with the .gif a width doesn't seem to help.)

Is it true?

I realise tables are not best used for this purpose, but did this also happen in the good old tables days?

Hi there.

I'm relatively new to coding in javascript, so I'm hoping that some kind souls could help me out! I'm trying to make an animated image height changer (example: changing an image's height from 50px to 500px). I'm working on a new web site using HTML5 and want to add some Flash-like animation to my page using javascript and <canvas>.

The animation would only need to "play" one time once the web page has loaded. No looping is required and no user interaction (ie mouseovers, etc) is needed. Any help would be greatly appreciated. If anyone knows of similar examples online please send me a link. If you're interested in helping, please let me know if more information is needed.

Thanks.

plz i want to know how to make the effects that exists on this link in the upper part :

http://www.masrawy.com/new/


1-) changing color when pressing on the color

2-) changing font (+) to increase it
(-) to decrease it
(N) to set it to the normal style

3-) decrease and increase the width of the page
(from
كبر حجم الصفحة
or
صغر حجم الصفحة
)


can anyone help me in doing this task?????

I'm using some free javascript for my website and I'm trying to edit it slightly to behave the way I want on my site. Right now it works fine apart from one thing... It remembers the last active div that was open... then when you visit the site again or refresh the page... that div stays open and doesn't close when toggling the other animated divs like it is supposed to.

How would I remove the last active div function or get it to close again when toggling other animated divs..

Thanks so much if you can help

Here is the site: www.gjoob.terryarchonship.com

here is where the last active div java is

Code:

showhide:function(divid, action){
	var $divref=this.divholders[divid].$divref //reference collapsible DIV
	if (this.divholders[divid] && $divref.length==1){ //if DIV exists
		var targetgroup=this.divgroups[$divref.attr('groupname')] //find out which group DIV belongs to (if any)
		if ($divref.attr('groupname') && targetgroup.count>1 && (action=="show" || action=="toggle" && $divref.css('display')=='none')){ //If current DIV belongs to a group
			if (targetgroup.lastactivedivid && targetgroup.lastactivedivid!=divid) //if last active DIV is set
				this.slideengine(targetgroup.lastactivedivid, 'hide') //hide last active DIV within group first
				this.slideengine(divid, 'show')
			targetgroup.lastactivedivid=divid //remember last active DIV
				
		}
		else{
			this.slideengine(divid, action)
		}
	}
}

here is the entire javascript:

Code:

var animatedcollapse={
divholders: {}, //structu  {div.id, div.attrs, div.$divref, div.$togglerimage}
divgroups: {}, //structu  {groupname.count, groupname.lastactivedivid}
lastactiveingroup: {}, //structu  {lastactivediv.id}
preloadimages: [],

show:function(divids){ //public method
	if (typeof divids=="object"){
		for (var i=0; i<divids.length; i++)
			this.showhide(divids[i], "show")
	}
	else
		this.showhide(divids, "show")
},

hide:function(divids){ //public method
	if (typeof divids=="object"){
		for (var i=0; i<divids.length; i++)
			this.showhide(divids[i], "hide")
	}
	else
		this.showhide(divids, "hide")
},

toggle:function(divid){ //public method
	if (typeof divid=="object")
		divid=divid[0]
	this.showhide(divid, "toggle")
},

addDiv:function(divid, attrstring){ //public function
	this.divholders[divid]=({id: divid, $divref: null, attrs: attrstring})
	this.divholders[divid].getAttr=function(name){ //assign getAttr() function to each divholder object
		var attr=new RegExp(name+"=([^,]+)", "i") //get name/value config pair (ie: width=400px,)
		return (attr.test(this.attrs) && parseInt(RegExp.$1)!=0)? RegExp.$1 : null //return value portion (string), or 0 (false) if none found
	}
	this.currentid=divid //keep track of current div object being manipulated (in the event of chaining)
	return this
},

showhide:function(divid, action){
	var $divref=this.divholders[divid].$divref //reference collapsible DIV
	if (this.divholders[divid] && $divref.length==1){ //if DIV exists
		var targetgroup=this.divgroups[$divref.attr('groupname')] //find out which group DIV belongs to (if any)
		if ($divref.attr('groupname') && targetgroup.count>1 && (action=="show" || action=="toggle" && $divref.css('display')=='none')){ //If current DIV belongs to a group
			if (targetgroup.lastactivedivid && targetgroup.lastactivedivid!=divid) //if last active DIV is set
				this.slideengine(targetgroup.lastactivedivid, 'hide') //hide last active DIV within group first
				this.slideengine(divid, 'show')
			targetgroup.lastactivedivid=divid //remember last active DIV
				
		}
		else{
			this.slideengine(divid, action)
		}
	}
},

slideengine:function(divid, action){
	var $divref=this.divholders[divid].$divref
	var $togglerimage=this.divholders[divid].$togglerimage
	if (this.divholders[divid] && $divref.length==1){ //if this DIV exists
		var animateSetting={height: action}
		if ($divref.attr('fade'))
			animateSetting.opacity=action
		$divref.animate(animateSetting, $divref.attr('speed')? parseInt($divref.attr('speed')) : 500, function(){
			if ($togglerimage){
				$togglerimage.attr('src', ($divref.css('display')=="none")? $togglerimage.data('srcs').closed : $togglerimage.data('srcs').open)
			}
			if (animatedcollapse.ontoggle){
				try{
					animatedcollapse.ontoggle(jQuery, $divref.get(0), $divref.css('display'))
				}
				catch(e){
					alert("An error exists inside your \"ontoggle\" function:\n\n"+e+"\n\nAborting execution of function.")
				}
			}
		})
		return false
	}
},

generatemap:function(){
	var map={}
	for (var i=0; i<arguments.length; i++){
		if (arguments[i][1]!=null){ //do not generate name/value pair if value is null
			map[arguments[i][0]]=arguments[i][1]
		}
	}
	return map
},

init:function(){
	var ac=this
	jQuery(document).ready(function($){
		animatedcollapse.ontoggle=animatedcollapse.ontoggle || null
		var urlparamopenids=animatedcollapse.urlparamselect() //Get div ids that should be expanded based on the url (['div1','div2',etc])
		var persistopenids=ac.getCookie('acopendivids') //Get list of div ids that should be expanded due to persistence ('div1,div2,etc')
		var groupswithpersist=ac.getCookie('acgroupswithpersist') //Get list of group names that have 1 or more divs with "persist" attribute defined
		if (persistopenids!=null) //if cookie isn't null (is null if first time page loads, and cookie hasnt been set yet)
			persistopenids=(persistopenids=='nada')? [] : persistopenids.split(',') //if no divs are persisted, set to empty array, else, array of div ids
		groupswithpersist=(groupswithpersist==null || groupswithpersist=='nada')? [] : groupswithpersist.split(',') //Get list of groups with divs that are persisted
		jQuery.each(ac.divholders, function(){ //loop through each collapsible DIV object
			this.$divref=$('#'+this.id)
			if ((this.getAttr('persist') || jQuery.inArray(this.getAttr('group'), groupswithpersist)!=-1) && persistopenids!=null){ //if this div carries a user "persist" setting, or belong to a group with at least one div that does
				var cssdisplay=(jQuery.inArray(this.id, persistopenids)!=-1)? 'block' : 'none'
			}
			else{
				var cssdisplay=this.getAttr('hide')? 'none' : null
			}
			if (urlparamopenids[0]=="all" || jQuery.inArray(this.id, urlparamopenids)!=-1){ //if url parameter string contains the single array element "all", or this div's ID
				cssdisplay='block' //set div to "block", overriding any other setting
			}
			else if (urlparamopenids[0]=="none"){
				cssdisplay='none' //set div to "none", overriding any other setting
			}
			this.$divref.css(ac.generatemap(['height', this.getAttr('height')], ['display', cssdisplay]))
			this.$divref.attr(ac.generatemap(['groupname', this.getAttr('group')], ['fade', this.getAttr('fade')], ['speed', this.getAttr('speed')]))
			if (this.getAttr('group')){ //if this DIV has the "group" attr defined
				var targetgroup=ac.divgroups[this.getAttr('group')] || (ac.divgroups[this.getAttr('group')]={}) //Get settings for this group, or if it no settings exist yet, create blank object to store them in
				targetgroup.count=(targetgroup.count||0)+1 //count # of DIVs within this group
				if (jQuery.inArray(this.id, urlparamopenids)!=-1){ //if url parameter string contains this div's ID
					targetgroup.lastactivedivid=this.id //remember this DIV as the last "active" DIV (this DIV will be expanded). Overrides other settings
					targetgroup.overridepersist=1 //Indicate to override persisted div that would have been expanded
				}
		
			}
		}) //end divholders.each
		jQuery.each(ac.divgroups, function(){ //loop through each group
			if (this.lastactivedivid && urlparamopenids[0]!="none") //show last "active" DIV within each group (one that should be expanded), unless url param="none"
				ac.divholders[this.lastactivedivid].$divref.show()
		})
		if (animatedcollapse.ontoggle){
			jQuery.each(ac.divholders, function(){ //loop through each collapsible DIV object and fire ontoggle event
				animatedcollapse.ontoggle(jQuery, this.$divref.get(0), this.$divref.css('display'))
			})
		}
 		//Parse page for links containing rel attribute
		var $allcontrols=$('a[rel]').filter('[rel^="collapse["], [rel^="expand["], [rel^="toggle["]') //get all elements on page with rel="collapse[]", "expand[]" and "toggle[]"
		$allcontrols.each(function(){ //loop though each control link
			this._divids=this.getAttribute('rel').replace(/(^\w+)|(\s+)/g, "").replace(/[\[\]']/g, "") //cache value 'div1,div2,etc' within identifier[div1,div2,etc]
			if (this.getElementsByTagName('img').length==1 && ac.divholders[this._divids]){ //if control is an image link that toggles a single DIV (must be one to one to update status image)
				animatedcollapse.preloadimage(this.getAttribute('data-openimage'), this.getAttribute('data-closedimage')) //preload control images (if defined)
				$togglerimage=$(this).find('img').eq(0).data('srcs', {open:this.getAttribute('data-openimage'), closed:this.getAttribute('data-closedimage')}) //remember open and closed images' paths
				ac.divholders[this._divids].$togglerimage=$(this).find('img').eq(0) //save reference to toggler image (to be updated inside slideengine()
				ac.divholders[this._divids].$togglerimage.attr('src', (ac.divholders[this._divids].$divref.css('display')=="none")? $togglerimage.data('srcs').closed : $togglerimage.data('srcs').open)
			}
			$(this).click(function(){ //assign click behavior to each control link
				var relattr=this.getAttribute('rel')
				var divids=(this._divids=="")? [] : this._divids.split(',') //convert 'div1,div2,etc' to array 
				if (divids.length>0){
					animatedcollapse[/expand/i.test(relattr)? 'show' : /collapse/i.test(relattr)? 'hide' : 'toggle'](divids) //call corresponding public function
					return false
				}
					
			}) //end control.click
		})// end control.each

		$(window).bind('unload', function(){
			ac.uninit()
		})
	}) //end doc.ready()
},

uninit:function(){
	var opendivids='', groupswithpersist=''
	jQuery.each(this.divholders, function(){
		if (this.$divref.css('display')!='none'){
			opendivids+=this.id+',' //store ids of DIVs that are expanded when page unloads: 'div1,div2,etc'
		}
		if (this.getAttr('group') && this.getAttr('persist'))
			groupswithpersist+=this.getAttr('group')+',' //store groups with which at least one DIV has persistance enabled: 'group1,group2,etc'
	})
	opendivids=(opendivids=='')? 'nada' : opendivids.replace(/,$/, '')
	groupswithpersist=(groupswithpersist=='')? 'nada' : groupswithpersist.replace(/,$/, '')
	this.setCookie('acopendivids', opendivids)
	this.setCookie('acgroupswithpersist', groupswithpersist)
},

getCookie:function(Name){ 
	var re=new RegExp(Name+"=[^;]*", "i"); //construct RE to search for target name/value pair
	if (document.cookie.match(re)) //if cookie found
		return document.cookie.match(re)[0].split("=")[1] //return its value
	return null
},

setCookie:function(name, value, days){
	if (typeof days!="undefined"){ //if set persistent cookie
		var expireDate = new Date()
		expireDate.setDate(expireDate.getDate()+days)
		document.cookie = name+"="+value+"; path=/; expires="+expireDate.toGMTString()
	}
	else //else if this is a session only cookie
		document.cookie = name+"="+value+"; path=/"
},

urlparamselect:function(){
	window.location.search.match(/expanddiv=([\w\-_,]+)/i) //search for expanddiv=divid or divid1,divid2,etc
	return (RegExp.$1!="")? RegExp.$1.split(",") : []
},

preloadimage:function(){
	var preloadimages=this.preloadimages
	for (var i=0; i<arguments.length; i++){
		if (arguments[i] && arguments[i].length>0){
			preloadimages[preloadimages.length]=new Image()
			preloadimages[preloadimages.length-1].src=arguments[i]
		}
	}
}

}

hi all,

i am using this javascript code which i found on a random website to create a tooltip style popup. in my head is:

Code:

<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible"
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden"
}
</script>

<style type="text/javascript">
#twittericon {
position: fixed;
bottom:148px;
left: 6%;
width: 33px;
height:29px;
z-index: 49;
 }
 
#tweet{
position:fixed;
bottom:178px;
left: 3%;
max-width:310px;
color:#333333;
font-family:Arial Narrow,Arial,Sans-serif;
font-size:12px;;
z-index:6000;
visibility: hidden;
}
</style>

in my body is:
Code:

<div id="twittericon" onMouseOver="showmenu('tweet')" onMouseOut="hidemenu('tweet')"> 
<a href="http://twitter.com/bubblejam" target="_blank">
<img src="http://nang-nang.net/tumblr/blog/twit-bird.gif" width="33" height="29" /></a>
</div>
<div id="tweet"> 
(latest tweet generating code)
</div>

this creates a little bird, which displays latest tweet when rolled-over.

you can see a working example of this he
http://nang-nang.net/tumblr/blog/try.html

my question a
(1) can i add something to the javascript to create a delay when onMouseOut so that the tweet doesn't disappear immediately?

also
(2) could i also add something to the javascript to create a visual effect when onMouseOver or onMouseOut occurs? like a fade in effect? or slide up effect? i've been playing around with scriptaculous effects but i'm not sure how to combine that script with my script above.

an answer to (1) at least would be very much appreciated!

please i want to know how to make lightbox effects with the idea of switching between pages using the lightbox

please follow this link:

http://particletree.com/examples/lightbox/

while pressing on "submit an inquiry " it will show a form... all that i need is to make the same idea but using registration form
first page: contains user data ---> on pressing next .. i want to be on same lightbox box effect but using next page that contains his work data...
and on third page he will have a message that his registration is done successfully..

so

how to switch between pages in lightbox effects???

Hi Coders,

I have been trying to achieve a multiple mouseover effect on some of my pictures within my web page.

The first effect changes the picture within a table - works fine
The second effect should change the text within another table. - does not work.

I am receiving the error message:
'document.text' is null or not an object.

Here is the code which lies on my image:

Code:

<td style="height: 101px; width: 20%" valign="top">
<img onMouseover="changeimage(myimages[1],this.href); newchange();" alt="loading" height="86" src="images/marsrover_sml.jpg" width="104" /></td>

Here is the newchange() script:

Code:

<script language="JavaScript1.1">
function newchange()
{
document.text.innerHTML='<b>hello world</b>'
}
</script>

And I am sure that the table in which the text should appear has its Id and Name defined as "text"

Here is it:

Code:

<td class="style5" Id="text" name="text" style="height: 29px; width: 525px" valign="top">
<strong class="style10">Endavour has launched</strong></td>

But could not make it work error free.
Thanks for any comments.

this js file disables the toggle from all my effects. any idea how to fix this problem without deleting this?


Code:

// SpryDOMEffects.js - version 0.6 - Spry Pre-Release 1.7
//
// Copyright (c) 2007. Adobe Systems Incorporated.
// All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//
//   * Redistributions of source code must retain the above copyright notice,
//     this list of conditions and the following disclaimer.
//   * Redistributions in binary form must reproduce the above copyright notice,
//     this list of conditions and the following disclaimer in the documentation
//     and/or other materials provided with the distribution.
//   * Neither the name of Adobe Systems Incorporated nor the names of its
//     contributors may be used to endorse or promote products derived from this
//     software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.

(function() { // BeginSpryComponent
 
if (typeof Spry == "undefined" || !Spry.Utils || !Spry.$$)
{
 alert("SpryDOMEffects.js requires SpryDOMUtils.js");
 return;
}

if (!Spry.Effect) Spry.Effect = {};

Spry.Effect.Animator = function(opts)
{
 Spry.Effect.Animator.Notifier.call(this);

 this.animatorID = Spry.Effect.Animator.nextID++;
 this.dropFrames = true;
 this.fps = 60; // frames per-second
 this.duration = 500; // msecs
 this.timer = 0;
 this.startTime = 0; // Used only when dropFrames is true.
 this.currentFrame = 0;
 this.easeFunc = Spry.Effect.Animator.defaultEaseFunc;
 this.stopped = false;

 Spry.Effect.Animator.copyProps(this, opts);

 this.interval = 1000 / this.fps;
 this.numFrames = (this.duration / 1000) * this.fps;

 if (this.onComplete)
 {
  var self = this;
  this.addObserver({ onAnimationComplete: function(){ self.onComplete(); } });
 }
};

Spry.Effect.Animator.nextID = 1;

Spry.Effect.Animator.copyProps = function(dst, src)
{
 if (src)
 {
  for (prop in src)
   dst[prop] = src[prop];
 }
 return dst;
};

Spry.Effect.Animator.getElement = function(element)
{
 if (arguments.length > 1)
 {
  for (var i = 0, elements = [], length = arguments.length; i < length; i++)
   elements.push(Spry.Effect.Animator.getElement(arguments[i]));
  return elements;
 }
 if (typeof element == 'string')
  element = document.getElementById(element);
 return element;
};

Spry.Effect.Animator.defaultEaseFunc = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };

Spry.Effect.Animator.Notifier = function()
{
 this.observers = [];
 this.suppressNotifications = 0;
};

Spry.Effect.Animator.Notifier.prototype.addObserver = function(observer)
{
 if (!observer)
  return;

 // Make sure the observer isn't already on the list.

 var len = this.observers.length;
 for (var i = 0; i < len; i++)
 {
  if (this.observers[i] == observer)
   return;
 }
 this.observers[len] = observer;
};

Spry.Effect.Animator.Notifier.prototype.removeObserver = function(observer)
{
 if (!observer)
  return;

 for (var i = 0; i < this.observers.length; i++)
 {
  if (this.observers[i] == observer)
  {
   this.observers.splice(i, 1);
   break;
  }
 }
};

Spry.Effect.Animator.Notifier.prototype.notifyObservers = function(methodName, data)
{
 if (!methodName)
  return;

 if (!this.suppressNotifications)
 {
  var len = this.observers.length;
  for (var i = 0; i < len; i++)
  {
   var obs = this.observers[i];
   if (obs)
   {
    if (typeof obs == "function")
     obs(methodName, this, data);
    else if (obs[methodName])
     obs[methodName](this, data);
   }
  }
 }
};

Spry.Effect.Animator.Notifier.prototype.enableNotifications = function()
{
 if (--this.suppressNotifications < 0)
 {
  this.suppressNotifications = 0;
  Spry.Debug.reportError("Unbalanced enableNotifications() call!\n");
 }
};

Spry.Effect.Animator.Notifier.prototype.disableNotifications = function()
{
 ++this.suppressNotifications;
};

Spry.Effect.Animator.prototype = new Spry.Effect.Animator.Notifier;
Spry.Effect.Animator.prototype.constructor = Spry.Effect.Animator;

Spry.Effect.Animator.prototype.start = function()
{
 this.stopped = false;
 this.currentFrame = 0;
 this.startTime = (new Date()).getTime();

 this.notifyObservers("onAnimationStart");

 var self = this;
 this.timer = setTimeout(function(){ self.onStepAnimation(); }, this.interval);
};

Spry.Effect.Animator.prototype.stop = function()
{
 if (this.timer)
  clearTimeout(this.timer);
 this.timer = 0;
 this.stopped = true;

 this.notifyObservers("onAnimationStopped");
};

Spry.Effect.Animator.prototype.onStepAnimation = function()
{
 var obj = {};

 if (this.dropFrames)
 {
  obj.duration = this.duration;
  obj.elapsed = ((new Date).getTime()) - this.startTime;
  if (obj.elapsed > obj.duration)
   obj.elapsed = obj.duration;
 }
 else
 {
  obj.duration = this.numFrames;
  obj.elapsed = ++this.currentFrame;
 }

 obj.easingConst = this.easeFunc(obj.elapsed, 0, 1, obj.duration)

 this.notifyObservers("onPreDraw", obj);
 this.draw(obj.elapsed, obj.duration, obj.easingConst);
 this.notifyObservers("onPostDraw", obj);

 if (!this.stopped)
 {
  if (obj.elapsed < obj.duration)
  {
   var self = this;
   this.timer = setTimeout(function(){ self.onStepAnimation(); }, this.interval);
  }
  else
  {
   this.stop();
   this.notifyObservers("onAnimationComplete");
  }
 }
};

Spry.Effect.Animator.prototype.draw = function(elapsed, duration, easingConst)
{
 // The default draw method does nothing. It is assumed that
 // derived classes will provide their own implementation of this
 // method.

 debug.log("elapsed: " + elapsed + " -- duration: " + duration + " -- easingConst: " + easingConst);
};


///////////////////////////////////////////////////////////////////////////////

Spry.Effect.CSSAnimator = function(elements, styleStr, opts)
{
 this.animationSets = [];

 Spry.Effect.Animator.call(this, opts);

 this.add(elements, styleStr);
};

Spry.Effect.CSSAnimator.prototype = new Spry.Effect.Animator();
Spry.Effect.CSSAnimator.prototype.constructor = Spry.Effect.CSSAnimator;

Spry.Effect.CSSAnimator.prototype.add = function(elements, styleStr)
{
 // The first argument for the CSSAnimator can be
 // the id of an element, an element node, or an array of
 // elements and/or ids.

 elements = Spry.$$(elements);

 if (elements.length < 1)
  return;

 var animSet = { elements: elements, cssProps: []};

 this.animationSets.push(animSet);

 // Convert the styleStr into an object.

 var toObj = Spry.Utils.styleStringToObject(styleStr);
 for (var p in toObj)
 {
  var obj = new Object;
  var v = toObj[p];
  obj.value = new Number(v.replace(/[^-\d\.]+/g, ""));
  obj.units = v.replace(/[-\d+\.]/g, "");
  toObj[p] = obj;
 }

 for (var i = 0; i < elements.length; i++)
 {
  var obj = animSet.cssProps[i] = new Object;
  for (var p in toObj)
  {
   var pFuncs = Spry.Effect.CSSAnimator.stylePropFuncs[p];
   if (!pFuncs)
    pFuncs = Spry.Effect.CSSAnimator.stylePropFuncs["default"];

   obj[p] = new Object;
   obj[p].from = new Number(pFuncs.get(elements[i], p).replace(/[^-\d\.]+/g, ""));
   obj[p].to = toObj[p].value;
   obj[p].distance = obj[p].to - obj[p].from;
   obj[p].units = toObj[p].units;
  }
 }
};

Spry.Effect.CSSAnimator.prototype.start = function()
{
 for (var s = 0; s < this.animationSets.length; s++)
 {
  var animSet = this.animationSets[s];
  var elements = animSet.elements;
  var cssProps = animSet.cssProps;

  for (var i = 0; i < elements.length; i++)
  {
   var ele = elements[i];
 
   var eleProps = ele.spryCSSAnimatorProps;
   if (!eleProps)
    eleProps = ele.spryCSSAnimatorProps = new Object;
 
   var obj = cssProps[i];
   for (var p in obj)
    eleProps[p] = this.animatorID;
  }
 }

 return Spry.Effect.Animator.prototype.start.call(this);
};

Spry.Effect.CSSAnimator.prototype.stop = function()
{
 for (var s = 0; s < this.animationSets.length; s++)
 {
  var animSet = this.animationSets[s];
  var elements = animSet.elements;
  var cssProps = animSet.cssProps;

  for (var i = 0; i < elements.length; i++)
  {
   var ele = elements[i];
   var obj = cssProps[i];
 
   var eleProps = ele.spryCSSAnimatorProps;
   for (var p in obj)
   {
    if (eleProps[p] == this.animatorID)
     delete eleProps[p];
   }
  }
 }

 return Spry.Effect.Animator.prototype.stop.call(this);
};

Spry.Effect.CSSAnimator.prototype.draw = function(elapsed, duration, easingConst)
{
 for (var s = 0; s < this.animationSets.length; s++)
 {
  var animSet = this.animationSets[s];
  var elements = animSet.elements;
  var cssProps = animSet.cssProps;

  for (var i = 0; i < elements.length; i++)
  {
   var ele = elements[i];
   var eleProps = ele.spryCSSAnimatorProps;
   var obj = cssProps[i];
   for (var p in obj)
   {
    if (eleProps[p] == this.animatorID)
    {
     var pFuncs = Spry.Effect.CSSAnimator.stylePropFuncs[p];
     if (!pFuncs)
      pFuncs = Spry.Effect.CSSAnimator.stylePropFuncs["default"];
 
     if (elapsed > duration)
      pFuncs.set(ele, p, obj[p].to + obj[p].units);
     else
      pFuncs.set(ele, p, obj[p].from + (obj[p].distance * easingConst) + obj[p].units);
    }
   }
  }
 }
};

Spry.Effect.CSSAnimator.stylePropFuncs = {};

Spry.Effect.CSSAnimator.stylePropFuncs["default"] = {
 get: function(ele, prop)
 {
  return ele.style[prop];
 },

 set: function(ele, prop, val)
 {
  ele.style[prop] = val;
 }
};

Spry.Effect.CSSAnimator.stylePropFuncs["opacity"] = {
 get: function(ele, prop)
 {
  var val = 1;
  
  if (ele.style.opacity)
   val = ele.style.opacity;
  else if (ele.style.filter)
  {
   var strVal = ele.style.filter.replace(/.*alpha\(opacity=(\d+)\).*/, "$1");
   if (strVal)
    val = parseInt(strVal) / 100;
  }
  return val + "";
 },

 set: function(ele, prop, val)
 {
  ele.style.opacity = "" + val;
  ele.style.filter = "alpha(opacity=" + (val * 100) + ")";
 }
};

///////////////////////////////////////////////////////////////////////////////

Spry.$$.Results.defaultEaseFunc = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };

Spry.$$.Results.animatePropertyTo = function(propName, to, options)
{
 var opts = { interval: 10, duration: 1000, onComplete: null, transition: Spry.$$.Results.defaultEaseFunc };
 Spry.Effect.Animator.copyProps(opts, options);

 var objs = [];
 for (var i = 0; i < this.length; i++)
 {
  var obj = objs[i] = new Object;
  obj.ele = this[i];
  obj.from = obj.ele[propName];
  obj.distance = to - obj.from;
 }

 var startTime = (new Date).getTime();

 var animateFunc = function()
 {
  var elapsedTime = ((new Date).getTime()) - startTime;

  if (elapsedTime > opts.duration)
  {
   for (var i = 0; i < objs.length; i++)
    objs[i].ele[propName] = to;
   if (opts.onComplete)
    opts.onComplete();
  }
  else
  {
   for (var i = 0; i < objs.length; i++)
   {
    var obj = objs[i];
    obj.ele[propName] = opts.transition(elapsedTime, obj.from, obj.distance, opts.duration);
   }
   setTimeout(animateFunc, opts.interval);
  }
 };

 setTimeout(animateFunc, opts.interval);
 return this;
};

Spry.$$.Results.animateStyleTo = function(styleStr, options)
{
 var a = new Spry.Effect.CSSAnimator(this, styleStr, options);
 a.start();
 return this;
};

})(); // EndSpryComponent

Hi guys

I am using a customized version of this free css dropdown menu script. It is just pure css, no jquery. I wanted to add some delay to the open and close on mouseover, here is what I added:

Code:

<script type="text/javascript">
$(document).ready(function () {	
	$('ul.dropdown li').hover(
		function () {
			//show its submenu
			$('ul', this).slideDown(150);
		}, 
		function () {
			//hide its submenu
			$('ul', this).slideUp(250);			
		}
	);
});
</script>

When I first mouse over, this does nothing, but if I mouse over the same drop down li a second time, it works. Check it out here.

Any ideas on how I can fix this?

Happy Turkey Day!!

I am new to JavaScript and I downloaded a code for image mouse over effects. It works exactly how it's supposed to except when you first load the page, the images are not there. They do not appear and function until you actually roll the mouse over them. Here is the script and the link... any help would be greatly appreciated! Thank you

Link

Code:

<script language="javascript">
//script found on www.a1javascripts.com
//all credit to unknown author
<!-- hide script from old browsers
window.onerror = null;
var netscape = 0;
var goodIE = 0;
browserName = navigator.appName.substring(0,8);
browserVer = parseFloat(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3)
{ netscape = 1; }
if (browserName == "Microsof" && browserVer >= 4)
{ goodIE = 1; }
// end error trapping code
if (netscape || goodIE) {
pic1 = new Image(150,100);
pic1.src = "enso.jpg";
pic2 = new Image(150,100);
pic2.src = "shine.jpg";
pic3 = new Image(150,100);
pic3.src = "samsara.jpg";
pic4 = new Image(150,100);
pic4.src = "samsara.jpg";
a1 = new Image(300,200); a1.src = "personal1.jpg"; a2 = new Image(300,200);
a2.src = "personal2.jpg";
b1 = new Image(325,225); b1.src = "spiritual1.jpg";
b2 = new Image(325,225); b2.src = "spiritual2.jpg";
c1 = new Image(325,225); c1.src = "eyeent1.jpg"; c2 = new Image(300,200);
c2.src = "eyeent2.jpg";
}
function hiLite(imgDocID, imgObjName, imgDocID2, imgObjName2, imgDocID3, imgDocID3) {
if (netscape || goodIE) {
document.images[imgDocID].src = eval(imgObjName + ".src");
document.images[imgDocID2].src = eval(imgObjName2 + ".src");
document.images[imgDocID3].src = eval(imgObjName3 + ".src");
}}
//end hiding -->
  </script>

<img alt="Default Image" name="pic" src="default.gif"
 height="100" width="150" /><br />
<a onclick="window.focus()"
 onmouseout="hiLite('pic','pic1','a','a1'); window.status='';return true;"
 onmouseover="hiLite('pic','pic2','a','a2'); window.status='Button 1';return true;"
 href="your-page.html"><img alt="Button 1" name="a"
 src="upbutton1.gif"
 style="border: 0px solid ; width: 325px; height: 225px;" /></a><br />
<a onclick="window.focus()"
 onmouseout="hiLite('pic','pic1','b','b1'); window.status='';return true;"
 onmouseover="hiLite('pic','pic3','b','b2'); window.status='Button 2';return true;"
 href="your-page.html"><img alt="Button 2" name="b"
 src="upbutton2.gif"
 style="border: 0px solid ; width: 325px; height: 225px;" /></a>
<a onclick="window.focus()"
 onmouseout="hiLite('pic','pic1','c','c1'); window.status='';return true;"
 onmouseover="hiLite('pic','pic4','c','c2'); window.status='Button 3';return true;"
 href="your-page.html"><img alt="Button 3" name="c"
 src="upbutton3.gif"
 style="border: 0px solid ; width: 325px; height: 225px;" /></a>