Categories

30 Stylish jQuery Tooltip Plugin Untuk Mempercantik Desain Website

Tooltips pada website adalah hal kecil yang dapat memainkan peran besar dalam desain website. Jika tooltip pada website Anda dibuat dengan sangat baik dan tampak luar biasa maka dapat meningkatkan kesan pengunjung tentang website anda. Berikut ini 30 jQuery tooltip plugin yang keren. Enjoy! 1. The Tooltip The Tooltip is a good looking tooltip that appears [...]

Read more...

Nonaktifkan klik kanan dengan jQuery

Terkadang kita ingin melindungi tulisan kita dari tangan-tangan iseng yang kerjaannya cuma bisa copy-paste tulisan orang, berikut ini salah satu trik yang bisa digunakan untuk mencegah atau setidaknya sedikit mempersulit orang yang suka copy-paste, yaitu dengan menonaktifkan fungsi klik kanan dengan jQuery pada halaman web Anda. Berikut ini scriptnya : <script type=”text/javascript”> $(document).ready(function() { $(this).bind(“contextmenu”, [...]

Read more...

Membuat Login berbasis Ajax dengan jQuery dan PHP MySQL

Langkah pertama kita buat database beserta table nya, berikut ini kodenya : CREATE DATABASE test; CREATE TABLE user ( id int(11) NOT NULL AUTO_INCREMENT, username varchar(20) NOT NULL, password varchar(32) NOT NULL, PRIMARY KEY (id) ); INSERT INTO user (id,username,password) VALUES (NULL,’admin’,MD5(‘admin’)); Selanjutnya kita buat file yang berisi form login, kita beri nama “index.php”, berikut [...]

Read more...

Membuat animasi effect zooming image hover dengan jQuery

Kali ini saya mau berbagi bagaimana caranya membuat animasi efek zooming image hover dengan jQuery, efek yang dihasilkan adalah dengan memperbesar gambar, jadi ketika gambar dihimpiri mose, gambar langsung memperbesar dirinya. Berikut ini javascriptnya : <script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js”></script> <script type=”text/javascript”> $(document).ready(function(){ $(‘.images img’).animate({width: 50}, 0); $(‘.images’).mouseover(function(){ gridimage = $(this).find(‘img’); gridimage.stop().animate({width: 100}, 150); }).mouseout(function(){ gridimage.stop().animate({width: 50}, [...]

Read more...