www.webdeveloper.com
Results 1 to 4 of 4

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

  1. #1
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167

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

    (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
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  2. #2
    Join Date
    Nov 2003
    Location
    Worthington, OH, USA
    Posts
    3,634
    This should be close:

    Code:
    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;
    }
    54 68 65 42 65 61 72 4D 61 79

  3. #3
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    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:
    Code:
    <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>
    Last edited by KDLA; 01-08-2009 at 12:48 PM.
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  4. #4
    Join Date
    Nov 2003
    Location
    Worthington, OH, USA
    Posts
    3,634
    Noticed you took out the lines that read:
    Code:
    	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.
    54 68 65 42 65 61 72 4D 61 79

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles