Scrolling Table

@JiblobMay 26.2006

Hello,

How can I make a table (within another table cell) scroll up and down being horizontally central of the page but keep it bound by the table cell?

You’ll see what I mean on this image I created…
~~[url]~~http://www.quizzer.eu/box.html[/url]

I would like it so that the moving tables stay nearest to the users focus as possible. On the page linked to above, there are two movable cells, so I would like both to be as near to the users vision as possible (so the bottom one would be at the top of the boundary when the page is loaded)

Sadly I have no previous knowledge of Javascript…. but I know a lot of other website languages so I shall be able to integrate it.

Thanks for any help

– Luke

to post a comment

JavaScript

6 Comments(s) _↴

@phpnoviceMay 26.2006 — #Sounds like you want a contract programmer. Of course, you could make the time to take a complete [URL=http://www.webreference.com/programming/javascript/diaries/]JavaScript Tutorial[/URL] and, thereby, improve your own coding abilities. Otherwise, if you don't get any bites on your project here, you could always post it at RentACoder.com -- where the bids on your project can get kinda low due to bidders also from India. ?

Cheers.

@vwphillipsMay 26.2006 — #

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 <head>
 <title></title>
 
 <script language="JavaScript" type="text/javascript">
 /*<![CDATA[*/
 // Remain in Middle (26-May-2006) Draft
 // by Vic Phillips http://www.vicsjavascripts.org.uk
 
 var zxcEvt=0;
 var zxcSAry=[];
 
 function zxcRetainMiddle(zxcid){
 var zxcargs=zxcRetainMiddle.arguments;
 for (var zxc0=0;zxc0<zxcargs.length;zxc0++){
 zxcSAry.push(document.getElementById(zxcargs[zxc0]));
 }
 zxcMiddle();
 }
 
 function zxcMiddle(){
 for (var zxc0=0;zxc0<zxcSAry.length;zxc0++){
 zxct=zxcDocS()[1]-zxcPos(zxcSAry[zxc0].parentNode)[1]+zxcWWHS()[1]/2-zxcSAry[zxc0].offsetHeight;
 if (zxct<zxcSAry[zxc0].parentNode.offsetHeight-zxcSAry[zxc0].offsetHeight&&zxct>0){
 zxcSAry[zxc0].style.top=(zxct)+'px';
 }
 }
 }
 
 function zxcDocS(){
 var zxcsx,zxcsy;
 if (!document.body.scrollTop){ zxcsx=document.documentElement.scrollLeft; zxcsy=document.documentElement.scrollTop; }
 else { zxcsx=document.body.scrollLeft; zxcsy=document.body.scrollTop; }
 return [zxcsx,zxcsy];
 }
 
 function zxcPos(zxcobj){
 zxclft=zxcobj.offsetLeft;
 zxctop=zxcobj.offsetTop;
 while(zxcobj.offsetParent!=null){
 zxcpar=zxcobj.offsetParent;
 zxclft+=zxcpar.offsetLeft;
 zxctop+=zxcpar.offsetTop;
 zxcobj=zxcpar;
 }
 return [zxclft,zxctop];
 }
 
 function zxcWWHS(){
 var winww,zxcwh,zxcws,zxcwc;
 if (document.all){
 zxcCur='hand';
 zxcwh=document.documentElement.clientHeight;
 zxcww=document.documentElement.clientWidth;
 zxcws=document.documentElement.scrollTop;
 if (zxcwh==0){
 zxcws=document.body.scrollTop;
 zxcwh=document.body.clientHeight;
 zxcww=document.body.clientWidth;
 }
 }
 else if (document.getElementById){
 zxcCur='pointer';
 zxcwh=window.innerHeight-20;
 zxcww=window.innerWidth-20;
 zxcws=window.pageYOffset;
 }
 zxcwc=Math.round(zxcww/2);
 return [zxcww,zxcwh];
 }
 
 
 function zxcEventAdd(zxco,zxct,zxcf){
 if (zxco.addEventListener){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
 else if (zxco.attachEvent){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
 else {
 var zxcPrev=zxco['on'+zxct];
 if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
 else { zxco['on'+zxct]=zxco[zxcf]; }
 }
 }
 
 function zxcAddEvt(zxcobj,zxcfun,zxcevt){
 if (zxcobj[zxcevt+'add']){ return; }
 zxcobj['zxcaddEvt'+zxcEvt]=window[zxcfun];
 zxcobj[zxcevt+'add']=true;
 zxcEventAdd(zxcobj,zxcevt,'zxcaddEvt'+zxcEvt);
 zxcEvt++;
 }
 
 zxcAddEvt(window,'zxcMiddle','scroll');
 
 
 /*]]>*/
 </script>
 </head>
 
 <body onload="zxcRetainMiddle('S1','S2');" >
 <table border="1">
 <tr height=400>
 <td width=120 valign="top">
 <div id="S1" style="position:relative;top:0px;width:100px;height:100px;background-color:silver;" >
 </div>
 
  </td>
  <td width=500 >2</td>
 </tr>
 </table>
 
 <table border="1">
 <tr height=1400>
 <td width=120 valign="top">
 <div id="S2" style="position:relative;top:0px;width:100px;height:50px;background-color:red;" >
 </div>
 
  </td>
  <td width=500 >2</td>
 </tr>
 </table>
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 </body>
 
 </html>[/CODE]

@JiblobauthorMay 26.2006 — #Wow! That is amazing! Thankyou so much, I have been able to full integrate it in to my site.

Thank you ?

@JiblobauthorMay 26.2006 — #Although there is one problem...

I expect, being Javascript and different browsers that the code may be incompatible with different browsers, but is there a way to make it so that none of the code is run in incompatible browsers?

I suppose that I can just add navigator.appName == "Netscape" || "Opera" around the codes within the functions to prevent the codes from working... fingers crossed... I'll try that first

Thanks

- Luke :rolleyes:

@JiblobauthorMay 26.2006 — #It appears to work OK in netscape but Opera shows the object at the bottom of the cell... it is sort of working, but its showing off the screen and not in the middle.

Would it be possible to make this code put the box at the top of the browser window and a way to make it so that the box remains at the top of the cell for browsers that can't use the code?

Thanks

- Luke

@vwphillipsMay 27.2006 — #I test with latest versions of IE and Mozilla FireFox

suggest yo only initialise script with browsers you are happy with

further investigation will require payment

see for latest version

[URL]http://www.vicsjavascripts.org.uk/RetainCenterMiddle/RetainCenterMiddle.htm[/URL]

Also in #JavaScript _↴

Hot to get different iframe id from php Are Javascript snippets all I need ???Inserting RSS Feeds - Wrong Links! Help!

Success!

Help @Jiblob spread the word by sharing this article on Twitter...

Tweet This

Scrolling Table

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Scrolling Table

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