We Keep Coding

Window Resize in jQuery not working correctly

I have the jQuery function below that is meant to remove a class on window load and resize if the width is greater than 992 px and add a class if its less than 992px.
It seems to be working fine however the class stays added if i increase the window size from 992 to 1010px. At 1011px it is removed.
jQuery(document).ready(function($){
$(window).on('resize', function() {
if($(window).width() > 992) {
$('.bid-overlay-booking').removeClass('fancyboxID-booking');
}
else{
$('.bid-overlay-booking').addClass('fancyboxID-booking');
}
}).resize();
});

I wrestled with something similar a while back. Here was my kludge fix.
var windowHeight = 460;
var windowWidth = 800;
if (document.body && document.body.offsetWidth) {
windowHeight = document.body.offsetHeight;
windowWidth = document.body.offsetWidth;
}
if (document.compatMode == 'CSS1Compat' && document.documentElement && document.documentElement.offsetWidth) {
windowHeight = document.documentElement.offsetHeight;
windowWidth = document.documentElement.offsetWidth;
}
if (window.innerWidth && window.innerHeight) {
windowHeight = window.innerHeight;
windowWidth = window.innerWidth;
}
if(windowWidth > 992) {
$('.bid-overlay-booking').removeClass('fancyboxID-booking');
}
else{
$('.bid-overlay-booking').addClass('fancyboxID-booking');
}

Javascript: IE Full height

I have the following code to calculate the window width for a lightbox plugin from this site.
* getPageSize() by quirksmode.com
*
* #return Array Return an array with page width, height and window width, height
*/
function ___getPageSize() {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
if(document.documentElement.clientWidth){
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
return arrayPageSize;
};
I noticed that in Internet Explorer 9, when I click on an image and the Lightbox plugin activates, the transparent back overlay only covers the VIEWABLE height and not the full height.
This creates a problem because, if I have another image with the modified Lightbox plugin and click below the transparent overlay, it opens another empty lightbox window at the top of the page and cannot be closed.
It works fine in Chrome, and Firefox.

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!

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;

Detecting browser client area size on wide screen using javascript

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.