Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

JS scroller - continuous  (no white space between first and last items....

Posted on 2007-08-01
6
Medium Priority
?
341 Views
Last Modified: 2013-11-19
I am looking for a js scroller that worlks like teh following but does not rely on fixed height cells

<html>
<head>
      <title>Untitled</title>
     
<style type="text/css">
#scrollContainer{
      width:300px;
      height:200px;
      overflow:hidden;
      background-color:white;
      //border:1px solid gray;
}

#scrollerTable{
      position:relative;
      top:201px; //1 px greater than scrollContainer height
      left:0px;
      width:100%;
      color:gray;
}

#scrollerTable tr{
      height:45px;
}
</style>
     
<script type="text/javascript" language="JavaScript">
var x=201;//height of scroll container +1
var y=-45;//negative value of line height
var z=2;//movement height
var scrolldelay=50; // time out delay before repeating the movement loop higher=slower, if you increase this you might want to increase the z value
var a=Math.abs(y)+z;//line height + movement height
var pid;
function slideTable(){
      if(x>y){
      x-=z;
      }
      document.getElementById('scrollerTable').style.top=x;
      if(x<=y){
            copyRow0();
            deleteRow('scrollerTable');
            x+=a;
            document.getElementById('scrollerTable').style.top=x;
            pid=setTimeout("slideTable()",scrolldelay);
      }else{
            pid=setTimeout("slideTable()",scrolldelay);
      }
}

function copyRow0(){
      if(document.all){
            tabBody = document.getElementById('scrollerTable').firstChild;
            newChild=tabBody.firstChild.cloneNode(true);
            newRow = tabBody.appendChild(newChild);
      }else{
            table_node=document.createElement('tr');
            table_TD_node=document.createElement('td');
            table_TD_node.innerHTML=document.getElementById('scrollerTable').innerHTML.split('<tr>')[1].split('</tr>')[0];
            table_node.appendChild(table_TD_node);
            document.getElementById('myTBody').appendChild(table_node);
            //alert(document.getElementById('scrollContainer').innerHTML);
      }
     
     
     
}

function deleteRow(objTbl){
      document.getElementById(objTbl).deleteRow(0);
}

window.onload=slideTable;
</script>      
     
</head>

<body>
<div id="scrollContainer">
<table id="scrollerTable" border="1" onmouseover="clearTimeout(pid);" onmouseout="pid=setTimeout('slideTable()',scrolldelay);">
      <tbody id="myTBody">
      <tr>
            <td>1</td>
      </tr>
      <tr>
            <td>2</td>
      </tr>
      <tr>
            <td>3</td>
      </tr>
      <tr>
            <td>4</td>
      </tr>
      <tr>
            <td>5</td>
      </tr>
      </tbody>
</table>
</div>
</body>
</html>
0
Comment
Question by:James Rodgers
  • 3
  • 3
6 Comments
 
LVL 63

Accepted Solution

by:
Zvonko earned 2000 total points
ID: 19613155
Here my trick:


<html>
<head>
      <title>Zvonko &#42;</title>
     
<style type="text/css">
#scrollContainer{
      width:300px;
      height:200px;
      overflow:hidden;
      background-color:white;
      //border:1px solid gray;
}

#scrollContent{
      position:relative;
      top:0px;
      left:0px;
}

#scrollerTable {
      width:100%;
      color:gray;
}
#scrollerTable tr{
      text-align: center;
      background-color: silver;
      height:45px;
}
</style>
     
<script type="text/javascript" language="JavaScript">
var tableHeight;
var moveHeight=2;//movement height
var scrolldelay=50; // time out delay before repeating the movement loop higher=slower, if you increase this you might want to increase the z value
var pid;
var theContent;
var theTab;
function slideTable(){
  theContent.style.top = parseInt(theContent.offsetTop) - moveHeight;
  if(tableHeight+theContent.offsetTop<0){
    theContent.style.top = 0;
  }
  pid=setTimeout(slideTable,scrolldelay);
}

window.onload=function(){
  theContent = document.getElementById('scrollContent');
  theTab = document.getElementById('scrollerTable');
  tableHeight = theTab.scrollHeight;
  theContent.appendChild(theTab.cloneNode(true));
  slideTable();
}
</script>      
     
</head>

<body>
<div id="scrollContainer">
<span id ="scrollContent">
<table id="scrollerTable" onmouseover="clearTimeout(pid);" onmouseout="slideTable()">
      <tbody id="myTBody">
      <tr>
            <td>1</td>
      </tr>
      <tr>
            <td>2<br><br></td>
      </tr>
      <tr>
            <td>3<br><br><br></td>
      </tr>
      <tr>
            <td>4</td>
      </tr>
      <tr>
            <td>5<br><br><br><br></td>
      </tr>
      </tbody>
