Home › Forums › JavaScript › jQuery Vertically Center Content
- This topic is empty.
-
AuthorPosts
-
May 21, 2012 at 2:15 am #38154
chrisburton
ParticipantI 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
May 21, 2012 at 2:32 am #103169joshuanhibbert
MemberMoving 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.
May 21, 2012 at 2:37 am #103170chrisburton
Participant@joshuanhibbert So essentially put it before the closing body tag? That didn’t make a difference
May 21, 2012 at 2:41 am #103171joshuanhibbert
MemberHmm, I’m not entirely sure when it comes to JavaScript stuff, but does wrapping it in the document ready function above work?
May 21, 2012 at 2:43 am #103172chrisburton
Participant@joshuanhibbert Nope. If you check developer tools, I think I’m getting an error
May 21, 2012 at 3:09 am #103173Taufik Nurrohman
Participant$(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
May 21, 2012 at 3:10 am #103174chrisburton
Participant@Hompimpa Thanks but for some reason that didn’t work for me either.
May 21, 2012 at 3:43 am #103177joshuanhibbert
Member@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?
May 21, 2012 at 3:46 am #103178chrisburton
Participant@joshuanhibbert No problem. It’s all yours.
May 21, 2012 at 4:01 am #103181chrisburton
Participant@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.
May 21, 2012 at 8:17 am #103185joshuanhibbert
MemberI’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?
May 21, 2012 at 11:03 am #103194chrisburton
Participant@joshuanhibbert I changed it back. Try clearing your cache.
May 21, 2012 at 4:29 pm #103219chrisburton
ParticipantMay 21, 2012 at 6:49 pm #103228joshuanhibbert
MemberRight, glad you have it sorted, and to know that I was on the right track!
May 21, 2012 at 8:06 pm #103232chrisburton
ParticipantI’m quite relieved that I stepped away from web design. Coding is not my forté. Appreciate the help.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.