CODEWITHSUNDEEP
jqueryipad
FunkyMonk91
FunkyMonk91

Reputation: 1481

.hide() not working correctly on iPad

I have an image slide show based off an array of images that feeds a single img element on my page. When I reach the last image and press "next", which triggers the nextImage() function, I want to hide my final image and bring up a splash screen (a div on the same page, hidden by css). This code works great in safari but it doesn't seem to hide the image element on iPad (my target device). I am at a loss as to what may be causing this to not work.

function endPresentation(){
    $("#image").hide(200);
    $("#test").show(200);
}

//Goto Next image in array
function nextImage(){

    save();
    iCount++;

//If there are no more images in the array
    if (images[iCount] == null) {
        endPresentation();
    }
    else{                       
        //Change image source to new image, do stuff after the image has successfully loaded
        $("#image").attr("src", images[iCount]).load(function (){               
            doStuff();  
        });         
    }               
}

Any help would be greatly appreciated as this has been bugging me for weeks!

Upvotes: 1

Views: 2296

Answers (3)

Dariozzo
Dariozzo

Reputation: 121

Resolved adding a 10 ms timeout when calling the hide and show methods:

function endPresentation(){
  setTimeout(function(){
      $("#image").hide(200);
      $("#test").show(200);
  },10)
}

tested on iPad 4

Upvotes: 1

rafaelbiten
rafaelbiten

Reputation: 6240

What I would try is to simply hide the last displayed image inside your "if" statement using iCount-- to go back to your last existing image and after that I would, if necessary, simply remove the div with .remove(); Hope it works!

So, you check if iCount is null. If it is, iCount--, hide(200) it and if necessary, you remove the #image with .parent('#image') after animation ends. (You may want to double check the syntax).

Upvotes: 0

Chris
Chris

Reputation: 3795

Instead of using jquery to hide the element, try adding style="display:none" to the #image element in your html. This should make it easier for jquery to toggle the visibility of the image.

Upvotes: 0

Related Questions