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
– Shmiddty, Commented Sep 26, 2012 at 19:37

Community · Accepted Answer · 2017-05-23 11:43:12Z

0

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

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Sep 26, 2012 at 19:02

sics

1,3181 gold badge11 silver badges25 bronze badges

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

Comments

boggsey · Accepted Answer · 2012-09-26 20:23:19Z

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

Collectives™ on Stack Overflow

javascript css positioning

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related