</table>
</span>
</div>
</body>
</html>
 


0
 
LVL 25

Author Comment

by:James Rodgers
ID: 19616306
nice zvonko

i was a little vague in my question and forgot to mention i needed something crossbrowser compliant, the code i built from what i had in my original post worked on every browser except safari -did weird things in safari windows and didn't work at all in safari mac

if you could point me to some js code that that does it that would be great...

because you did answer what i asked the points are your regardless
0
 
LVL 25

Author Comment

by:James Rodgers
ID: 19617247
can you walk me through the copde you posted i dont see how the appending is continuous or how you are determining the actul height of the items
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 63

Expert Comment

by:Zvonko
ID: 19618562
About Mac I have no experiance, sorry.

My example does the job by a trick. It does not move single rows around like your first version did. It does it like this:
It starts with doubling the table, it appends a second table at the end of first table. For doing that doubling and moving of both tables I invented the scrollContent span. Then it moves the whole content span with that two tables upwardss and looks when first table footer reached the top border of scrollContainer display div. Then it does move the scrollContent span down to zero position that mean the first tab is then again at top. You did not see in the 50 miliseconds that the span slipped down and therefore you need no move around of DOM objects. You see?

0
 
LVL 25

Author Comment

by:James Rodgers
ID: 19621389
iyour code gave me some ideas that let me determine the height of teh cells and then use that value to determine when teh secion cell had reached teh top of teh div... all together i cam up with this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
      <title>Untitled</title>
     
<style type="text/css">
#scrollContainer{
      width:300px;
      height:200px;
      overflow:hidden;
      background-color:white;
      border:1px solid gray;
}

#scrollerTable{
      position:relative;
      top:201px; //1 px greater than scrollContainer height
      left:0px;
      width:100%;
      color:gray;
}

</style>
     
<script type="text/javascript" language="JavaScript">
var sReg_Ex=new RegExp('<\/?td>','ig');
var x=201;//height of scroll container +1
var y=-45;//negative value of line height
var z=2;//movement height
var scrolldelay=100; // time out delay before repeating the movement loop higher=slower, if you increase this you might want to increase the z value
var a=Math.abs(y)+z;//line height + movement height
var pid=setTimeout("slideTable()",scrolldelay);


function slideTable(){
      y=-1*document.getElementById('scrollerTable').rows[1].cells[0].offsetTop;
      a=Math.abs(y);
      if(x>y){
      x-=z;
      }
      document.getElementById('scrollerTable').style.top=x;
      if(x<=y){
            copyRow0();
            deleteRow('scrollerTable');
            x+=a;
            document.getElementById('scrollerTable').style.top=x;
            pid=setTimeout("slideTable()",scrolldelay);
      }else{
            pid=setTimeout("slideTable()",scrolldelay);
      }
}

function copyRow0(){
      if(document.all){
            tabBody = document.getElementById('scrollerTable').firstChild;
            newChild=tabBody.firstChild.cloneNode(true);
            newRow = tabBody.appendChild(newChild);
      }else{
                    
            table_node=document.createElement('tr');
            table_TD_node=document.createElement('td');
            table_TD_node.innerHTML=document.getElementById('scrollerTable').innerHTML.split('<tr>')[1].split('</tr>')[0].replace(sReg_Ex,'');
                  table_node.appendChild(table_TD_node);
            document.getElementById('myTBody').appendChild(table_node);
      }
}

function deleteRow(objTbl){
      document.getElementById(objTbl).deleteRow(0);
}


window.onload=slideTable;
</script>      
     
</head>

<body>
<div id="scrollContainer" onmouseover="clearTimeout(pid);" onmouseout="pid=setTimeout('slideTable()',scrolldelay);">
<table id="scrollerTable" border="1">
      <tbody id="myTBody">
      <tr>
            <td>1<br></td>
      </tr>
      <tr>
            <td>2<br><br></td>
      </tr>
      <tr>
            <td>3<br><br><br></td>
      </tr>
      <tr>
            <td>4<br><br><br><br></td>
      </tr>
      <tr>
            <td>5<br><br><br><br><br></td>
      </tr>
      </tbody>
</table>
</div>
</body>
</html>


works in IE, FF, NS, and safari windows, still cant get it to work in safari mac...

thanks
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 19621418
Thanks for the feedback.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

577 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question