CODEWITHSUNDEEP
javascriptjqueryhtmlcss
john206
john206

Reputation: 547

keep html contents at same position and size ratio in full screen mode

I have being researching regarding this question for a long time but I was not lucky. Here is the situation. Assume you have a blue rectangle in the center of the page. When you go full screen, we can use percentage for height and width to preserve the ratio of rectangle. However, the position of rectangle changes and it moves up and you end up with extra space at the bottom of the page.

So what should I do to keep rectangle in the center of the page (equal vertical and horizontal distance) when full screen mode is enabled? In other words, if your screen is 1280x800, center of rectangle be at (640,400)

If you check home page of Chrome browser, when you go full screen, the position of apps stay the same and you don't end up with extra space at the bottom. Appreciate your help

Upvotes: 1

Views: 1900

Answers (3)

Garavani
Garavani

Reputation: 11

oops,

I forget that I am working on an iMac. the if addition in the script solved my problem.

function vertical_center()
{
    var ww = $(window).width();
    if (ww < 1600)
    {
    $("#character").css({'width': ww + 'px','height': (ww/4) + 'px', 'margin-top': -(ww/8) + 'px'});
    }
    else
    $("#character").css({'width': ww + 'px'})
}

Yet, I would be glad if someone looks over my code telling me where some silly things remain. Hope this post added something nevertheless, thank you guys

Upvotes: 1

abhshkdz
abhshkdz

Reputation: 6365

Define width of the rectangle and use margin: 0 auto; to center it in page horizontally.

If you want to center a div horizontally and vertically, use something like this

HTML

<div id="rectangle"></div>

CSS

#rectangle {
   width: 30%; //can set any value here
   height: 20%; //can set any value here
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -15%; //negative half of width
   margin-top: -10%; //negative half of height
   background-color: red;
}​

See the fiddle here.

OR

HTML

<div id="wrapper">
  <div id="container">
    <div id="rectangle"></div>
  </div>
</div>​

CSS

body, html {
    height: 100%;
    overflow:hidden;
}
#wrapper {
    width: 100%; 
    height: 100%; 
    overflow: visible; 
    position: relative;
}
#wrapper[id] {
    display: table; 
    position: static;
}
#container[id] {
    display: table-cell; 
    vertical-align: middle; 
    width: 100%;
}
#rectangle {
    width: 200px; 
    height: 100px; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: blue;
}

​ See the fiddle here.

Upvotes: 4

bobthemac
bobthemac

Reputation: 1172

Have you tried also using percentages for the margins, for example if you centre square was 60% tall and wide you could add the 20% as a margin so that would also scale up. Without trying I don't know if it would give you the desired effect but it should fix the issue of the square moving up.

Upvotes: 1

Related Questions