Simple shake effect problem

marSoul · #1 (**permalink**) Sep 24th, 2007, 13:40

Hi
I'm a newbie in javascript,
I created a simple shake effect with javascript, but the problem is that this effect only one time works, how can i make it work every click on the text ?

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var i=50;
function goleft()
    {
    document.getElementById('title').style.left = 100+i+"px";
    setTimeout("goright()",100);
    i=i/2;
    }
function goright()
    {
    document.getElementById('title').style.left = 100-i+"px";
    setTimeout("goleft()",100);
    i=i/2;
    }
</script>
<style>
#title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 36px;
    color: #FF0000;
    position: relative;
    top: 0px;
    left: 100px;    
}
</style>
<body>
<div id="title" onclick="goright()">Shake Me !</div>
</body>
</html>

Rakuli · #2 (**permalink**) Sep 24th, 2007, 22:52

The reason this only works once is becuase var 'i' eventually becomes less than one and the recursive function calls never stop.

You can fix this by having a function that will reset 'i' if is less than 1 and clear the timeouts.

This essentially starts it all again.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var i=50;
var timeout = false; // store the timeout reference in a variable

function init()
{
    if (i > 1 && timeout) // if i is less than 1 and we have started already just exit
      return;
    i = 50; // reset i
    clearTimeout(timeout); // clear the timeout
    goright(); // start the wobbly bits
}

function goleft()
    {
    document.getElementById('title').style.left = 100+i+"px";
    timeout = setTimeout("goright()",100);
    i=i/2;
    }
function goright()
    {
    document.getElementById('title').style.left = 100-i+"px";
    timeout = setTimeout("goleft()",100);
    i=i/2;
    }
</script>
<style>
#title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 36px;
    color: #FF0000;
    position: relative;
    top: 0px;
    left: 100px;    
}
</style>
<body>
<div id="title" onclick="init()">Shake Me !</div>
</body>
</html>

Every time the text stops, you can click it again now to make it shake.

Cheers,

marSoul · #3 (**permalink**) Sep 24th, 2007, 23:13

Thanks !

alexgeek · #4 (**permalink**) Sep 25th, 2007, 19:15

god i hate these

marSoul · #5 (**permalink**) Sep 25th, 2007, 19:19

Hate What ?!

alexgeek · #6 (**permalink**) Sep 25th, 2007, 19:22

Shake effects, they do my nut in!
May be alright for what you're doing though,
so i'll shup

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] simple div problem	hhelen	Web Page Design	5	Apr 4th, 2008 14:56
CSS Ordered List (Rollover Effect) Problem in I.E 6	Aaron1988	Web Page Design	0	Mar 10th, 2008 03:56
Simple Problem Please Help!	bthomson82	JavaScript Forum	3	Jun 22nd, 2007 02:59
Really simple positioning problem :(	camcool21	Web Page Design	4	Dec 30th, 2006 18:25

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
Simple shake effect problem