I am working on displaying a series of divs one after another. The scrolling works smoothly, but once the last div goes off screen, there is a gap before the first div comes back in view. I want the first div to immediately follow the last div without any gaps in scrolling.
Here's my code:
<script type="text/javascript">
var delayb4scroll=1000
var marqueespeed=1
var pauseit=1
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''
function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+1))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}
function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}
if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee
</script>
<div id="marqueecontainer" onmouseover="copyspeed=pausespeed" onmouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width:243px;">
<?php include 'viewdata.php';?>
</div>
viewdata.php
<?php
mysql_connect(gethostbyname(trim(`hostname`)) , ****, ****) or die ("Please check your server connection.");
mysql_select_db("****") or die("error");
$query = "select * from table1";
$result = mysql_query($query) or die (mysql_error());
$num = mysql_numrows($result);
$flags2=0;$flags=0;
?>
<?php
while($rows = mysql_fetch_array($result)) {
$flags++;
?>
<div class="marqueeElement" style="height:auto;width:220px;text-align:left;font-weight:normal;color: #BF5A14;font-size:70%;position:absolute;padding-left:10px;">
<br><br><font style="font-weight:bold;color:#003399;">col 1 </font>
<br><font style="font-weight:bold;color:#003399;">col 2 </font>
</div>
<div style="height:150px;margin-left:-40px;color:#000000;font-weight:normal;">---------------------------------------------------<br></div>
<?php } ?>
<font style="margin-left:-40px;color:#000000;font-weight:normal;">---------------------------------------------------</font>
The PHP script in viewdata.php fetches data from a database table and displays it within the div elements.