I have seen this question asked many times, but I can't seem to find an answer that fits my needs.
In essence, what I am looking for is to slide a box horizontally from the right side (invisible) of the screen to the left, and then back from the left to the right.
The HTML/CSS/JS code below demonstrates exactly what I am trying to achieve:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style type="text/css">
#box-1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80em;
background-color: #f00;
}
#box-2 {
position: absolute;
top: 0;
right: -100%;
width: 100%;
height: 4em;
background-color: #0f0;
}
#viewport {
overflow: hidden;
position: relative;
height: 100em;
}
#container {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="viewport">
<div id="container">
<div style="position: relative">
<div id="box-1">
</div>
<div id="box-2">
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#box-1").click(function () {
$(this).parent().parent().animate({left: "-100%"});
});
$("#box-2").click(function () {
$(this).parent().parent().animate({left: "0"});
});
</script>
</body>
</html>
However, there are two key issues with this code:
- I want the outer viewport to automatically adjust its height based on the highest item in the container, rather than having a fixed height
- When scrolling down to the bottom of the page while the red box is visible and clicking it, the green box appears within the viewport but at the bottom. I would prefer the green box to be directly in view. Additionally, once the green box is in view, clicking on it should bring the red box back into view at its previous scroll position.
While there are other limitations in this example (such as the default animation function provided by jQuery), I believe these can be addressed later.
Considering the constraints of the solution I've presented here, I suspect I may need to rethink my approach but I'm not sure where to start.