简体   繁体   中英

How do I horizontal scroll a div table inside an iframe?

So I have a table, inside an iframe, inside another frame, that I would like to be able to scroll horizontally to designated locations by clicking anchor tags that are outside of the frame that it is in. I originally used an inline js method (when the table was different) that worked but now that I have updated to CSS the method is not working. So I'm reaching out to you pro.s out there for help :) Thanks in advance.

Sample code I'm using:

HTML frame I'm using that refers to the frame the table is in:

<iframe src="PrimaryTables.html" id="FrameTableIsIn" name="FrameTableIsIn" scrolling="yes" align="middle" height="1350" width="100%" marginwidth="0" marginheight="0" frameborder="no"></iframe>

HTML Document inside of iframe (FrameTableIsIn):

<div class="container" id="contained">
<table width="100%" cellspacing="1" cellpadding="0" border="0" id="primerows">
<tr>
    <td class="fixed">STUFF HERE</td>
    <td class="fixedspecial"align="center" valign="middle">STUFF HERE THAT OVERLAPS THE PREVIOUS TD STUFF NICELY</td>
    <td>OTHER STUFF HERE REPEATING COLUMNS</td>
</tr>
</table>
</div>

Lots of rows and columns for a really long table handled and works nicely with CSS thus:

<style>
td, th {
    white-space: nowrap;
    min-width: 100px;
    height:32px;
    vertical-align: middle;
}
.container {
    overflow-x: scroll;
    margin-left: 100px;
}
.fixed {
    height:30px;
    border: 1px solid #000000;
    position: absolute;
    left: 0;
    display: inline-table;
    text-align: center;
    vertical-align: middle;
}
.fixedspecial {
    border: 1px solid #000000;
    position: absolute;
    left: 0;
    height:35px;
}
</style>

Inline java like this on page outside of iframe (FrameTableIsIn) that I want to effect document inside of iframe (FrameTableIsIn):

<A HREF="javascript:parent.InitialFrame.FrameTableIsIn.scrollTo(110,0);parent.InitialFrame.scrollTo(0,50);" TARGET="InitialFrame">Link Text Here</A>

With my old table (html 3 or something) I was able to click the link, the page would scroll(jump) the table horizontally to the location designated, then it would scroll(jump) to the top of the page to see the table in the iframe above the link. Now with css, etc. it will scroll the page up, but not scroll the table in the embedded iframe horizontally because the scroll feature is trapped inside the div element and I don't know the proper handle here...

Inline java preferred if possible, all that java scripting stuff clogs up my already crazy/spaghetti coding and reminds me of Pascal really... :) (for those of you who still know what that is :)

So for those who may need to know, there seems to be no way of calling into an iframe to the div table from outside of the iframe with just an inline javascript method. So my solution, which works as my old table did, was to pull the table out of the iframe, id the div (DivTable) and then I was able to get the inline javascript to work thus:

<A HREF="javascript:parent.InitialFrame.DivTable.scrollTo(2580,0);" TARGET="InitialFrame">LINK HERE</a>

Now my links scroll my Div Table with fixed column to the location set by scrollto (x,y). Remember that InitialFrame is the frame that the table and links share now and the target could probably just be (_top) but I haven't messed with it now that it works :). Hope this helps someone in the future...

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM