chrisburton

# May 21, 2012 at 2:15 am

I used a script that dynamically centers my content that @joshuanhibbert suggested however, I did something that made it stop working and I’m completely lost. See both links

Link 1
Link 2

jQuery

joshuanhibbert

# May 21, 2012 at 2:32 am

Moving the script to the bottom of the document (just before the closing body tag) should fix the issue. From my limited understanding, it is running the script before the image element has been drawn, and that is what is causing the issue (which is why the margin top and left values are 0, as the image has no height or width until it has been drawn).

EDIT: The other thing that should fix it would be to wrap the jQuery in the following:

$(document).ready( function() {



});

This would stop the code from running until the page is loaded, but I believe placing scripts at the bottom of the document is best for page load times.

chrisburton

# May 21, 2012 at 2:37 am

@joshuanhibbert So essentially put it before the closing body tag? That didn’t make a difference

joshuanhibbert

# May 21, 2012 at 2:41 am

Hmm, I’m not entirely sure when it comes to JavaScript stuff, but does wrapping it in the document ready function above work?

chrisburton

# May 21, 2012 at 2:43 am

@joshuanhibbert Nope. If you check developer tools, I think I’m getting an error

Taufik

# May 21, 2012 at 3:09 am

$(document).ready( function() {

var $img = $('img');

$img.css({

'display': 'block',

'position': 'absolute',

'top': $(window).height()/2,

'left': $(window).width()/2,

'margin-left': '-' + ($img.width() / 2) + 'px',

'margin-top': '-' + ($img.height() / 2) + 'px'

});

});

Edit: I just missed the quotes

chrisburton

# May 21, 2012 at 3:10 am

@Hompimpa Thanks but for some reason that didn’t work for me either.

joshuanhibbert

# May 21, 2012 at 3:43 am

@ChristopherBurton How about if you use a slightly older version of jQuery?

Whatever it is, it’s very strange. I’m not having any issues on my end, but can see that your version isn’t working. Mind using my code again so that I can see if the console shows any errors?

chrisburton

# May 21, 2012 at 3:46 am

@joshuanhibbert No problem. It’s all yours.

chrisburton

# May 21, 2012 at 4:01 am

@joshuanhibbert So I think the issue is on my end because I’m using dual monitors. When I drag my browser window into the the other monitor, it starts to center. But the height is still slightly off.

joshuanhibbert

# May 21, 2012 at 8:17 am

I’m getting the problem on my end too, both on my work and personal machines. The jQuery still seems to be @Hompimpa‘s code, or did you change it back?

chrisburton

# May 21, 2012 at 11:03 am

@joshuanhibbert I changed it back. Try clearing your cache.

chrisburton

# May 21, 2012 at 4:29 pm

Answer: //stackoverflow.com/a/10691990/938664

joshuanhibbert

# May 21, 2012 at 6:49 pm

Right, glad you have it sorted, and to know that I was on the right track!

chrisburton

# May 21, 2012 at 8:06 pm

I’m quite relieved that I stepped away from web design. Coding is not my forté. Appreciate the help.