Sabtu, 24 Agustus 2013

Muhammad Anwari
0 comment

J Query : Hide Show


J Query : Sembunyi & Muncul

J Query??? Pada tahu belum, apa itu J Query, nah J Query adalah kumpulan kode/fungsi Javascript siap pakai, sehingga mempermudah kita untuk membuat kode Javascript atau dalam kesimpulannya jQuery menyederhanakan kode Javascript.

Okray, sekarang saya akan bahas tentang menyembunyikan/memunculkan text/gambar/item dengan sekali klik, okeh daripada anda penasaran langsung ajah praktek, dengan mengetikkan atau mengcopas syntax dibawah ini, dan untuk script js nya download disini

<!DOCTYPE html>
<html>
<head>
<title>Muhammad Anwari</title>
<script src="anwari.js"> //anwari.js : script js yang harus didownload
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>

<body bgcolor="#999900">
<body>
<button id="hide">Sembunyikan</button>
<button id="show">Munculkan</button>
<br>
<p>Jika anda klik 'Sembunyikan' maka saya akan menghilang, dan untuk memunculkan kembali klik 'Munculkan'
<img src="1.jpg" width="100" height="100"></p>
</body>
</body>
</html>

Simpan dengan nama hideshow.html atau terserah anda yang penting berekstensi .html

Read More
Muhammad Anwari
0 comment

J Query : Fade In Fade Out



J QUERY : Memunculkan & Menghilangkan

J Query??? Pada tahu belum, apa itu J Query, nah J Query adalah kumpulan kode/fungsi Javascript siap pakai, sehingga mempermudah kita untuk membuat kode Javascript atau dalam kesimpulannya jQuery menyederhanakan kode Javascript.
Sekarang saya akan berbagi ilmu tentang J Query bertema Memunculkan dan Menghilangkan item – item yang terdapat di WEB, langsung yuk praktek!!!
Hasil akan seperti pada gambar diatas

Buka text editor anda, kemudian ketikkan syntax dibawah ini, atau COPAS jika anda malas mengetik, untuk scriptnya bisa didownload disini

<!DOCTYPE html>
<html>
<head>
<title>Muhammad Anwari</title>
<script src="anwari.js"> //anwari.js : script yang harus didownload
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  });
});
</script>
</head>
<body>
<body bgcolor="#999933">
<p>Coba aja sendiri,klik button di bawah ini !!!</p>
<button>Klik Saya!</button>
<br><br>

<div id="div1" style="border:solid 2px #000;width:170px;height:170px;background-color:red;"></div>
<br>
<div id="div2" style="border:solid 2px #000;width:170px;height:170px;background-color:white;"></div>
<br>
<div id="div3" style="border:solid 2px #000;width:170px;height:170px; background-image:url(2.jpg)"></div>

</body>
</body>
</html>

Nah jika sudah simpan dengan fadeinout.html atau terserah dengan nama apa aja yang penting harus berekstensi .html


Read More
Muhammad Anwari
0 comment

J Query : Slide Up Slide Down


J Query : Meluncur Keatas & Kebawah 

J Query??? Pada tahu belum, apa itu J Query, nah J Query adalah kumpulan kode/fungsi Javascript siap pakai, sehingga mempermudah kita untuk membuat kode Javascript atau dalam kesimpulannya jQuery menyederhanakan kode Javascript.
Nah untuk saat ini saya akan membahas  cara meluncurkan item keatas dan kebawah pada web, langsung aja praktek, dengan mengetikkan/mengcopas syntax dibawah ini!! Dan untuk scriptnya anda bisa download disini

<!DOCTYPE html>
<html>
<head>
<title>Muhammad Anwari</title>
<script src="anwari.js"> //anwari.js : script js yang harus didownload
</script>

<script>
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>

<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">Klik untuk menampilkan dan meyembunyikan</div>
<div id="panel">Hallo bray,,bagus kan</div>
</body>
</html>

Simpan dengan nama meluncur.html atau terserah anda yang penting berekstensi .html

Read More