We Keep Coding

JavaScript - Check if absolute coordinates (left, top, right, bottom) are going to be visible on the current viewport

Hey guys I have an absolute position for an element that will be created in the future. I want to check if the element is going to be entirely visible on the current viewport. I know I could use getBoundingClientRect if the element was rendered on the page, however it's not and it couldn't not be. Is there a way that I can detect if given absolute coordinates (left, top, bottom, right) are going to be visible on the current viewport? Thanks in advance.
Edit:
My solution so far - insert an element with visibility: hidden and use getBoundingClientRect, I was just wondering if there is a better way.

If you have the absolute coordinates of this unrendered element (ie: you can pull them from JS variables, or read them from somewhere, or hard-code them or even write a script to read them out of a <style> tag on the page...), then you can do something like this:
var viewport = {
x : 0,
y : 0,
width : 0,
height : 0,
update : function () {
this.x = document.body.scrollLeft || document.documentElement.scrollLeft;
this.y = document.body.scrollTop || document.documentElement.scrollTop;
this.width = document.documentElement.clientWidth;
this.height = document.documentElement.clientHeight;
}
};
Now you should be able to check for intersections between your element's x,y,width,height against the viewport's x,y,width,height.
Any time the user scrolls, just hit viewport.update();.
I will say this:
This method should be fairly cross-browser compatible, but I really can't make any guarantees in terms of IE6 -- especially in Quirksmode (no <!doctype> on the html file).

Check screen.height and screen.width and compare it to dimensions of the element

Check this out: https://stackoverflow.com/a/1823700/1060487
function alertSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
window.alert( 'Width = ' + myWidth );
window.alert( 'Height = ' + myHeight );
}

Dynamically Resizing Image Maps?

Hope you can help with this problem I've been trying to nut out.
I've found the examples on http://home.comcast.net/~urbanjost/semaphore.html very awesome and work perfectly for what I need.
Only problem is that I'd like the coordinates to dynamically change based on the window size first. The way it works at the moment is that it loads the default coords (works great for resolutions of 1920x1080 but is hugely unaligned on 1024x768) and will then resize on window resize.. I'd like it to detect the size of the browser window for smaller screens first, then display the code accordingly.
Here's my javascript:
<script type="text/javascript" >
//||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| |||||||||||||||||||||||||||||||||||||||||
GLOBAL_AREAS= new Array();
GLOBAL_SUFFIX= "g";
GLOBAL_WIDTH=-1;
GLOBAL_HEIGHT=-1;
GLOBAL_NEW_AREAS= new Array();
//---------------------------------------------------------------------------
function setglobal(){
// place original AREA coordinate strings into a global array, called first time setXY is called
var arrayAreas = document.body.getElementsByTagName("AREA" );
GLOBAL_WIDTH= document.getElementById("tclteam_s1" ).width; // get original width
GLOBAL_HEIGHT= document.getElementById("tclteam_s1" ).height; // get original height
for(var i = 0; i < arrayAreas.length; i++) {
GLOBAL_AREAS[i]= arrayAreas[i].coords;
}
document.body.onresize=setXY('tclteam_s1',XSIZE(),YSIZE());
// alert("GLOBAL_AREAS" + GLOBAL_AREAS );
}
//---------------------------------------------------------------------------
function setXY(elementid,newwidth,newheight){
if (GLOBAL_WIDTH == -1 ){
setglobal();
}
document.getElementById(elementid).width=newwidth;
document.getElementById(elementid).height=newheight;
scaleArea();
}
//---------------------------------------------------------------------------
function XSIZE(){ // get browser window.innerWidth , dealing with ie
var myWidth = 1;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
} else if( document.documentElement && ( document.documentElement.clientWidth ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
} else if( document.body && ( document.body.clientWidth ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
}
return myWidth;
}
//---------------------------------------------------------------------------
function YSIZE(){ // get browser window.innerHeight, dealing with ie
var myHeight = 1;
if( typeof( window.innerHeight ) == 'number' ) {
//Non-IE
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientHeight ) ) {
//IE 4 compatible
myHeight = document.body.clientHeight;
}
return myHeight;
}
//---------------------------------------------------------------------------
function scaleArea() { // using values stored at load, recalculate new values for the current size
var arrayAreas = document.body.getElementsByTagName("AREA" );
message = " "
for(var i = 0; i < arrayAreas.length; i++) {
ii=i+1;
rescaleX= document.getElementById("tclteam_s1" ).width/GLOBAL_WIDTH ;
rescaleY= document.getElementById("tclteam_s1" ).height/GLOBAL_HEIGHT ;
sarray=GLOBAL_AREAS[i].split("," ); // convert coordinates to a numeric array assuming comma-delimited values
var rarray =new Array();
for(var j = 0; j < sarray.length; j += 2) {
rarray[j]=parseInt(sarray[j])*rescaleX; // rescale the values
rarray[j]=Math.round(rarray[j]);
rarray[j+1]=parseInt(sarray[j+1])*rescaleY; // rescale the values
rarray[j+1]=Math.round(rarray[j+1]);
}
message = message + rarray.join("," ) + '\n';
arrayAreas[i].coords=rarray.join("," ); // put the values back into a string
GLOBAL_NEW_AREAS[i]= arrayAreas[i].coords;
}
// alert(rescaleX + " " + rescaleY + "\n" + GLOBAL_WIDTH + " " + GLOBAL_HEIGHT + "\n" + " GLOBAL_AREAS" + GLOBAL_AREAS + "\nSCALED AREAS" + message);
}
//||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
</script>
The following script here detects the browser window size. So I'm hoping to include this in the above so the image map will dynamically resize from the browser window size first:
<script type="text/javascript">
var winW = 630, winH = 460;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}
</script>
Is there a way to code this so it will read the browser window size first (using the code directly above), then load the image map accordingly?

