HDFilmMaker2112 Posted May 17, 2012 Share Posted May 17, 2012 Based on my last thread, I need to convert a positioning style from fixed to absolute based on screen size. Here's what I have; which is currently not changing to absolute when the browser is resized below 1000px. float.js if (screen.availWidth<=1000) document.getElementById('header_float').style.position = 'absolute'; else document.getElementById('header_float').style.position = 'fixed'; <!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 class="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 .header_float{ width: 100%; min-width: 1000px; height: 35px; left:0; right:0; top:0; position: fixed; background: #49963A; z-index: 1000; } Link to comment https://forums.phpfreaks.com/topic/262669-changing-positionfixed-to-positonabsolute/ Share on other sites More sharing options...
trq Posted May 17, 2012 Share Posted May 17, 2012 And your question is? Link to comment https://forums.phpfreaks.com/topic/262669-changing-positionfixed-to-positonabsolute/#findComment-1346296 Share on other sites More sharing options...
HDFilmMaker2112 Posted May 17, 2012 Author Share Posted May 17, 2012 What should I do to make it work, because it's not. The element stays fixed and the javascript seems to have no effect. EDIT: Well I see the issue now, it's because the javascript is looking for an ID, but I'm using class in CSS. Anyway, to use a class in the javascript Something like: document.getElementByClass('header_float').style.position = 'absolute'; Link to comment https://forums.phpfreaks.com/topic/262669-changing-positionfixed-to-positonabsolute/#findComment-1346297 Share on other sites More sharing options...
HDFilmMaker2112 Posted May 17, 2012 Author Share Posted May 17, 2012 Well I changed the div to an id and the div background color has disappeared and it's being treated as if the browser window is below 1000px all the time, even if I enlarge it across two monitors. http://area51entertainment.co/emoto/ Nothing above this point has changed </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> Link to comment https://forums.phpfreaks.com/topic/262669-changing-positionfixed-to-positonabsolute/#findComment-1346305 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.