I want to access full page width & height in Opera. Note I am not asking about Viewport's height or width, I want page's/document's width & height. I am using Opera 12.12
I have tried the following:
document.body.scrollWidth/Height
document.body.offsetWidth/Height
window.innerWidth/Height
document.body.clientWidth/Height
And all of them gives viewport's width/height.
Please use the following link:
http://jsfiddle.net/RQhYR/
Or use the following HTML Page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<div style="width:2000px;height:2000px;background-color: blue;"></div>
</body>
<script type="text/javascript">
alert(window.outerWidth + "," + window.outerHeight);
</script>
</html>
I'm getting the correct values from body.offsetWidth/Height, body.scrollWidth/Height and body.clientWidth/Height (using the same build as you). Only window.innerWidth/Height is supposed to return browser window viewport.
Maybe you've got some odd CSS that sets the dimensions of the body to the viewport and puts the scrollbar on an element somewhere inside. In your case, I'm getting the expected values of 2000 x 2000 px from the scrollWidth/Height of the <html>, see demo.
Try these on for size:
window.outerHeight;
window.outerWidth;
Thanks to Bergi I got the answer of my question. I have been doing some investigation about Page & Viewport sizes in different browsers and this is what I have found: Google Doc Spreadsheet
Related
So I have this in IE11...
ROUNDED UP (I think...)
console.log($(document).width()); // 808px;
NOT ROUNDED
console.log($("html")[0].getBoundingClientRect().width); // 807.30993px;
ROUNDED DOWN (or to nearest integer)
console.log($("html").width()); //807px;
So apparently, either $(document) and $("html") are the same, and jQuery is rounding the html element down instead of up like the browser. Or IE11 gives the $(document) some extra room, boosting the amount of pixels HIGHER than html?
I thought html was supposed to represent the whole document?
MY QUESTION:
Should they be the same width? Like in Firefox, Chrome, etc.
Here is an answer to a similar question:
In JavaScript, the document keyword is a handle on the object that contains the HTMLDocument.
So they are not the same, document is an object , which also contains html for the page.
Now when you get the width from the html and document.
console.log($("html").width());
gives you the width of the html.
and console.log($(document).width());
gives you the width of visible part of the document, so apperently width of <html> itself, but there is a difference , if you have applied a margin to html, then the width of document is a sum of width of html and the margin applied to it.
See this example http://jsfiddle.net/bbke9n59/
<div style='background:red;height:30px;'></div>
html{
margin:20px;
}
here, in my browser i get,
console.log('html='+$("html").width()); // width 630
console.log('document='+$(document).width());// width 670
Exactly, 40px difference in the width, thats only the margin applied to the html
Now this was all about chrome and firefox,
About IE
IE-9
when I run the same page on IE-9
console.log('html='+$("html").width()); // width 570
console.log('document='+$(document).width());// width 570
No difference in width of html and document( there should have been really)
IE-11
when I run the same page on IE-11
console.log('html='+$("html").width()); // width 517
console.log('document='+$(document).width());// width 557
Exact difference of 40. just as chrome and firefox showed.
So I am no longer able to reproduce the problem of rounding( in any of the browsers), so for me, I guess the problem is not with the rounding up using jquery(if that was the problem then jquery would have rounded up the width for document and html both, and still make them same width)
i have a fixed div on the right of window, what i want to do is when the user resize the window, i want this fixed div not to overlap with the other div by changing it's positioning, i managed to do that when resizing to smaller, but what i want, is when the user also resize the window for higher widths, i want that div to go back to the initial "fixed" state.
Here is the code sample:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).resize(function(){
var pos = $("#div").offset();
var fix = $("#fix").offset();
if(fix.left<950){
$('#fix').css('position','relative');
$('#fix').css('left',fix.left);
$('#fix').css('top',-fix.top);
var available = true;
}
var pos = $("div").offset();
var fix = $("fix").offset();
if(fix.left>950){
$('#fix').css('position','fixed');
$('#fix').css('right','100px');
$('#fix').css('top',fix.top);
}
});
});
</script>
</head>
<body style="margin:0;">
<div id="div" style="width:600px; height:200px; background-color:red; margin-left:300px;"></div>
<div id="fix" style="position:fixed; right:100px; height:100px; width:100px; background-color:yellow; top:100px;"></div>
</body>
</html>
Thanks every one in advance !
As I can see that the action takes place when your window is resized to less that a fixed value or resized to greater than the same value hence
I would Suggest you to use CSS3 Media Queries rather than Script for the Responsive/ Adaptive Web page design.
Please have a look at this
These do not process a lot, hence Light weight and most modern browsers and Devices support CSS3 hence a convenient and reliable Option.
Besides if you target old browsers and need to show rounded corners or other css3 properties not supported by old browsers you may have a look at the CSS3 PIE on the link: css3pie.com
I have no idea why, but clientWidth and clientHeight are always returning zero when I run this from IE in IE9 compat View, or IE7. It works for everything else.
Very simple code snippet with problem (so that you can try it too):
http://jsfiddle.net/nz2DA/
The code snippet found above is as follows...
I have a page containing the following HTML snippet:
<div id='aaa'>aaaaaa</div>
And my javascript to test the clientWidth and clientHeight functions are as follows:
var el = $('#aaa')[0];
alert('Client width and height: '+ el.clientWidth + ' X ' + el.clientHeight);
This always pops up an alert with "0 X 0" when I run in IE7 or IE9 Compatibility mode.
Any help or explanation would really be appreciated. Thanks!
This is happening because of the "hasLayout" property in IE, and your div on its own does not "have layout". For more information, see http://www.satzansatz.de/cssd/onhavinglayout.html
Luckily you can trigger an element to have layout, which is why adding the "float:left" style works in the answer above. There are other triggers you can use too though that don't change the page. This one gives me proper values for clientWidth and clientHeight:
<div id="aaa" style="zoom: 1">aaaaaa</div>
The article says that setting "min-width: 0" should also work but it didn't for me. Setting "display: inline-block" worked OK but that might change your page. You can set these triggers in CSS so that the HTML doesn't need to change at all.
I tested your code and following are the observations.
in IE(sucks!), if you didn't apply any styles for the "aaa" element IE won't calculate any width and height. So JS simply give you 0. But if you look at the box model from the IE dev tool bar you will see some value. So if you use float:left to that element JS will return a value, which is correct and all browsers will give you the same output.
Since you are using jQuery why don't you use width() or outerWidth() or innerWidth(). These methods are generelaized for the every browsers. Simply if you use width() you will see a very large width since you didn't apply any styles. In IE if element doesn't have an float value it gets it's parent width.In your case it's window width.
So if I modify your code to get correct width and height would be:
HTML:
<div id="aaa" style="float:left;">aaaaaa</div>
JS:
var el = $('#aaa')[0];
alert('Client width and height: '+ el.clientWidth + ' X ' + el.clientHeight);
Please let me know if you need more clarifications...
cheers!
Try offsetHeight property of internet explorer.
I have a div element that I'm trying, basically, to move wherever the user clicks on a canvas element.
I have a CSS style for the div setting the position to absolute, with an initial position (top,left).
I have javascript that captures the user's click event, and sets the div element's left and top to the location of the click, and set the text of the div.
My problem is that this worked fine before I set a DOCTYPE on the html file. Now the div stays in the same place, while displaying the new text, and I'm assuming the position issue is something to do with how I'm using CSS.
What's the right way to set the position of a div element? The html goes more or less like this:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#myDiv{
position:absolute;
top:100px;
left:835px;
}
</style>
</head>
<body><canvas id='canv'></canvas>
<div id='myDiv'>-</div>
</body>
</html>
Here's what the javascript looks like, which locates the div for me:
var theDiv = document.getElementById('myDiv');
theDiv.style.left = selShp.pinx; // selShp.pinx is the position of a shape object I've created, which is how I position the shape on the canvas
theDiv.style.top = selShp.piny; // piny is just the y position
Before setting a DOCTYPE, this worked beautifully on Chrome, Firefox, Safari mobile, and Opera. With it set, I can render to the canvas in IE9, but then the positioning of the div in all the browser stops working - just stays in the initial position.
I figured out my problem. My javascript for setting the new position went like this:
var theDiv = getElementByID(...)
theDiv.style.left = selShp.pinx; // selShp is the selected shape object, and pinx is x location (numeric) on canvas
theDiv.style.top = selShp.piny; // piny is y location on canvas (numeric)
This worked fine before I was using the doctype, because apparently the browser was fine with me just giving a number, but I had to change the code to this, and it works:
var theDiv = getElementByID(...)
theDiv.style.left = selShp.pinx.toString() + 'px';
theDiv.style.top = selShp.piny.toString() + 'px';
Stupid, rookie mistake, I guess. My understanding of the solution is, standard HTML requires you to set the left and top as strings, with units specified.
The real problem begins with not using a doctype. A doctype is required of all modern web pages to keep the browser out of 'quirks mode'. In that case, the box model is different than it should be using current web standards. You should read about quirks on Wikipedia or Google for it.
in developing a more complicated script I am having a rather odd problem with Safari. I use 5.0.5 Win if it matters. I rely on jQuery's position().left when the browser window gets resized to reposition a position:fixed element. Depending on wether the window is being enlarged or shrinked I get different results for position().left though because of some odd element being rendered by Safari at that moment (and only at that very moment).
I wrote a demo page that shows the problem.
Load the source below in Safari in windowed mode and shrink the window a bit. The alert will make things freeze so that you will see the the odd element that troubles me in the top left corner of the document.
What on earth is that, where does it come from and how do I get around it?
Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<style type="text/css">
#test{
width:500px;
height:2000px;
margin: 0 auto;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">
// <![CDATA[
function resizeWindow( e ) {
alert($('#test2').position().left);
};
$(window).bind("resize", resizeWindow);
// ]]>
</script>
</head>
<body>
<div id="test"><div id="test2">Something
</div></div>
</body></html>
I figured out what to do to make this stop: Explicitly setting the body's width to 100% by css does it. What the odd element is and why it is injected without this in the first place, I still have no idea though.
body {
width:100%;
}
This solution inevitably adds a horizontal scroll bar. So I added a class
body.safariFix
{
width:100%;
}
and assign that by JS before getting the values I need and afterwards I remove it again.
if ($.browser.webkit) $('body').addClass('safariFix');
...
if ($.browser.webkit) $('body').removeClass('safariFix');
The browser detection part was added because doing this caused an infinite loop in MSIE. This is inside the resize event handler after all and removing / adding the class lets MSIE fire the resize event.
I'm not using feature detection because I don't know which feature to detect for spotting this. Detecting the odd display object would be nice but I did not look into that further.