Topic awaiting preservation: Dynamic enable/disable of horizontal scrolling (Page 1 of 1)

I pu to gether a quickie page for my Cousin at http://www.pflaw.net/ and had disabled Horizontal scrolling because I extended a DIV out to 1600 res incase it was viewed from a higher resolution. I left the vertical scroll because I didn't think it distracted from the info on the page and was nessecary for some info.

What I want to know is how I would best go about re-enabling H-scroll if the user viewing has their screen resolution set below 1024x768 but leaving it disabled it is 1024x768 or higher. Scroll is set in Body CSS with overflow-x: hidden.

I didn't want to put a lot of coding into the page as I wanted to keep it pretty simple but I think it needs this just in case.

as mentioned in a previous post in the css forum the best way to to disable the scrollbars cross browser is by using:

html { overflow: hidden }

but if you only want to disable the x or y scrollbars then the overflow-y type method will only work in IE since that is IE proprietry css.

so as you have posted in the js forum I assume you are looking for a js solution - I would recommend that you don't check screen res, but instead check the dimensions of the viewport before then using js to set the overflow style on the html element.

visit my CryoKinesis Online Gallery

No offense, but that much I can figure out for myself. My problem is I am not a Code Monkey. I can usually adapt code but am not very good at coming up with it from scratch. I am looking for something fairly simple. any sites on where I can find something similar going on, how to check for the right conditions and how change the CSS value based on that.

Not a code monkey eh?

Much like me then, my first posts on the forum say exactly the say thing.

I'm still not a code monkey but it gets easier to write javascript, it is surprisingly clear once you start to get the hang of it.

Anyway, I have put together a quick example that should work unless I've made a stupid mistake somewhere. It isn't the prettiest or smallest solution, but it does what is required and if you are trying to pick up js it should be easy for you figure out and customise/edit it to make it work as you want, the principles for checking and style changing are in there.

var reqHeight = 768 // the required viewport sizes

var reqWidth = 1024

// browser sniffing

IE5=NN6=false

if(document.all){IE5=true}

else if(document.getElementById){NN6=true}

// find viewport dimensions

if(IE5){

	yc=Math.round(document.body.clientHeight);

	xc=Math.round(document.body.clientWidth);

}

else if(NN6){

	yc=Math.round(window.innerHeight);

	xc=Math.round(window.innerWidth);

}

// set scrollbar/overflow styles

if(IE5){	

	if (yc >= reqHeight && xc >= reqWidth){

		getElementsByTagName('BODY').style.overflow = 'hidden';

	}

	else if (yc < reqHeight && xc >= reqWidth){

		getElementsByTagName('BODY').style.overflow-x = 'hidden';

	}

	else if (yc >= reqHeight && xc < reqWidth){

		getElementsByTagName('BODY').style.overflow-y = 'hidden';

	}

	else if (yc < reqHeight &#0124; &#0124; xc < reqWidth){

		getElementsByTagName('BODY').style.overflow = '';

	}

}

else if(NN6){

	if (yc >= reqHeight && xc >= reqWidth){

		getElementsByTagName('BODY').style.overflow = 'hidden';

	}

	else if (yc < reqHeight &#0124; &#0124; xc < reqWidth){

		getElementsByTagName('BODY').style.overflow = '';

	}

}

The code can be shrunk down a lot, mostly by setting the reusable parts as seperate objects or variables at the start. But for clarities sake this should be ok, it almost reads as english if you take out all the weird symbols and brackets.

visit my CryoKinesis Online Gallery

Thats great I can usually do pretty good deciphering once I have something that even close to what I am looking for. I don't really plan to mess with the vertical scrolling but I can comment those out. This makes sense and looks good I will givie it a try.

Thanks