Kategori
jQuery

Efek warna memudar pada link dengan jQuery

jquery effectSudah jamak dipakai efek hover saat mouse diletakkan di atas sebuah link. Cara paling sederhana adalah menggunakan CSS yaitu dengan menggunakan deklarasi :hover. Sekarang kita akan membuat efek hover ini lebih manis, yaitu dengan menggunakan jQuery. Saat mouse diletakkan di atas link, warnanya akan berubah, kemudian saat mouse dikeluarkan dari atas link tersebut warnanya akan memudar perlahan menuju ke warna asal.

Demo:

Link 1

Link 2

Link 3

%CODE1%

The Oldschool

Efek hover menggunakan CSS. Efek sederhana ini yang paling sering digunakan. Ketika mouse masuk dan mouse keluar dari link, warna akan berubah.

[sourcecode language=”css”]<style type="text/css">
#oldschool a{color:#999}
#oldschool a:hover{color:red}
</style>[/sourcecode]

Padanannya dengan jQuery:

Tanpa CSS, warna-warna tersebut langsung dimasukkan dalam script menggunakan method .css()

[sourcecode language=”javascript”]<script type="text/javascript">
$(function(){
$(‘#oldschool a’).hover(
function(){$(this).css(‘color’,’red’)},
function(){$(this).css(‘color’,’#999′)});
};
</script>[/sourcecode]

Dengan menggunakan CSS, warna-warna didefinisikan dalam CSS, lalu manipulasinya menggunakan method .addClass() dan .removeClass().

[sourcecode language=”javascript”]<style type="text/css">
#oldschool a, .moout {color:#999}
.moin {color:red}
</style>
<script type="text/javascript">
$(function(){
$(‘#oldschool a’).hover(
function(){$(this).addClass(‘moin’).removeClass(‘moout’)},
function(){$(this).addClass(‘moout’).removeClass(‘moin’)})
};
</script>[/sourcecode]

Demo:

Link 1

Link 2

Link 3

%CODE2%

The Effect

Efek ini menggunakan plugin jQuery Color jadi pastikan plugin itu juga dimuat di halaman ybs. Jika menggunakan wordpress, cukup menambahkan baris <?php wp_enqueue_script('jquery-color');?> pada file template kita.

Tanpa CSS, yaitu dengan memasukkan warnanya langsung ke dalam script.

[sourcecode language=”javascript”]<script type="text/javascript">
$(function(){
$(‘#contoh a’).hover(
function(){$(this).stop().css({‘color’:’red’})},
function(){$(this).stop().animate({‘color’:’#999′},500)}) });
</script>[/sourcecode]

Menggunakan CSS, scriptnya akan mengambil warna dari CSS yang didefinisikan di luar script itu sendiri. Cara ini akan memudahkan merubah-rubah warna hanya dengan mengubah CSSnya, tidak perlu melihat ke script ini.

Karena efek .animate() pada jquery tak dapat mengambil nilai dari CSS secara langsung, maka kita buat dummy tag untuk mengambil warna dari CSS.

[sourcecode language=”javascript”]<style type="text/css">
#dummyin, .moin {color:red}
#dummyout, .moout, #contoh a {color:#999}
</style>
<script  type="text/javascript">
$(function(){
var moin=$(‘#dummyin’).css(‘color’);
var moout=$(‘#dummyout’).css(‘color’);
$(‘#contoh a’).hover(
function(){$(this).stop().css({‘color’:moin})},
function(){$(this).stop().animate({‘color’:moout},500)});
});
</script>
<div id="dummyin" class="in"></div>
<div id="dummyout" class="out"></div>
[/sourcecode]

Saksikan efek ini pada link di website ini dan semua blog yang memakai theme-theme buatan itx.

Jadi lebih cantik bukan?!

Kategori
WordPress

Menggabungkan jQuery dan blog WordPress kita:

Tentunya kita sudah mengenal jQuery sebagai salah satu tool (biasa disebut JavaScript Library) untuk membuat interaksi website kita lebih oke dengan programming yang lebih simple dibanding javascript biasa. Sangat sesuai dengan slogannya yaitu write less do more. Untuk menambahkan fungsi jquery ke dalam halaman web kita, cara yang biasa dilakukan adalah menambahkan baris sbb:

<script type="text/javascript" src="/path/ke/file/jquery.js"></script>

Hal ini hanya jika file jquery.js kita taruh di hosting kita bersama-sama dengan file-file yang lain. Dalam contoh di atas terdapat pada folder /path/ke/file/ . File jquery.js ini dapat pula kita dapatkan tanpa perlu menaruhnya di hosting kita. Caranya adalah dengan menggunakan file yang dihost di g00gle misalnya:

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

atau bisa juga:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.4.2");
</script>

atau yang dihost di Micr0s0ft:

<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>

Dengan ini kita tak perlu mendownload lalu menguploadnya ke hostingan kita. Mudah bukan?!

jQuery di WordPress

jQuery sudah dimasukkan dalam script standar WordPress tapi tidak dimuat secara default. Dengan kata lain library ini sudah termasuk dalam file instalasi WordPress. Untuk memuatnya kita perlu mengedit template WordPress kita sehingga memanggil fungsi wp_enqueue_script(), contohnya sbb:

<?php wp_enqueue_script('jquery') ?>

Fungsi itu bisa dipanggil berapa kalipun di halaman template manapun dan tak perlu takut akan dobel-dobel, karena WordPress cuma akan memuatnya satu kali saja. Jika kita tengok source hasil keluarannya akan nampak kurang lebih sbb:

<script type='text/javascript'
src='http://itx.web.id/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>

Baris itu akan otomatis tertampil di dalam tag <head> sesuai dengan halaman di mana script itu dipanggil dengan fungsi wp_enqueue_script() . Jika ingin tampil di semua halaman, panggil saja di halaman template header.php atau footer.php. Mudah bukan?! Selain jQuery core, WordPress (pada versi 2.9.2) juga menyertakan script lain yang dapat dipanggil dengan wp_enqueue_sript() yaitu:

Nama Script dipanggil dengan:
Scriptaculous Root scriptaculous-root
Scriptaculous Builder scriptaculous-builder
Scriptaculous Drag & Drop scriptaculous-dragdrop
Scriptaculous Effects scriptaculous-effects
Scriptaculous Slider scriptaculous-slider
Scriptaculous Sound scriptaculous-sound
Scriptaculous Controls scriptaculous-controls
Scriptaculous scriptaculous
Image Cropper cropper
SWFUpload swfupload
SWFUpload Degarade swfupload-degrade
SWFUpload Queue swfupload-queue
SWFUpload Handlers swfupload-handlers
jQuery jquery
jQuery Form jquery-form
jQuery Color jquery-color
jQuery UI Core jquery-ui-core
jQuery UI Tabs jquery-ui-tabs
jQuery UI Sortable jquery-ui-sortable
jQuery UI Draggable jquery-ui-draggable
jQuery UI Droppable jquery-ui-droppable
jQuery UI Selectable jquery-ui-selectable
jQuery UI Resizable jquery-ui-resizable
jQuery UI Dialog jquery-ui-dialog
jQuery Interface interface
jQuery Schedule schedule
jQuery Suggest suggest
ThickBox thickbox
jQuery Hotkeys jquery-hotkeys
Simple AJAX Code-Kit sack
QuickTags quicktags
ColorPicker colorpicker
Tiny MCE tiny_mce
Prototype Framework prototype
Autosave autosave
WordPress AJAX Response wp-ajax-response
List Manipulation wp-lists
WP Common common
WP Editor editor
WP Editor Functions editor-functions
AJAX Cat ajaxcat
Admin Categories admin-categories
Admin Tags admin-tags
Admin custom fields admin-custom-fields
Password Strength Meter password-strength-meter
Admin Comments admin-comments
Admin Users admin-users
Admin Forms admin-forms
XFN xfn
Upload upload
PostBox postbox
Slug slug
Post post
Page page
Link link
Comment comment
Admin Gallery admin-gallery
Media Upload media-upload
Admin widgets admin-widgets
Word Count word-count
WP Gears wp-gears
Theme Preview theme-preview

Enaknya lagi,  jika kita memanggil suatu script yang tergantung pada script lain, maka otomatis semua dependencies akan dipanggil. Misalnya kita memanggil jQuery UI Dialog yang hanya bisa berjalan dengan adanya script jQuery dan jQuery UI Core  dengan menggunakan fungsi sbb:

<?php wp_enqueue_script('jquery-ui-dialog') ?>

Maka kita tak perlu lagi memanggil script jQuery ataupun jQuery UI Core karena keduanya otomatis terpanggil. Mudah bukan?!

Menggunakan jQuery di WordPress

Misalnya kita akan membuat suatu link berubah warna jika mouse dihover di atasnya, lalu warnanya memudar secara perlahan jika mouse ditarik keluar. Hasilnya dapat dilihat di theme Albizia pada link di bagian navigasi, sidebar, dan footer. Scriptnya sbb:

$(function(){
  $('#sidebars a,#footbar a,#menu a').hover(
     function(){$(this).stop().animate({'color':'red'},20)},
     function(){$(this).stop().animate({'color':'white'},500)})
});

Script tersebut, jika dijalankan  pada halaman web pada umumnya, maka akan jalan, tapi tidak di WordPress. Karena library jQuery yang dipanggil oleh WordPress menggunakan mode “no conflict”. Hal ini diperlukan oleh WordPress untuk menghindari konflik dengan library-library lain yang mungkin juga menggunakan shortcut tanda ‘$’. Agar kita bisa menggunakan shortcut ‘$’ untuk jQuery, kita bisa menggunakan wrapper sbb:

jQuery(document).ready(function($) {
    // $() bisa digunakan sebagai alias dari jQuery() di dalam fungsi ini
});

Wrapper tersebut akan membuat script dalam fungsi tersebut dieksekusi setelah halaman selesai dimuat. Jika oleh karena satu dan lain hal kita ingin script dieksekusi segera (tanpa menunggu DOM ready), maka kita dapat memakai wrapper sbb:

(function($) {
    // $() bisa digunakan sebagai alias dari jQuery() di dalam fungsi ini
})(jQuery);

Jadi kita akan melihat script berikut dapat dijalankan di WordPress dengan benar:

(function($) {
  $(function(){
    $('#sidebars a,#footbar a,#menu a').hover(
       function(){$(this).stop().animate({'color':'red'},20)},
       function(){$(this).stop().animate({'color':'white'},500)})
  });
})(jQuery);

Mudah bukan?!