How To Make Highlighted Scroller Using HTML JavaScript

Submitted by alpha_luna on Friday, July 22, 2016 - 10:15.
In this tutorial, we are going to learn How To Make Highlighted Scroller Using HTML JavaScript. This is a scroller that displays messages by highlighting each one of it.

Example

Creating Markup

Just simply add the codes below, to paste it where you want the scroller to appear on your page in your BODY tag.
  1. <div style="position:relative;left:0px;top:0px">
  2.         <span id="highlighter" style="position:absolute;left:0;top:0;font-size:18px;font-family:Helvetica;background-color:antiquewhite;clip:rect(0px 0px auto 0px);"></span>
  3. </div>

Creating Script

Kindly copy this simple script below your HTML source code to execute the markup.
  1. <script language="JavaScript">
  2.  
  3. var tickercontents=new Array()
  4. tickercontents[0]='Looking for source code and resources? Visit <a href="http://sourcecodester.com">sourcecodester.com</a>'
  5. tickercontents[1]='Thank you for downloading the source code.'
  6. tickercontents[2]='For more tutorial, click <a href="http://www.sourcecodester.com/tutorial">here</a>.'
  7.  
  8. var tickdelay=3000
  9. var highlightspeed=10
  10. var currentmessage=0
  11. var clipwidth=0
  12. function changetickercontent(){
  13. crosstick.style.clip="rect(0px 0px auto 0px)"
  14. crosstick.innerHTML=tickercontents[currentmessage]
  15. highlightmsg()
  16. }
  17. function highlightmsg(){
  18. var msgwidth=crosstick.offsetWidth
  19. if (clipwidth<msgwidth){
  20. clipwidth+=highlightspeed
  21. crosstick.style.clip="rect(0px "+clipwidth+"px auto 0px)"
  22. beginclip=setTimeout("highlightmsg()",20)
  23. }
  24. else{
  25. clipwidth=0
  26. clearTimeout(beginclip)
  27. if (currentmessage==tickercontents.length-1) currentmessage=0
  28. else currentmessage++
  29. setTimeout("changetickercontent()",tickdelay)
  30. }
  31. }
  32. function start_ticking(){
  33. crosstick=document.getElementById? document.getElementById("highlighter") : document.all.highlighter
  34. crosstickParent=crosstick.parentNode? crosstick.parentNode : crosstick.parentElement
  35. if (parseInt(crosstick.offsetHeight)>0)
  36. crosstickParent.style.height=crosstick.offsetHeight+'px'
  37. else
  38. setTimeout("crosstickParent.style.height=crosstick.offsetHeight+'px'",100)
  39. changetickercontent()
  40. }
  41. if (document.all || document.getElementById)
  42. window.onload=start_ticking
  43.  
  44. </script>
Just download the full source code below. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.
Tags
Javascript
Highlights Text

Add new comment

About text formats
  • 21 views