Highlighter Scroller

This interesting scroller rotates and displays messages by highlighting each one into view, like using a felts to highlight text on a page. Very cool!

Simply add the below where you want the scroller to appear on your page(Copy & Paste):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Highlighter Scroller ::Jumbo Education::</title>
<!--
Visit Our Sites
Jumbo Education
www.jumboeducation.com
-->
</head>

<body>

<div style="position:relative;left:0px;top:0px">
<span id="highlighter" style="position:absolute;left:0;top:0;font-size:18px;font-family:Verdana;background-color:yellow;clip:rect(0px 0px auto 0px)"></span>
</div>

<script type="text/javascript">

var tickercontents=new Array()
tickercontents[0]='Looking for free comptuer/ IT tutorials? Visit <a href=".com">www.jumboeducation.com</a>!'
tickercontents[1]='Hop on over to <a href="http://www.jumboeducation.com">Coding Forums</a> to get help on web coding!'
tickercontents[2]='This scroller\'s brought to you by <a href="http://www.jumboeducation.com">Jumbo Education</a>'

var tickdelay=3000 //delay btw messages
var highlightspeed=10 //10 pixels at a time.

////Do not edit pass this line////////////////

var currentmessage=0
var clipwidth=0

function changetickercontent(){
crosstick.style.clip="rect(0px 0px auto 0px)"
crosstick.innerHTML=tickercontents[currentmessage]
highlightmsg()
}

function highlightmsg(){
var msgwidth=crosstick.offsetWidth
if (clipwidth<msgwidth){
clipwidth+=highlightspeed
crosstick.style.clip="rect(0px "+clipwidth+"px auto 0px)"
beginclip=setTimeout("highlightmsg()",20)
}
else{
clipwidth=0
clearTimeout(beginclip)
if (currentmessage==tickercontents.length-1) currentmessage=0
else currentmessage++
setTimeout("changetickercontent()",tickdelay)
}
}

function start_ticking(){
crosstick=document.getElementById? document.getElementById("highlighter") : document.all.highlighter
crosstickParent=crosstick.parentNode? crosstick.parentNode : crosstick.parentElement
if (parseInt(crosstick.offsetHeight)>0)
crosstickParent.style.height=crosstick.offsetHeight+'px'
else
setTimeout("crosstickParent.style.height=crosstick.offsetHeight+'px'",100) //delay for Mozilla's sake
changetickercontent()
}

if (document.all || document.getElementById)
window.onload=start_ticking

</script>

</body>
</html>

Others

Circle Hover Effects CSS3
Circle Hover Effects with CSS3 Transitions
Radial Blur
Create attractive effect from photoshop of your photo.
Draw a Mobile ΓΆ€“ Photoshop Tutorial
Draw a Realistic Samsung Galaxy S2. To follow this tutorial, you will need the following resources...
Clean and Stylish CSS3 Form
This article is about creating a form using some of CSS3 properties. You can easily customize the style.

SIGN UP FOR NEWSLETTER

Sign up to received our free newsletter!
Name:
E-mail ID:

MOST READ

Views: 4933 Times
10 obscure Word tricks that can expedite common chores READ MORE
Views: 2678 Times
House to take up cybersecurity bill with revisions READ MORE
Views: 2595 Times
Print-your-own-robots developed in US READ MORE
Views: 5478 Times
How to set up Home LAN READ MORE
Views: 7148 Times
Make A Bootable Pen Drive READ MORE

Home|IT News|Computer Tips|Video Tutorials|Download Softwares|Subjects|Contact Us
Copyright © 2018. Jumbo Education (Information Technology). All rights reserved.
Free counter and web stats

Large Visitor Globe