Monthly Archives: June 2015

Teknik Jquery link auto Scroll pada HTML

Assalamualaikum Wr.Wb

Sudah cukup lama , juga, pada kesempatan kali ini saya hanya memberikan teknik jquery yang sekarang umum digunakan di website-website company profile pada perusahaan. Sebenarnya saya bingung juga memberikan judul. Intinya jika anda menekan sebuah link, maka halmann akan scroll otomatis ke link yang anda tuju secara smooth. Kurang lebihnya anda bisa liat link Demo berikut

Sampai disini saya harap anda sudah dapat gambaran. Jadi Cukup dengan tekan Linknya tuh disini maka halaman akan di scroll kan seara otomatis oleh jquerya.

Disini sebenarnya bisa hanya menggunakan Bawaan dari jquery corenya, namun saya tambahkan animatescoll.js  sehingga lebih mudah digunakan dan ada efek bouncenya. Memantul.

Setelah load kedua script ini

1
2
<script src="jquery-1.10.2.js"></script>
<script src="animatescroll.js"></script>

Selanjutnya anda bisa membuat link dengan Format seperti berikut

1
<a href="#" onclick="$('#section-).animatescroll({scrollSpeed:3000,easing:'easeOutElastic'});"><h2>linknya tuh disini</h2></a>

Penjelasan. untuk hrefnya dikosongkan saja atau diisi #

lalu event onclicknya diisi dengan

1
$('#section-2).animatescroll({scrollSpeed:3000,easing:'easeOutElastic'});

 #section-2 adalah id tujuannya. scrollSpeed adalaha kecepatannya, nilai makin besar makin lama gesernya. easing sampain ke belakang adalah type pergerakannya.

lalu untuk area yang dituju tinggal di tambahi kode

1
<div id='section-2'></div>

Lalu jalankan Aplikasi anda. Harusnya jika sudah benar maka link anda akan menuju ke ID ke tempat yang sudah anda tuju. Dan harus dipastikan lagi bahwa teknik ini untuk 1 link dengan halaman yang sama.

daripada lama-lama anda pasti ingin liat scriptnya, monggo di download saja di

mirror1  atau mirror2

Oke Sekian dari tutorial kali ini semoga bermanfaat. Jangan Lupa Komen

Terima kasih

Wassalamualaikum Wr.Wb

Teknik Combo Box Langsung Action dengan Ajax Jquery

Assalamualaikum Wr. Wb

Setelah berbulan bulan vakum nulis sesuatu yang baru di blog ini akhirnya punya waktu lagi. Sekarang saat membagikan teknik baru dalam Per PHP an nusantara, Combo Box dengan menggunakn Ajax Jquery.. Maksudnya? ya COmbo Box tersebut langsung bisa action saat anda memilih dari Selecbox tanpa harus refresh Browser. Masih Nggak Ngeh, Oklah anda bisa klik DEMO  berikut ini.

Udah Paham kah maksudnya, jadi action langsung tanpa loading browser

Jika selectnya 2 maka yang dihasilkan juga 2

combo1

Jika 4 atau seterusnya juga bisa memnyesuaikan

combo2

Lalu gunanya untuk Apa Pak? ya untuk macam-macam, tergantung program anda. Fokus saya disini hanyalah memberikan tekniknya saja.

Jika ingin melihat sourcenya anda bisa langsung Sedot saja di sini

MIRROR1 atau MIRROR2

Oke Sekian dari saya, bagi yang merasa terbantu atau apalah, minimal Komenlah, jangan jadi Silence Reader Aja. atau jangan kalau script gak bisa baru Komen HADEH .

(Gw sih kalau terbantu ama script orang minlmal say Thanks Gan. Kalau gak bisa juga tetep komen biar tahu permasalahnnya) 😀

Happy Coding

Wassalamualaikum Wr.Wb