CODEWITHSUNDEEP
iphonejqueryhtmlscrolljquery-animate
Alex
Alex

Reputation: 1152

jQuery Issue Using .animate Command

http://api.jquery.com/animate/

On this page, they give a demo where they have a gray div move across the screen with the click of a button.

Notice that if you click the right button enough times and the DIV block reaches the end of the container it creates horizontal and vertical scrollbars.

I downloaded and modified the code to get rid of the overflow property and what I have so far works BEAUTIFULLY in desktop browsers.

However, Safari on the iPhone handles things a little bit differently. For some reason, Safari completely ignores the overflow property and instead expands the browser window to show you where the block moved to.

I don't want you to be able to see the block. I want it hidden until you hit button again.

Anyone know what the heck is going on?

Here is a pic of the issue: alt text

Here is my code:

div { 
position:absolute; 
background-color:#abc; 
width:100%; 
height:100%;
margin:0px;
max-width:100%;
}

body {
margin:0px;
padding:0px;    
}

* {
overflow:hidden;
clip:rect(auto, auto, auto, auto);  
}
</style>

<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>

<body>
<button id="left">&laquo;</button> <button id="right">&raquo;</button>

<div class="block"></div>

<script>
$("#right").click(function(){
$(".block").animate({"left": "+=110%"}, "medium");
});

$("#left").click(function(){
$(".block").animate({"left": "-=110%"}, "medium");
});

</script>

Even though I have moved the DIV block off the screen and I have overflow:hidden as a global style, the iPhone will make room for it in the browser window to show you where the DIV has moved to. ANNOYING!

Thank you in advance!

Upvotes: 1

Views: 711

Answers (2)

miles
miles

Reputation: 1

Alternative to 

overflow:hidden
HTML:/<div class="clear"></div>
CSS:.clear {clear:both;}

Upvotes: 0

Christoffer Klang
Christoffer Klang

Reputation: 454

Not completely sure I understand what you want to accomplish here. But if you want to make the gray box disappear as it leaves towards the end of the document, then I would suggest that you wrap the div inside another div, and set the width of the wrapping element to 100% and overflow: hidden;

Like this:

<div class="wrapper">
  <div class="block"></div>
</div>

Also add the appropriate styling:

<style type="text/css">
  ...
  .wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
  }
</style>

Note that you need to absolute position the wrapper as well, otherwise the gray block will still be visible outside it. You'll also need to give it some height (I used 100% in my example) or it will be 0px high (due to the absolute positioned child) and nothing will be visible.

Hope that helps.

Upvotes: 2

Related Questions