I am trying to achieve an effect where I can move a div off the screen (top up) while keeping the bottom edge visible, specifically 50px. Currently, my approach involves hiding 90% of the div using jQuery and CSS3 with jquery.transit for cross-browser compatibility.
The issue arises when the content inside the div is dynamic and changes its height, leading to unexpected transformations and discrepancies in the percentage positioning across different viewports (e.g., iPhone 4s - Chrome Desktop browser), despite setting minimum heights. The div needs to be responsive and not static.
I may be missing something minor, but how can I resolve this problem to achieve the desired outcome as shown in the linked fiddle without relying on a fixed height?
HTML
<button id="left">«</button>
<button id="right">»</button>
<div class="block">
<p id="text">Test</p>
</div>
JS
$( "#right" ).click(function() {
$( ".block" ).animate({ "y": "-85%" }, "slow" );
});
$( "#left" ).click(function(){
$( ".block" ).animate({ "y": "0%" }, "slow" );
});
CSS
body{
100%
}
p{
bottom:0;
left:50%;
position:absolute;
text-align:center;
color:white;
}
.block {
width: 100%;
min-height:150px;
border: 1px solid black;
margin: 0 auto;
position: absolute;
background-size: cover;
background-color: gray;
z-index: 2;
}
#left {
position:absolute;
z-index:3;
}
#right {
left:10%;
position:absolute;
z-index:3;
}