Can someone show me how I can include a text scroller in my web page please .
nmretd.
Printable View
Can someone show me how I can include a text scroller in my web page please .
nmretd.
You can scroll horizontally by using the marquee tag. I haven't used it in a while, but I think it goes like this.
That should do it.Code:<MARQUEE>
Put your scrolling text here
</MARQUEE>
Or you could use this one, in which you can even use links:
[code]
<!-- THREE STEPS TO INSTALL NEWS SCROLLER:
1. Copy the coding into the HEAD of your HTML document
2. Add the onLoad event handler into the BODY tag
3. Put the last coding into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Dion ([email protected]) -->
<!-- Web Site: http://www.iinet.net.au/~biab/ -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
// change this to where you store the blank.gif image
var blank = "http://www.your-web-site-address-here.com/blank.gif";
topedge = 130; // location of news box from top of page
leftedge = 10; // location of news box from left edge
boxheight = 150; // height of news box
boxwidth = 210; // width of news box
scrollheight = 240; // total height of all data to be scrolled
function scrollnews(cliptop) {
if (document.layers) {
newsDiv = document.news;
newsDiv.clip.top = cliptop;
newsDiv.clip.bottom = cliptop + boxheight;
newsDiv.clip.left = 0;
newsDiv.clip.right = boxwidth + leftedge;
newsDiv.left = leftedge;
newsDiv.top = topedge - cliptop;
}
else {
newsDiv = news.style;
newsDiv.clip = "rect(" + cliptop + "px " + (boxwidth + leftedge) + "px " + (cliptop + boxheight) + "px 0px)";
newsDiv.pixelLeft = leftedge;
newsDiv.pixelTop = topedge - cliptop;
}
cliptop = (cliptop + 1) % (scrollheight + boxheight);
newsDiv.visibility='visible';
setTimeout("scrollnews(" + cliptop + ")", 150);
}
// End -->
</script>
</HEAD>
<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->
<BODY OnLoad="scrollnews(0)">
<!-- STEP THREE: Copy this code into the BODY of your HTML document -->
<div ID="news" style="position:absolute; visibility:hidden;
top:1; left:1; height:600;
clip:rect(10,100,100,10); border-width:0px;">
<table border=0 cellpadding=1 cellspacing=0 bgcolor="white">
<tr>
<td>
<script language="javascript">
document.write('<img src=' + blank + ' width=1 height='+boxheight+'>');
</script>
</td>
</tr>
<tr>
<td>
<!-- Your News Items are Here -->
This news scroller begins<br>
Displaying text and images<br>
From the bottom of the box<br>
And restarts when all the<br>
Information scrolls above<br>
The top of the box.<br><br>
Any HTML page content can<br>
Be used in this Javascript<br>
Scroller.<br>
<br>
<a href="mailto:[email protected]">[email protected]</a>
<!-- End Of Your News Items -->
</td>
</tr>
<tr>
<td>
<script language="javascript">
document.write('<img src=' + blank + ' width=1 height='+boxheight+'>');
</script>
</td>
</tr>
</table>
</div>
<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
[code]
You also have to save the image from this URL:
http://www.olemac.net/~hutch/blank.gif
I think you can use links in a marquee...
I dont' think marquees will work in Netscape, the JS should.
I don't think either marquees or the absolute positioning features that the js uses will work on netscape, unless you try it in gecko (Netscape 6's new layout engine).
That why'd you have to check which browser is being used and write two sets of code, or create a library so you can call one set of functions do what you want.
Hopefully once W3C or whatever they are called agree upon a standeralised DOM both browsers will meet it as they agreed.