I am trying to find the correct Javascript code to capture the height of all the content on a webpage.
I have looked at document.height, window.screen.height, document.body.offsetHeight, bodyScroll, clientArea.style.height, bodyHeight, and document.documentElement.clientHeight.
I am using FireBug to test these values but all (except for the window.screen.height) seem to change as I resize my window, so they are not actual reporting the actual height of the content.
Now, the window.screen.height never changes, even if I change to different pages with different sizes.
How can I determine the total height of the content? Basically I need to know what the scroll bar knows. Th scrollbar knows how much to scroll per page and how much to scroll to reach the end of the content.
Any help would be greatly appreciated.
Try this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
document_height = $(document).height();
document_width = $(document).width();
window_height = $(window).height();
window_width = $(window).width();
alert(document_height + ' x ' + document_width);
alert(window_height + ' x ' + window_width);
});
</script>
Different browers report the size of the window and size of the document in different ways. You can use a library to get around the cross browser problems, like this code in jQuery:
$(document).height();
Without a library, I have used this code to get the dimensions:
var b, h, info;
b = document.body;
h = b.parentNode;
if (window.opera) {
info = { winWidth: b.clientWidth, winHeight: b.clientHeight, pageWidth: h.clientWidth, pageHeight: h.clientHeight };
} else {
info = { winWidth: h.clientWidth, winHeight: h.clientHeight, pageWidth: b.clientWidth, pageHeight: b.clientHeight };
}
var height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
Related
Is there any way of getting the full page height including scrollable content?
For example, in the page below I have a height of 613px, but with a lot more content that was scrolled out. If a get the value of document.documentElement.scrollHeight it gives me the same 613px. Is there any way I can actually get the full page height?
EDIT:
I've tried some of the answers, but somehow, for this page I always get the same height (https://material.angular.io/). Does someone know why?
This will give you a height of scrollable area too
(function() {
let pageHeight = 0;
function findHighestNode(nodesList) {
for (let i = nodesList.length - 1; i >= 0; i--) {
if (nodesList[i].scrollHeight && nodesList[i].clientHeight) {
var elHeight = Math.max(nodesList[i].scrollHeight, nodesList[i].clientHeight);
pageHeight = Math.max(elHeight, pageHeight);
}
if (nodesList[i].childNodes.length) findHighestNode(nodesList[i].childNodes);
}
}
findHighestNode(document.documentElement.childNodes);
console.log('You page hight it', pageHeight);
})();
try
window.outerHeight
I think this will help you to get window height with scrollable area.
Similar to #reachtokish, document.querySelector('body').scrollHeight will give you the whole height of the scrollable page
With the developer tools console you can try it for this page
var pageHeight = document.documentElement.scrollHeight;
This looks like this
so I try to get the width of the device using jquery I made responsive website with 2 interface for laptop and mobiles but the problem is it doesn't work in mobile even the dimension of the div test was out of size in mobiles please help me the code that I use for redirecting is below with comments
<html>
<head>
<script src="./js/jquery-3.2.1.js"></script>
</head>
<body>
<div id='test' style=" width: 2.54cm; height:2.54cm;"></div>
//this div dimension works on laptop it measure exactly 2.54cm or 1nch
//using ruler but in mobiles it shrink and out of measure
<script>
//as you see I get the width of the div to get the pixel per inch
var sqw=$('#test').width();
var sqh=$('#test').height();
//and I get the total width of the document
var dheight=$(document).height();
var dwidth=$(document).width();
var w=dwidth/sqw;
//and I divide the total width of the document to pixel per inch
//the problem is the mobile show 10.98 inch where the mobile I use is
//miniFlare S5 cherrymobile with width of just 2.5 inches
if(w<=7) {
window.location.replace("./m_index.php");
} else {
window.location.replace("./d_index.php");
}
</script>
</body>
</html>
Your are using jQuery. From the docs .width() they say:
This method is also able to find the width of the window and document.
// Returns width of browser viewport
$( window ).width(); // <- this is the one you are looking for!
// Returns width of HTML document
$( document ).width();
var dwidth = window.innerWidth;
var dheight = window.innerHeight;
would do the job
You can get cross platform using the following script:
const w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
const h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
please try below code, it may satisfy your requirement
<script>
getScreensize(){
var sqw=$("body,html").width();
if(sqw<768){
//mobile screen logic
}
else{
//desktop screen logic
}
}
$(window).resize(function(){
getScreensize();
})
</script>
I wrote a jQuery Script which checks the window size and increases the outer wrapper to fit perfectly into the users window.
function reSize($target){
$target.css('width', $(window).width()+'px');
}
$(document).ready(function(){
setTimeout(function() {
$(window).bind('resize', reSize($('#blocker')));
$(window).trigger('resize');
while($(window).height() < $('.newcontainer').height()+30){
$('.newcontainer').css('width', $('.newcontainer').width() - 10 +'px');
}
$('#chatfenster').css('height', $('.newcontainer').height() - 260 +'px');
$('#userlist').css('height', $('.newcontainer').height() - 350 +'px');
}, 100);
});
It works very smooth in Chrome and Safari but in Firefox it's freezing and I don't know why. Sometimes I feel like Firefox is the new IE.
http://design.maxxcoon.com/bestlife/webinar_chat/ (don't open this link in firefox because it crashes the browser)
Can anybody help me please?
Thanks in advance
This part is very unreliable:
while($(window).height() < $('.newcontainer').height()+30){
$('.newcontainer').css('width', $('.newcontainer').width() - 10 +'px');
}
You are checking the height of the window against the height of the first element found with a class of newcontainer. As long as the height of the window is smaller than that height plus 30 pixels, you set the width of all elements with class="newcontainer" to 10 less than the width of the first one of them.
If your condition is for one dimension (height) and the changes you make is to another dimension (width), the loop will run either never, or probably forever, or possibly randomly...
If there is a maximum height or a maximum width for your .newcontainer elements, you should instead calculate the allowed values for height or width and set them once, not in a loop! Something like this, maybe:
var windowHeight = $(window).height();
var maximumContainerHeight = windowHeight - 30;
$('.newcontainer').css('height', maximumContainerHeight + 'px');
However, I do not know if you want to set width or height, so I'm guessing.
If what you are doing is really setting the width of something, hoping that the layout engine will affect the height as a side-effect, you are going at this the very wrong way.
Another, better, solution is to use modern CSS solutions, like flexbox, to let the browser automatically handle all layout issues.
Figured it out without a loop.
May be helpful for others.
<script type="text/javascript">
function reSize($target){
$target.css('width', $(window).width()+'px');
}
$(document).ready(function(){
setTimeout(function() {
$(window).bind('resize', reSize($('#blocker')));
$(window).trigger('resize');
var windowSize = $(window).height();
var containerHeight = $('.newcontainer').height();
var containerWidth = $('.newcontainer').width();
if(containerHeight > windowSize){
var pixelToMuch = containerHeight - windowSize;
var divFactor = pixelToMuch * 1.67;
var newWidth = containerWidth - divFactor;
$('.newcontainer').css('width',newWidth+'px');
}
$('#chatfenster').css('height', $('.newcontainer').height() - 260 +'px');
$('#userlist').css('height', $('.newcontainer').height() - 350 +'px');
}, 100);
});
</script>
I am trying to have a container div resize based on the dimensions of the window. The height to width ratio is the most important aspect here and I want to maximize the size of the container in whichever direction (height or width) that is most constraining given the ratio. I have tried a few things unsuccessfully with this being the most recent:
$(window).load(function() {
var h = $(window).height();
var w = $(window).width();
If((h/w)>0.61){
$('#container').css({'height': h, 'width':h*1.64}); }
else{ $('#container').css({'height': w/1.64, 'width':w}); }
})
What do I need to change to get the window to resize? Is there a better way to approach this?
Thanks in advance for any assistance. I am not at all familiar with javascript/JQuery and have been unable to find any useful info... this thing is driving me nuts...
You want to capture the resize event, so assuming your current code works to your likings
$(document).ready(function() {
$(window).resize(function() {
var h = $(window).height();
var w = $(window).width();
if((h/w)>0.61) {
$('#container').css({'height': h, 'width':h*1.64});
}
else {
$('#container').css({'height': w/1.64, 'width':w});
}
});
});
And let's avoid the capital I on the if
I typically use this:
function resize () {
var w = $(window);
var containerWrap = $('#container-wrap');
containerWrap.css({ width:w.width(), height:w.height()});
}
I'm not sure if that answers your ratio question.
EDIT:
This may be more helpful:
$(document).ready(function () {
var missionWrap = $('#mission-wrap');
var w = $(window);
w.on('load resize',function() {
missionWrap.css({ width:w.width(), height:w.height()});
});
});
I'm trying to have an image gallery where a caption is vertically centered inside of a slideshow, here's the code I'm working with
$(window).load(function() {
var imageHeight = $('.flexslider .slides li img').height();
var captionTop = imageHeight - $('.title-cap').height();
var captionTop = captionTop/2;
$('.title-cap').css('top',captionTop + 'px');
var captionTopOne = imageHeight - $('.sub-cap-one').height();
var captionTopOne = captionTopOne/2;
$('.sub-cap-one').css('top',captionTopOne + 'px');
var captionTopTwo = imageHeight - $('.sub-cap-two').height();
var captionTopTwo = captionTopTwo/2;
$('.sub-cap-two').css('top',captionTopTwo + 'px');
var captionTopThr = imageHeight - $('.sub-cap-three').height();
var captionTopThr = captionTopThr/2;
$('.sub-cap-three').css('top',captionTopThr + 'px');
});
The caption is positioned absolutely, and I'm using top to do the centering...
So my thought process is, get the height of the base slideshow image to keep it responsive, minus the height of the current caption, and divide that by two ending with the top value.
The first instance is working, with "title-cap", but the next three are not. They all return the same wrong value. All caption classes have the same attributes, just different for assignment.
Also, what would I need to add in order for the values to dynamically change with the browser window size in real time.
Edit: Alright, did a little research and figured out the load/resize part.
This is what I have now
function setContent(){
[Added all of the above minus the onload part in here]
}
$(window).load(function() {
setContent();
});
$(window).resize(function() {
setContent();
});
Now just not sure why the sub-cap's aren't loading properly. Any ideas?
I've had similar problem when trying to get the size of hidden elements. I found this nice jQuery actual plugin. It might be what you need.