Nightwalker Team » javascript

Membuat Tooltip dengan JQuery clueTip

bufferdie — Wed, 07 Dec 2011 12:07:59 +0000

Selamat malam, pagi, siang ataupun sore..! jumpa lagi bersama saya di Tutorial Web Development. Pada Tutorial Web Development kali ini penulis akan membahas bagaimana “Membuat Tooltip dengan JQuery clueTip“. Sebelum kita melangkah dan melompat lebih jauh, penulis akan menjelaskan terlebih dahulu apa itu Tooltip. Tooltip adalah sebuah kotak atau box yang tampil ketika cursor/penunjuk mouse diarahkan ke suatu elemen pada halaman website.

Tooltip berguna untuk memberikan penjelasan atau deskripsi pada sebuah link, gambar atau bagian-bagian website lainnya.
Untuk lebih memperjelas contoh tentang tooltip… Silahkan anda lihat pada gambar di bawah ini :

Untuk dapat membuat Tooltip seperti pada gambar diatas, kita membutuhkan beberapa file yang dapat anda download di https://github.com/kswedberg/jquery-cluetip/downloads. Atau anda dapat langsung mendownload file contoh selengkapnya dari artikel ini , yang akan penulis berikan pada bagian penutup di akhir tutorial ini.

Berikut ini file-file yang dibutuhkan :
-jquery.cluetip.js
-jquery.hoverIntent.js
-jquery.cluetip.css

Ok, clueTip sudah anda download, kita dapat langsung mencoba meng-impelementasikan clueTip pada sebuah halaman web seperti contoh dibawah ini.
Silahkan anda buat file HTML dan berikut ini listing code nya :

Belajar bikin tooltip gitu!

Ini dia tooltip nya!

Bufferdie

Pada code :

Ini dia tooltip nya!

content atau isi dari tooltip diambil dari file isitultip.html. Sedangkan pada code berikutnya content diambil dari attribute title pada tag a dan img.

Bagaimana? mudah bukan? tertarik untuk mencobanya? silahkan dikembangkan sesuai dengan kreativitas anda, panduan lengkap kostumisasi nya dapat anda lihat di http://plugins.learningjquery.com/cluetip/#options
Akhir kata, penulis ucapkan selamat mencoba.. dan sampai bertemu kembali pada tutorial2 berikutnya… ^_*

DOWNLOAD

Fungsi Datepicker JQuery untuk Input Tanggal

bufferdie — Mon, 07 Jun 2010 19:44:34 +0000

Salam hangat dan salam jumpa sodara2 skalian para pengunjung setia Nightwalker Team :-q~~ . Pada artikel kali ini , penulis akan mencoba sedikit berbagi tentang cara penggunakan function datepicker pada JQuery untuk input text yang data nya menggunakan format tanggal . Tentu ada sering menemukan input data yang berupa tanggal , misalnya pada sebuah formulir pendaftaran online yang terdapat input tanggal lahir , seperti di situs2 jejaring sosial (ex: facebook.com) .

Pada sekian banyak formulir pendaftaran di website yang penulis kunjungi , kebanyakan masih menggunakan input select option yang kemudian pada tanggal nya di lakukan perulangan dengan php seperti contoh gambar di bawah ini :

Nah , pada tutorial kali ini yang akan di bahas adalah bagaimana membuat input tanggal tersebut menjadi lebih menarik dan interaktif yaitu dengan menggunakan fungsi datepicker jquery seperti contoh gambar di bawah ini :

Jadi , ketika user atau pengunjung meng-klik pada bagian input text yang akan di gunakan sebagai input data tanggal , akan langsung muncul sebuah kotak dialog yang berisikan kalender . Dan apabila di klik pada salah satu tanggal pada kotak dialog kalender tersebut, akan masuk ke dalam input text yang digunakan untuk data tanggal .

Untuk dapat membuat input tanggal dengan fungsi datepicker jquery tersebut , anda tentu harus memiliki library jquery nya terlebih dahulu . Jika belum punya , silahkan anda mendownload nya di website resmi mereka yang ada di http://www.jquery.com , atau anda dapat langsung mendownload file contoh slengkapnya dari artikel ini , yang akan penulis berikan pada bagian penutup di akhir artikel ini .

Sebagai contoh silakan anda buat sebuah file bernama daftar.html , dan berikut ini listing code nya :

nightwalker team | datepicker jquery

Registration

Pada code yang di cetak tebal di atas di gunakan untuk mengambil fungsi datepicker jquery dari file jquery pada direktori js dan css . Dan kemudian di deklarasikan ke dalam id value “tanggal_lahir” , lalu di panggil kembali dengan menggunakan input text yang juga ber id value “tanggal_lahir” .

Anda juga dapat merubah format tanggal dengan menambahkan option pada fungsi datepicker seperti contoh di bawah :

