Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library


Category: Javascript Codes Library >> News Ticker & Marquees >> Vertical Marquee

Code Snippet </> Info

Snippet Name: Vertical Marquee

Description: Text scrolls from bottom to top, pauses, then scrolls up and out of view.

Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser

Example: View Code Demo


Author: Mike Hudson

Last Modified: 2019-12-10 00:38:01

Language: javascript

Highlight Mode: javascript

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor

  About Copying
Copied To Clipboard!

<html> <head> <title>Vertical Marquee Javascript Code Snippet</title> <style> BODY {font-family:verdana,arial,ms sans serif; font-size:90%;} #jump_base {overflow-y:hidden; width:200px; height:100px; border:2px dotted #000099; margin:auto; padding:0 10px 0 10px; font-size:90%; font-family:Verdana, Arial, sans-serif;} #jump_base a {color:#000099; background-color:inherit;} .news {background-color:#e6e6e6; color:inherit;} </style> <script> /* // Begin Vertical Marquee // == This Script Free To Use Providing This Notice Remains == // == This Script Has Been Found In The Free Public Codes Library == // == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == // == Created by: Mike Hudson : : Creative Commons License == */ /* To change the values in the setupLinks function below. You will notice there are two arrays for each of Titles and Links. Currently there are 3 items in each array, but you can easily expand on that by adding to the array. For example, to add a 4th record, you would simply include the following 2 lines at the end of setupLinks function: arrLinks[3] = "someURL.htm"; arrTitles[3] = "Some title"; */ function setupLinks() { arrLinks[0] = ""; arrTitles[0] = "If you have any questions, be sure to visit our helpdesk."; arrLinks[1] = ""; arrTitles[1] = "Don't miss anything check our new additions."; arrLinks[2] = ""; arrTitles[2] = "Check out our flash gallery presentations."; } var m_iInterval; var m_Height; //window.onload = wl; var iScroll=0; var arrLinks; var arrTitles; var arrCursor = 0; var arrMax; window.onload=wl; function wl() { m_iInterval = setInterval(ontimer, 10); var base = document.getElementById("jump_base"); m_Height = base.offsetHeight; var divi = parseInt(m_Height/5); m_Height = divi*5; var td1 = document.getElementById("td1"); var td2 = document.getElementById("td2"); var td3 = document.getElementById("td3"); td1.height = m_Height-5; td2.height = m_Height-5; td3.height = m_Height-5; arrLinks = new Array(); arrTitles = new Array(); setupLinks(); arrMax = arrLinks.length-1; setLink(); } function setLink() { var ilink = document.getElementById("jump_link"); ilink.innerHTML = arrTitles[arrCursor]; ilink.href = arrLinks[arrCursor]; } function ontimer() { var base = document.getElementById("jump_base"); iScroll+=5; if (iScroll>(m_Height*2)) { iScroll=0; arrCursor++; if (arrCursor>arrMax) arrCursor=0; setLink(); } if (iScroll==m_Height) { pause(); m_iInterval = setTimeout(resume, 4000); } base.scrollTop=iScroll; } function pause() { clearInterval(m_iInterval); } function resume() { m_iInterval = setInterval(ontimer, 10); } </script> </head> <body> <div id="jump_base" class="news" onmouseover="pause();" onmouseout="resume();"> <table class="news"> <tr> <td id="td1"> </td> </tr> <tr> <td id="td2" valign="middle" align="center"><a id="jump_link" href="" target="_new"></a></td> </tr> <tr> <td id="td3"> </td> </tr> </table> </div> <br /><br /> <p>Create as many arrLinks as you need... just number them numerically.</p> <p>Adjust the STYLES to suit your needs.</p> <p>You can transfer the 'javascript' code to an external file to minify your page size.</p> </body> </html>

[ Snippet Options ]


© 2002 -  Snap Builder Public Codes Library