Question

I have the following logic for an animated mobile site (optimised for the iphone) – 208 is the height before going full screen.

    var pageHeight = $(window).height();

    if (pageHeight == 320 ) {

        $('#slide3').animate({bottom: '0px',}, 3000, function() {$('.slide3Txt').animate({top:'30px'},500);godown3Pt2()});
    }
    if (pageHeight != 208) {

        $('#slide3').animate({bottom: '0px',}, 3000, function() {$('.slide3Txt').animate({top:'94px'},500);godown3Pt2()});

    }

my issue is that both events fire after each other on the iphone on lanscape orientation – any suggestions to improve this logic?

Answer 1

In your code it triggers if its not 208 and if it is 320, or just if its not 208

You need an else if so if its 320, it does the first animate if its anything else and not 208 it triggers the second animate

 var pageHeight = $(window).height();

    if (pageHeight == 320 ) {

        $('#slide3').animate({bottom: '0px',}, 3000, function() {$('.slide3Txt').animate({top:'30px'},500);godown3Pt2()});
    }else if (pageHeight != 208) {

        $('#slide3').animate({bottom: '0px',}, 3000, function() {$('.slide3Txt').animate({top:'94px'},500);godown3Pt2()});

    }