create-sleek-sliding-box-effect-with-jquery-sleek-sliding-box


<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>

Share this

Related Posts

Previous
Next Post »

Countdown

Hai sobat Agussalikur berjumpa kembali ! Kali ini admin berbagi tips seputar blogger dalam topik Time Countdown, kebetulan admin contohkan m...