jQuery absolute positioning a DIV before it's been loaded

Question

I'm working on a website, and I would like to make an under construction screen before. On this screen there are two divs (#logo and #contact). I'd like to positioning to the middle of the screen these divs, before the screen is loaded. There is the HTML:

     $(document).ready(function(){
            $(window).resize(function(){
                $("#logo").css({
                    position:'absolute',
                    left: ($(window).innerWidth() - $("#logo").outerWidth())/2,
                    top: ($(window).innerHeight() - $("#logo").outerHeight())/2
                });
                $("#contact").css({
                    position:'absolute',
                    left: ($(window).innerWidth() - $("#contact").outerWidth())/2,
                    top: ($(window).innerHeight() - $("#contact").outerHeight())/2
                }); 
            });
            $(window).resize();
        });
    </script>
    </head>
<body>
    <div id="logo">
        <script>
            $("#logo").load(function(){
                $("#logo").css({
                    position:'absolute',
                    left: ($(window).innerWidth() - $("#logo").outerWidth())/2,
                    top: ($(window).innerHeight() - $("#logo").outerHeight())/2
                });
            });
        </script>
        <a href="#">
            <img id="logoimg"  src="img/logo.png" title="UNDER CONSTRUCTION" alt="site logo"/>
        </a>
    </div>
    <div id="contact">
        <p>Address: blabla<br>blabla</p>
        <p>Phone: 00000000000</p>
        <p>E-mail: <a href="mailto:contact@info.com">contact@info.com</a></p>
    </div>
    <script>
        $("#logo").mouseenter(function(){
            $("#logo").fadeTo("fast", 1);
        })
        $("#logo").mouseleave(function(){
            $("#logo").fadeTo("fast",0.33);
        })
        $("#logo").click(function (){
            $("#logo").fadeOut("fast");
            $("#contact").fadeIn("slow");
        })
        $("#contact").click(function(){
            $("#contact").fadeOut(300);
            $("#logo").fadeIn(500);
        })
    </script>
</body>
</html>

Everything is fine, but the logo div isn't middle, just horizontally, the other one is fine. Why? What are you recommend?

Oh, and there is the .css

html{
background:url(img/sixtkep1.jpg) no-repeat bottom center;
background-size:cover;
overflow:hidden;
min-height:100%;
font-family:'Amatic SC' cursive;
}
body{
height:100%;
}
#logo{
position:absolute;
width:20%;
border:1px dotted;
border-color:#FFF;
padding:0 0 0 0;
}
#logo img{
width:100%;
margin:0 0 0 0;
border:0 0 0 0;
}
#contact{
padding:20px;
display:none;
width:20%;
overflow:inherit;
position:absolute;
text-align:center;

Thanks!

This can easily be achieved using CSS. Check the answer at http://stackoverflow.com/questions/8289194/css-vertically-horizontally-center-div — Swadeesh, Jun 07 '13 at 20:46
the divs doesn't have fixed sizes. in the CSS: #logo,#contact width: 20% — user2464900, Jun 10 '13 at 18:35

score 0 · Answer 1 · answered Jun 07 '13 at 20:42

0

Mb you should try to use $(window).load(function() { instead of $(document).ready(function(){

answered Jun 07 '13 at 20:42

Yevgen

1,239
3
15
30

I suppose that some image pulls the div so jQuery gets wrong .outerWidth() – Yevgen Jun 09 '13 at 00:08

PlantTheIdea · Answer 2 · 2013-06-07T20:50:32.517

For the left (and the initial top declaration), you could very easily do it with CSS:

#logo,#contact {
    position:absolute;
    top:50%;
    left:40%;
    width:20%;
    ...
}

left is assigned to the remaining 80% divided by 2. top is assigned to 50% so that you could merely apply marginTop to be negative to offset it:

$("#logo,#contact").css({
    marginTop:(-1*($(this).height()/2))
});

Notice I combined the declarations into a single selector (as the CSS is the same), and used half the height to form the margin. This will raise it half of its own height from the top:50% CSS, placing it centered vertically.

The other option is to set a fixed height for #logo and #contact, so that you just declare that negative margin in CSS without a JS solution:

#logo,#contact {
    position:absolute;
    top:50%;
    left:40%;
    width:20%;
    height:400px;
    margin-top:-200px;
    ...
}

This is much preferred, but only works if you apply a fixed height. I used px here, but you can just as easily use %.

score 0 · Accepted Answer · answered Jun 11 '13 at 09:34

I have the solution! I don't have set the top and left parameters in css. Just in the jQuery.

#logo{
position:absolute;
width:20%;
margin: 0 0 0 0;
padding:0 0 0 0;
}
#logo img{
width:100%;
margin:0 0 0 0;
border:0 0 0 0;
}
#contact{
display:none;
width:30%;
min-width:320px;
max-width:360px;
overflow:inherit;
position:absolute;

there are two divs, with relative sizes. NO PIXELS!!!

and there is the script:

$(document).ready(function(){
        $(window).load(function(){
            $(window).resize(function(){
                $("#logo").css({
                    opacity:0.33,
                    top:($(window).innerHeight()*0.5)-($("#logoimg").height()/2),
                    left:($(window).innerWidth()*0.5)-($("#logoimg").width()/2),
                });
                $("#contact").css({
                    top:($(window).innerHeight()*0.5)-($("#contact").height()/2),
                    left:($(window).innerWidth()*0.5)-($("#contact").width()/2),
                }); 
            });
            $(window).resize();
        });
    });

It's working in every window size and every browsers. relative divs are in the middle every time! :)

jQuery absolute positioning a DIV before it's been loaded

3 Answers3