How can I fix my jQuery centering DIV percentage?

Question

This is my code

<style>

.className{
width:55%;
height:auto;
margin:0 auto;
}

body{
text-align:center;
}

</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

$(document).ready(function(){

$(window).resize(function(){

$('.className').css({
position:'absolute',
left: ($(window).width() - $('.className').outerWidth())/2,
top: ($(window).height() - $('.className').outerHeight())/2
});

});
// To initially run the function:
$(window).resize();

});

</script>

When I open my page i see my DIV not centred, but when i reduce and i reopen in full mod the window of my browser, the DIV is perfectly centred, plz help me I'm going crazy

See http://stackoverflow.com/questions/1818474/how-to-trigger-the-window-resize-event-in-javascript for a better way to execute your code without the necessity of triggering a resize event when your document loads. — George Cummins, May 17 '13 at 20:46
George Cummins thx for your help, i have read this stackoverflow.com/questions/1818474/… but i didn't understand plz can you rewrite me the correct code ? — Christian Magma, May 17 '13 at 21:24

Elhussein Hashem · Answer 1 · 2013-05-18T09:51:12.270

0

Try this, it should work:

$(document).ready(function(){

     resizeFunction();

    window.onresize = function() {
        resizeFunction();
    };

     resizeFunction();

});

function resizeFunction(){
    $('.className').css({
        position:'absolute',
        left: ($(document).width() - $('.className').outerWidth())/2,
        top: ($(document).height() - $('.className').outerHeight())/2
    });
}

edited May 18 '13 at 09:51

answered May 17 '13 at 21:52

Elhussein Hashem

106
1
4

Yes work, but work with the same bug ç___ç see for yourself http://82.59.87.228/sito – Christian Magma May 17 '13 at 21:59
PLZ HELP ME THIS IS MY BUG (When I open my page i see my DIV not centred, but when i reduce and i reopen in full mod the window of my browser, the DIV is perfectly centred, plz help me I'm going crazy) – Christian Magma May 18 '13 at 08:54
@ChristianMagma I edited the code now, try it this time is should work correctly on the first time, i tried it and it work fine. – Elhussein Hashem May 18 '13 at 09:52
thx but i tryed and work like my code, not centred at the frist time :( look on my test website http:// 87.11.150.239/sito – Christian Magma May 18 '13 at 10:16
help me I'm going to kill myself °_° – Christian Magma May 18 '13 at 10:26
The problem born because I used width:55%; height:auto; and i think that the script don't get the dimensions of screen at the first function, because load the image for first @ElhusseinHashem – Christian Magma May 18 '13 at 10:34
@ChristianMagma I used the jQuery `$(window).resize(_function_)` and it didn't work for me, and I replaced the `$(window).width()` to be `$(document).width()`, and I also called the resize method twice on document ready call, can you try it here: [link](http://www.elhussein-hashem.net/html2.html) and tell me if works as you need – Elhussein Hashem May 18 '13 at 12:52
i see google logo with my same bug, I have opne my browser in full window and at the frist opening of the page i see the google logo not perfectly centred, is centered but is slightly shifted down like my website plz see it zhttp://87.11.150.239/sito @ElhusseinHashem – Christian Magma May 18 '13 at 13:06
if you want i can write you my teamspeak server ip so i can tell and show you my problem @ElhusseinHashem – Christian Magma May 18 '13 at 13:14
please do not abandon me :( – Christian Magma May 18 '13 at 13:55
Sorry @ChristianMagma as I traveled for a few days, I tried this work around: [link](http://www.elhussein-hashem.net/html2.html), try it and tell me if it worked with you. – Elhussein Hashem May 22 '13 at 09:42

How can I fix my jQuery centering DIV percentage?

1 Answers1