$(‘#tanggal_lahir’).datepicker({ dateFormat: ‘d MM, yy’ });

atau bisa juga dengan tambahan nama hari seperti contoh di bawah :

$(‘#tanggal_lahir’).datepicker({ dateFormat: ‘DD, d MM, yy’ });

Ok , mudah2an bermanfaat buat para web developer yang sedang mengerjakan aplikasi pendaftaran online ataupun para pngunjung yang sedang mendalami dunia web development .. Sampai Jumpa di artikel2 berikut nya

DOWNLOAD

Membuat Tab Widget dengan JQuery

bufferdie — Thu, 06 May 2010 19:22:15 +0000

Selamat malam sodara-sodara sekalian para pengunjung nightwalker team di manapun anda berada ! huehuehue ~~ . Jika anda sering mengunjungi website2 portal seperti yahoo.com , facebook.com atau website2 portal lokal seperti metrotvnews.com , detik.com , indowebster.com anda tentu melihat tab2 menu menarik pada halaman yg ada di website2 tersebut .

Menu2 yang penulis maksud kan disini adalah menu2 yang ketika tab tersebut di klik dia tidak berpindah halaman ataupun meload seluruh halaman , melainkan hanya berpindah dari bagian content satu ke content yang lain nya pada halaman yang sama . (bingung ? minum dong obat anti bingung ! :-q~~)
Untuk lebih jelasnya , anda dapat melihat contoh2 tabs nya di bawah ini :

Tabs ini salah satu fungsi nya adalah menghemat ruang pada sebuah halaman website , sehingga membuat sebuah halaman website terkesan lebih rapih , dan scrollny tidak memanjang kebawah . Anda tentu melihat bagaimana website2 raksasa seperti yahoo , detik , indowebster , Nightwalker team(<-++ raksasa ga ya ? ) dll pada halaman home nya menyediakan banyak sekali cuplikan2 berita , video , ataupun gambar .

Bayangkan jika kesemuanya itu di tampilkan tanpa menggunakan tab2 seperti yang kita bahas ini , scroll ny di jamin puanjang buaaaanget dahh , huehuehe .. ~~ . Dan tentunya membuat pengunjung merasa malas , letih , resah , gundah , dan enggan untuk melihat konten yang disajikan xixixixi ~~ .

Ok , kita langsung saja pada bagian intinya . Untuk dapat membuat tab menu ini , kita memerlukan library jquery yang dapat anda download langsung dari website resminya yang ada di http://jqueryui.com/download .

Jika sudah barulah kita dapat mencoba mempraktekan nya . Untuk cara pembuatan nya , anda dapat memasukan script jquery yg telah anda download tadi kedalam sebuah halaman web yang anda ingin berikan tab jquery ini . Kemudian ketik value id yang anda inginkan bserta fungsi tabs jquery nya . Setelah itu anda tinggal membuat tag div pada bagian body dengan value id yang sama .
Berikut ini contoh tab sederhana yg penulis buat :

Wall

Info

Photos

Boxes

Konten 1 ny disini …………

Konten 2 ny disini …………

Konten 3 ny disini …………

Konten 4 ny disini …………

Contoh diatas merupakan contoh sederhana tentang penggunaan jquery tabs , silahkan anda kembangkan lagi .
Untuk anda yang ingin mempelajari nya lebih dalam , anda dapat menuju ke website resmi jquery nya di http://www.jquery.com .
Untuk melihat demo dari contoh sederhana di atas anda dapat menuju ke link berikut ini : DEMO
Download script lengkapnya pada link berikut ini : DOWNLOAD

Sebagai tambahan , JQuery tabs plugin ini menggunakan JQuery UI CSS framework untuk pengaturan layout dan tampilan nya . Sesuai dengan dokumentasi JQuery tabs plugin dari website resmi nya , penulis me-rekomendasikan penggunaan ThemeRoller tool untuk memudahkan anda dalam membuat tampilan dan pengaturan layout nya yang cocok dan sesuai dengan selera anda .

Namun , bagi anda yang ingin mengkostumisasi CSS nya secara manual anda dapat mengedit file stylesheet yang terdapat pada file download diatas . Untuk dasar class2 CSS yang dapat anda kostumisasi disana diantara nya adalah : .ui-widget-header , .ui-tabs , .ui-tabs .ui-tabs-nav , .ui-tabs .ui-tabs-panel , dll (silahkan anda lihat baris di bawah komentar /* Overlays */)

gimana gimana gimana ? tertarik untuk memasang nya di blog / website anda ? huehuehue ..
mungkin sgitu dulu aja artikel yang penulis berikan pada kesempatan kali ini , akhir kata :

~Sampai jumpa pada artikel2 berikutnya ! xixixixixi .. ~~

Document Overlay dengan Lightbox Gone Wild

bufferdie — Tue, 04 May 2010 14:51:54 +0000

Bagi anda yang telah lama berkecimpung di dunia web development , mungkin anda sudah tidak asing lagi dengan apa yang di sebut Lightbox . Namun untuk anda yang belum mengenal nya (knalan lah! ) , jangan khawatir ! resah ! ataupun gelisah ! huehuehue .. ~~ , karena penulis akan mencoba share sedikit untuk menjelaskan definisi singkat dari script ini .

Lightbox JS merupakan sebuah script yang digunakan untuk menampilkan sebuah gambar secara overlay pada sebuah halaman web , serta dapat bekerja pada hampir semua jenis browser modern . kira2 seperti itulah apa yang di sebut Lightbox ~~ .

Yang akan penulis fokuskan pada artikel kali ini , bukanlah tentang cara menggunakan Lightbox untuk meng-overlay sebuah image/gambar .
Pada artikel ini yang akan di bahas adalah tentang bagaimana agar Lightbox tidak hanya menampilkan image saja (misal : sebuah halaman website/blog , gambar , video , music dll) .

Ok , dari pada kelamaan .. ada baiknya kita langsung saja mencoba script ini . Untuk menggunakan script ini cara nya cukup mudah .
Anda tinggal memasukan script ini beserta file css nya ke dalam halaman web atau blog anda . Lalu buat sebuah link dengan tag html yang mengarah pada halaman web atau blog yang akan anda tampilkan secara overlay dengan attribut class dan di beri value lbOn . Berikut ini contoh penggunaan nya :

Nightwalker Team | Contoh Lightbox Gone Wild

About Us

Contact Us

Google Search

Nightwalker Billiard

Nightwalker Movie

Untuk membuat tombol Close pada halaman yang di overlay kan , anda dapat menggunakan sintax seperti contoh dibawah ini :

Close [~X~]

Bagi anda yang ingin mendalami Lightbox , anda dapat mempelajari nya langsung dari website resmi Lightbox , yang beralamat di :

http://www.huddletogether.com/projects/lightbox/

Untuk Project Lightbox Gone Wild , anda juga dapat mengunjungi website resmi nya yang beralamat di :

http://particletree.com/features/lightbox-gone-wild/

Untuk melihat demo nya anda dapat menuju link berikut ini : DEMO LIGHTBOX
Download script lengkapnya pada link berikut ini : DOWNLOAD

Akhir kata , /me ucapkan selamat mencoba dan salam super ! xixixixixi ..

Simple Js Image Gallery

wdbot — Sat, 13 Mar 2010 12:41:31 +0000

Hallo friends… Lama tak jumpa… masih bersama saya “Wadeblack” hehehehe…
Ok lah, cukup segini aja sapaannya, sekarang kita masuk ke materi Javascript
Kali ini saya akan mengkolaborasikan css dengan javascipt dan memberikan source code simple javascipt image gallery tersebut .
Pertama-tama Anda harus memiliki 15 buah gambar yang akan dimasukkan kedalam gallery Anda, sebagai contoh Saya menggunakan gambar yang ada di Facebook Saya.
buat lah 3 buah text file, beri nama ketiga file yaitu a.css, a.js, dan a.html
copy script css dibawah ini dan paste-kan ke dalam file a.css

html {
overflow: hidden;
}

body {
background: #000000;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
color: #ffffff;
font-family: verdana, arial, helvetica, sans-serif;
}

#screen {
position:absolute;
left: 10%;
top: 10%;
width: 80%;
height: 80%;
overflow: hidden;
background: #414141;
}

#grid {
position:absolute;
}

