Senin, 10 Januari 2011

Show/Hide or Slide-In

Mirip dengan trik hide/show artikel kali ini yang akan Beben si bloglang anu ganteng kalem tea beberkan. Pokoknya ada artikel bisa sembunyi lalu muncul lagi, akan dipostingkanlah :D Ingat!!! konten yg bisa ditanamkan dengan trick ini tidak hanya terbatas pada buku tamu saja yak sob ;) Mungkin kotak komentar, list friend, dll. Oke secara singkat menurut weblog yg Beben temukan ini, begini cara membuat show/hide secara sederhana dengan menggunakan javascript! Kalau disimak hide/show, toggle/display kayaknya sama saja yah :P
<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>
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 :)

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 GadgetHTML/Javascript Kalau mau step by step perhatikan kode yg dibedakan warna tulisannya yah!
  1. Warna merah
  2. Letakan diatas/sebelum tag </body>
  3. Warna biru
  4. Masukan sebelum kode ]]></b:skin>
  5. Warna ungu
  6. Masukin di body template (<body> ... </body>)

Save

Resource by: http://www.ultramegatech.com/blog/
Good luck \m/ :-h

Tidak ada komentar:

Posting Komentar