Verticle scrolling text

stockton · May 22, 2008

I have a web page using html, javascript & css and sad to say some of the code I am using was copied from other sites without fully understanding how they work. To cut a long story shorter http://www.stockton.co.za/LeaderBoard/ is almost working 100%

but there is one annoying issue. The issue is that I want the scroll to start at the bottom of the page and when getting to the end of the text I would like #1 to immediately follow #250, not have a gap inbetween.

The html :-

<head>
<title>Leader Board Month</title>
<META HTTP-EQUIV="refresh" CONTENT="300">
<script language="JavaScript" type="text/javascript" src="js/LeaderBoard.js">
</script>
<link rel="stylesheet" type="text/css" href="style/LeaderBoard.css">
</head>
<BODY TEXT=#FFFFFF>
<div id="SlotsWindow">
<div id="SlotsText">
<p><center>
<?php include("SlotsMonth.html"); ?>
</center>
</p>
</div>
</div>
<div id="TablesWindow">
<div id="TablesText">
<p>
<?php include("TablesMonth.html"); ?>
</p>
</div>
</div>
</body>
</html>

the javascript:-

// global variable for position of the scrolling window
var pos=180;
var pos2 = 180;
function SlotsScroll() {
  obj=document.getElementById("SlotsText");
  pos -= 1;
  if (pos < 0-obj.offsetHeight+130)
    {
    pos = 180;
    }
  obj.style.top=pos;
  window.setTimeout("SlotsScroll();",20);
}
function TablesScroll() {
obj=document.getElementById("TablesText");
  pos2 -= 1;
  if (pos2 < 0-obj.offsetHeight+130)
    {
    pos2 = 180;
    }
  obj.style.top=pos2;
  window.setTimeout("TablesScroll();",20);
}
function Scroll() {
if (!document.getElementById) return;
SlotsScroll();
TablesScroll();
}
// Start scrolling when the page loads
window.onload = Scroll;

and finally the style sheet:-

BODY {
     font-family: verdana,arial; 
     background-color: #b4d9fb; 
     background-image: url("../images/Background.jpg"); 
     background-repeat: no-repeat; 
     background-position: top center
     }

#SlotsWindow {
    position:absolute;
    width:47%;
    height:80%;
    top: 125px;
    left: 120px;
    overflow: hidden;
}
#TablesWindow {
   position:absolute;
   left: 450;
   width:47%;
   height:80%;
   top: 125px;
   overflow: hidden;
}

#SlotsText {
   text-align: right;
   font-size: large;
   position: relative;
   right: 30;
   width: 50%;
   left: 65;
   top: 150;
}
#TablesText {
   text-align: right;
   font-size: large;
   position: relative;
   right: 420;
   width: 50%;
   left: 65;
   top: 150;
}

stockton · May 29, 2008

Look at www.stockton.co.za/LeaderBoard to see what I mean.

RichardRotterdam · May 29, 2008

try this , I cleaned it up a bit it had too much for something this small

// global variable for position of the scrolling window
var pos=0;

function Scroll() {

obj=document.getElementById("TablesText");
obj2=document.getElementById("SlotsText");
  	//this is the scroll speed	
pos += 1;
//restart when it is at the top instead of refreshing the page
  	//600 is the heigth it will have when restarting from the bottom you might wanna tweak this	
if (pos>600)
    {
    	pos = pos=getScrollHeight();
    }
  	obj.style.top=pos;
  	obj2.style.top=pos;

  	window.setTimeout("Scroll();",20);
}
//this function gets the height to scroll
function getScrollHeight(){
var tablesTextHeight=document.getElementById("TablesText").offsetHeight*-1;

//now lets set those global vars so it will start from the bottom
return tablesTextHeight;
}
// Start scrolling when the page loads
window.onload = function(){
//now lets set those global vars so it will start from the bottom
pos=getScrollHeight();
//lets start scrolling
Scroll();
}

stockton · May 29, 2008

Dj Kat thank you for your input. However it is now scrolling from the top to the bottom rather than from the bottom up....:-) See www.stockton.co.za/LeaderBoard

RichardRotterdam · May 29, 2008

oops i thought thats what you wanted. but here is the reversed verion

// global variable for position of the scrolling window
var pos=0;

function Scroll() {

obj=document.getElementById("TablesText");
obj2=document.getElementById("SlotsText");
  	//this is the scroll speed	
pos -= 1;
//restart when it is at the top instead of refreshing the page
  	//600 is the heigth it will have when restarting from the bottom you might wanna tweak this	
if (pos<getScrollHeight())
    {
    	pos=180;
    }
  	obj.style.top=pos;
  	obj2.style.top=pos;

  	window.setTimeout("Scroll();",20);
}
//this function gets the height to scroll
function getScrollHeight(){
var tablesTextHeight=document.getElementById("TablesText").offsetHeight*-1;

//now lets set those global vars so it will start from the bottom
return tablesTextHeight;
}
// Start scrolling when the page loads
window.onload = function(){
//now lets set those global vars so it will start from the bottom
pos=180;
//lets start scrolling
Scroll();
}

stockton · May 29, 2008

Thank you again.

Now what would be really neat is to get #1 to immediately follow #250.

Do you think that that could be done?

RichardRotterdam · May 29, 2008

it is possible just little bit tricky without any type of javascript framework. that requires the complete list to be copied and pasted at the end.

but in steps this how to do it.

1. clone the tables with data.

2. copy this clone and paste this at the end of the original.

3 check when the clone is scrolled and delete the original.

4 clone the clone and this at the end.

but yeah thats pretty advanced javascript.

stockton · May 29, 2008

Thank you Dj Kat

Sign In

Verticle scrolling text

Recommended Posts

stockton

Link to comment

Share on other sites

stockton

Link to comment

Share on other sites

RichardRotterdam

Link to comment

Share on other sites

stockton

Link to comment

Share on other sites

RichardRotterdam

Link to comment

Share on other sites

stockton

Link to comment

Share on other sites

RichardRotterdam

Link to comment

Share on other sites

stockton

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information