CODEWITHSUNDEEP
javascriptjquery
smith
smith

Reputation: 5461

always keep the window in the center when move the scroll bar

I am trying to built a window located in the center of the screen and when I scroll down it will always be in the center, I have tried the follwing code:

  <style>
  #Window {
 display: none;
 text-align: center;
 border: 1px solid #333;
  position:absolute;
  width: 200px;
  height: 80px;
  z-index:9999;
  background:#fff;
  border-radius: 5px;
  padding: 10px;
     }
  </style>

  <script>
      $("#window").css('top', 200);
     $("#window").css('left', winW/2- $("#window").width());
   $(window).scroll(function () { 

         var winH = $(window).height();
          setTimeout( function(){
   $('#alertWindow').animate({'top':winH/2-$("#window").height()/2},200);
 }, 1000);
      });     
  </script>

 <div id="window">this is scroll window</div>

The problem is that when I scroll down, the window moves to the center at the first time which works, but when I scroll again, it won't keep moving to the center, I think the scroll function is only called once, how can I keep the window move constantly to the center of the creen when I scroll down or up, any one could help me with that, sorry if I did present the whole code.

Upvotes: 0

Views: 2240

Answers (2)

Keith.Abramo
Keith.Abramo

Reputation: 6965

You should try taking advantage of Jquery UI's excellent dialog plugin http://jqueryui.com/demos/dialog/. There is an option to update the position of the dialog 

$( ".myDialogWindow" ).dialog( "option", "position", 'center' );

as well as being able to theme it with css however you want.

Upvotes: 0

Naftali
Naftali

Reputation: 146310

All you need is css.

Just use position: fixed

Upvotes: 2

Related Questions