Mengatasi Konflik jQuery

Diposting pada

Cara menghindari atau mengatasi konflik jQuery khususnya di WordPress bisa dibilang gampang-gampang susah. Saya sudah mencari cara bagaimana mengatasi konflik jQuery dan bagaimana menghindari bentrok jQuery di google dengan kata kunci “avoiding jQuery conflict in WordPress”, “jQuery conflict plugin”,”Bentrok plugin jQuery”, dan banyak kata-kata kunci lainnya yang saya gunakan untuk mengatasi masalah ini, dan baru kali ini dapat teratasi.

Konflik jQuery ini sendiri terjadi karena adanya bentrok antara script jQuery yang satu dengan lainnya, atau plugin jQuery yang satu dengan yang lainnya. Adanya kesamaan fungsi dan kesamaan perintah atau script itulah membuat salah satu script atau plugin jQuery ini tidak bekerja.

Saya ambil contoh kasus yang pernah Saya alami dalam pembuatan template WordPress, di satu sisi Saya menggunakan suatu plugin jQuery untuk membuat image slideshow. Dengan memanfaatkan plugin ini kita tidak perlu berpusing ria dengan rumitnya kode-kode jQuery, cukup install pluginnya, lalu pergi ke pengaturan dan jadi deh. Namun di sisi lain, saya juga memanfaatkan library jQuery yang lain yaitu jQuery-1.2.3.js untuk menampilkan efek jQuery pada menu horizontal. Nah, di sinilah akhirnya mulai terjadi konflik dan peperangan yang besar yang mengakibatkan salah satu di antara keduanya ngambek dan tidak mau bekerja jika kita jalankan dua jenis jQuery yang berbeda itu.

Baca juga:  Membuat Menu Horizontal

Pada tutorial yang kebanyakan beredar di internet, untuk menghindari dan mengatasi konflik jQuery adalah dengan menambahkan kode noConflict(); sehingga kurang lebih kode yang lengkapnya seperti ini:

[javascript]
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery is still working!");
});
});
[/javascript]

namun tetap saja, masih belum bisa meredakan konflik yang terjadi pada jQuery. Saya pun terus mencari cara untuk mengatasiya, dan pada akhirnya Saya pun menemukan solusi untuk menangani masalah ini, yaitu cukup dengan meletakkan kode defer="defer" ketika mendeskripsikan script jQuery, maka damailah sudah, tak ada lagi konflik yang terjadi pada script jQuery.

Baca juga:  Tutorial Cara Membuat Footer di WordPress

Jadi kesimpulannya, di WordPress Anda tidak perlu meregister file jQuery pada halaman functions.php. Cukup Anda deskripsikan scriptnya pada di halaman header.php dengan menambahkan kode defer="defer", maka Anda pun akan terbebas dari permasalahan kecil yang membingungkan ini. Silahkan Anda amati kode di bawah ini untuk lebih jelasnya.

[javascript]
<script type="text/javascript" defer="defer" src="https://www.kafeinkode.com/wp-content/themes/sead/js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(‘#cssmenu ul li’).hover(
function(){ $(this).children(‘ul’).slideDown(‘slow’); },
function(){ $(this).children(‘ul’).slideUp(‘slow’); }
);
});
</script>
<script type="text/javascript">
$(document).ready(function() {
// Menentukan elemen yang dijadikan sticky yaitu .nav
var stickyNavTop = $(‘#cssmenu’).offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
// Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya
if (scrollTop > stickyNavTop) {
$(‘#cssmenu’).css({ ‘position’: ‘fixed’, ‘top’:0, ‘left’:0, ‘right’:0, ‘z-index’:9999});
} else {
$(‘#cssmenu’).css({ ‘position’: ‘relative’});
}
};
// Jalankan fungsi
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
</script>
[/javascript]

5 thoughts on “Mengatasi Konflik jQuery

  1. Woah! I’m really digging the template/theme of this blog. It’s simple, yet effective. A lot of times it’s tough to gget that “perfect balance” between superb usability and visual appearance. I must say you have done a great job with this. In addition, the blog loads super fast for me on Safari. Outstanding Blog!

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *