CODEWITHSUNDEEP
javascriptjqueryhtml
thatidiotguy
thatidiotguy

Reputation: 9011

How can I retrive what height and width of a web page are currently in the user's browser?

I am trying to have a pop up video player. Would use fancybox, but they went non-commercial, and my use case is relatively simple. Basically I am creating a div that cover the whole page in a black background with enough opacity to still see all the content. I want to position a youtube video (via iframe hard link insertion) at the user's current location on the page (height wise) over this "overlay" div. Basically, I do not want to put this video at a height locationon the page the user will have to scroll to.

I looked through the jquery library, including browser and support and did not see anything of note. Is there a method I am missing? It could be a Javascript solution by the way, I just happen to be using JQuery for everything else so stylistically, ya know.

EDIT:

I am trying to put this new div (containing the iframe code) at the location the user's browser viewport currently is, NOT determine the height of the document, or the height of the browser's viewport.

Upvotes: 2

Views: 182

Answers (4)

Ed Bayiates
Ed Bayiates

Reputation: 11230

Use $(window). For example:

console.log($(window).height());
console.log($(window).width());

Try it as you resize the browser window, you will see it change.

If you want to get the position the window viewport is scrolled to, use $(window).scrollTop() and $(window).scrollLeft().

If you want to get the position of a particular element, use $("#myid").position() (relative to offset parent) or $("#myid")offset() (relative to document).

Upvotes: 3

vol7ron
vol7ron

Reputation: 42149

.height() or .outerHeight() should both work:

http://jsfiddle.net/hL3cv/

$(window).height();
$(window).outerHeight();
$(window).width();
$(window).outerWidth();

Upvotes: 1

insomiac
insomiac

Reputation: 5664

jquery Height Documentation

jquery Width Documentation

To get document height :
$(window).height();

To get document width :
$(window).width();

Upvotes: 1

Nick
Nick

Reputation: 6025

I use PrettyPhoto. It's not too large, and if you are comfortable with JavaScript, you can strip out any unneeded code to make it even more compact.

Upvotes: 0

Related Questions