CODEWITHSUNDEEP
jquerycss
MikeAlike234
MikeAlike234

Reputation: 759

Position jquery progress bar in middle of of page

How do i position jquery progress bar in middle of of page even though the page might be scrolled down?

<div id="progressbar"></div>

 $( "#progressbar" ).progressbar({
        value: false
  });

Upvotes: 0

Views: 3589

Answers (2)

Patrick Allen
Patrick Allen

Reputation: 2168

If you mean fixed in the center of the viewport like in this fiddle

You need to make the progress bar's position: fixed; , position it 50% from the top and 50% from the left. Then you need to offset it by half of it's width/height using a negative margin-left and negative margin-top

This is what it would look like if the progress bar was 500px wide and 20px tall:

#progress {
    width: 500px;
    height: 20px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -250px;

}

Upvotes: 4

rupps
rupps

Reputation: 9897

Declare #progressbar's position as fixed. fixed elements always refer to the browser window.

<style>
  #progressbar { position:fixed; top: 50%; left:50%; }
</Style>

Upvotes: 0

Related Questions