jQuery and CSS set an absolute div to the center of the screen (detecting screen's resolution)

Question

I want to create a new layer including a login form (or other features), and I want to display it at center of the screen (depending on the screen's resolution and content).

This is the code :

  function new_layer() {
    $('#frameContainer, #showbox').show();
    $('#showbox').load('includes/login.php');
    $(document).ready(function(){
        var hei = eval($(window).height()/2 - $('#showbox > *').outerHeight()/2);
        var wid = eval($(window).width()/2 - $('#showbox > *').outerWidth()/2);
        $('#showbox').css({
          top: hei + "px",
          left: wid + "px"
        }).show();
    });

    // ..................

At the first time, it does not work, the content of the file login.php is centered :( , but when I click outside to hide it, then click again, it works. When I refresh the page, the problem occurs again.

What is the problem and how can i fix it?

Why are you using `eval`? It's not only naughty, it's not even necessary in your code. — Blazemonger, Sep 04 '12 at 14:27
Sr i'm a beginner, and i'm a cautious person, i try to do things safely :) — nguyen, Sep 04 '12 at 14:36
If you want to be safe, then [never use `eval` in your code until you're 100% sure you know what you're doing](http://stackoverflow.com/questions/197769/when-is-javascripts-eval-not-evil). — Blazemonger, Sep 04 '12 at 14:36

Robin Maben · Answer 1 · 2012-09-04T15:00:59.250

0

$(function(){
var loginDialog = $('#loginDialog');

    $.blockUI();
    var dlgWidth = loginDialog.outerWidth();
    var viewPortWidth = $(window).width();
    var pos = (viewPortWidth - dlgWidth ) / 2;
    loginDialog.css({

        'position', 'absolute',
        'left' :  pos + 'px',
        'z-index' : '1999' //greater than setting for blockUI
    });

});

More on blockUI here

edited Sep 04 '12 at 15:00

answered Sep 04 '12 at 14:27

Robin Maben

22,194
16
64
99

Don't position the `left` and `right` both, or one will override the other and you might get unexpected results. – Blazemonger Sep 04 '12 at 14:28
@Blazemonger: I must admit. I didn't get what you mean by *`both, or one will override the other`*. – Robin Maben Sep 04 '12 at 14:30
Normally you'd set `left` and `top`, not `left` and `right`. In your code, setting both is redundant anyway. – Blazemonger Sep 04 '12 at 14:31
@Blazemonger: oops! You're right, I need not set `right` :). I clearly over-engineered this :P Thanks! – Robin Maben Sep 04 '12 at 15:00

score 0 · Answer 2 · answered Sep 04 '12 at 14:31

0

You don't need JS calculations for that:

#loginDialog {
    height: 300px;
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px; /* half of the height */
    margin-left: -200px; /* half of the width */
}

answered Sep 04 '12 at 14:31

Zoltan Toth

46,981
12
120
134

I don't think the dialog's height and width are necessarily known in advance. – Blazemonger Sep 04 '12 at 14:32
@Blazemonger possible.. But it seems to be a regular pre-designed login popup, which is pretty static on most of the websites – Zoltan Toth Sep 04 '12 at 14:34

jQuery and CSS set an absolute div to the center of the screen (detecting screen's resolution)

2 Answers2