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

Note:

Author: Mike Hudson

Last Modified: 2015-12-13 07:01:07

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

<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 http://snapbuilder.com 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 : http://www.afrozeus.com : 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] = "http://snapbuilder.com/helpdesk/"; arrTitles[0] = "If you have any questions, be sure to visit our helpdesk."; arrLinks[1] = "http://snapbuilder.com"; arrTitles[1] = "Don't miss anything check our new additions."; arrLinks[2] = "http://snapbuilder.com/flash_gallery/index.html"; 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