[tut] Make a news scroller without Javascript

[Tim]

Today im going to show you how to make a scroller using HTML, this can be used on your website or myspace and can be customised to include all sorts of content.

Below is the basic code for the scroller:

Code:

<div id="scroller" height="300px" width="200px">
<marquee ID="scroll2" scrollamount="3" direction="up" height="350">
<!--Put the stuff that you want to scroll between here-->
Put your stuff here and here
<!--and here-->
</marquee>
</div>

Simply put the html you want to scroll in the space specified in the code.

What to put there?
If you wish to put one line after another there to form for example a list simply type the item followed by:

<p />

So for example your final code would be:

Code:

<div id="scroller" height="300px" width="200px">
<marquee ID="scroll2" scrollamount="3" direction="up" height="350">
<!--Put the stuff that you want to scroll between here-->
Item 1
<p />
Item 2
<p />
Item 3
<p />
<!--and here-->
</marquee>
</div>

You can also use html to format your text so for example put <b> </b> around your text to make it bold.

You can also customise your scroller a bit.
To change the size substitute 300px for the height of your choice and 200px for the width of your choice.
To change the speed simply change the scrollamount="3" value.
Finally to change the direction change direction="up" to direction="down"

Enjoy!

Note: Absolutely no reproduction is permitted without my express authorization.

Edit: The Javascript to start and stop this scroller on mouse over is available below (or click here)

[Zomaian]

Simple but clever

[Tim]

Thanks, I will probably post the Javascript extension to this code so it will pause and things soon (just got to find the code in all my files....)

[Gaijin]

Nice, but you're not showing anything big, just a simple use of the marquee tag.
The js code would be nice to see, until then this is just simple html!

[Tim]

Exactly, it is basic but it's also really easy to implement, you only have to copy one section of code and I had the written tutorial lying around not being used.

[WMM]

Actually pretty cool nice tut.

[Tim]

Ok, here is the javascript that will make it stop and go on mouse over, it's super simple, just put this in your HTML head:

Code:

<script type="text/javascript">
function scrollover(){
document.getElementById('scroll2').scrollAmount = 0;
return false;
}
function scrollout(){
document.getElementById('scroll2').scrollAmount = 3;
return false;
}
</script>

And add this to the scroller div:

Code:

onMouseOver="scrollover()" onMouseOut="scrollout()"

So the complete code to put where you want the scroller would be:

Code:

<div id="scroller" height="300px" width="200px" onMouseOver="scrollover()" onMouseOut="scrollout()">
<marquee ID="scroll2" scrollamount="3" direction="up" height="350">
<!--Put the stuff that you want to scroll between here-->
Item 1
<p />
Item 2
<p />
Item 3
<p />
<!--and here-->
</marquee>
</div>

[WMM]

Even better I wish I could use this.