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.
Related
Could somebody tell me why this gives an error?
I moved the code into functions to allow me to delay it so it's not so sensitive (was getting annoying)
Uncaught ReferenceError: hideleftnav is not defined
Uncaught ReferenceError: showleftnav is not defined
function showleftnav()
{
$(".leftnavdiv").css('width','500px');
$("body").css('padding-left','510px');
//get measurements of window
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;
}
$('#maindiv').width(myWidth - 540);
}
function hideleftnav()
{
$(".leftnavdiv").width(10);
$("body").css('padding-left','20px');
//get measurements of window
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;
}
$('#maindiv').width(myWidth - 50);
}
$(".leftnavdiv").live({ //code for autohide
mouseenter:
function () {
setTimeout("showleftnav()", 5000);
},
mouseleave:
function () {
setTimeout("hideleftnav()", 5000);
}
});
Looks like you've found one problem with using setTimeout with a string as the first argument. Here's a condensed example illustrating the same problem:
(function() {
function test() {
console.log('test');
}
setTimeout('test()', 500); // ReferenceError: test is not defined
setTimeout(test, 500); // "test"
setTimeout(function() { // "test"
test();
}), 500);
})();
Demo: http://jsfiddle.net/mXeMc/1/
Using the string causes your code to be evaluated with the window context. But since your code is in a callback function, test isn't accessible from window; it's private and restricted only to the scope of the anonymous function.
Referencing the function with just test avoids this problem because you're pointing directly to the function without using eval.
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!
I'm trying to figure out with this isn't working.
It used to take care of height instead of width, but i simply can't get it it work.
Anyone could point me in the right direction of the problem perhaps?
function getWindowWidth() {
var windowWidth = 0;
if (typeof(window.innerWidth) == 'number') {
innerWidth = window.innerWidth;
}
else {
if (document.documentElement && document.documentElement.clientWidth) {
windowWidth = document.documentElement.clientWidth;
}
else {
if (document.body && document.body.clientWidth) {
windowWidth = document.body.clientWidth;
}
}
}
return windowWidth;
}
function Removewhensmall(id) {
if (document.getElementById) {
var windowWidth = getWindowWidth();
if (windowWidth > 0) {
var contentElement = document.getElementById(id);
var contentWidth = contentElement.offsetWidth;
if (windowWidth < 600) {
contentElement.style.display = 'none';
}
}
}
}
window.onload = function() {
Removewhensmall('rightwrap');
Removewhensmall('leftwrap2');
}
window.onresize = function() {
Removewhensmall('rightwrap');
Removewhensmall('leftwrap2');
}
if (typeof(window.innerWidth) == 'number') {
innerWidth = window.innerWidth;
}
shouldn't that be
if (typeof(window.innerWidth) == 'number') {
windowWidth = window.innerWidth;
}
?
And further in the code
var contentWidth = contentElement.offsetWidth;
is defined, but contentWidth is never used again...
Also, you should make use of elseif() to prevent many nested if-clausules.
I've been using the following code to detect browser client area width for ages and it wokred 100% with all browsers, including FF, Safari and various versions of IE. However, now when I switched to a new monitor with widescreen resolution (1280x800) this code fails on IE8. It reports clientwidth of 1024 !!!???
Any ideas how to get the correct client area width ?
function getClientWidth() {
var v=0,d=document,w=window;
if((!d.compatMode || d.compatMode == 'CSS1Compat') && !w.opera && d.documentElement && d.documentElement.clientWidth)
{v=d.documentElement.clientWidth;}
else if(d.body && d.body.clientWidth)
{v=d.body.clientWidth;}
else if(xDef(w.innerWidth,w.innerHeight,d.height)) {
v=w.innerWidth;
if(d.height>w.innerHeight) v-=16;
}
return v;
}
Non-jquery code I used some time ago:
function detectBrowserSize() {
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;
}
alert(myWidth + ' - ' + myHeight)
}
The bits in your code where you check for window.opera and subtract 16 pixels are worrying. comp.lang.javascript's FAQ has a decent implementation of this.
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;
}
}