Begitulah kira-kira jika sobat ingin membuat culang (muncul ilang) :D Sekarang mari kita lanjutkan membuat slide-in panel effect with jQuery. Singkat penjelasan mengenai .slideToggle() dari web resmi Jquery bisa menuju halaman berikut jQuery API. Ingat pada template sobat sudah harus memiliki script jQuery inti jika akan memakai tutorial berikut :)<script type='text/javascript'>
function toggleDisplay(id) {
var obj = document.getElementById(id);
if(obj.style.display == 'none') {
obj.style.display = 'block';
} else {
obj.style.display = 'none';
}
}
</script>
<div id="UNIQUE-ID">Konten yang akan dihilangkan dan dimunculkan kembali !!!</div>
<a href="#" onClick="toggleDisplay('UNIQUE-ID'); return false;">Show/Hide</a>
Ramuan Ajaib
<script type='text/javascript'>
var slidePanel = 0;
$(document).ready(function() {
$("#panel-tab").click(function(e) {
e.preventDefault();
$("#panel").animate({top: slidePanel}, 800, 'linear', function() {
if(slidePanel == 0) {slidePanel = -460;}
else {slidePanel = 0;}
});
});
});
</script>
<style>
#panel {
width: 237px;
height: 457px;
position: absolute;
top: -457px;
right: 0px;
z-index: 100;
background-color: #333333;
}
#panel-tab {
width: 110px;
height: 21px;
position: absolute;
bottom: -21px;
left: 0px;
text-align:center;
background-color: #333333;
text-decoration: none;
color: #FFFFFF;
/* Mozilla */
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
}
</style>
<div id="panel">
<a href="#" id="panel-tab">Click for Cbox</a>
CONTENT YG MAU DISEMBUNYIKAN
</div>
Kalau mau cara instant, masukan seluruh kode diatas pada Add a Gadget ► HTML/Javascript Kalau mau step by step perhatikan kode yg dibedakan warna tulisannya yah!var slidePanel = 0;
$(document).ready(function() {
$("#panel-tab").click(function(e) {
e.preventDefault();
$("#panel").animate({top: slidePanel}, 800, 'linear', function() {
if(slidePanel == 0) {slidePanel = -460;}
else {slidePanel = 0;}
});
});
});
</script>
<style>
#panel {
width: 237px;
height: 457px;
position: absolute;
top: -457px;
right: 0px;
z-index: 100;
background-color: #333333;
}
#panel-tab {
width: 110px;
height: 21px;
position: absolute;
bottom: -21px;
left: 0px;
text-align:center;
background-color: #333333;
text-decoration: none;
color: #FFFFFF;
/* Mozilla */
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
}
</style>
<div id="panel">
<a href="#" id="panel-tab">Click for Cbox</a>
CONTENT YG MAU DISEMBUNYIKAN
</div>
- Warna merah Letakan diatas/sebelum tag </body>
- Warna biru Masukan sebelum kode ]]></b:skin>
- Warna ungu Masukin di body template (<body> ... </body>)
Save
Resource by: http://www.ultramegatech.com/blog/Good luck \m/ :-h
Tidak ada komentar:
Posting Komentar