29 users online (1 members and 28 guests)  


  Results 1 to 15 of 15

Related

  1. Hyperlink table cell    Forum: HTML Forum
    Replies: 11
  2. table cell background    Forum: CSS Forum
    Replies: 3
  3. manipulate table cell    Forum: Javascript Forum
    Replies: 3
  4. table - cell hyperlinking    Forum: HTML Forum
    Replies: 3
  1. #1
    davidgriff's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2005
    Posts
    19

    Question Scroll bar in table cell help

    First of all, thanks to all who have unwittingly helped me by helping others on the forums.

    My current problem deals with a scroll bar in a table cell. The table holds an image gallery and is made up of three columns. Left column is site navigation bar, middle is full size image and right is thumbnails with a vertical scroll bar. The images are loaded dynamically from urls in a MySQL database. There are two recordsets on the page, one for the full image so it can be filtered to the one image using a URL parameter from a link tied to the thumbnails. The second recordset is for the thumbnails to allow all to be displayed in a repeating region. So far everything works beautifully....except whenever I load a new full size image by clicking on a thumbnail the scroll bar returns to the top. Seeing as how there are currently 70 images in the gallery this can get quite annoying. Is there a way to hold the scroll bar in place when the page is loaded with a new URL parameter for the main image?

    Thanks in advance,

    David

  2. #2
    davidgriff's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2005
    Posts
    19

    Re: Scroll bar in table cell help

    If it helps, here is the code for the cell in question.

    <td width="105" rowspan="6"><div style="height:455px; width:100px; overflow:auto;">
    <%
    While ((Repeat1__numRows <> 0) AND (NOT rsthumbs.EOF))
    %>
    <table width="30">
    <tr>
    <td><a href="index.asp?Image_ID=<%=(rsthumbs.Fields.Item("Image_ID").Value)%>#1"><img src="<%=(rsthumbs.Fields.Item("Thumbnail_Path").Value)%>" border="0"></a></td>
    </tr>
    </table>
    <%
    Repeat1__index=Repeat1__index+1
    Repeat1__numRows=Repeat1__numRows-1
    rsthumbs.MoveNext()
    Wend
    %></div></td>

  3. #3
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662

    Re: Scroll bar in table cell help

    Hi, and welcome to the forums.

    I'm not sure if there are two scrollbars there from your description, but as a guess try removing the #1 from the href="" and see if that helps.

    If I have the wrong end of the stick, please post a link so I can see the page in action.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  4. #4
    davidgriff's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2005
    Posts
    19

    Re: Scroll bar in table cell help

    Dean,

    Thanks for the reply. The #1 is there so make sure the page is always at the bottom so that if for some reason someone is viewing on a very low res screen they wouldn't have to scroll down to the pictures everytime. I've tried taking that out to no avail. Unfortunately I don't have a live server to post the page to yet as I'm still somewhat early in the development stage. The third column of the table contains the thumbnail images as well as a DIV tag wrapped around the repeat region to give the vertical scroll bar. I've seen it suggested in other areas that using JavaScript my be my solution, but alas I have no idea how to code it. In other posts I've seen folks making reference to posTop for getting the current position of the scroll bar, but no real advice for a complete newbie as to how to implement it. Ideally I'd like to include some what to read out the position of the scroll bar at the time of click and apply that position as the page "reloads" with the new main image. Hopefully that can clarify the problem without the live site. If not, I'll work on setting up a temp server shortly.

    Thanks again,

    David

  5. #5
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662

    Re: Scroll bar in table cell help

    Hrmm. I'll need the code, no need for a temp server.

    Could you post the "View Source" output from your browser? I do not need the actual source, and the server-side code, just the resultant HTML.

    Oh, and use the ]code[ ]/code[ tags (with the square brackets reveresed)
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  6. #6
    davidgriff's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2005
    Posts
    19

    Re: Scroll bar in table cell help

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>test gallery</title>
    <link href="../global.css" rel="stylesheet" type="text/css">
    
    
    
    			<script language='javascript' src='http://127.0.0.1:1028/js.cgi?caw&r=18467'></script>
    
    <script language="JavaScript" src="../rollover.js" type="text/JavaScript"></script>
    
    </head>
    
    <body onLoad="MM_preloadImages('../imgs/Port_button_ov.jpg','../imgs/Headshts_button_ov.jpg','../imgs/Stock_button_ov.jpg','../imgs/login_button_ov.jpg','../imgs/contact_button_ov.jpg')">
    <table width="726" border="0" align="center">
      <tr>
        <td><img src="../imgs/ghostbanner.jpg" width="726" height="85"></td>
      </tr>
    </table>
    <table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="145" height="100"><a href="../port" target="_top" onClick="MM_nbGroup('down','group1','port','',1)" onMouseOver="MM_nbGroup('over','port','../imgs/Port_button_ov.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img src="../imgs/Port_button.jpg" alt="" name="port" width="145" height="31" border="0" onload=""></a></td>
    
        <td width="475" height="500" rowspan="5"><table width="460" height="460" border="0" align="center" cellpadding="1" cellspacing="1">
          <tr>
            <td width="441" height="455"><div align="center"><a name="1"></a><img src="thoreau/imgs/thoreau001.jpg"></div></td>
          </tr>
        </table></td>
        <td width="105" height="500" rowspan="5"><div id="thumbs" style="height:455px; width:100px; overflow:auto;">
    	
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=1#1"><img src="thoreau/thmbs/thoreau001.jpg" border="0"></a></td>
    
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=2#1"><img src="thoreau/thmbs/thoreau002.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
    
              <td><a href="index.asp?Image_ID=3#1"><img src="thoreau/thmbs/thoreau003.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=4#1"><img src="thoreau/thmbs/thoreau004.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
    
            <tr>
              <td><a href="index.asp?Image_ID=5#1"><img src="thoreau/thmbs/thoreau005.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=6#1"><img src="thoreau/thmbs/thoreau006.jpg" border="0"></a></td>
            </tr>
          </table>
    
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=7#1"><img src="thoreau/thmbs/thoreau007.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=8#1"><img src="thoreau/thmbs/thoreau008.jpg" border="0"></a></td>
            </tr>
    
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=9#1"><img src="thoreau/thmbs/thoreau009.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=10#1"><img src="thoreau/thmbs/thoreau010.jpg" border="0"></a></td>
    
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=11#1"><img src="thoreau/thmbs/thoreau011.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
    
              <td><a href="index.asp?Image_ID=12#1"><img src="thoreau/thmbs/thoreau012.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=13#1"><img src="thoreau/thmbs/thoreau013.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
    
            <tr>
              <td><a href="index.asp?Image_ID=14#1"><img src="thoreau/thmbs/thoreau014.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=15#1"><img src="thoreau/thmbs/thoreau015.jpg" border="0"></a></td>
            </tr>
          </table>
    
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=16#1"><img src="thoreau/thmbs/thoreau016.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=17#1"><img src="thoreau/thmbs/thoreau017.jpg" border="0"></a></td>
            </tr>
    
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=18#1"><img src="thoreau/thmbs/thoreau018.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=19#1"><img src="thoreau/thmbs/thoreau019.jpg" border="0"></a></td>
    
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=20#1"><img src="thoreau/thmbs/thoreau020.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
    
              <td><a href="index.asp?Image_ID=21#1"><img src="thoreau/thmbs/thoreau021.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=22#1"><img src="thoreau/thmbs/thoreau022.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
    
            <tr>
              <td><a href="index.asp?Image_ID=23#1"><img src="thoreau/thmbs/thoreau023.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=24#1"><img src="thoreau/thmbs/thoreau024.jpg" border="0"></a></td>
            </tr>
          </table>
    
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=25#1"><img src="thoreau/thmbs/thoreau025.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=26#1"><img src="thoreau/thmbs/thoreau026.jpg" border="0"></a></td>
            </tr>
    
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=27#1"><img src="thoreau/thmbs/thoreau027.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=28#1"><img src="thoreau/thmbs/thoreau028.jpg" border="0"></a></td>
    
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=29#1"><img src="thoreau/thmbs/thoreau029.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
    
              <td><a href="index.asp?Image_ID=30#1"><img src="thoreau/thmbs/thoreau030.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=31#1"><img src="thoreau/thmbs/thoreau031.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
    
            <tr>
              <td><a href="index.asp?Image_ID=32#1"><img src="thoreau/thmbs/thoreau032.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=33#1"><img src="thoreau/thmbs/thoreau033.jpg" border="0"></a></td>
            </tr>
          </table>
    
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=34#1"><img src="thoreau/thmbs/thoreau034.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=35#1"><img src="thoreau/thmbs/thoreau035.jpg" border="0"></a></td>
            </tr>
    
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=36#1"><img src="thoreau/thmbs/thoreau036.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=37#1"><img src="thoreau/thmbs/thoreau037.jpg" border="0"></a></td>
    
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=38#1"><img src="thoreau/thmbs/thoreau038.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
    
              <td><a href="index.asp?Image_ID=39#1"><img src="thoreau/thmbs/thoreau039.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=40#1"><img src="thoreau/thmbs/thoreau040.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
    
            <tr>
              <td><a href="index.asp?Image_ID=41#1"><img src="thoreau/thmbs/thoreau041.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=42#1"><img src="thoreau/thmbs/thoreau042.jpg" border="0"></a></td>
            </tr>
          </table>
    
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=43#1"><img src="thoreau/thmbs/thoreau043.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=44#1"><img src="thoreau/thmbs/thoreau044.jpg" border="0"></a></td>
            </tr>
    
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=45#1"><img src="thoreau/thmbs/thoreau045.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=46#1"><img src="thoreau/thmbs/thoreau046.jpg" border="0"></a></td>
    
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=47#1"><img src="thoreau/thmbs/thoreau047.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
    
              <td><a href="index.asp?Image_ID=48#1"><img src="thoreau/thmbs/thoreau048.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=49#1"><img src="thoreau/thmbs/thoreau049.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
    
            <tr>
              <td><a href="index.asp?Image_ID=50#1"><img src="thoreau/thmbs/thoreau050.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=51#1"><img src="thoreau/thmbs/thoreau051.jpg" border="0"></a></td>
            </tr>
          </table>
    
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=52#1"><img src="thoreau/thmbs/thoreau052.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=53#1"><img src="thoreau/thmbs/thoreau053.jpg" border="0"></a></td>
            </tr>
    
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=54#1"><img src="thoreau/thmbs/thoreau054.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=55#1"><img src="thoreau/thmbs/thoreau055.jpg" border="0"></a></td>
    
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=56#1"><img src="thoreau/thmbs/thoreau056.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
    
              <td><a href="index.asp?Image_ID=57#1"><img src="thoreau/thmbs/thoreau057.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=58#1"><img src="thoreau/thmbs/thoreau058.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
    
            <tr>
              <td><a href="index.asp?Image_ID=59#1"><img src="thoreau/thmbs/thoreau059.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=60#1"><img src="thoreau/thmbs/thoreau060.jpg" border="0"></a></td>
            </tr>
          </table>
    
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=61#1"><img src="thoreau/thmbs/thoreau061.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=62#1"><img src="thoreau/thmbs/thoreau062.jpg" border="0"></a></td>
            </tr>
    
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=63#1"><img src="thoreau/thmbs/thoreau063.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=64#1"><img src="thoreau/thmbs/thoreau064.jpg" border="0"></a></td>
    
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=65#1"><img src="thoreau/thmbs/thoreau065.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
    
              <td><a href="index.asp?Image_ID=66#1"><img src="thoreau/thmbs/thoreau066.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=67#1"><img src="thoreau/thmbs/thoreau067.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
    
            <tr>
              <td><a href="index.asp?Image_ID=68#1"><img src="thoreau/thmbs/thoreau068.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=69#1"><img src="thoreau/thmbs/thoreau069.jpg" border="0"></a></td>
            </tr>
          </table>
    
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=70#1"><img src="thoreau/thmbs/thoreau070.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=71#1"><img src="thoreau/thmbs/thoreau071.jpg" border="0"></a></td>
            </tr>
    
          </table>
        
          <table width="30">
            <tr>
              <td><a href="index.asp?Image_ID=72#1"><img src="thoreau/thmbs/thoreau072.jpg" border="0"></a></td>
            </tr>
          </table>
        </div></td>
      </tr>
      <tr>
    
        <td height="100"><a href="../headshots" target="_top" onClick="MM_nbGroup('down','group1','head','',1)" onMouseOver="MM_nbGroup('over','head','../imgs/Headshts_button_ov.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img src="../imgs/Headshts_button.jpg" alt="" name="head" width="145" height="31" border="0" onload=""></a></td>
      </tr>
      <tr>
        <td height="100"><a href="../stock" target="_top" onClick="MM_nbGroup('down','group1','stock','',1)" onMouseOver="MM_nbGroup('over','stock','../imgs/Stock_button_ov.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img src="../imgs/Stock_button.jpg" alt="" name="stock" width="145" height="31" border="0" onload=""></a></td>
      </tr>
      <tr>
        <td height="100"><a href="../login.asp" target="_top" onClick="MM_nbGroup('down','group1','login','',1)" onMouseOver="MM_nbGroup('over','login','../imgs/login_button_ov.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img src="../imgs/login_button.jpg" alt="" name="login" width="145" height="31" border="0" onload=""></a></td>
      </tr>
      <tr>
    
        <td height="100"><a href="../contact.html" target="_top" onClick="MM_nbGroup('down','group1','contact','',1)" onMouseOver="MM_nbGroup('over','contact','../imgs/contact_button_ov.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img src="../imgs/contact_button.jpg" alt="" name="contact" width="145" height="31" border="0" onload=""></a></td>
      </tr>
    </table>
    
    </body>
    </html>

  7. #7
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662

    Re: Scroll bar in table cell help

    Ah, now it makes sense. Was hard to visualise.

    To be honest, wouldn't it be easier to have the main image in an iframe? Then just use target="framename" in each of the links and it will not reset as it is not reloading the whole page.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  8. #8
    davidgriff's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2005
    Posts
    19

    Re: Scroll bar in table cell help

    Dean,

    Thanks for the idea. Now I just need to figure out how to implement it. So far my page building bible (Missing Manual) has been a wonderful resource. Unfortunately it barely even mentions iframes. Any good tutorials you can recommend? Can I just wrap the image in an iframe or do I need to create an entirely new page to sit inside the iframe?

    Thanks for all your help.

    David

  9. #9
    davidgriff's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2005
    Posts
    19

    Re: Scroll bar in table cell help

    Ok, so "missing manual" is as useless on this topic as I thought. The link given in the sidebar has a decent amount of info and with a bit of fidgeting and playing the page now works just as I would like. Thank you, thank you, thank you. No more hair pulling for me. Now on to other pages

    David

  10. #10
    davidgriff's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2005
    Posts
    19

    Re: Scroll bar in table cell help

    Dean,

    Any idea how to avoid the flash of white when a new image is loaded. This only happens in IE of course. Opera and Mozilla look absolutely great. I can live with it if need be, but it's just not at clean as can be when using IE. Thanks again.

    David

  11. #11
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662

    Re: Scroll bar in table cell help

    Hiya,

    I assume the flash of white is the background color, try setting the background color in the iframe manually.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  12. #12
    davidgriff's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2005
    Posts
    19

    Re: Scroll bar in table cell help

    Ahh....if only I would do the proper searches before opening my virtual mouth. Seems all I needed to do was set the iframe to ALLOWTRANSPARENCY="true" and no more flash of white in IE. Once again, thanks for all your help Dean. It's folks like you that make these forums such a success.

    David

  13. #13
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662

    Re: Scroll bar in table cell help

    Great. Glad its working.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  14. #14
    ajji's Avatar
    New User

    Status
    Offline
    Join Date
    May 2005
    Posts
    11

    Re: Scroll bar in table cell help

    Hi,

    I just read through this post and I wanted to propose an other solution which might be of some interrest for the automatic positionning in the cell.

    What I would do is to put an id to all the td which contains the images (or directly an ID to the image it is the same)
    Then when the page is reloaded use an onload method that will put the focus on this ID cell, if the id is the same as the one pass to the url it is really easy to do.

    I already implemented it on a test page and it works just fine !!!
    Here is the onLoad code to add (the exemple is done with the focus on image 68 ):

    onLoad="document.getElementById('68').focus()"

    and what to put in your table :

    <table width="30">
    <tr>
    <td id='68'><a href="test.html?Image_ID=68#1"><img src="thoreau/thmbs/thoreau068.jpg" border="0"></a></td>
    </tr>
    </table>

    Here is my full test page reused from the source posted above, the id has been added only for image 68, try it to see the result :


    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>test gallery</title>
    
    </head>
    
    <body onLoad="document.getElementById('68').focus()">
    <table width="726" border="0" align="center">
      <tr>
        <td><img src="../imgs/ghostbanner.jpg" width="726" height="85"></td>
      </tr>
    </table>
    <table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr> 
    
        <td width="475" height="500" rowspan="5"><table width="460" height="460" border="0" align="center" cellpadding="1" cellspacing="1">
          <tr>
            <td width="441" height="455"><div align="center"><a name="1"></a><img src="thoreau/imgs/thoreau001.jpg"></div></td>
          </tr>
        </table></td>
        <td width="105" height="500" rowspan="5"><div id="thumbs" style="height:455px; width:100px; overflow:auto;">
    	
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=1#1"><img src="thoreau/thmbs/thoreau001.jpg" border="0"></a></td>
    
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=2#1"><img src="thoreau/thmbs/thoreau002.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
    
              <td><a href="test.html?Image_ID=3#1"><img src="thoreau/thmbs/thoreau003.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=4#1"><img src="thoreau/thmbs/thoreau004.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
    
            <tr>
              <td><a href="test.html?Image_ID=5#1"><img src="thoreau/thmbs/thoreau005.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=6#1"><img src="thoreau/thmbs/thoreau006.jpg" border="0"></a></td>
            </tr>
          </table>
    
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=7#1"><img src="thoreau/thmbs/thoreau007.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=8#1"><img src="thoreau/thmbs/thoreau008.jpg" border="0"></a></td>
            </tr>
    
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=9#1"><img src="thoreau/thmbs/thoreau009.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=10#1"><img src="thoreau/thmbs/thoreau010.jpg" border="0"></a></td>
    
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=11#1"><img src="thoreau/thmbs/thoreau011.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
    
              <td><a href="test.html?Image_ID=12#1"><img src="thoreau/thmbs/thoreau012.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=13#1"><img src="thoreau/thmbs/thoreau013.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
    
            <tr>
              <td><a href="test.html?Image_ID=14#1"><img src="thoreau/thmbs/thoreau014.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=15#1"><img src="thoreau/thmbs/thoreau015.jpg" border="0"></a></td>
            </tr>
          </table>
    
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=16#1"><img src="thoreau/thmbs/thoreau016.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=17#1"><img src="thoreau/thmbs/thoreau017.jpg" border="0"></a></td>
            </tr>
    
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=18#1"><img src="thoreau/thmbs/thoreau018.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=19#1"><img src="thoreau/thmbs/thoreau019.jpg" border="0"></a></td>
    
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=20#1"><img src="thoreau/thmbs/thoreau020.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
    
              <td><a href="test.html?Image_ID=21#1"><img src="thoreau/thmbs/thoreau021.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=22#1"><img src="thoreau/thmbs/thoreau022.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
    
            <tr>
              <td><a href="test.html?Image_ID=23#1"><img src="thoreau/thmbs/thoreau023.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=24#1"><img src="thoreau/thmbs/thoreau024.jpg" border="0"></a></td>
            </tr>
          </table>
    
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=25#1"><img src="thoreau/thmbs/thoreau025.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=26#1"><img src="thoreau/thmbs/thoreau026.jpg" border="0"></a></td>
            </tr>
    
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=27#1"><img src="thoreau/thmbs/thoreau027.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=28#1"><img src="thoreau/thmbs/thoreau028.jpg" border="0"></a></td>
    
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=29#1"><img src="thoreau/thmbs/thoreau029.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
    
              <td><a href="test.html?Image_ID=30#1"><img src="thoreau/thmbs/thoreau030.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=31#1"><img src="thoreau/thmbs/thoreau031.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
    
            <tr>
              <td><a href="test.html?Image_ID=32#1"><img src="thoreau/thmbs/thoreau032.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=33#1"><img src="thoreau/thmbs/thoreau033.jpg" border="0"></a></td>
            </tr>
          </table>
    
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=34#1"><img src="thoreau/thmbs/thoreau034.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=35#1"><img src="thoreau/thmbs/thoreau035.jpg" border="0"></a></td>
            </tr>
    
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=36#1"><img src="thoreau/thmbs/thoreau036.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=37#1"><img src="thoreau/thmbs/thoreau037.jpg" border="0"></a></td>
    
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=38#1"><img src="thoreau/thmbs/thoreau038.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
    
              <td><a href="test.html?Image_ID=39#1"><img src="thoreau/thmbs/thoreau039.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=40#1"><img src="thoreau/thmbs/thoreau040.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
    
            <tr>
              <td><a href="test.html?Image_ID=41#1"><img src="thoreau/thmbs/thoreau041.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=42#1"><img src="thoreau/thmbs/thoreau042.jpg" border="0"></a></td>
            </tr>
          </table>
    
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=43#1"><img src="thoreau/thmbs/thoreau043.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=44#1"><img src="thoreau/thmbs/thoreau044.jpg" border="0"></a></td>
            </tr>
    
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=45#1"><img src="thoreau/thmbs/thoreau045.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=46#1"><img src="thoreau/thmbs/thoreau046.jpg" border="0"></a></td>
    
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=47#1"><img src="thoreau/thmbs/thoreau047.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
    
              <td><a href="test.html?Image_ID=48#1"><img src="thoreau/thmbs/thoreau048.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=49#1"><img src="thoreau/thmbs/thoreau049.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
    
            <tr>
              <td><a href="test.html?Image_ID=50#1"><img src="thoreau/thmbs/thoreau050.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=51#1"><img src="thoreau/thmbs/thoreau051.jpg" border="0"></a></td>
            </tr>
          </table>
    
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=52#1"><img src="thoreau/thmbs/thoreau052.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=53#1"><img src="thoreau/thmbs/thoreau053.jpg" border="0"></a></td>
            </tr>
    
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=54#1"><img src="thoreau/thmbs/thoreau054.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=55#1"><img src="thoreau/thmbs/thoreau055.jpg" border="0"></a></td>
    
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=56#1"><img src="thoreau/thmbs/thoreau056.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
    
              <td><a href="test.html?Image_ID=57#1"><img src="thoreau/thmbs/thoreau057.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=58#1"><img src="thoreau/thmbs/thoreau058.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
    
            <tr>
              <td><a href="test.html?Image_ID=59#1"><img src="thoreau/thmbs/thoreau059.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=60#1"><img src="thoreau/thmbs/thoreau060.jpg" border="0"></a></td>
            </tr>
          </table>
    
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=61#1"><img src="thoreau/thmbs/thoreau061.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=62#1"><img src="thoreau/thmbs/thoreau062.jpg" border="0"></a></td>
            </tr>
    
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=63#1"><img src="thoreau/thmbs/thoreau063.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=64#1"><img src="thoreau/thmbs/thoreau064.jpg" border="0"></a></td>
    
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=65#1"><img src="thoreau/thmbs/thoreau065.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
    
              <td><a href="test.html?Image_ID=66#1"><img src="thoreau/thmbs/thoreau066.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=67#1"><img src="thoreau/thmbs/thoreau067.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
    
            <tr>
              <td id='68'><a href="test.html?Image_ID=68#1"><img src="thoreau/thmbs/thoreau068.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=69#1"><img src="thoreau/thmbs/thoreau069.jpg" border="0"></a></td>
            </tr>
          </table>
    
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=70#1"><img src="thoreau/thmbs/thoreau070.jpg" border="0"></a></td>
            </tr>
          </table>
        
          <table width="30">
            <tr>
              <td><a href="test.html?Image_ID=71#1"><img src="thoreau/thmbs/thoreau071.jpg" border="0"></a></td>
            </tr>
    
          </table>
        
          <table width="30">
            <tr>
              <td ><a href="test.html?Image_ID=72#1"><img src="thoreau/thmbs/thoreau072.jpg" border="0"></a></td>
            </tr>
          </table>
        </div></td>
      </tr>
    </table>
    
    </body>
    </html>
    I hope this will be of anyuse for you or an other forum member

  15. #15
    davidgriff's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2005
    Posts
    19

    Re: Scroll bar in table cell help

    ajji,

    Thanks for the tip. Unfortunately it doesn't seem to work in either Firefox or Opera. IE likes it just fine though. Plus it puts the targeted image at the bottom of the cell, which could be a bit disconcerting to have the cell jump a bit each time an image is clicked. Could be very useful in other circumstances though.

    David



Tags for this Thread