...

View Full Version : Resolved Change position: fixed to position:absolute



HDRebel88
05-18-2012, 05:28 PM
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:



<!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


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


if (screen.availWidth<=999)
document.getElementById('header_float').style.position = 'absolute';
else
document.getElementById('header_float').style.position = 'fixed';

DaveyErwin
05-18-2012, 05:45 PM
screen.availWidth is the width of screen
http://www.w3schools.com/jsref/prop_screen_width.asp
not the browser window

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;
}

xelawho
05-18-2012, 05:57 PM
may go without saying, but some sort of window resize event listener type of arrangement would be handy here, too

HDRebel88
05-18-2012, 05:59 PM
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:



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.

DaveyErwin
05-18-2012, 06:04 PM
<body onresize="resized()">

so then it should be


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';
}

HDRebel88
05-18-2012, 06:25 PM
<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.

DaveyErwin
05-18-2012, 06:34 PM
window.onresize=resized;
function resized(){
if (window.innerWidth)
{

HDRebel88
05-18-2012, 06:39 PM
window.onresize=resized;
function resized(){
if (window.innerWidth)
{

Thanks again.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum