News Ticker
Get a scrolling ticker for your site
I got this scroller from javascriptkit.com, so I take no credit for writing the javascript scrolling code. But what I did do was modify the appearance of the scroller with CSS so you can have custom sizes and colours. Want to know how? Read on.
The link for the original javascriptkit code is here, to be pasted entirely in the <body> of your HTML page. However, I’ve put it into two parts here, because CSS is defined in the <head> of the page.
First set up a textbox in iWeb, with the size of the scrolling area you require. You may need a bit of trial and error before you get the right size. If anything, make your textbox bigger than you think, the code I use allows you to centre the scroller within. For the code that is shown below, you will need a textbox of size 225 px wide by 35 px high.
Put some text into the textbox, eg NEWS_TICKER_CODE.
Publish.
Cut and Paste HTML (Part One)
Find your HTML page.
Replace NEWS_TICKER_CODE with this:
Ok, don’t email me about this text, yes, it’s just nonsense...
If you want to change the size of the box in which the text scrolls, change the the size value (currently 25) - obviously if you change this value, you will have to make your textbox bigger.
Cut and Paste HTML (Part Two)
Scroll up the HTML page and find </head>. Paste this just before </head>:
If you want to change the speed of the scrolling, change the ScrollSpeed value, higher is slower (currently 100).
Modify the CSS
If you want to change the appearance of the scrolling text, change the properties in the .ticker section of the code above, This is where you to can experiment with different properties and see what the effects are. Once you’ve made a change, just reload the HTML page in the browser and see the effect!
The CSS for the scrolling text at the top of this page is:
For some basic information on CSS (admittedly with respect to iWeb hyperlinks, but useful nonetheless I think - all right, I admit it, I wrote it) see this page. For an excellent interactive and fully comprehensive reference to CSS properties, see culturedcode.com.
BTW, Safari doesn’t respect the border properties for textarea form, it will always give a white border regardless (or perhaps I’m doing it wrong - someone correct me here). To see what the above scroller really looks like, open the page in Firefox. Note the nice fancy border... :-)
