Change css positioning using javascript

Question

This code works perfectly as i expected but the problem is when i refresh the page the t_con stays in absolute which should be fixed and when i resize the window less than 980px it is in absolute like what i need and if i resize again more than 980px it goes fixed.

i need it to stay fixed from start. I dont know why it is in absolute at first.

HTML CODE

<div id="t_con">
<div id="t">

</div>
</div>

CSS CODE

#t_con{
width:100%;
position:absolute;
top:0;
}
#t{
margin:0px auto 0 auto;
background-color:#976398;
width:980px;
height:30px;
}

Javascript CODE

window.onresize = function(){
var pos = window.outerWidth < 980 ? 'absolute' : 'fixed';
document.getElementById('t_con').style.position = pos;
}window.onresize=function(){
var header=document.getElementById('t');
var window_width = document.body.offsetWidth;
if(window_width < 980){
header.style.position="absolute";
}else{
header.style.position="fixed";
}
}

Can anyone tell what i am doing wrong in here. And i don't want to use jQuery for this. So pls dont suggest it. The reason i dont like jQuery is it already takes 90kb plus the code we are trying to execute.

t_con.innerWidth what the heck is t_con, you named it header, and you should probably check the window, right ? — adeneo
– adeneo, Commented Apr 13, 2013 at 1:08
Got the answer guys... I made amistake in the code and it was noted to me by adeneo. — Kishore Kumar
– Kishore Kumar, Commented Apr 13, 2013 at 1:23

adeneo · Accepted Answer · 2013-04-13 01:17:45Z

4

window.onresize = function(){
    var pos = window.outerWidth < 980 ? 'absolute' : 'fixed';
    document.getElementById('t_con').style.position = pos;
}

FIDDLE

edited Apr 13, 2013 at 1:17

answered Apr 13, 2013 at 1:12

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kishore Kumar Over a year ago

if i resize the window it is not changing to absolute. it stays fixed.

adeneo Over a year ago

You had a typo, it's getElementById, with the last d in lowercase.

Kishore Kumar Over a year ago

oh thank you i am an idiot i made this simple mistake and was about to cry for not working. thank you so much.

Kishore Kumar Over a year ago

can you relook my question pls @adeneo

Adidi · Accepted Answer · 2013-04-13 01:12:33Z

0

window.onresize=function(){
var header=document.getElementByID('t_con');
var window_width = document.body.offsetWidth;
if(window_width < 980){
    header.style.position="absolute";
}else{
    header.style.position="fixed";
}
}

answered Apr 13, 2013 at 1:12

Adidi

5,2835 gold badges27 silver badges30 bronze badges

1 Comment

Kishore Kumar Over a year ago

can you relook my question pls @adidi

Collectives™ on Stack Overflow

Change css positioning using javascript

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related