[RESOLVED] change position of div if screen width is less than 900px

[KDLA]

(I've asked a similar question before, but never got the coding recommended then to work.)

I have a div that is absolutely positioned left: 700px; which works fine in the majority of high resolutions; however, in 800x600 it spills over into the body. I need some javascript that will detect a window/screen size (whether maximized screen or if manually resized) and change the positioning of this particular div to left: 600px;

How do I do that?

Thanks,
KDLA

[TheBearMay]

This should be close:

if(window.attachEvent) {
	window.attachEvent("onload", resizeWin);
	window.attachEvent("onresize", resizeWin);	
} else {
	window.addEventListener("load", resizeWin, false);
	window.addEventListener("resize", resizeWin, false);
}

var resizeTime = new Date() - 5000;
	
function resizeWin() {
	var winHght;
	if (document.innerHeight)//FF
		winHgt = document.innerHeight; 
	else//IE
		winHgt = document.documentElement.clientHeight; 
		
	if (new Date() - resizeTime > 100) resizeTime = new Date();
	else return false;
	
	var winWidth = document.getElementsByTagName("body")[0].clientWidth;

	if (winWidth == 800 && winHght == 600)
		document.getElementById("divToAdjust").style.left="600px"; 
	else
		document.getElementById("divToAdjust").style.left="700px";

	return true;
}

[KDLA]

Thanks, BearMay!
I had to get rid of the height attribute and change the "==" to "<=". It works fine now. Provided below for anyone who needs it:

<script type="text/javascript">
if(window.attachEvent) {
	window.attachEvent("onload", resizeWin);
	window.attachEvent("onresize", resizeWin);	
} else {
	window.addEventListener("load", resizeWin, false);
	window.addEventListener("resize", resizeWin, false);
}

var resizeTime = new Date() - 5000;
	
function resizeWin() {
	var winWidth = document.getElementsByTagName("body")[0].clientWidth;

	if (winWidth <= 800)
		document.getElementById("loginbutton").style.left="600px"; //where you want it if a small screen
	else
		document.getElementById("loginbutton").style.left="780px"; //where you want it for higher resolutions

	return true;
}
</script>

[TheBearMay]

Noticed you took out the lines that read:

	if (new Date() - resizeTime > 100) resizeTime = new Date();
	else return false;

Should be okay in this application, but I had it in there originally to handle the multiple re-firing of the onresize event that IE does. So if it ever looks like you are taking too long to adjust to the resize event in IE you may want to add it back in.