Portrait and landscape iPad/iPad mini behaving strangely

Question

The login details are :

CODE : AAAAAA Name : Test

When you visit the website on iPad or iPad mini and once you login, you will be directed to a welcome page. On that page some balloons would arrive from the top and they will come into the tree. The issue is :

If login on portrait mode and turn the device, the balloons do not get placed correctly on the landscape mode and vice versa.

The js for that animation is :

for (i = 1; i <= 7; i++) {
$('.trans' + i).toggleClass('toggle1');
};

setTimeout(function () {
    $('.posRel').fadeTo('slow', 2, function () {
        $('.toggle1').toggleClass('fSmall1');
    });
}, 2000);

Css for those balloons is :

.trans1 { position:absolute; top:-50px; left:0%; width:23px; height:63px; background-color:#00F; -moz-transition:all 2s ease; -webkit-transition:all 2s ease; transition:all 2s ease; background:url(../images/fruit-small.png) left top no-repeat; z-index:10; }

.trans2 { position:absolute; top:-200px; left:25%; width:23px; height:63px; background-color:#00F; -moz-transition:all 2s ease; -webkit-transition:all 2s ease; transition:all 2s ease; background:url(../images/fruit-small.png) left top no-repeat; z-index:10; }

.trans3 { position:absolute; top:-300px; left:35%; width:23px; height:63px; background-color:#00F; -moz-transition:all 2s ease; -webkit-transition:all 2s ease; transition:all 2s ease; background:url(../images/fruit-small.png) left top no-repeat; z-index:10; } 

.trans4 { position:absolute; top:-160px; left:45%; width:23px; height:63px; background-color:#00F; -moz-transition:all 2s ease; -webkit-transition:all 2s ease; transition:all 2s ease; background:url(../images/fruit-small.png) left top no-repeat; z-index:10; } 

.trans5 { position:absolute; top:-160px; right:5%; width:23px; height:63px; background-color:#00F; -moz-transition:all 2s ease; -webkit-transition:all 2s ease; transition:all 2s ease; background:url(../images/fruit-small.png) left top no-repeat; z-index:10; } 

.trans6 { position:absolute; top:-160px; left:245%; width:23px; height:63px; background-color:#00F; -moz-transition:all 2s ease; -webkit-transition:all 2s ease; transition:all 2s ease; background:url(../images/fruit-small.png) left top no-repeat; z-index:10; } 

.trans7 { position:absolute; top:-160px; right:0%; width:23px; height:63px; background-color:#00F; -moz-transition:all 2s ease; -webkit-transition:all 2s ease; transition:all 2s ease; background:url(../images/fruit-small.png) left top no-repeat; z-index:10; } 

.trans1.toggle {    left:578px;    margin-left:-50px;    top:400px; }

.trans2.toggle {    left:528px;    margin-left:-50px;    top:400px; }

.trans3.toggle {    left:418px;    margin-left:-50px;    top:460px; }

.trans4.toggle {    left:518px;    margin-left:-50px;    top:330px; }

.trans5.toggle {    left:450px;    margin-left:-50px;    top:350px; }

.trans6.toggle {    left:588px;    margin-left:-50px;    top:340px; }

.trans7.toggle {    left:468px;    margin-left:-50px;    top:350px; }

And then, i have applied switch case to fetch the change in window orientation :

switch ( window.orientation ) {
    case 0:
        //alert('portrait mode');
        var wHeight = $(window).height();
        var newHeight = wHeight-110;
        //alert(newHeight);
        $(".sitewid.pad25.p2height").css('min-height',newHeight);
        $("#footer").toggleClass(".footer1");
        $(".footer1").css("bottom","00px !important");
        $(window).bind("load", function() {for (i = 1; i <= 7; i++) {$('.trans' + i).toggleClass('toggle1');}; setTimeout(function () { $('.posRel').fadeTo('slow', 2, function () {$('.toggle1').toggleClass('fSmall1');}); }, 2000);
});
    break;

    case 90:
        //alert('landscape mode screen turned to the left');
        var wHeight = $(window).height();
        var newHeight = wHeight-110;
        //alert(newHeight);
        $(".sitewid.pad25.p2height").css('min-height',newHeight);
        $("#footer").toggleClass(".footer1");
        $(".footer1").css("bottom","00px !important")
        $(window).bind("load", function() {for (i = 1; i <= 7; i++) {$('.trans' + i).toggleClass('toggle');};setTimeout(function () { $('.posRel').fadeTo('slow', 2, function () {$('.toggle').toggleClass('fSmall1');}); }, 2000);
});
    break;

    case -90:
        //alert('landscape mode screen turned to the right');
        var wHeight = $(window).height();
        var newHeight = wHeight-110;
        //alert(newHeight);
        $(".sitewid.pad25.p2height").css('min-height',newHeight);
        $("#footer").toggleClass(".footer1");
        $(".footer1").css("bottom","00px !important")
        $(window).bind("load", function() {for (i = 1; i <= 7; i++) {$('.trans' + i).toggleClass('toggle');};setTimeout(function () { $('.posRel').fadeTo('slow', 2, function () {$('.toggle').toggleClass('fSmall1');}); }, 2000);
});
    break;

}   


}, false);

Can you please tell me what am i doing wrong or what do i need to do so that when the window orientation changes, the balloons are placed correctly. The tree the grass and every other element is placed correctly but the balloons are not getting to their original place when change in orientation happens. Thanks for looking into this.

Portrait and landscape iPad/iPad mini behaving strangely

0 Answers0