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

AngularJS Dynamically change height based on width

I have a table printed via ng-repeat, and my goal is to make every single td in tbody square. All the tds are equal in width, so I only need to check the first one to make changes. However, the page is dynamic so the width of table and therefore the td will change on window resize.
I have stylesheet in head.
<style type="text/css">.squerify>tr{height:60px;}</style>
This is used to change the height via:
document.styleSheets[1].cssRules[0].style.height=document.querySelector('.squerify td').offsetWidht+"px";
This works on its own, but I wonder how to get angular to tell me, that the td has changed its width (here I was thinking about the 'onresize' on window event).
Well, onresize might work now, but how about the initialization?
I have not found a way to let angular to tell me that it finished all its work.
PS.: The table is in view, if that changes anything...
The questions are as follow:
Is there a better way to check for the page resize in angular?
What to use for the initialization of table?

For everyone who would like to know how to do square elements:
We need a base element (div will do it) give it class (I will use square), this one will be square:
<div class="square"></div>
We put an img tag inside: (the "data:..." is needed, don't remove it, it is 1x1px transparent img)
We need a bit of css:
.square img{
width: 100%;
height: auto;
border: 0;
}
.square *:not(img){
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
That is it, easy right?

How to print scrollable DIV content

There is a website that I would like to print the div content of. The problem is that the div is scrollable and I'm not able to print all the content. I've tried display:none on all the divs except the one I want to print and then used the Awesome Screenshot extension for Google Chrome but it won't scroll just that div.
I've read about using Javascript in the HTML, I'm guessing, but I don't know how to use that code. It's not my website so how do I inject that code so that it will print the content?

I'm not sure what website you're using - but in IE you can open up F12 Developer tools, find the div you want to display, and modify the style on the fly:
{
display: block;
width: auto;
height: auto;
overflow: visible;
}
It would then cause the div to display all it's content, without scrollbars... hopefully this helps!

Without seeing the page or knowing its layout, it's hard to know what to suggest that won't look horrible.
But, if hiding all other content (in a print stylesheet, I assume) works, you may then be able add:
#media only print {
#idOfYourDiv {
width: auto;
height: auto;
overflow: visible;
}
}
to show all the contents at once.

Make all parents visible
I've struggled some hours with this and finally noticed the problem was that some of the parent tags where preventing the div to be fully visible, and instead a scrollbar from some parent tags was being visible on the print.
So the final effective solution was to apply all the rules (mentioned in other answers) to all possible parent tags that could be in the middle, including also an !important rule so they wouldn't be bypassed.
Like this:
#media print {
body, .CLASS-of-parent-tag, #ID-of-div-with-long-content {
display: block !important;
position: relative !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
margin-left: 0 !important;
}
}
This applies for almost any case in my projects.

**DANGEROUS APPROACH**
Use this JS function:
Printable DIV is div1
function printpage(){
var originalContents = document.body.innerHTML;
var printReport= document.getElementById('div1').innerHTML;
document.body.innerHTML = printReport;
window.print();
document.body.innerHTML = originalContents;
}

My answer is based on the ones given by #Porschiey and #Paul Roub with a slight addition.
Their given solution did work for me in most cases except for some where the <div> that I wanted to print had a CSS set to position: fixed. In the resulting print, this would usually contain only the content that was able to fit in the actual size of the <div> on the loaded page.
So, I also had to change the position CSS attribute to something like relative so that everything could get printed. So, the resulting CSS that worked for me is this:-
{
display: block; /* Not really needed in all cases */
position: relative;
width: auto;
height: auto;
overflow: visible;
}

Google messages updated their divs. Use this:
(function() {
var originalContents = document.body.innerHTML;
var printReport= document.querySelector("body > mw-app > mw-bootstrap > div > main > mw-main-container > div > mw-conversation-container > div > div > div > mws-messages-list")
document.body.innerHTML = printReport.innerHTML;
document.body.style.display = 'block';
document.body.style.overflow = 'visible';
window.print();
document.body.innerHTML = originalContents;
}())

In case if someone just want to print the scrollable list, use your mouse to select the scrollable list, right click on selected content and print. Ctrl+A or select all or just right click without selection might not work, so you must select the list from start to end to be able to print on multiple pages

Add scroll bar to appending box

I have a box on my webpage that you can drag an image onto and it will show it's details of the image that are stored in my database. The box appends when images are loaded into it but I'm wondering how I could add a scroll bar to my box instead of it appending all the way down the screen. Here is my JS code:
$("#drop").append("<span><img id='t"+id+"' src='images/"+pick[id].src+"' title='"+
pick[id].desc+"' alt='"+
pick[id].alt+"' class='thumb' /> "+pick[id].desc+", Price £"+
pick[id].price+"</span><br />");
and my CSS:
#drop{
float:right;
margin-left:2%;
width:30%;
background-color:9CF;
}
thanks for the help

Not exactly sure what you're asking but maybe this could help. Give the #drop element a fixed height and add the overflow property to its style.
#drop{
float:right;
margin-left:2%;
width:30%;
height: 300px; // Or whatever satisfies you.
overflow-y: auto;
background-color:9CF;
}