My website has a bunch of iframes that need sizing. I have been using:
x=window.innerWidth;
y=window.innerHeight;
Thus I know how many pixels I have to work with and things work great. However, now I'm creating a page that scrolls. I need to know the height of the page in pixels (as in how tall the window would need to be so that the content wouldn't scroll). What would be the simplest way to write this using javascript?
document.body.scrollHeight should work...
Related
We used to have a silverlight page that used canvas to scale the page, this resulted in a page that would always be the size of the window it was on, making the whole page smaller if the window was smaller (it does preserve aspect ratio), as if the page was a single png but it isn't, it has dynamic elements. Also when one tries to zoom in or out, it does nothing, it just makes a scroll appear to the right and bottom without affecting the page.
We are migrating the page to HTML 5 with CSS, and we haven't been able to replicate this behavior. It is a page that has 10 small tables and each has 10 "messages" that can appear. When zooming in stuff starts to overlap in addition to change size, when resizing the window,stuff overlaps too but without changing size. Most of the positions are absolute but have % in their position onscreen. However we don't want it to be responsive, we want the behavior of the silverlight version. At least that's what the bosses want.
We have been researching how to do this but so far haven't really found a good solution, especially with messing the zoom functionality of browsers. most pages/forums say this shouldn't be done.
Edit:
For now I have added a bunch of max-width and max-height in the html style and body style, as well as added a media query for switching % left to px left for an absolutely positioned group of objects. However this is by no means whay I seek to accomplish. We need the whole page to behave like an bgimage, scaling every element with the size of the window.
Hi i need get the page size without scrolls.
What´s the minimum and maximum width and height size www.google.com page without scrolls?
I trying document.body.scrollHeight document.body.scrollWidth, but the size depends of size of window of navigator...
What´s the fixed size of page using a javascript function?
Show me an example please.
Modern web design resigned from staticly defined sizing of elements in favor of relative positioning and sizing. If you really need to know the size at a given viewport (i can't thnik of possible use-case for that, perhabs you could clarify what are u trying to achieve) I would recommend parsing the sites' DOM and CSS using PHP f.e. and then design a script that finds proper sizes (absolute are easy, relative can be converted to absolute knowing relative size and viewport dimensions).
As for the scrolls I'm guessing you think about elements with overflow rather than the actual page scrolls - in this case you will have just as many answers as the number of viewers since both browser font-size and type, scaling factor (the zoom that doesn't change the viewport) and things like that make every element relatively sized even despite of one's effort to make it staticly defined.
So I found a problem with my website so have added in
“-webkit-overflow-scrolling: touch”
So that the scrolling left-right now works when content overflows (all the content is within an iframe). However I've noticed that when you scroll either vertically or horizontally within this iframe any content that wasn't initially draw on the page is not shown, it's just white.
Is there something I'm missing?
http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/
This pretty much sums it up, and provides one pretty poor but usable implementation. The fault lies with Apple and this will be a temporary workaround.
Is it possible to use an iframe with a fixed width (.ex. 75%) and a dynamic height? Want I want to achieve is that when the page that is loaded into the iframe, it will not be wider than I have specified, but the lenght needs to be according to the page its content. Is it a page with 5 lines text, the frame will be just big enough to display these 5 lines. Are we loading a large document with 1000 lines, the Iframe height will be automatically adjusted.
Prerequisites:
The url in the frame is on a different domain from the parent.
The code should work on mobile phone browsers too.
Let's try to avoid jQuery if possible. (to make the above faster)
I know you'd like to avoid it, but it really shouldn't slow you down so much that it'd be a burden on your site. I've done far crazier things with jquery and it's handled it like a champ. When talking "dynamic" it's usually a safe bet that you will need to touch some javascript at some point :P
$(selector)[0].scrollHeight
As for making it dynamic? You could setup an interval to adjust the height.
Something like this:
function setHeight(selector){
var contentHeight = $(selector)[0].scrollHeight;
$('#iframe-id').attr('height', contentHeight);
}
Then you either load it on page load or you wrap it in a setInterval.
If it's just the jquery thing and you don't mind javascript, then this site could help you
http://www.mattcutts.com/blog/iframe-height-scrollbar-example/
IFrame height can be manipulated using the page rendering code, or JavaScript...but there is no way for the iframe to dynamically resize based on content.
The link in mplungjan's comment takes you to a really good post about this subject.
There is a link at the bottom. Pretty much what happens, is when the page gets opened, it loads entirely on the right side of the screen. Then when it finishes loading every single element, it moves to the center which is it's actual position.
I believe the problem is caused by javascript, since the site works perfectly fine without it. It doesn't seem to matter what javascript is included, if I leave just 1 of them, the whole thing comes back.
Could really use the help. Also the site right now is about 500 pages big, so I'm really hoping for a solution which can fix this with just a few steps.
Thanks.
Here is the link to the page so you can get css/code: http://bit.ly/3EyoWu
Its definitely javascript. I think the banners on your site are loaded at the very end, which leaves the browser making incorrect guesses about the dimensions of the content until the page is loaded.
Try enclosing your javascript code inside fixed width (and height) divs or tables. You can easily determine the width (and height) required by javascript generated code by inspecting your page after its loaded. If its the banners, they are almost always predefined size.
Edit 1 ----
I got it. The specified cell widths for your table are narrower, the browser therefore is unable to calculate the page layout until the page is rendered completely. A column with width 110px has a banner having width = 120px.
Edit 2 ----
Try specifying widths for all-but-one column. That is, if you have three columns in the suspect table, specify the width for two, and let the browser decide the width for the third. Furthermore, the banners seem to occupy a width of 125px instead of 120px, probably because of unnecessary white space around them. I suggest that you revise the column widths appropriately (and parent table's width if necessary).
This might almost qualify as a 'flash of unstyled content' (FOUC) except that the browser doesn't first render a page in an unstyled format.
Instead, you see styled content before the Javascript is able to add the finishing touches.
You might get some further hints by searching for 'flash of unstyled content'.