Develop Reference

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):
Link Text Here
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:
LINK HERE
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...

Button behind table appears when user scrolls past all rows

I want to display a large table to users. To ensure they see all the data before they proceed to the next step I want to hide the "Next" button in a way that it will only be visible after the user has scrolled past all the rows.
I would also like it to look like the button was hiding behind the table all along, instead of having the button pop in and out of existence.
So far I have experimented with fixed positions and z-indexes like this:
<div id="container>
<table id="table" class="table">
<!-- a lot of rows, asynchronously bound with images in some cells -->
</table>
<button id="button" class="nextButton">
next
</button>
</div>
and with css:
.nextButton {
position: fixed;
bottom: 0px;
right: 0px;
z-index: -1;
}
.table {
background-color: white;
width: 100%;
}
Now the button is not accessible if the table is larger than the window, as the page's content height does not take into account the button's height. So I try to increase artificially the height with code such as
$(window).load(function() {
var height = $("#button").height();
$("#container").height("+=" + height);
});
JSFiddle (note that you must resize the "Result" pane so that it is small enough for the table to hide the button) but I have run into issues.
The first issue is that I would much prefer do this declaratively. Second, The button cannot be clicked as even though it is visible, the browser seems to believe I am clicking the div. Lastly, all this resides in an angular project, and window.ready doesn't seem to always trigger properly.
What am I doing wrong?

The fixed sized button may not make the document grow, but you can use margin of the table to do so.
Give your table margin-bottom with value larger than or equal to the buttons's height:
.table {
background-color: white;
width: 100%;
margin-bottom:50px;
}
Here is the fiddle

Jquery Scrollable, is it possible to customize it with a scroll bar?

Jquery Scrollable is a tool by Jquery Tool that scrolls a list of images/videos
http://jquerytools.org/demos/scrollable/
But I am just wondering, has anyone of you tried to customize it with a scroll bar. What I mean is we want to use Jquery scrollable for the following page
http://www.space.ca/Face-Off.aspx
But we want to keep the scroll bar in the bottom, rather than using the left and right arrow to scroll through the video carousel.
Would that be possible? If you have done a customization of JQuery Scrollable and using the scroll bar , Please share some tips with me
Many thanks

You could archive this using plain css:
<div class="scrollMe">
<div>Do what ever you want</div>
</div>
And then just make sure you css is in order:
.scrollMe {
overflow-x: hidden;
overflow-y: scroll;
white-space: nowrap; /* this is important for you, this means that you will keep everything in a single line which will make this guy scroll on the y-axis. If you need multiline on the childs you need to set: white-space: nowrap; on the childs */
}
And all your block level childs needs display: inline-block;:
.scrollMe > div {
display: inline-block;
}

page not redrawing on horizontal scroll

When I shrink the width of my browser window (Firefox v26) so that only 1/2 of my home page is shown, the horizontal scrollbar appears on the bottom of the browser, which is fine.
But if I scroll the page to see its right half -- that right half is blank. In other words, after horizontally scrolling to the right (which moves the page's content leftward, obviously) -- the right side of the page does not redraw. It stays blank. Even if I hit the refresh on the browser URL bar.
I looked around and saw several posts. This one seemed to be exactly the same problem (only difference was, theirs involved the vertical scrollbar).
So I took the suggestion there -- which was to set my outermost content div (called wholePageDiv in the code below) and also my outerDiv to 'min-width: 100%" but this changed nothing.
Here's the very simple code:
<html>
<body>
<div id="wholePageDiv" class="wholePageDivForCentering">
<div id="outerDiv" style="margin: 0; margin-top: 10px; min-width: 100%;
display: inline-block; overflow: hidden">
(not shown: a bunch of divs with text)
</div>
</div>
</body>
<html>
Here is the wholePageDivForCentering CSS class, with the change made per that SO post I read:
.wholePageDivForCentering
{
/* width: 100%; */
min-width: 100%;
/* height: 100%; */
min-height: 100%;
white-space: nowrap;
margin: 0 auto;
}
I have looked at other websites to see if they exhibit the same "right side of scrolled page does not redraw" problem. On other websites I tested, I shrink the browser to 1/2 the width needed to show the whole page, then I scroll to see the right 1/2 of the page -- all other websites I check are successfully redrawing the right-side content as I scroll.
Do I have a CSS style problem above?
EDIT: I hit F12 in my browser and use the 'Inspector' tool and I clearly see that the only visible content is within the wholePageDiv and this div is not expanding at all, to the right, as I scroll to the right -- the Inspector shows that for whatever reason my outermost wholePageDiv is remaining the same fixed size as the viewport, and when I scroll to the right, this viewport outline as shown by the Inspector simply shifts leftward and does not expand on the right side to accommodate moving the scrollbar to the right.

I have added your html and css in a fiddle and it scrolls fine for me. The text of the div is displayed with no issues: http://jsfiddle.net/micahSan/UucLB/3/
same code as the OP
Can you replicate your problem in a fiddle so we can all see it?

I solved this (for now) by either hard-coding the div's width, or by programmatically increasing the div's width as the width of the browser window/document was changed. Hopefully will find a less kludgy solution later.

How can I stop the spry menu from wrapping when zooming in and out with the browser?

I have been to the end of the internet and back trying to solve this. Here is the page withe the spry menu. You will notice some inline styling to get it to fit the design of 980px wide.
The HTML
Here is the spry CSS.
[CSS][2]

I set this in firebug:
ul.MenuBarHorizontal {
width: 1200px;
}
Which shows the navigation menu is wider than 980, which is why it is wrapping around. You need to strip off five or ten pixels from the padding or margins of your menu items.
ul.MenuBarHorizontal a {
padding: 9px 20px;
}
Seems to work well. And actually, you can take that second padding value up to 26px without it wrapping around.