Detect <iframe> height and width from inside the iframe

I doubt this is actually possible but Im prepared to be corrected.
What I need is to be able to detect the width and height of an iframe from within the iframe, so if the iframe src is iframeContent.html I need to be able to surface the values on this page.
I have no control over the page that hosts the iframe only the contents of the iframe.
Is this possible?

You can always get the web page dimensions, no matter if the page is loaded inside an iframe or a new window it always works the same way. This is a function I've found used to get window dimensions, you can also use it to get an <iframe> dimensions.
function alertSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
window.alert( 'Width = ' + myWidth );
window.alert( 'Height = ' + myHeight );
}
source (thanks Andy E for adding the link)
jsFiddle example

Nowadays this is as simple as:
<script>
console.log(innerWidth, innerHeight)
</script>
Just make sure to load this JavaScript from within the iframe and it will print the iframe window's width and height in the browser's console.

JavaScript: How to find out width and height of viewpoint in browser window?

How to find out width and height of viewpoint in browser window? And How to find out how much document scrolled to down and to right?

Try this function... and call it when needed :)
function getViewPortSize()
{
var viewportwidth;
var viewportheight;
//Standards compliant browsers (mozilla/netscape/opera/IE7)
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
// IE6
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}
//Older IE
else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
return viewportwidth + "~" + viewportheight;
}

height = document.body.clientHeight;
width = document.body.clientWidth;
regarding scroll position, I'm not sure if there is a standard way of determining that, however this should work in most browsers:
scrolled = document.body.scrollTop;

Find the exact height and width of the viewport in a cross-browser way (no Prototype/jQuery)

I'm trying to find the exact height and width of a browser's viewport, but I suspect that either Mozilla or IE is giving me the wrong number. Here's my method for height:
var viewportHeight = window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
I haven't started on width yet but I'm guessing it's going to be something similar.
Is there a more correct way of getting this information? Ideally, I'd like the solution to work with Safari/Chrome/other browsers as well.

You might try this:
function getViewport() {
var viewPortWidth;
var viewPortHeight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined') {
viewPortWidth = window.innerWidth,
viewPortHeight = window.innerHeight
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0) {
viewPortWidth = document.documentElement.clientWidth,
viewPortHeight = document.documentElement.clientHeight
}
// older versions of IE
else {
viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
}
return [viewPortWidth, viewPortHeight];
}
( http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/ )
However, it is not even possible to get the viewport information in all browsers (e.g. IE6 in quirks mode). But the above script should do a good job :-)

You may use shorter version:
<script type="text/javascript">
<!--
function getViewportSize(){
var e = window;
var a = 'inner';
if (!('innerWidth' in window)){
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
}
//-->
</script>

I've always just used document.documentElement.clientHeight/clientWidth. I don't think you need the OR conditions in this case.

Try this..
<script type="text/javascript">
function ViewPort()
{
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
var viewsize = w + "," + h;
alert("Your View Port Size is:" + viewsize);
}
</script>

Use this tipp: http://www.appelsiini.net/projects/viewport or that code: http://updatepanel.wordpress.com/2009/02/20/getting-the-page-and-viewport-dimensions-using-jquery/