By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,635 Members | 2,240 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,635 IT Pros & Developers. It's quick & easy.

Scrolling text

P: n/a
I am a newbie with Javascript. I have this simple script for scrolling
text
<HTML>
<HEAD>
<TITLE>Scrolling Message Script</TITLE>
<SCRIPT language="JavaScript"><!--
var msg = 'My scrolling text.. '
function scrollMsg(){
document.scrollDemo.textScroll.value = msg
msg = msg.substring(1,msg.length) + msg.substring(0,1)
setTimeout("scrollMsg()", 200)

}
//--></SCRIPT>
</HEAD>

<BODY bgcolor="white" onLoad="scrollMsg()">
<P>
<FORM name="scrollDemo">
<FONT face="Courier New,Courier" size=3><B>

<INPUT type="text" name="textScroll" size=30 value="Loading" ">
</B></FONT>
</FORM>
</BODY>
</HTML>

How must I change the script so that the text stops scrolling when I
put a mouse cursor over the text?
And I would like to have a link to the scrolling text with <atag
e.g.
<a href="/TextDetail/">'My scrolling text.. </a>
Is it possible?

How much difficult would that be ?
Thank you for help
L.

Nov 15 '06 #1
Share this Question
Share on Google+
5 Replies


P: n/a
PythonistL wrote:
I am a newbie with Javascript. I have this simple script for scrolling
text
<HTML>
<HEAD>
<TITLE>Scrolling Message Script</TITLE>
<SCRIPT language="JavaScript"><!--
var msg = 'My scrolling text.. '
function scrollMsg(){
document.scrollDemo.textScroll.value = msg
msg = msg.substring(1,msg.length) + msg.substring(0,1)
setTimeout("scrollMsg()", 200)

}
//--></SCRIPT>
</HEAD>

<BODY bgcolor="white" onLoad="scrollMsg()">
<P>
<FORM name="scrollDemo">
<FONT face="Courier New,Courier" size=3><B>

<INPUT type="text" name="textScroll" size=30 value="Loading" ">
</B></FONT>
</FORM>
</BODY>
</HTML>

How must I change the script so that the text stops scrolling when I
put a mouse cursor over the text?
Don't use the language attribute on the script tag. It is deprecated.

Don't bother with the comment trick to hide the script from Netscape 1
or which every browser it was a long time ago.

It is probably a good idea to explicitly type the semi-colons at the
end of the JavaScript lines.

It might be better to use lower case tag and attribute names in case
you want to switch to XML/XHTML

Consider using a document type and validating your HTML
http://validator.w3.org/

I'm assuming your script example works. To stop the scrolling you can
keep and use a reference to the timeout. Note setTimeout can take a
function reference instead of a string if you want and it is more
efficient.

<script type="text/javascript">

var msg = 'My scrolling text..';
var myTimeout;
function scrollMsg() {
document.scrollDemo.textScroll.value = msg;
msg = msg.substring(1,msg.length) + msg.substring(0,1);
myTimeout = setTimeout(scrollMsg, 200);
}
</script>

<input type="text" onmouseover="if (myTimeout) {
clearTimeout(myTimeout; }">

And I would like to have a link to the scrolling text with <atag
e.g.
<a href="/TextDetail/">'My scrolling text.. </a>
Is it possible?
Maybe you really want

<a href="#textScroll">'My scrolling text.. </a>

I don't know about using the pound anchor with a name attribute. I use
the pound anchor with an element id this is because the name attributes
are not required to be unique but the id attributes are unique.

Peter

Nov 15 '06 #2

P: n/a
Hello Peter,
Thank you for your reply.
I changed the script as you suggested
<HTML>
<HEAD>
<TITLE>Scrolling Message Script</TITLE>

<script type="text/javascript">
var msg = 'My scrolling text.....';
var myTimeout;
function scrollMsg() {
document.scrollDemo.textScroll.value = msg;
msg = msg.substring(1,msg.length) + msg.substring(0,1);
myTimeout = setTimeout(scrollMsg, 200);
}
</script>
</HEAD>

<BODY bgcolor="white" onLoad="scrollMsg()">

<FORM name="scrollDemo">
<INPUT type="text" onmouseover="if (myTimeout) { clearTimeout(
myTimeout; }" name="textScroll" size=30 value="Loading" >
</FORM>
</BODY>
</HTML>

but the scrolling text still does NOT stop when I put a mouse cursor
over the text.
Where did I make a mistake in the script?
Thank you for your reply.
L.

Nov 16 '06 #3

P: n/a
PythonistL wrote:
Hello Peter,
Thank you for your reply.
I changed the script as you suggested

<HTML>
<HEAD>
<TITLE>Scrolling Message Script</TITLE>

<script type="text/javascript">
var msg = 'My scrolling text.....';
var myTimeout;
function scrollMsg() {
document.scrollDemo.textScroll.value = msg;
msg = msg.substring(1,msg.length) + msg.substring(0,1);
myTimeout = setTimeout(scrollMsg, 200);
}
</script>
</HEAD>

<BODY bgcolor="white" onLoad="scrollMsg()">

<FORM name="scrollDemo">
<INPUT type="text" onmouseover="if (myTimeout) { clearTimeout(
myTimeout; }" name="textScroll" size=30 value="Loading" >
</FORM>
</BODY>
</HTML>

but the scrolling text still does NOT stop when I put a mouse cursor
over the text.
Where did I make a mistake in the script?
I made the mistake. I missed a right paren on the call to clearTimeout.
I just ran the page in Firefox and Firebug filled me in on the problem.
Try this. It worked for me

<INPUT type="text" onmouseover="if (myTimeout) {
clearTimeout(myTimeout); }"

All those capitalized tag names have got to go. Ok they don't _have_ to
but they look old fashioned.

You should write all attributes in double quotes

size="30"

Check out firebug
https://addons.mozilla.org/firefox/1843/

Peter

Nov 16 '06 #4

P: n/a
Do you really want to use an input element? For this scrolling text?

Below is an example without using an input element. It uses the
non-standard innerHTML property that all the main browsers have. You
could do this using the standard dom methods too but I just wanted to
show a quick example.

<HTML>
<HEAD>
<TITLE>Scrolling Message Script</TITLE>

<script type="text/javascript">
var msg = 'My scrolling text.....';
var myTimeout;
function scrollMsg() {
document.getElementById('textScroll').innerHTML = msg;
msg = msg.substring(1,msg.length) + msg.substring(0,1);
myTimeout = setTimeout(scrollMsg, 200);
}

</script>
</HEAD>

<BODY bgcolor="white" onLoad="scrollMsg()">

<p type="text" onmouseover="if (myTimeout) { clearTimeout(
myTimeout); }" id="textScroll">
</p>

</BODY>
</HTML>

Nov 16 '06 #5

P: n/a

Peter ,
Thanks a lot for your help. Now it works! I little changed it like
this:

<p type="text" onmouseover="if (myTimeout) { clearTimeout( myTimeout);
}" onmouseout="myTimeout = setTimeout(scrollMsg, 200); "
id="textScroll">

Now when I move the mouse cursor from a text the scrolling starts
again.
So, now it is ALMOST what I needed.Only I miss only one thing.
Do you have any idea how I can add a URL link to the scrolling text so
that a user can click on a text and a new page is open ?Or where can I
learn more about that?

Thank you for your reply
L.

Nov 16 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.