#grid img {
position: absolute;
cursor: pointer;
left: -10000px;
}

#grid .over {
border: #ff0000 solid;
}

kemudian save file tersebut, selanjutnya copy script dibawah ini dan paste-kan ke dalam file a.js

var O = [];
var iL;
var scr;
var grd;
var grs;
var tit;
var cap;
var xm = 0;
var ym = 0;
var nx = 0;
var ny = 0;
var nw = 0;
var nh = 0;
var cx = 0;
var cy = 0;
var cz = .2;
var Tw = 0;
var Th = 0;
var X = 0;
var Y = 0;
var F = false;
var Fo = false;
var NK = 0;
var ZM = .8;
var NX = 5;
var NY = 3;
var NB = 1.2;
var Mz = NX * 2;
var mz = .1;
var path   = “”;
var images = [
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
];
document.onmousemove = function(e)
{
if (!F)
{
if (window.event)
{
e = window.event;
}
xm = Math.min(nw, Math.max(0, (e.x || e.clientX) – nx));
ym = Math.min(nh, Math.max(0, (e.y || e.clientY) – ny));
}
}
function resize()
{
nx = scr.offsetLeft;
ny = scr.offsetTop;
nw = scr.offsetWidth;
nh = scr.offsetHeight;
Tw = nw * cz;
Th = nh * cz;
for (var i in O)
{
O[i].resize();
}
}
onresize = resize;
function scroll(e)
{
if (!F)
{
var z = 0;
if (e)
{
z = (e.detail > 0) ? 1 : – 1;
}
else
{
z = (event.wheelDelta < 0) ? 1 : – 1;
}
if (z > 0)
{
if (ZM < Mz)
{
ZM *= 1.2;
}
}
else
{
if (ZM > mz)
{
ZM *= .8;
}
}
}
else
{
F = false;
}
}
if (window.addEventListener)
{
window.addEventListener(‘DOMMouseScroll’, scroll, false);
}
else
{
document.onmousewheel = scroll;
}
function Img(n, x, y)
{
this.x      = x;
this.y      = y;
this.n      = n;
this.loaded = false;
this.img        = document.createElement(“img”);
this.img.obj    = this;
this.img.src    = document.getElementById(‘loading’).src;
grd.appendChild(this.img);
this.ims = this.img.style;
this.pre        = new Image();
this.pre.obj    = this;
this.pre.onload = function()
{
this.obj.loaded     = true;
this.obj.img.src    = this.src;
}
this.pre.src    = path + images[n % iL][0];
this.img.ondrag        = function() { return false; }
this.img.onselectstart = function() { return false; }
this.img.ondblclick    = this.img.onmousedown;
this.img.onmousedown = function()
{
if (this.obj.loaded)
{
if (F)
{
ZM = NK;
F = false;
}
else
{
F = this;
NK = ZM;
ZM = NX + .1;
xm = (((nw / NB) * .5) / NX) + F.obj.x * nw / NX;
ym = (((nh / NB) * .5) / NY) + F.obj.y * nh / NY;
}
}
return false;
}
this.img.onmouseover = function()
{
if(Fo)
{
Fo.obj.border(false);
}
if (this.obj.loaded)
{
var i = images[this.obj.n % iL];
tit.innerHTML = i[1];
cap.innerHTML = i[2];
Fo = this;
Fo.obj.border(true);
}
else
{
tit.innerHTML = “”;
cap.innerHTML = “”;
}
}
this.resize = function()
{
this.ims.left   = Math.round(NB * this.x * Tw / NX) + ‘px’;
this.ims.top    = Math.round(NB * this.y * Th / NY) + ‘px’;
this.ims.width = Math.round(Tw / NX) + ‘px’;
this.ims.height = Math.round(Th / NY) + ‘px’;
if(this == Fo.obj)
{
this.border(true);
}
}
this.border = function(over)
{
var b = 0;
var m = 0;
if (over)
{
b = Math.round(((NB * Th / NY) – (Th / NY)) * .5);
m = 2 – b;
this.img.className = “over”;
}
else
{
this.img.className = “”;
}
this.ims.borderWidth = b + ‘px’;
this.ims.marginLeft = m + ‘px’;
this.ims.marginTop   = m + ‘px’;
}
}
function run()
{
var vz = (ZM – cz) * .05;
if (Math.abs(vz) > .001)
{
resize();
}
else
{
vz = 0;
}
cz += vz;
cx += (xm – cx) * .1;
cy += (ym – cy) * .1;
grs.left = Math.round((nw * .5) – (NB * cx * Tw / nw)) + ‘px’;
grs.top = Math.round((nh * .5) – (NB * cy * Th / nh)) + ‘px’;
setTimeout(run, 16);
}
onload = function()
{
grd = document.getElementById(“grid”);
grs = grd.style;
scr = document.getElementById(“screen”);
tit = document.getElementById(“title”);
cap = document.getElementById(“caption”);
iL = images.length;
var k = 0;
for (var y = 0; y < NY; y++)
{
for (var x = 0; x < NX; x++)
{
O.push(new Img(k++, x, y));
}
}
resize();
cx = xm = nw / 2;
cy = ym = nh / 2;
run();
setTimeout( function () {
document.getElementById(‘notice’).style.visibility = ‘hidden’;
}, 30000);
}

save, dan perhatikan script ini

["alamat_gambar.jpg","nomor_gambar","judul_gambar"],

ubah menjadi alamat, nomor, dan judul gambar yang Anda tentukan.

contoh :

["http://photos-e.ak.fbcdn.net/hphotos-ak-snc3/hs377.snc3/24155_106818309344300_100000483947570_172771_6578433_n.jpg","01","3d Outline"],

dan yang terakhir copy script dibawah ini dan paste-kan ke a.html

Javascript Gallery

kemudian save, masukkan ketiganya ke dalam 1 Folder.
Preview :

Selesai ^_^