-
Rowan
Cottage
- -
 
News Ticker
-
 
Get a scrolling ticker for your site
Ready for another gadget?
 
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.
 
Here we again use the PayPal Buttons technique to insert the HTML code into a published 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:
 
 
Creative Commons License
I’m just going for a quick scroll...
Ok, don’t email me about this text, yes, it’s just nonsense...
-
- Site badges - - use these to link us

Enter email to send
this to a friend:

Crucial. The memory Experts
ONSPEED - The Alternative To Broadband
- -
The Apple Store at Freemans
- PHOTO STORE
NEW IWEB TEMPLATES
- - -
Copy and paste this code into your HTML widget or textbox or page
 
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... :-)
 
Save the file. That’s it! Please sign our guestmap if you found this article useful! Thanks.
 
This article © 2008 Michael Wong
 
 
 
 
 
 
 
Copy and paste this code into your HTML widget or textbox or page
Copy and paste this code into your HTML widget or textbox or page
-
 
popup search backgroundpopup search imagepopup search close button
 
Web www.rowan-cottage.co.uk
new at rowan cottage
Close
rowan cottage badge
View previews of great iWeb templates!
See stunning new iWeb templates on
our preview
page here!
-