{"id":2738,"date":"2012-10-30T19:25:42","date_gmt":"2012-10-30T19:25:42","guid":{"rendered":"http:\/\/www.dognmonkey.com\/techs\/?p=2738"},"modified":"2013-08-05T22:49:11","modified_gmt":"2013-08-05T22:49:11","slug":"jquery-noconflict-wordpress","status":"publish","type":"post","link":"https:\/\/www.dognmonkey.com\/techs\/jquery-noconflict-wordpress.html","title":{"rendered":"Jquery Noconflict WordPress"},"content":{"rendered":"

When I create my blogs with many jquery apps and Mootools, many of them don’t work due to jquery conflicts. The way I made them to work together is to create jquery noconflict for every jquery I use in the header. This is my header with a few of jquery noconflict fixed.<\/em><\/p>\n

\"jquery<\/a><\/p>\n

<\/em>Create a specific name for $ variables and change all $ inside the jquery with the same name.<\/em><\/p>\n

Mootools<\/p>\n

<!-mediaboxadv–>
\n<script src=”\/idogjs\/mediaboxadv\/mootools125mooimage.js” type=”text\/javascript”><\/script>
\n<script src=”\/idogjs\/mediaboxadv\/Quickiec.js” type=”text\/javascript”><\/script>
\n<script src=”\/idogjs\/mediaboxadv\/ltooz134c.js” type=”text\/javascript”><\/script>
\n<link rel=”stylesheet” type=”text\/css” media=”all” href=”\/idogjs\/mediaboxadv\/idogjuly12c.css” \/>
\n<!-end mediaboxadv–><\/p><\/blockquote>\n

Jquery FancyBox 1.3.4<\/em>
\n<!-fancybox–>
\n<link rel=”stylesheet” type=”text\/css” media=”all” href=”\/idogjs\/fancybox\/idogfancyboxc1.css” \/>
\n<script src=”\/idogjs\/fancybox\/jquery.tools.minc.js” type=”text\/javascript”><\/script>
\n<script src=”\/idogjs\/fancybox\/idogfancybox1packc.js” type=”text\/javascript”><\/script>
\n<script src=”\/idogjs\/fancybox\/jquery.easing-1.3.pack.js” type=”text\/javascript”><\/script>
\n<script src=”\/idogjs\/fancybox\/swfobject.js” type=”text\/javascript”><\/script>
\n<script src=”\/idogjs\/fancybox\/nonverblaster.js” type=”text\/javascript”><\/script>
\n<script src=”\/idogjs\/fancybox\/silverlight-ie.js” type=”text\/javascript”><\/script>
\n<script src=”\/idogjs\/fancybox\/wmvplayer.js” type=”text\/javascript”><\/script><\/p>\n

<script type=”text\/javascript”>
\nvar $jQ=jQuery.noConflict();
\n$jQ(document).ready(function(){
\n});
\n<\/script>
\n<script src=”\/idogjs\/fancybox\/idogfb1c.js” type=”text\/javascript”><\/script> \/\/ Every $ inside this “idogfb1c.js” is replaced with $jQ for this script to work independently with other jqueries.<\/em>
\n<!-end fancybox–><\/p><\/blockquote>\n

Jquery Cloud Carousel<\/em>
\n<!-cloud carousel–>
\n<link rel=”stylesheet” type=”text\/css” media=”all” href=”\/idogjs\/cloudcwp\/idogccc.css” \/>
\n<script type=”text\/javascript” src=”\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.8.0\/jquery-ui.min.js”><\/script>
\n<script type=”text\/JavaScript” src=”\/idogjs\/cloudcwp\/jquery.mousewheel.js”><\/script>
\n<script type=”text\/JavaScript” src=”\/idogjs\/cloudcwp\/cloud-carousel.1.0.5.js”><\/script><\/p>\n

<script type=”text\/javascript”>
\nvar $iC=jQuery.noConflict();
\n$iC(document).ready(function(){
\n});
\n<\/script>
\n<script src=”\/idogjs\/cloudcwp\/idogccc.js” type=”text\/javascript”><\/script> \/\/ Every $ inside this “idogccc.js” is replaced with $iC for this script to work independently with other jqueries.<\/em>
\n<!-end cloud carousel–><\/p><\/blockquote>\n

Jquery FancyBox 2.0.6.1<\/em>
\n<!-fancybox 2.0.6.1–>
\n<script src=”<?php bloginfo(‘template_url’); ?>\/js\/jquery.min172.js” type=”text\/javascript”><\/script>
\n<script src=”<?php bloginfo(‘template_url’); ?>\/js\/jquery-scrolltofixed.js” type=”text\/javascript”><\/script>
\n<script type=”text\/javascript”>
\nvar $iZ=jQuery.noConflict();
\n$iZ(document).ready(function() {
\n$iZ(‘#search_area’).scrollToFixed({
\nmarginTop: $iZ(‘.header_menu’).outerHeight() + 0,
\nlimit: $iZ(‘#footer’).offset().top – $iZ(‘#search_area’).outerHeight() – 10,
\nzIndex: 999,
\n});
\n$iZ(‘#bread_crumb’).scrollToFixed({
\nmarginTop: $iZ(‘.header_menu’).outerHeight() + 0,
\nlimit: $iZ(‘#footer’).offset().top – $iZ(‘#bread_crumb’).outerHeight() – 10,
\nzIndex: 999,<\/p>\n

});<\/p>\n

\/*\u00a0\u00a0 \u00a0$iZ(‘#bread_crumb’).scrollToFixed( { marginTop: 35, limit: 0 } );*\/
\n});
\n<\/script>
\n<!– Add mousewheel plugin –>
\n<script type=”text\/javascript” src=”\/idogjs\/fancybox2061\/jquery.mousewheel-3.0.6.pack.js”><\/script><\/p>\n

<!– Add fancyBox –>
\n<script type=”text\/javascript” src=”\/idogjs\/fancybox2061\/jquery.fancybox.pack.js”><\/script>
\n<link rel=”stylesheet” type=”text\/css” href=”\/idogjs\/fancybox2061\/idogfancybox2c2.css” media=”screen” \/><\/p>\n

<!– Add fancyBox – button helper –>
\n<link rel=”stylesheet” type=”text\/css” href=”\/idogjs\/fancybox2061\/helpers\/jquery.fancybox-buttonsc.css” \/>
\n<script type=”text\/javascript” src=”\/idogjs\/fancybox2061\/helpers\/jquery.fancybox-buttonsc.js”><\/script><\/p>\n

<!– Add fancyBox – thumbnail helper –>
\n<link rel=”stylesheet” type=”text\/css” href=”\/idogjs\/fancybox2061\/helpers\/jquery.fancybox-thumbsc.css” \/>
\n<script type=”text\/javascript” src=”\/idogjs\/fancybox2061\/helpers\/jquery.fancybox-thumbsc.js”><\/script>
\n<script type=”text\/javascript” src=”\/idogjs\/fancybox2061\/helpers\/jquery.fancybox-mediac.js”><\/script><\/p>\n

<script type=”text\/javascript”>
\nvar $jF=jQuery.noConflict();
\n$jF(document).ready(function(){
\n});
\n<\/script>
\n<script type=”text\/javascript” src=”\/idogjs\/fancybox2061\/idogfb20c2.js”><\/script>\/\/ Every $ inside this “idogfb20c2.js” is replaced with $jF for this script to work independently with other jqueries.<\/em>
\n<!-end fancybox 2.0.6.1–><\/p><\/blockquote>\n

Jquery PrettyPhoto<\/em><\/p>\n

<!-prettyphoto–>
\n<link rel=”stylesheet” type=”text\/css” media=”all” href=”\/idogjs\/prettyphoto\/css\/idogpP.css” \/>
\n<script src=”\/idogjs\/prettyphoto\/js\/idogpPc.js” type=”text\/javascript”><\/script>
\n<script type=”text\/javascript”>
\nvar $jP=jQuery.noConflict();
\n$jP(document).ready(function(){
\n});
\n<\/script>
\n<script src=”\/idogjs\/prettyphoto\/facebook.js” type=”text\/javascript”><\/script>
\n<!-end prettyphoto–><\/p><\/blockquote>\n

Jquery ImagePreview<\/em><\/p>\n

<!–iPreview–>
\n<script src=”\/idogjs\/ipreview\/imgpreview.full.jquery.js” type=”text\/javascript”><\/script>
\n<script type=”text\/javascript”>
\nvar $iP=jQuery.noConflict();
\n$iP(document).ready(function(){
\n});
\n<\/script>
\n<script src=”\/idogjs\/ipreview\/ipnew.js” type=”text\/javascript”><\/script>
\n<!–End iPreview–><\/p><\/blockquote>\n

When everything is done we should have a test post to check and make sure all jqueries are working together<\/a><\/em><\/p>\n