◄ Min  Size Fonts: + | - | ± Color: Max ►

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='http://1.bp.blogspot.com/-Ao1pq3WWP80/UYkTi_lThZI/AAAAAAAAYYs/MAnvRxtxcoc/s1600/close.png' title='close'/>
</a>
</span>
<span>
<a href='javascript:void;' id='sticky-minimize' title='Minimize'>
<img alt='-' src='http://1.bp.blogspot.com/-GOrrILFH09c/UYkVuWmzk0I/AAAAAAAAYY8/v3FimwutPv0/s1600/minimize.png' title='minimize'/>
</a>
</span>
<span>
<a href='javascript:void;' id='sticky-maximize' title='Maximize'>
<img alt='+' src='http://1.bp.blogspot.com/-bJ8cWb-cIn0/UYkV99a2VwI/AAAAAAAAYZE/buv0P0KyM6I/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/
Loading...
XEnd of Page Slide Out Box plus Minimize use jQuery
Membuat kotak slide out ketika melakukan scroll ke bawah pada suatu halaman menggunakan script jQuery.
Subscribe my posts Register For Free!
[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE