Grow your CSS skills. Land your dream job.

IE 9 / FireFox – jQuery issue, Seems simple enough…

  • # June 26, 2012 at 6:11 pm

    If you view the site in IE9, it is not recognizing the height set by jQuery…does anyone know a workaround or can tell me how crappy my jQuery is so i can fix it?

    obviously it works in chrome, because chrome doesn’t suck arse.
    Thanks Guys!

    The Site: http://www.design-ninja.net
    Here is the jQuery:


    $(document).ready(function(e) {
    var halfScreen = document.height / 2;
    var tp = $('.top');
    var btm = $('.bottom');
    var map = $('div.map');
    $('.top, .bottom').css('height', halfScreen);
    map.hover(function() {
    map.css('display', 'none');
    tp.animate({
    height: halfScreen - 100,
    }, {
    duration: 1000,
    queue: false,
    specialEasing: {
    height: 'easeOutBounce'
    }
    });
    btm.animate({
    marginTop: '+=100'
    }, {
    duration: 1000,
    queue: false,
    specialEasing: {
    marginTop: 'easeOutBounce'
    }
    });
    });
    });​
    # June 26, 2012 at 6:34 pm

    This doesn’t have anything to do with IE “sucking arse.” document.height is non-standard and obsolete. If you want to use raw JavaScript, you should check document.documentElement.clientHeight , which works in all major browsers, including IE.

    Since you’re using jQuery though, just utilize it to determine the height of the document.

    var halfScreen = $(document).height() / 2;

    Nice effect by the way.

    # June 26, 2012 at 7:21 pm

    OMFG, lol, i can’t believe i did that…I already knew that but thank you for slapping me in the face, haha, i needed it!

    and thanks! I’m glad you like it :)

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".