[tut] Make a news scroller without Javascript

[tut] Make a news scroller without Javascript - Printable Version

+- Support Forums (https://www.supportforums.net)
+-- Forum: Categories (https://www.supportforums.net/forumdisplay.php?fid=87)
+--- Forum: Webmaster Support (https://www.supportforums.net/forumdisplay.php?fid=36)
+---- Forum: Website Development (https://www.supportforums.net/forumdisplay.php?fid=43)
+---- Thread: [tut] Make a news scroller without Javascript (/showthread.php?tid=3325)

[tut] Make a news scroller without Javascript - Tim - 12-04-2009

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)

RE: [tut] Make a news scroller without Javascript - Zomaian - 12-04-2009

Simple but clever Tongue

RE: [tut] Make a news scroller without Javascript - Tim - 12-04-2009

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

RE: [tut] Make a news scroller without Javascript - Gaijin - 12-08-2009

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!

RE: [tut] Make a news scroller without Javascript - Tim - 12-10-2009

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.

RE: [tut] Make a news scroller without Javascript - WMM - 12-10-2009

Actually pretty cool nice tut.

RE: [tut] Make a news scroller without Javascript - Tim - 12-10-2009

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>

RE: [tut] Make a news scroller without Javascript - WMM - 12-10-2009

Even better Smile

I wish I could use this.