|
|
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 https://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] = "https://snapbuilder.com/helpdesk/";
arrTitles[0] = "If you have any questions, be sure to visit our helpdesk.";
arrLinks[1] = "https://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>
|
