Trembling Link

**Niv Hamagniv** · 04-28-2008, 09:08 AM

1) Script Title: Trembling Text

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex10/tremble.htm

3) Describe problem: someone asked about stoping the trembling after a period of time.

i would like to set it on intervals:

for example: tremble for 1 sec. and then stop for 2 sec. and on and on...

can anyone help?

thanx

Niv

**jscheuer1** · 04-28-2008, 05:05 PM

Just one variable to adjust:

Code:

var pauseFactor=19;

The higher the number, the longer between pauses and the longer each pause will be. If you want no pausing, set it to 0.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.jc {
position:relative;
}
</style>

<script type="text/javascript">

//Trembling message script- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, 100's more DHTML scripts, and TOS,
//visit http://www.dynamicdrive.com
//Modified in http://www.dynamicdrive.com/forums for pausing,
//DOCTYPE compliance and weak browser/CPU interaction by:
//John Davenport Scheuer - username:jscheuer1

var pauseFactor=19;

function jiggleit(num){
this.el=document.getElementById? document.getElementById('jiggle'+num) : document.all['jiggle'+num];
this.p=pauseFactor+2*num;
this.jig=function(){
if(pauseFactor){
this.t=this.t? ++this.t : 1;
if(this.t%this.p==0){
this.t_2=this.t_2&&this.t_2<this.p? ++this.t_2 : 1;
if(this.t_2<this.p-1){
this.t--;
return;
}
else
this.t=0;
}
}
this.el.style.left=(parseInt(this.el.style.left)==1)? '-1px' : '1px';
};
var c=this;
setTimeout(function(){setInterval(function(){c.jig();}, 80);}, 20+30*num+num*2);
}

function init(){
var i=0, customcollect='';
if(document.getElementById)
while(document.getElementById('jiggle'+i)){
customcollect+='a';
i++;
}
else
while(document.all['jiggle'+i]){
customcollect+='a';
i++;
}
for (var i = customcollect.length-1; i > -1; --i)
new jiggleit(i);
}

if(document.all||document.getElementById)
window.onload=init

</script>
</head>
<body>
<span id="jiggle0" class="jc"><b>Looking for JavaScripts? Visit <a href="http://javascriptkit.com">JavaScript Kit!</a></b></span><br>
<span id="jiggle1" class="jc"><b>Another</b></span><br>
<span id="jiggle2" class="jc"><b>More</b></span><br>
</body>
</html>

Notes: Since both CPU speeds and the way each browser interacts with a given CPU vary, exact timing is rather pointless. Of those I tested, FF was the worst, because it tends to forget to shake if there are more than one of these on a page. A lot of the code was to try (successfully in many cases) to get FF to overcome this.

**jscheuer1** · 04-29-2008, 10:20 AM

Here's an even better version:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.jc {
position:relative;
}
</style>

<script type="text/javascript">

//Trembling message script- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, 100's more DHTML scripts, and TOS,
//visit http://www.dynamicdrive.com
//Modified in http://www.dynamicdrive.com/forums for pausing,
//DOCTYPE compliance and weak browser/CPU interaction by:
//John Davenport Scheuer - username:jscheuer1

var pauseFactor=19;

function jiggleit(num){
this.el=jiggleit.el('jiggle'+num);
this.to=80;
this.jig=function(){
	var c=this; if(pauseFactor){c.t=c.t? ++c.t : 1;
	if(c.t%pauseFactor==0){c.to=pauseFactor*80;c.t=0;
	} else c.to=80;}
	c.el.style.left=(parseInt(c.el.style.left)==1)? '-1px' : '1px';
	setTimeout(function(){c.jig();}, c.to);
	};
this.jig();
};

jiggleit.el=function(id){
return document.all? document.all[id] : document.getElementById(id);
};

jiggleit.init=function(){
var i=0; while(jiggleit.el('jiggle'+i))
i++; if(i--) for (i ; i > -1; --i)
new jiggleit(i);
}

if(document.all||document.getElementById)
window.onload=jiggleit.init;

</script>
</head>
<body>
<span id="jiggle0" class="jc"><b>Looking for JavaScripts? Visit <a href="http://javascriptkit.com">JavaScript Kit!</a></b></span><br>
<span id="jiggle1" class="jc"><b>Another</b></span><br>
<span id="jiggle2" class="jc"><b>More</b></span><br>
</body>
</html>

FF no longer has a problem with it. However, everything goes in unison (which can be good, it is just a matter of taste). At some point I will add an option to stagger things if it doesn't mess up FF. Watch this thread

**Niv Hamagniv** · 04-29-2008, 01:24 PM

thanx John,

i appreciate it.

the idea, though, was to create this effect:

tremble for "even less than a second" ( to catch the eye")
and then a pause for a few long seconds ( not to bother ).

{ a different proportion between the trembling time and the "peace" time }

i was trying to modify your work but with no success ;-)

