- Skill level:
Other People Are Reading
Things you need
- Plain-text editor
Launch the standard, plain-text editor application that is available on your computer.
Enter the following code into the text editor. This is CSS styling that places the <div> containing the ticker text -- id="inner" -- within a container <div>. The overflow text within the inner <div> is hidden and is visible only as the text scrolls to the left.
<!-- Styling info sets one div withing a container div. -->
Enter the following code into the text editor below final </div> tag. If you increase the size of the variable "timeinterval," you will slow the ticker down. If you decrease the variable "step," the ticker will move slower but smoother. Increasing "step" makes the ticker jerk as it moves left in larger steps.
// you can change this message to whatever you like
message="The licenses for most software and other practical works are designed to take away your freedom to share and change the works.";
// this changes the text displayed within the inner <div>
// this sets the width of the inner <div> to roughly 1/2 the size of the message
var offset =1;
// set Interval() calls the function scroll() in the time set by timeinterval
// keeps the text within the outer <div>
// moves the text to the left by changing the CSS position property, "left"
// this is the size of the text move.
// This statement starts the scrolling over from the beginning
Click the File menu. Select the "Save" option. Save under the file name "test.html."
Launch the web browser that is available on your computer. Click on the "File" menu item and select "Open File."
Locate the file "test.html" just created, select it with the mouse then click on "Open."
Add the code to your web page by inserting the CSS styles between the <head></head> tags of the demo into the <head> section of your web page. Remove the demo code between the <body></body> tags and place them into the section of your web page you want the ticker to reside. Adjust the width of the inner and outer ticker <div>'s to match the amount of space you have for the ticker.
Save your web page and test it. Fine-tune the size of the ticker by adjusting the <div> widths and heights. Adjust the scroll speed by changing the variables "step" and "timeinterval."
Tips and warnings
- 20 of the funniest online reviews ever
- 14 Biggest lies people tell in online dating sites
- Hilarious things Google thinks you're trying to search for