I have a div with many absolute positioned elements inside it. Now I need to get the height of the document to be able to add a margin to the bottom.
This piece of code:
var body = document.body, html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
works fine on desktop. However it doesn't work on mobile devices...
It returns the window height instead of the entire document height.
What I want to do is to add a margin to the bottom which doesn't work because of the absolute positioned elements...
Note:
Due to a strange behavior on tablets and smartphones where fixed elements on the left and right site moved I had to set my main containers overflow property to hidden.
Maybe try JQuery height() method.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Height of document is: " + $(document).outerHeight(true));
});
});
</script>
</head>
<body>
<button>Display the height of document</button>
I found out what the problem was: due to the overflow: hidden it didn't get the entire document.
I solved the problem by searching for the lowest element on the document and adding a margin-bottom to it.
Related
The common ways to get the browser's width are all dependent on whether or not <body> has a scrollbar. For example, window.innerWidth, document.documentElement.clientWidth, $(window).width(), $(window).outerWidth(), etc all return different results for the following 2 cases:
<html>
<body>
<p>No scrollbar.</p>
</body>
</html>
and
<html>
<body>
<p style="height:10000px">Yes scrollbar.</p>
</body>
</html>
$(window).width(), etc, all return a higher value for the first case because the scrollbar's width is subtracted for the second case.
How can I reliably get the browser window's actual width regardless of the scrollbar's existence?
Edit: The suggested possible duplicate's answer says to use $(window).width() while I specifically said $(window).width() doesn't work.
Please try this
I dont know whether this method is correct or no. But you will get actual width 677 of the sample window
$(document).ready(function(){
$("body").css("overflow", "hidden");
alert($(window).width());
$("body").css("overflow", "auto");
});
DEMO
You will get the width of the window with the scroll bar as 677 when there is no overflow. Demo for screen width without scroll bar
You will get the width of the window with the scroll bar as 660 when there is overflow. Demo for scree width with scroll bar.
Here is a nice run down of viewport properties from the Quirks Mode site.
The window.innerWidth is the simplest way of getting this (supported in IE9+ and all other browsers)
// Get the size of the viewport including scrollbars:
var width = window.innerWidth;
console.log('innerWidth=', width);
And here is the MDN documentation on the innerWidth property.
I have an iFrame
<iframe src="pageToLoad.html" onLoad="autoResize(this);"></iframe>
and a script that resize the iframe according to it's content
function autoResize(elem) {
var newheight;
var newwidth;
newheight = elem.contentWindow.document.body.scrollHeight;
newwidth = elem.contentWindow.document.body.scrollWidth;
elem.style.height = newheight + "px";
elem.style.width = newwidth + "px";
}
It's working great!
Except when the iFrame should be smaller than 300px x 150px, than those two values kick in by default.
I created a jsFiddle to display the problem, It seems like 300px x 150px are the default value of an iFrame.
Anyone have an idea how I can fix that, so I can use iFrame with size like 200px x 670px or 980px x 70px ?
I just realized that I need to set the minimal width and height of the iFrame in CSS first (200px x 70px). than if the values returned by scrollHeight/scrollWidth are lower than the default one (300px x 150px) the value returned will be applied.
This works fine in my experience and is not based on a limit. You likely are not managing the height and width of the content page correctly.
Please include the source for pageToLoad.html.
Also: Pro tip for troubleshooting this: HARD CODE the width and height of the iframe first before worrying about javascript.
For example:
<iframe src="pageToLoad.html" style="height: 50px; width: 50px;"></iframe>
Then you can confirm that your browser lets you go smaller than the default width and height independently of testing your javascript. Once you have confirmed that, fix your javascript.
No way of knowing until you post the inner page, but it is possible that your inner page is growing after the iframe loads it. You can also try messing with height and width for the body of your inner page. For example, this pageToLoad.html works with your auto-resize method:
<!DOCTYPE html>
<html>
<head><title>iframe test</title></head>
<body style="height: 50px; width: 50px;">
INNER PAGE
<script>
</script>
</body>
</html>
I have a image and I'm setting its height and width to 90% of the screen size while I am loading the HTML page. Now I want to adjust the image size when I resize the browser. Below is my code -
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function setImageSize() {
document.getElementById('rockImg').height=(screen.height)*.9;
document.getElementById('rockImg').width=(screen.width)*.9;
}
function resizeImageSize() {
document.getElementById('rockImg').height=(document.body.clientHeight)*.9;
document.getElementById('rockImg').width=(document.body.clientWidth)*.9;
}
</script>
</head>
<body onload="setImageSize();" onresize="resizeImageSize();">
<img src="iRock_normal.png" id="rockImg" alt="iRock" onclick="greetByName();" />
</body>
</html>
The problem is, when I restore down the page, image size is getting changed as expected. However when I maximize the page, image height is holding the size same as when I restore down the page. And on each restore down + Maximize image size is getting smaller and smaller. Surprisingly it is happening only for height, not width.
Am I doing something wrong? How can I fix this?
<img src="iRock_normal.png" id="rockImg" alt="iRock"/>
javascript:
var rockImg = document.getElementById('rockImg');
function resize() {
var height = window.innerHeight*.9;
var width = window.innerWidth*.9;
rockImg.height= height;
rockImg.width= width;
}
window.onload = resize;
window.onresize = resize;
Live demo here (click).
Inline js (onlick, etc, in your html) is not good practice - it should never be used. Your code would be easier to debug if you broke things up as I did above. Get the height, then apply the height, so that you can check what height is being calculated. That would have shown you that clientHeight wasn't giving you the value you expected. Further, your element can be cached in a variable so that you don't have to keep typing that long function to find it and hurting performance by searching the dom each time.
I have an html page that contains an iframe loading up some arbitrary page.
<iframe id="siteframe" style="width: 400px; height: 400px;" src="http://www.cnn.com"></iframe>
I want to be able to get the scroll position of the page inside the iframe in javascript/jquery. I am still a bit green when it comes to html/js stuff but I've tried a few different variations of using scrollTop and scrollLeft, but had no success. Here is one that didn't work:
write($("#siteframe").contents().scrollLeft() + ", " + $("#siteframe").contents().scrollTop());
this one doesn't ever write anything (write is a method that just appends to the text on the screen).
if I remove the .contents() like this:
write($("#siteframe").scrollLeft() + ", " + $("#siteframe").scrollTop());
it at least writes something to the screen but it is always 0,0 no matter where the actuall scroll position in the iframe is.
What is the proper way to obtain the x,y position of the content within the iframe in javascript so that my outside page (that contains the iframe) can use it?
According to this stack overflow post, "the conclusion is that anything inside the iframe is not accessible, even the scrollbars that render on my domain." The discussion is extensive. It's simply not possible to get information from a cross doamin iframe unless you have access to the domain.
Here's my failed testing code in case anybody wants to play with it:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<script>
function report() {
var frame_top = $('#siteframe').contents().find('body').scrollTop();
alert(frame_top);
}
</script>
<iframe id="siteframe" name="siteframe" style="width: 400px; height: 400px;" src="http://en.wikipedia.org/wiki/Hello_world"></iframe><br />
<button onclick="report()">Get Coords</button>
</body>
</html>
You may work around by updating the scroll position from child page (inside iframe) to parent page.
// Child page
$(window).scroll(function () {
top.updateScrollPosition($('body').scrollTop(), $('body').scrollLeft());
});
And the parent page
// Main page
var topPos;
var leftPos;
function updateScrollPosition(top, left) {
topPos = top;
leftPos = left;
}
Then use topPos, leftPos wherever you want.
TO get the scroll position use the attributes scrollX and scrollY that exists in the window object.
write($("#siteframe").scrollX + ", " + $("#siteframe").scrollY);
Tested over google Chrome
How to get them by using JS and jQuery?
I know $(window).innerWidth() can get. But I don't hope it contains the width or height of the scroll bar.
Thank you!
From the jQuery website:
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document
If you add overflow:hidden to the body of this page (so there's no scrollbar), then run $(window).width() in a JS console, notice this value increases!
i Have found the best way is with Javascript.
<script type="text/javascript">
var height = document.body.offsetHeight;
var width = document.body.offsetWidth;
//code goes here
</script>
Bear in mind that when you use these, they return an integer so if you are going to use them to apply a style to another object or element then you will have to append them as so:
var newHeight=height + 'px';
var newWidth=width + 'px';