javascript css positioning

Question

Hi all...
i have a problem with my fixed header. when i zoom in or resize the browser, some menu in my header losts/hidden i don't know where..

so this is my code :

    <div id="header">
    <ul>
        <li>Menu 1</li>
        <li>Menu 2</li>
        <li>Menu 3</li>
        <li>Menu 4</li>
     </ul>
</div>

css :

body{
     min-height:1000px;
}
#header{
     position: fixed;
     margin:30px;
}
#header ul{
     display:block;
}
#header ul li{
     float:left;
     list-style-type:none;
     width:110px;
     text-align:center;
     line-height:30px;
     padding-bottom:3px;
     background: #ccc;
}

demo : http://jsfiddle.net/YgvND/1/

I need javascript program to controls css position. My purpose when at zoom in, zoom out or resize the browser so css header position will change into "ABSOLUTE".

sorry on my language. x)
Anyone can help me....
thx..

What browser is this happening with? I'm not seeing anything wrong with your fiddle in Chrome. — Shmiddty, Sep 26 '12 at 19:37

score 0 · Answer 1 · edited May 23 '17 at 11:43

0

i recommend you to use jquery. a good approach to check for resulution changes is described in here

edited May 23 '17 at 11:43

Community

1
1

answered Sep 26 '12 at 19:02

sics

1,298
1
11
24

score 0 · Answer 2 · answered Sep 26 '12 at 20:23

I'm not totally sure I'm understanding your question, but I'll give it a go. It seems to me like you want to position the #header div as absolute when the page is resized. So, use jQuery to look for window resize.

This might be overkill in your situation. This will bind whatever css changes to the #header div as soon as the page is done being resized.

$(window).resize(function() {
  if (this.resizeTO) clearTimeout(this.resizeTO);
  this.resizeTO = setTimeout(function() {
      $(this).trigger('resizeEnd');
  }, 500);
});

$(window).bind('resizeEnd', function() {
  var header = $("#header");
  header.css({
      position: "absolute",
      top: "0px",
      left: "0px"
  });
});

Here's a demo.

Hi SeasonEnds its work.. thx.. but when window back to normal css position still in "ABSOLUTE" not in fixed again?? — bluesvega, Sep 27 '12 at 07:26

javascript css positioning

2 Answers2