We Keep Coding

live browser size detection

This code only works based on the size of the browser at the time of loading, just wondering what could I implement for it get the current browser size and work based on that current information.
I have tried wrapping it in resize() but it causes it behave strangely, i.e the toggle goes on and off continuously , or when loading in a shrunk browser it doesnt work at all.
Its a responsive site where the footer menu is just static links on a large screen but turns into drop menu on small screen.
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;
}
if(myWidth < 980) {
$("#footer h3").click(function () {
$(this).toggleClass("active");
$(this).parent().find("ul").slideToggle('medium');
});
}

var myWidth = 0, myHeight = 0;
function getSize(){
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;
}
}
getSize(); // run first time
$(window).resize(function(){
getSize(); // do it on resize
});
$("#footer h3").click(function () {
getSize(); // not needed but good to have
if(myWidth < 980) {
$(this).toggleClass("active");
$(this).parent().find("ul").slideToggle('medium');
}
});

You should use css media queries instead:
#media only screen and (max-device-width: 980px) {
// css goes here...
}
OR include conditional style sheets:
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />
Here is a great article disusing responsive design

Try something like this:
var waitForFinalEvent = (function () {
var timers = {};
return function (callback, ms, uniqueId) {
if (!uniqueId) uniqueId = "Don't call this twice";
if (timers[uniqueId]) clearTimeout (timers[uniqueId]);
timers[uniqueId] = setTimeout(callback, ms);
};
})();
$(window).resize(function(){
waitForFinalEvent(function(){
// put all your code here
}, 20, "resize"); // replace 20 with every milliseconds to execute during
// resize
})
The code you put in there will execute every time the window resizes, simply using resize() won't always work because it doesn't necessarily check as you're resizing.

Get page height in JS (Cross-Browser)

What is the best way to get the actual page (not window) height in JS that is cross-browser compatible?
I've seen a few ways but they all return different values...
self.innerHeight
or
document.documentElement.clientHeight
or
document.body.clientHeight
or something else?
One way of doing it which seems to work is :
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );

Page/Document height is currently subject to vendor (IE/Moz/Apple/...) implementation and does not have a standard and consistent result cross-browser.
Looking at JQuery .height() method;
if ( jQuery.isWindow( elem ) ) {
// Everyone else use document.documentElement or document.body depending on Quirks vs Standards mode
// 3rd condition allows Nokia support, as it supports the docElem prop but not CSS1Compat
var docElemProp = elem.document.documentElement[ "client" + name ],
body = elem.document.body;
return elem.document.compatMode === "CSS1Compat" && docElemProp ||
body && body[ "client" + name ] || docElemProp;
// Get document width or height
} else if ( elem.nodeType === 9 ) {
// Either scroll[Width/Height] or offset[Width/Height], whichever is greater
return Math.max(
elem.documentElement["client" + name],
elem.body["scroll" + name], elem.documentElement["scroll" + name],
elem.body["offset" + name], elem.documentElement["offset" + name]
);
nodeType === 9 mean DOCUMENT_NODE : http://www.javascriptkit.com/domref/nodetype.shtml
so no JQuery code solution should looks like:
var height = Math.max(
elem.documentElement.clientHeight,
elem.body.scrollHeight, elem.documentElement.scrollHeight,
elem.body.offsetHeight, elem.documentElement.offsetHeight)

var width = window.innerWidth ||
html.clientWidth ||
body.clientWidth ||
screen.availWidth;
var height = window.innerHeight ||
html.clientHeight ||
body.clientHeight ||
screen.availHeight;
Should be a nice & clean way to accomplish it.

Try this without jQuery
//Get height
var myWidth = 0, myHeight = 0;
if (typeof (window.innerWidth) == 'number') {
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
Hope this helps you.

Making DOM IE Friendly

How can I make this script IE friendly? The only parts that aren't IE friendly are the variables scrolledtonum and heightofbody...
function getheight() {
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;
}
var scrolledtonum = window.pageYOffset + myHeight + 2;
var heightofbody = document.body.offsetHeight;
if (scrolledtonum >= heightofbody) {
document.body.scrollTop = 0;
}
}
window.onscroll = getheight;
function func() {
window.document.body.scrollTop++;
}
window.document.onmouseover = function () {
clearInterval(interval);
};
window.document.onmouseout = function () {
interval = setInterval(func, 20);
};
var interval = setInterval(func, 20);

The mozilla MDN documentation for scrollY contains sample code for dealing with compatibility issues with pageYOffset: https://developer.mozilla.org/En/DOM/Window.scrollY.
It says the following:
For cross-browser compatibility, use window.pageYOffset instead of window.scrollY, except use
(((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop
when window.pageYOffset (and window.scrollY) is undefined.

Detecting and acting on scroll to bottom of page event

http://dabbler.org/home/asdf/scrolling/test.html
Does anyone see anything wrong with this code?
I can't figure out what is wrong with it, but my intentions are such that when the user hits the bottom of the page, the page scrolls to the top.
Thanks.

You missed a closing parenthesis:
function getheight() {
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;
}
var scrolledtonum = window.pageYOffset + myHeight - 16;
var heightofbody = document.body.offsetHeight;
if (scrolledtonum = heightofbody) {
alert('asdf!')
}
//???? } <--
Here is a working version with some code fixes: http://jsfiddle.net/maniator/8zhmg/

On your last line you have
if (scrolledtonum = heightofbody)
That should be
if (scrolledtonum == heightofbody)
Not sure if that'll be the problem though

Your missing a closing tag on your function! (at the very end!)
Argh.. #Neal beat me to it!

MSIE Browser height?

Does anyone know how to get the browser height in IE7+ with javascript? I've seen several ways to get the document or the body height but this is not the same. window.innerHeight works fine in firefox and other browsers, but ie doesnt seem to support it. Thanks

var windowWidth = -1, windowHeight = -1;
if(typeof(window.innerWidth) == 'number') { //Non-IE
windowWidth = window.innerWidth;
windowHeight = window.innerHeight;
} else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { //IE 6+ in 'standards compliant mode'
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
}
That's worked pretty well for me.

To determine the actual size of the browser window, use the following properties:
Mozilla based browswers
window.innerWidth
window.innerHeight
Microsoft Internet Explorer
document.body.offsetWidth
document.body.offsetHeight
Here is some code that I use:
var winW = 630, winH = 460;
if (navigator.appName.indexOf("Microsoft") == -1) {
if (navigator.appName=="Netscape") {
winW = window.innerWidth;
winH = window.innerHeight;
}
if (navigator.appName.indexOf("Microsoft") != -1) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
}