<div id="containner">
<div id="top-left" class="wrap">
<img src="back.jpg">
<img style="top: 0px; left: 0px;" src="front.jpg" class="front">
</div>
<div id="top-center" class="wrap">
<img src="back.jpg">
<img style="top: 0px; left: 0px;" src="front.jpg" class="front">
</div>
<div id="bottom-center" class="wrap">
<img src="back.jpg">
<img style="top: 0px; left: 0px;" src="front.jpg" class="front">
</div>
<div id="left" class="wrap">
<img src="back.jpg">
<img src="front.jpg" class="front">
</div>
<div id="right" class="wrap">
<img src="back.jpg">
<img style="left: 0px; top: 0px;" src="front.jpg" class="front">
</div>
<div id="top-right" class="wrap">
<img src="back.jpg">
<img src="front.jpg" class="front">
</div>
<div id="return" class="wrap">
<h3>This is the live demo</h3>
<p><a href="http://www.agussalikur.blogspot.com/tutorials/sliding-boxes-with-jquery/">Return back to the tutorial</a> for a full explanation of what's going on!</p>
</div>
</div>
<script type="text/javascript">
topbar_height =0;
$(function(){
topbar_height = $(".container").outerHeight()+6;
resize();
setInterval(resize,1000);
});
var body_height=0
var resize=function(){
if (body_height !=$(document).height())
{
body_height = $(document).height();
$("#demo").attr("height",(body_height-topbar_height)+"px");
}
}
function closeBanner(){
$(".container").hide();
$("#close").hide();
$(".container").css('height','0px');
body_height = $(document).height();
topbar_height = 6;
$("#demo").attr("height",(body_height-topbar_height)+"px");
}
</script>
<script type="text/javascript">google.load("jquery", "1.4.2");</script>
.wrap
{
float:left;
position:relative;
width:300px;
height:150px;
margin:20px;
overflow:hidden;
}
img
{
top:0;
left:0;
position:absolute;
}
.back
{
top:0;
left:0;
position:absolute;
background-color:#dbc277;
width:300px;
height:150px;
}
#return
{
background:#e2cd98;
color:white;
}
#return h3
{
margin-left:60px;
}
#return a
{
color:#d4a42a;
}
#return p
{
width:200px;
margin-left:50px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
Related Posts :