Scrolling text

P

PythonistL

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 <a> tag
e.g.
<a href="/TextDetail/">'My scrolling text.. </a>
Is it possible?

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

Peter Michaux

PythonistL said:
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?
Click to expand...

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 <a> tag
e.g.
<a href="/TextDetail/">'My scrolling text.. </a>
Is it possible?
Click to expand...

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
 
P

PythonistL

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.
 
P

Peter Michaux

PythonistL said:
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?
Click to expand...

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
 
P

Peter Michaux

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>
 
P

PythonistL

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to make a text (with HTML tags )scrolling? 5
Filename undefined for Blob ? 1
How do I hide the modal after 5 seconds? 4
Script stops working when using variables to save time typing... 4
"input-group-text" help 7
How can I arrange a series of radio buttons? 2
Help with Visual Lightbox: Scripts 2
Please Help? 0

Members online

Total: 35 (members: 1, guests: 34)
Robots: 405

Forum statistics

Threads
473,770
Messages
2,569,584
Members
45,075
Latest member
MakersCBDBloodSupport

Latest Threads

Top