Loading...
HOME
 |
Vertical Marquee Using JavaScript - by The JavaScript Source | ||
Discussion by TavoxPeru with 1 Replies.
Last Update: March 17, 2009, 6:11 am | |||
 |
|||
 |
 |
|
 |
 |
| Reply / Comment | New Discussion / Topic | Share / Bookmark | E-Mail a Friend |
 |
|
|
Hi, i find this script and hope that will be useful for somebody. Text scrolls from bottom to top, pauses, then scrolls up and out of view. A link can be added, opening in a new window. Configuration is simple.
First copy the following code in a new file and name it vertical.js
The JavaScript Source :: http://javascript.internet.com
Created by: Mike Hudson :: http://www.afrozeus.com */
/*
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://forums.webdeveloper.com/forumdisplay.php?s=&forumid=3";
arrTitles[0] = "If you have any questions, be sure to visit our forums.";
arrLinks[1] = "http://javascript.internet.com/new/";
arrTitles[1] = "Don't miss anything - check our new additions.";
arrLinks[2] = "http://www.webreference.com/programming/javascript/diaries/";
arrTitles[2] = "Want to learn JavaScript? Start at the beginning.";
}
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);
}
Then copy this code into a html file, you can name it whatever you want:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Vertical Scroll</title>
<style type="text/css">
<!--
#jump_base {
overflow-y:hidden;
width: 200px;
height: 100px;
border: 2px dotted #000099;
margin: auto;
padding: 0 10px 0 10px;
font-size: .9em;
font-family: Verdana, Arial, sans-serif;
}
#jump_base a {
color: #000099;
background-color: inherit;
}
.news {
background-color: #DDDDDD;
color: inherit;
}
//-->
</style>
<script type="text/javascript" src="vertical.js"></script>
</head>
<body>
<div align="center">
<center>
<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>
<p><div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</div><p>
</center>
</div>
</body>
</html>
Because all this code is copyrighted i dont remove anything of it.
best regards,
First copy the following code in a new file and name it vertical.js
CODE
/* This script and many more are available free online atThe JavaScript Source :: http://javascript.internet.com
Created by: Mike Hudson :: http://www.afrozeus.com */
/*
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://forums.webdeveloper.com/forumdisplay.php?s=&forumid=3";
arrTitles[0] = "If you have any questions, be sure to visit our forums.";
arrLinks[1] = "http://javascript.internet.com/new/";
arrTitles[1] = "Don't miss anything - check our new additions.";
arrLinks[2] = "http://www.webreference.com/programming/javascript/diaries/";
arrTitles[2] = "Want to learn JavaScript? Start at the beginning.";
}
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);
}
Then copy this code into a html file, you can name it whatever you want:
CODE
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Vertical Scroll</title>
<style type="text/css">
<!--
#jump_base {
overflow-y:hidden;
width: 200px;
height: 100px;
border: 2px dotted #000099;
margin: auto;
padding: 0 10px 0 10px;
font-size: .9em;
font-family: Verdana, Arial, sans-serif;
}
#jump_base a {
color: #000099;
background-color: inherit;
}
.news {
background-color: #DDDDDD;
color: inherit;
}
//-->
</style>
<script type="text/javascript" src="vertical.js"></script>
</head>
<body>
<div align="center">
<center>
<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>
<p><div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</div><p>
</center>
</div>
</body>
</html>
Because all this code is copyrighted i dont remove anything of it.
best regards,
Should script work in Firefox?Vertical Marquee Using JavaScript
Hi!
I like the script and use it in my art web site.
It works well in IE but not in Firefox, as far as I can see
I did add some code to make the images disappear after an interval, so whether it's this which is the problem or the marquee type code itself that is the problem I don't know.
If you have time maybe you could look at the page, it's here
http://paintings-and-sculpture-for-sale.Com
and the poem using your code is reached so:-
at the bottom of the second page click link to
'John Locking'
and at the bottom of this page click link to 'poem'
Many thanks
John Locking
|
|
|
|
|
|
| Reply / Comment | New Discussion / Topic | Share / Bookmark | E-Mail a Friend |
Similar Topics:
Mambo Open Source Content Managemen...
Javascript Question
Javascript Tutorial For Beginner
In this tutorial I will show you how you can put JavaScript in a HTML page. It is very easy to add JavaScript in a HTML page. We will use <script> tag for this purpose. Inside the <script> tag, we will use "type=" attribute and will define the scripting language. We will defi ...more
 Create And Import JavaScript Modules For A Large Script (2)
|
(4) JavaScript Frames & Querystring 
|
html scrolling news text marquee
Visual Basic tutorial - how to make a marquee scrolling text
Flash Tutorial Create A Vertical Scrolling Text Field
