Question

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?

Answer 1

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'});
});