Archive for 2015-10-25

Hari Nasional di bulan Oktober

Ini keistimewanya tanggal yang mungkin kita lupa pada bulan Oktober. Sedikit info saya mungkin berguna :
" Hari Nasional di bulan Oktober "

Tanggal 1 Oktober   : Hari Kesaktian Pancasila
Tanggal 2 Oktober   : Hari Batik Nasional
Tanggal 5 Oktober   : Hari Tentara Nasional Indonesia (TNI)
Tanggal 10 Oktober : Hari Kesehatan Jiwa
Tanggal 15 Oktober : Hari Hak Asasi Binatang
Tanggal 16 Oktober : Hari Parlemen Indonesia & Hari Pangan Sedunia
Tanggal 24 Oktober : Hari Dokter Nasional & Hari Perserikatan Bangsa-Bangsa (PBB)
Tanggal 27 Oktober : Hari Listrik Nasional
Tanggal 28 Oktober : Hari Sumpah Pemuda
Tanggal 30 Oktober : Hari Keuangan
Nah, Istimewa kan, pantau terus ya di blog ini

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>

Slidebox kesamping

HTML
<div style="right: 0px;" id="slidebox">
            <a class="close"></a>
            <p>More in Technology &amp; Science (4 of 23 articles)</p>
            <h2>The Social Impact of Scientific Research and new Technologies</h2>
            <a class="more">Read More »</a>
        </div>

CSS
#slidebox{width:400px;height:100px;padding:10px;background-color:#fff;
    border-top:3px solid #E28409;position:fixed;bottom:0px;right:-430px;
    -moz-box-shadow:-2px 0px 5px #aaa;
    -webkit-box-shadow:-2px 0px 5px #aaa;
    box-shadow:-2px 0px 5px #aaa;}

#slidebox p, a.more{font-size:11px;
    text-transform:uppercase;
    font-family: Arial,Helvetica,sans-serif;
    letter-spacing:1px;
    color:#555;}

a.more{
    cursor:pointer;
    color:#E28409;
}

a.more:hover{

    text-decoration:underline;

}

#slidebox h2{

    color:#E28409;

    font-size:18px;

    margin:10px 20px 10px 0px;

}

a.close{

    background:transparent url(../images/close.gif) no-repeat top left;

    width:13px;

    height:13px;

    position:absolute;

    cursor:pointer;

    top:10px;

    right:10px;

}

a.close:hover{

    background-position:0px -13px;
}SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript">

$(function() {

    $(window).scroll(function(){

        /* when reaching the element with id "last" we want to show the slidebox. Let's get the distance from the top to the element */

        var distanceTop = $('#last').offset().top - $(window).height();

        

        if  ($(window).scrollTop() > distanceTop)

            $('#slidebox').animate({'right':'0px'},300);

        else 

            $('#slidebox').stop(true).animate({'right':'-430px'},100);    

    });

    

    /* remove the slidebox when clicking the cross */

    $('#slidebox .close').bind('click',function(){

        $(this).parent().remove();

    });

});

</script>