Solved

shaking word

Posted on 2009-07-07
6
295 Views
Last Modified: 2012-05-07
hi....

can anyone please give me right code for shaking these 'hello world' while i put the mouse over it!

find the code below please!

thank you

<html>

hello world

</html>

Open in new window

0
Comment
Question by:ferman-k
  • 2
  • 2
  • 2
6 Comments
 
LVL 21

Expert Comment

by:Tapan Pattanaik
Comment Utility
hi ferman-k,

                  Follow the step by step procedure in the given below link and it will display shaking text in the browser.

Shaking Text  :

http://www.hypergurl.com/shakingtext.html


Thanks.

Tapan Pattaniak
0
 
LVL 12

Expert Comment

by:Chad Haney
Comment Utility
Here is a simple example
<html>

<head>

<script type="text/javascript">

var go=true;

var left = true;

var shakeMe;

function shakeText(doIt, who){

	go=doIt;

	shakeMe=who;

	shake();

}

function shake(){

	if(go){

		var pos = shakeMe.style.left;

		pos = pos.substring(0,pos.indexOf("px"));

		if (left){

			shakeMe.style.left = parseInt(pos) + 1;

			left=false;	

		}else{

			shakeMe.style.left = parseInt(pos) - 1;	

			left=true;

		}

		var t = setTimeout("shake()",50);

	}

}

</script>

</head>

<body>

<span style="position:relative;left:0;" onmouseover="shakeText(true, this)" onmouseout="shakeText(false, this)">Hello</span>

</body>

</html>

Open in new window

0
 

Author Comment

by:ferman-k
Comment Utility
i have used same code you sent and the hello word was not makng any move at all.. what do you think the problem might be? please!

please find the included code


<html>

<head>

<script type="text/javascript">

var go=true;

var left = true;

var shakeMe;

function shakeText(doIt, who){

        go=doIt;

        shakeMe=who;

        shake();

}

function shake(){

        if(go){

                var pos = shakeMe.style.left;

                pos = pos.substring(0,pos.indexOf("px"));

                if (left){

                        shakeMe.style.left = parseInt(pos) + 1;

                        left=false;     

                }else{

                        shakeMe.style.left = parseInt(pos) - 1; 

                        left=true;

                }

                var t = setTimeout("shake()",50);

        }

}

</script>

</head>

<body>

<span style="position:relative;left:0;" onmouseover="shakeText(true, this)" onmouseout="shakeText(false, this)">Hello</span>

</body>

</html>

Open in new window

0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 21

Accepted Solution

by:
Tapan Pattanaik earned 500 total points
Comment Utility
hi ferman-k,

                     
Check this code, which will display shaking "hello word"

Thanks.


 <script type="text/javascript" >

//configure message

message="Hello word"

//animate text in NS6? (0 will turn it off)

ns6switch=1
 

var ns6=document.getElementById&&!document.all

mes=new Array();

mes[0]=-1;

mes[1]=-4;

mes[2]=-7;mes[3]=-10;

mes[4]=-7;

mes[5]=-4;

mes[6]=-1;

num=0;

num2=0;

txt="";

function jump0(){

if (ns6&&!ns6switch){

jump.innerHTML=message

return

}

if(message.length > 6){

for(i=0; i != message.length;i++){

txt=txt+"<span style='position:relative;' id='n"+i+"'>"+message.charAt(i)+"</span>"};

jump.innerHTML=txt;

txt="";

jump1a()

}

else{

alert("Your message is to short")

}

}
 

function jump1a(){

nfinal=(document.getElementById)? document.getElementById("n0") : document.all.n0

nfinal.style.left=-num2;

if(num2 != 9){

num2=num2+3;

setTimeout("jump1a()",50)

}

else{

jump1b()

}

}
 

function jump1b(){

nfinal.style.left=-num2;

if(num2 != 0){num2=num2-3;

setTimeout("jump1b()",50)

}

else{

jump2()

}

}
 

function jump2(){

txt="";

for(i=0;i != message.length;i++){

if(i+num > -1 && i+num < 7){

txt=txt+"<span style='position:relative;top:"+mes[i+num]+"'>"+message.charAt(i)+"</span>"

}

else{txt=txt+"<span>"+message.charAt(i)+"</span>"}

}

jump.innerHTML=txt;

txt="";

if(num != (-message.length)){

num--;

setTimeout("jump2()",50)}

else{num=0;

setTimeout("jump0()",50)}}

</script>
 
 

<div id="jumpx" style="color:green"></div>

<script type="text/javascript">

if (document.all||document.getElementById){

jump=(document.getElementById)? document.getElementById("jumpx") : document.all.jumpx

jump0()

}

else

document.write(message)

</script>

Open in new window

0
 
LVL 12

Expert Comment

by:Chad Haney
Comment Utility
Did you have position defined as either absolute or relative and left defined?
0
 

Author Closing Comment

by:ferman-k
Comment Utility
in fact it was not what i wanted, but i consider it better,, the word is not shaking, it wiggling instead, which it lovely and i like more. ;-)

i appreciate your guide, thank you
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now