CODEWITHSUNDEEP
jqueryjquery-pluginsjavascript
Bogdan
Bogdan

Reputation: 1083

jquery conflict with another js

On my website I'm using TafelTree (a javascript that creates a collapsible tree menu). Recently I've made a widget using jQuery Coundown.

My problem is that as long as my jQuery Countdown widget is in the page, the tree menu is no longer working (it doesn't display anything)

The call of the jQuery countdown function is:

$(function () {
       var theDay = new Date();
       theDay = new Date(2011, 9, 19, 20, 0, 0);
       $('#evo_defaultCountdown').countdown({until: theDay, format: 'HMS'});
});

The call of the TafelTree script is:

function TafelTreeInit () {
var struct = [{"id" : "item_280",
"txt" : '<a class="category-link">Back to School</a>',
"url" : "/back-to-school.html", "canhavechildren" : true,
"items" : [{
"id" : "item_280_277",
"txt" : '<a href="back-to-school/notebook-acer.html">notebook Acer</a>',
"canhavechildren" : false},{
"id" : "item_280_278",
"txt" : '<a href="back-to-school/desktop-monitor-acer.html">Desktop + monitor Acer </a>',
"canhavechildren" : false},{
"id" : "item_280_266",
"txt" : '<a href="back-to-school/pc-desktop-1.html">PC Desktop</a>',
"canhavechildren" : false},{
"id" : "item_280_267",
"txt" : '<a href="back-to-school/monitor.html">monitor</a>',
"canhavechildren" : false},{
"id" : "item_280_268",
"txt" : '<a href="back-to-school/laptop-mini-laptop.html">Laptop / Mini-laptop</a>',
"canhavechildren" : false},{
]}]; 
]}]; 
function funcOpen (item, response) {
   var selected = document.getElementById(item.idObj);
   var selectedParent = selected.parentNode;
   if(response == true) {
      selected.className = selected.className+' ' + selected.className + '_open';
      selectedParent.className = selectedParent.className+' ' + selectedParent.className + '_open';
      } else {
      selected.className  = 'tafelTreecontent';
      selectedParent.className = 'tafelTreecanvas';
      }
      return true;
      }

      tree = new TafelTree('menuHolder', struct, {
         'generate' : true,
         'imgBase' : SKIN_URL+'images/plugins/tree/',
          //'defaultImg' : 'page.gif',
          //'defaultImgOpen' : 'folderopen.gif',
          //'defaultImgClose' : 'folder.gif',
          'onLoad' : function(){},
          'onOpen' : funcOpen
       });

       if(tree.openAll == true || tree.openAll == 'open'){
            document.getElementById('nav_collapse').style.display = "block";
            document.getElementById('nav_expand').style.display = "none";
        } else {
            document.getElementById('nav_collapse').style.display = "none";
            document.getElementById('nav_expand').style.display = "block";
        }
}

Any idea what causes this conflict? How can I fix it?

Upvotes: 2

Views: 645

Answers (1)

JellyBelly
JellyBelly

Reputation: 2431

use this:

http://api.jquery.com/jQuery.noConflict/

in your case:

jQuery.noConflict();    
jQuery(function () {
       var theDay = new Date();
       theDay = new Date(2011, 9, 19, 20, 0, 0);
       jQuery('#evo_defaultCountdown').countdown({until: theDay, format: 'HMS'});
});

Upvotes: 5

Related Questions