Conflicting Javascript codes. Menu and Slider

Question

I am having some trouble with what looks to be conflicting JavaScript. I'm not the most savvy with it so I was hoping someone here could help me out.

The slider and menu both work on their own in a separate HTML page, but once I place it into the same HTML page it seems that they conflict and neither then work.

I have removed the menu JavaScript code in the head and the slider works so I am pretty sure this is the problem. You can see it live here.

Didn't you looked at your JavaScript console? It throws a bunch of errors. — totymedli, Aug 31 '13 at 14:38

score 0 · Answer 1 · answered Aug 31 '13 at 15:09

You console show error

Uncaught ReferenceError: jQuery is not defined jquery.themepunch.plugins.min.js:140
Uncaught ReferenceError: jQuery is not defined jquery.themepunch.kenburn.min.js:8
Uncaught TypeError: Property '$' of object [object Object] is not a function commercial.html:32

Embed a suitable jQuery library file at the top of all the scripts

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

score 0 · Answer 2 · edited May 23 '17 at 11:49

First of all, you have to include JQuery before you start to use the plugins, so move the line:

<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>

Before all your JavaScript includes.

Also, you use jQuery.noConflict() and we know that it "frees" the $ from being associated with jQuery so change this code:

var tpj=jQuery;
   tpj.noConflict();            
   tpj(document).ready(function() {
      if (tpj.fn.cssOriginal!=undefined)
         tpj.fn.css = tpj.fn.cssOriginal;
         tpj('.bannercontainer').kenburn(
         //Etc...

And use the $ sing everywhere.

   $(document).ready(function() {
      if ($.fn.cssOriginal!=undefined)
         $.fn.css = $.fn.cssOriginal;
         $('.bannercontainer').kenburn(
         //Etc...

Conflicting Javascript codes. Menu and Slider

2 Answers2