Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    May 2011
    Posts
    124
    Thanks
    12
    Thanked 6 Times in 6 Posts

    Change position: fixed to position:absolute

    I need to convert a position:fixed element to position:absolute when the user resize their browser window below 1000px.

    Right now it does nothing. The element always keeps the fixed positioning even after resizing the window.

    Here's what I have right now:

    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
    <base href="http://www.area51entertainment.co/" />
    <title>Emoto <?php echo "$section"; ?></title>
    <meta charset="UTF-8" /> 
    <meta name="verify-v1" content="" />
    <meta name="keywords" content=""  />
    <meta name="description" content="" />
    <meta name="author" content="Andrew McCarrick" />
    <meta name="robots" content="index, follow" />
    <style type="text/css">
    body,html {
    background: #FFFFFF; /* Old browsers */
    color: #000000; 
    font-family: Verdana; 
    margin-right:auto;
    margin-left:auto;
    max-width:1000px;
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    }
    </style>
    <link rel="stylesheet" href="emoto/style.css" media="screen" />
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" href="http://www.area51entertainment.co/TouchIcon.png" />
    <link rel="apple-touch-icon-precomposed" href="http://www.area51entertainment.co/TouchIcon.png" /> 
    <link rel="image_src" href="./logo.png" /> 
    <script language="javascript" src="emoto/float.js"></script>
    
    </head>
    <body>
    <div class="wrapper">
    <div id="header_float">
    <div class="header_wrapper">
    <div class="logo">
    Picture
    </div>
    <div class="links">
    Home | Settings | Notifications | Requests | Messages | Search Bar
    </div>
    <div class="links_right">
    Profile Link/Sign-Out 
    </div>
    </div>
    </div>
    <div class="content_wrapper">
    Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 
    Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 
    Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 
    Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 T
    est2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2
    </div>
    </div>
    </body>
    </html>
    style.css
    Code:
    a:link {color: #FFFFFF; text-decoration: none;}
    a:visited {color: #FFFFFF; text-decoration: none;}
    a:active {color: #FFFFFF; text-decoration: none;}
    a:hover {color: #3399FF; text-decoration: none;}
    
    .wrapper{
    min-height: 2000px;
    min-width: 1000px;
    }
    
    #header_float{
    width: 100%;
    min-width: 1000px;
    height: 35px;
    left:0;
    right:0;
    top:0;
    position: fixed;
    background: #49963A;
    z-index: 1000;
    }
    
    .header_wrapper{
    width: 1000px;
    height: 35px;
    margin-right:auto;
    margin-left:auto;
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #FFFFFF;
    }
    
    .logo{
    float: left;
    width: 150px;
    height: 25px;
    font-size: 26px;
    position: relative;
    top: -1px;
    left: 8px;
    }
    
    .links{
    float: left;
    width: 670px;
    height: 25px;
    position: relative;
    top: 7px;
    }
    
    .links_right{
    float: right;
    width: 180px;
    height: 25px;
    position: relative;
    top: 7px;
    }
    
    .content_wrapper{
    position: relative;
    top: 35px;
    width: 995px;
    min-height: 450px;
    }
    
    img{
    border: 0px;
    }
    float.js
    Code:
    if (screen.availWidth<=999)
    document.getElementById('header_float').style.position = 'absolute';
    else
    document.getElementById('header_float').style.position = 'fixed';
    Last edited by HDRebel88; 05-18-2012 at 09:40 PM.

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    screen.availWidth is the width of screen
    http://www.w3schools.com/jsref/prop_screen_width.asp
    not the browser window
    Code:
    if (window.innerWidth)
            {
            screenWidth=window.innerWidth;
            }
      else if (document.documentElement && document.documentElement.clientWidth)
            {
             screenWidth=document.documentElement.clientWidth;
            }        
      else if(document.body)
            {
            screenWidth=document.body.clientWidth;
            }

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,983
    Thanks
    56
    Thanked 557 Times in 554 Posts
    may go without saying, but some sort of window resize event listener type of arrangement would be handy here, too

  • #4
    Regular Coder
    Join Date
    May 2011
    Posts
    124
    Thanks
    12
    Thanked 6 Times in 6 Posts
    Quote Originally Posted by DaveyErwin View Post
    screen.availWidth is the width of screen
    http://www.w3schools.com/jsref/prop_screen_width.asp
    not the browser window
    So then it should be:

    Code:
    if (window.innerWidth)
            {
            screenWidth=window.innerWidth;
            }
      else if (document.documentElement && document.documentElement.clientWidth)
            {
             screenWidth=document.documentElement.clientWidth;
            }        
      else if(document.body)
            {
            screenWidth=document.body.clientWidth;
            }
    		
    if (screenWidth<=999)
    document.getElementById('header_float').style.position = 'absolute';
    else
    document.getElementById('header_float').style.position = 'fixed';
    or no?

    Guessing not because that's not working either.

  • #5
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    <body onresize="resized()">

    so then it should be

    Code:
    function resized(){
    if (window.innerWidth)
            {
            screenWidth=window.innerWidth;
            }
      else if (document.documentElement && document.documentElement.clientWidth)
            {
             screenWidth=document.documentElement.clientWidth;
            }        
      else if(document.body)
            {
            screenWidth=document.body.clientWidth;
            }
    		
    if (screenWidth<=999)
    document.getElementById('header_float').style.position = 'absolute';
    else
    document.getElementById('header_float').style.position = 'fixed';
    }

  • Users who have thanked DaveyErwin for this post:

    HDRebel88 (05-18-2012)

  • #6
    Regular Coder
    Join Date
    May 2011
    Posts
    124
    Thanks
    12
    Thanked 6 Times in 6 Posts
    Quote Originally Posted by DaveyErwin View Post
    <body onresize="resized()">

    so then it should be

    Excellent. Works perfectly. Thanks.

    Is there anyway to get the onresize attribute out of the body tag though? Maybe some how call it via javascript? If not it's fine I guess. But I noticed facebook does the same thing, and I can't find an onresize attribute in their HTML code anywhere.

  • #7
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    window.onresize=resized;
    function resized(){
    if (window.innerWidth)
    {

  • #8
    Regular Coder
    Join Date
    May 2011
    Posts
    124
    Thanks
    12
    Thanked 6 Times in 6 Posts
    Quote Originally Posted by DaveyErwin View Post
    window.onresize=resized;
    function resized(){
    if (window.innerWidth)
    {
    Thanks again.


  •  

    Posting Permissions

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