How to get page's visual section's width and height? - javascript

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';

Related

In YUI, what is the difference between clientHeight, winHeight, and docHeight?

In a code snippet, I saw lines like this:
var headerHeight = Y.one('#header').get('clientHeight');
var $body = Y.one('body');
this.viewportH = $body.get('winHeight');
this.docHeight = $body.get('docHeight');
As I understand, clientHeight is the same as winHeight, while scrollHeight is the same as docHeight. Is it true? If so, why does YUI gives them different names?
Does anyone have ideas about this? Thanks!
winHeight Returns the inner height of the viewport - exludes scrollbar. it's your browser size (if you resize the browser there will be different values)
docHeight Returns the current height of the document, it's not what appears on screen, but all the page size.
Take a look here and click where is requiring:
http://www.wfimc.org/public/js/yui/3.0.0/examples/node/node-screen_clean.html
clientHeight Return the size of your frame exclude scroolbar:
Take a look on this event: document.getElementById("client").onclick = function(){whatis('client');}
at:
http://jsfiddle.net/shibualexis/yVhgM/3/

View disrupts on Window resize

I've created a page using squares. The squares combine to make a particular word. But when I resize the window, the squares disrupt their place in a haphazard way. How I can change my CSS or javascript so that the squares retain their original positions on window resize?
You can view the page at : http://www.tryst-iitd.com/13/beta
I've included the following code to take care of the resizing, still the problem remains unsolved.
<script type="text/javascript">
$(function () {
var screenWidth = $(window).width() + "px";
var screenHeight = $(window).height() + "px";
$("#container").css({
width: screenWidth,
height:screenHeight,
});
$(window).resize( function () {
var screenWidth = $(window).width() + "px";
var screenHeight = $(window).height() + "px";
$("#container").css({
width: screenWidth,
height:screenHeight,
});
});
});
</script>
The square is disrupted because the width of the container is adjusted automatically whenever you resize your window. Set a fix value or set a minimum width for the square and container should fix the problem. The square width is in %.
Also, the window resize event itself is useless because the div (id=container) is adjusted according to the width of the body tag
Set the position and size of your squares in percentages and your resize code will works fine.
Also, set the min-width/min-height CSS properties will prevent your squares from being too small.
Your problem is that your css margins are fixed width, so even if squares width are in %, margins causes this issues.
As an example, try disabling wrap1 and wrapalphabet css classes, you will see that your design will be much more responsive.
You probably have to rethink the way you deal with margin/padding to get the results you expect.

How to set the height of the div to vertical space of the browser

I have a div which should occupy the remaining vertical space of the browser window. If the content in that div is maximum than the height of the div, it should add scroll bar for that div.
I'm tried something similar to this, but it is of no use
h = $(document).height();
$("#mydiv").attr(height : h);
Try this...
h = $(document).height();
$("#mydiv").css('height', h);
you need the window height :)
$(window).height()
like so:
$("#mydiv").height($(window).height());
You can use either $(window).height() or $(document).height() depending on which is interesting for you.
Height is not a DOM attribute, it is a CSS attribute. But it is nicely abstracted into the height() function so you can use it for setting aswell.
var height_to_set = $(document).height();
$("#mydiv").height(height_to_set);

Get image size using JQuery/ javascript

please tell me how to get image size of all images in the page using jquery or javascript
The only size you can get is the visible size. clientWidth and clientHeight are two DOM properties which do this. Example:
var image = document.getElementById("id");
var width = image.clientWidth;
var height = image.clientHeight;
If you're using jQuery, you can simply use $.width and $.height:
var width = $("id").width();
var height = $("id").height();
So, to get the size of all images, loop them through:
$("img").each(function()
{
console.log(this.width());
console.log(this.height());
});
If you need the real size, please see this question Get the real width and height of an image with JavaScript? (in Safari/Chrome)
$('img').each(function() {
$(this).width(); // current image's width
$(this).height(); // current image's height
});
please tell me how to get image size
of all images in the page using jquery
or javascript
You can use width() and height() method of jQuery:
$('img').each(function(){
alert('width=' + $(this).width() + '\nHeight=' + $(this).height());
});
More Info:
http://api.jquery.com/width/
http://api.jquery.com/height/

jquery (or js general) splitter with dynamic height

There are some ready JavaScript (jQuery) splitters, but they require panels height to be set. The problem is, that my website doesn't support fixed height, it just can't. Other thing is that this container can change it's height dynamicly, so I'd like to this splitter to adjust to the panels height.
Is there a script or a way to avoid that?
My idea was to set container's height the bigger panel's height, like:
var lheight = $("#LeftPanel").height();
var rheight = $("#RightPanel").height();
if(lheight > rheight){
$("#container").css("height", lheight+"px");
} else {
$("#container").css("height", rheight+"px");
}
but this doesn't seems to be a nice way for me.
Do you have any suggestions?
You can pass a new value to .height(), like this:
var h = Math.max($("#LeftPanel").height(), $("#RightPanel").height());
$("#container").height(h);
In this case we're just using Math.max() to get the taller one, and setting the height to that.

Categories

Resources