End of Page Slide Out Box plus Minimize use jQuery - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title End of Page Slide Out Box plus Minimize use jQuery, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Coded, Article jQuery, Article Snippet, Article Tutorial, we write this you can understand. Well, happy reading.

Title : End of Page Slide Out Box plus Minimize use jQuery
link : End of Page Slide Out Box plus Minimize use jQuery

End of Page Slide Out Box plus Minimize use jQuery

Mau ora geuleum gue akan berbagi trik jQuery plugin. Salah satu tema post yang habisnya rada susah. Selalu saja ada yg baru dan menggemaskan 8-X Coba sobat kunjungi artikel lawas berikut end of page slide out box dan slide out serelek geleser! Kedua trick tersebut memiliki fungsi yg hampir mirip. Ketika melakukan scroll-down pada satu halaman, maka akan terbuka sebuah kotak dengan gaya serelek jebret ;)) Sekarang AA Koben akan berbagi hal serupa dengan hal itu, namun ada penambahan gaya yakni selain fitur close akan ditambahkan juga feature minimize pada kotak! Pokok'e begitu...

#sticky {
background: #f9f9f9;
border-radius: 3px;
width: 350px;
height: 200px;
position: fixed;
overflow: hidden;
border: none;
right: -350px;
z-index: 9999;
text-align: left !important;
box-shadow: 0 0 1px rgba(0,0,0,.5);
transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
}
.sticky-title {
background: #333;
color: #fff;
display: block;
height: 40px;
width: 100%;
font-size: 14px;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}
.sticky-title span a {
border-left: 1px solid #555;
float: right;
height: 40px;
width: 40px;
}
.sticky-title span a:hover {
background: rgba(0,0,0,.2);
}
.sticky-title span a img {
margin: 12px;
}
.sticky-container {
border: none;
float: left;
width: 100%;
height: auto;
margin: 3px;
}
.sticky-container > div {
border: none;
height: 40px;
margin: 3px;
padding: 3px;
}
.sticky-container > div > span {
font-size: 14px;
}
.sticky-container img {
float: left;
margin: 3px 5px;
width: 40px;
}
.show {
bottom: 35px;
}
.hide {
bottom: -160px;
}

Kalau mau di edit perhatikan nominal height and width (tinggi dan panjang), karena akan berpengaruh kepada hide/show content :D

<div class='show' id='sticky'>
<div class='sticky-title'>
<span style='float: left;margin: 12px 0 0 15px;'>
YOUR TITTLE!!!
</span>
<span>
<a href='javascript:void;' id='sticky-close' title='Tutup'>
<img alt='x' class='a' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvczY87yHn2NtD4v8Ha0Dw-kJMloGi9MwmwkMyqtM7ddT8JYPbYpjIDIHq8Op_ryQJk6dgW719-Dwg_wgtlJ-yBeHBQmJgjCOfXJpkKwsFFiRItCqVOBfk5mw8ba9tmcs0vjtVVT3vJRNK/s1600/close.png' title='close'/>
</a>
</span>
<span>
<a href='javascript:void;' id='sticky-minimize' title='Minimize'>
<img alt='-' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ-U-TovXOhysxvY1vly53hPnG-yzBNmnrMz-sE8uVUN2dUYpKKPcki_vjNRG_7LhlEHr9ndL_enUoboZ2cUbL6aLsbDG0ndCfpNU8wPqRJCWbFIRCF-z7GRgWnqjXuwyhjHnq2lEyQF95/s1600/minimize.png' title='minimize'/>
</a>
</span>
<span>
<a href='javascript:void;' id='sticky-maximize' title='Maximize'>
<img alt='+' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeYwHpIR962trVqIFixy4PxGvznGtTwuRqzEXKa8gdagWje3Rvpn4N3uEBjRpu2Vsq2uQjvIT-aPEB6oSMUATDEot-uic6IZP7ORIZGZ7ms3CgzikOWj9_gRE1phLlHBm3bxva7-DeYwUC/s1600/maximize.png' title='maximize'/>
</a>
</span>
</div>
<div class='sticky-container'>
<div>
---------- ADD CONTENT HERE ----------
</div>
<div>
---------- ADD CONTENT HERE ----------
</div>
<div>
---------- ADD CONTENT HERE ----------
</div>
</div>
</div>

<script type='text/javascript'>
$(window).scroll(function(){
  if ($(this).scrollTop() > 350) {
    $('#sticky').css({'right':'0px'});
  } else {
    $('#sticky').css({'right':'-350px'});
  }
});
$(document).ready(function(){
    var sticky = $('#sticky');
    var closed  = $('#sticky-close');
    var minimize = $('#sticky-minimize');
    var maximize = $('#sticky-maximize');
        maximize.hide();
            closed.click(function(){
              sticky.css({'right':'-350px'});
                          sticky.fadeOut('slow');
  })
        minimize.click(function(){
              sticky.toggleClass('hide');
$(this).hide();
        maximize.show();
})
        maximize.click(function(){
              sticky.toggleClass('hide');
$(this).hide();
        minimize.show();
})
});
</script>

350 : batas tinggi kemunculan ketika scroll.
DEMO

jsfiddle.net/bebenkoben/v3bhqq9r/show

Happy jQuery \m/

Thus articles End of Page Slide Out Box plus Minimize use jQuery

that is all articles End of Page Slide Out Box plus Minimize use jQuery This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article End of Page Slide Out Box plus Minimize use jQuery with the link address https://autopostingblogspot.blogspot.com/2014/09/end-of-page-slide-out-box-plus-minimize.html