can you help again please?

thanx

niv

**jscheuer1** · 04-29-2008, 06:00 PM

As promised, I updated the script to use optional staggering, it was a simple matter to add more peace time as an option:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Trembling Message Script - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.jc {
position:relative;
}
</style>

<script type="text/javascript">

/* Trembling message script- © Dynamic Drive (www.dynamicdrive.com)
   For 100's more DHTML scripts, and TOS, visit http://www.dynamicdrive.com
   This notice must remain for legal use.
   Modified in http://www.dynamicdrive.com/forums for optional pausing,
   DOCTYPE compliance & to overcome weak browser/CPU interaction in FF
   Modifications ©2008 by: John Davenport Scheuer - username:jscheuer1 */

jiggleit.pauseFactor=1.5; // Seconds (approx) the on and the off states will be, use 0 for no on/off, decimals allowed
jiggleit.randomJigs=1; // Random jigglers if more than one? 1=randomly staggered (requires pause enabled), 0=in unison
jiggleit.peaceTime=3; // Seconds to extend the off state by if pause enabled, use 0 for equal on and off periods

/////////////// Stop Editing ///////////////

jiggleit.ar=[];

function jiggleit(num){
var p=jiggleit.peaceTime*1000, f=Math.ceil(jiggleit.pauseFactor*1000/80);
jiggleit.ar[this.id=num]=this;
this.el=jiggleit.el('jiggle'+num);
this.to=80;
this.p=(this.p=jiggleit.randomJigs*2*num)&&f? this.p+f : f;
this.jig=function(){
	var c=this; if(c.p){c.t=c.t? ++c.t : 1;
	if(c.t%c.p==0){c.to=c.p*80+p;c.t=0;} else c.to=80;}
	c.el.style.left=parseInt(c.el.style.left)==1? '-1px' : '1px';
	setTimeout("jiggleit.ar["+c.id+"].jig()", c.to);
	};
setTimeout("jiggleit.ar["+num+"].jig()", (this.p-f)*30+f);
};

jiggleit.el=function(id){
return document.all? document.all[id] : document.getElementById(id);
};

jiggleit.init=function(){
var i=0; while(jiggleit.el('jiggle'+i))
i++; if(i--) for (i; i > -1; --i)
new jiggleit(i);
}

if(document.all||document.getElementById)
window.onload=jiggleit.init;

</script>
</head>
<body>
<span id="jiggle0" class="jc"><b>Looking for JavaScripts? Visit <a href="http://javascriptkit.com">JavaScript Kit!</a></b></span><br>
<span id="jiggle1" class="jc"><b>Another</b></span><br>
<span id="jiggle2" class="jc"><b>More</b></span><br>
</body>
</html>

**Niv Hamagniv** · 05-04-2008, 09:29 AM

Hi john,

Thank you very much, that’s exactly what I meant.

I'm experiencing some troubles trying to use it :

I'm using a "special" FCKeditor for Hebrew.

For start it changes this part of the code:

Looking for JavaScripts? Visit <a href="http://javascriptkit.com">JavaScript Kit!</a> 
Another 
More 

Into this:

Looking for JavaScripts? Visit <a href="http://javascriptkit.com">JavaScript Kit!</a> 
Another 
More 

Which works fine.

The problem begins when I'm trying to change this:

{ Looking for JavaScripts? Visit <a href="http://javascriptkit.com">JavaScript Kit!</a> }

Into this:

{ Hebrew text. }

It doesn’t work…

Funny enough – when I leave the first ( jiggle0 ) intact, and change the other two
( jiggle1 and jiggle2 ) ( change "Another" and "More" into Hebrew text ) – it works fine ( all is trembling )

Needles to say: when I tried to use only the first (jiggle0) (erasing the other two)
With Hebrew text – it didn’t work.
Also when I tried to use jiggle0 only with the text "Looking for" ( without the rest…) – it didn’t work either.

Confused? Me too.

Can you shed a light on this pls..?

Thank you again

Niv

**jscheuer1** · 05-04-2008, 02:50 PM

Sounds like it is removing or changing either the class and/or id attribute and/or the validity of the HTML element syntax.

I would be very leery of any editor that took that much control over the code. However, editors like that can often be configured not to do so much of that sort of thing, the best ones allow you to set what and exactly how much of these sorts of transformations take place, and in exactly what manner. But it can be daunting to learn how to do this, and some editors just don't give so much flexibility.

In the first case it is changing it into valid XHTML, which really should almost never be used. Valid HTML 4.01 strict or transitional is a much better choice, but due to most browsers error correcting the XHTML back into HTML, this doesn't appear to cause any problem. In the second case, I can only imagine what it is doing, because I haven't seen the actual source code output.

If you need more help debugging that output, please give me a link to an example page:

Please post a link to the page on your site that contains the problematic code so we can check it out.