Mengatasi Konflik jQuery | KafeinKode

Kursus bahasa arab berkualitas

Mengatasi Konflik jQuery

Anonim 4 Comments



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.

Mengatasi-Konflik-jQuery

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.

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:

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

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.

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.

<script type="text/javascript" defer="defer" src="http://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>

Kursus bahasa arab berkualitas

[shareaholic app="recommendations" id="20730868]

4 comments

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. asma@mail.com'

    isinya banyak yang sama dengan situs lain

    Reply
  2. dynko.web@gmail.com'

    tengkyu gan masalahku terjawab

    Reply