#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    2
    Rep Power
    0

    Problems positioning element based on browser width


    I have a fixed position div that I want to have position left: 0 when the browser window is smaller than 1200px, but no left positioning when larger than 1200px. I'm using this code

    Code:
    function checkWidth() {
        var $window = $(window);
        var windowsize = $window.width();
        document.write(windowsize);
        if (windowsize < 1200) {
            document.getElementById("DBCIbox").style.left = "0";
        } else {
            document.getElementById("DBCIbox").style.left = "500px";
        }
    }
    checkWidth();
    $(window).resize(checkWidth);
    but it doesnt seem to be doing anything. I'm setting the left=500px as simply a test to get the javascript working, then I'll worry about where I want to position it.

    I've done some googleing and from what I can tell this should work, what am I missing?

    If theres a way to clear the left positioning attribute I'd like to know that as well.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,115
    Rep Power
    119
    You need to establish a bind for your function; so you need to use the .ready() API. Also, using the JS Global .write() function; was causing an error with your jQuery. Plus; you needed to use "margin-left" and not "left"; as you would only use that (and..., it work accurately), when your element has an "absolute" style positioning. Anyway..., here is the corrected code:
    Code:
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    
    function checkWidth() {
        var $window = $(window);
        var windowsize = $window.width();
        $("body").prepend(windowsize); // do away with document.write() - (1) It's causing errors in your jQuery. (2) It's a XSS security risk to use it.
        if (windowsize < 1200) {
            document.getElementById("DBCIbox").style.marginLeft = 0 + "px";
        } else if (windowsize >= 1200) {
            document.getElementById("DBCIbox").style.marginLeft = 500 + "px";
        }
    }
    
    $("document").ready(function(){
       // onLoad
       $(window).load(function(){
          checkWidth();
       });
       // onResize
       $(window).resize(function(){
          checkWidth();
       });
    });
    
    </script>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    2
    Rep Power
    0
    Thanks for your help! This worked beautifully. I updated it a little to position the way I wanted, but i wouldn't have figured it out without your input. Much appreciated. Here is the code I ended up using, this is a fixed position element BTW.

    Code:
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    
    function checkWidth() {
        var $window = $(window);
        var windowsize = $window.width();
        var position;		
        if (windowsize < 1390) {
            document.getElementById("DBCIbox").style.marginLeft = 0 + "px";
        } else if (windowsize >= 1390) {
    	position = windowsize - 1060;
    	position = position / 2;
    	position = position - 175;
            document.getElementById("DBCIbox").style.marginLeft = position + "px";
        }
    }
    
    $("document").ready(function(){
       $(window).load(function(){
          checkWidth();
       });
    
       $(window).resize(function(){
          checkWidth();
       });
    });
    
    </script>

IMN logo majestic logo threadwatch logo seochat tools logo