Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript jQuery Vertically Center Content

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #38154
    chrisburton
    Participant

    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

    #103169

    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.

    #103170
    chrisburton
    Participant

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

    #103171

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

    #103172
    chrisburton
    Participant

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

    #103173
    Taufik 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

    #103174
    chrisburton
    Participant

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

    #103177

    @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?

    #103178
    chrisburton
    Participant

    @joshuanhibbert No problem. It’s all yours.

    #103181
    chrisburton
    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.

    #103185

    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?

    #103194
    chrisburton
    Participant

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

    #103219
    chrisburton
    Participant
    #103228

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

    #103232
    chrisburton
    Participant

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

Viewing 15 posts - 1 through 15 (of 17 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.