Jquery tabs conflicting with revolution slider

问题:

I am trying to create a page containing revolution slider and a tabs script.

You can find the page here: http://lovebomb.nl/dating

But somehow the scripts are conflicting with one another.

This part of the revolution slider:

        var tpj=jQuery;     tpj.noConflict();      tpj(document).ready(function() {      if (tpj.fn.cssOriginal!=undefined)         tpj.fn.css = tpj.fn.cssOriginal;          tpj('.fullwidthbanner').revolution(             {                 delay:9000,                 startwidth:1024,                 startheight:616,                 onHoverStop:"on",                       // Stop Banner Timet at Hover on Slide on/off                 thumbWidth:100,                         // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)                 thumbHeight:50,                 thumbAmount:3,                 navigationStyle:"round",                // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom                 navigationHAlign:"center",              // Vertical Align top,center,bottom                 navigationVAlign:"top",                 // Horizontal Align left,center,right                 navigationHOffset:0,                     navigationVOffset:20,                 soloArrowLeftHalign:"left",                 soloArrowLeftValign:"center",                 soloArrowLeftHOffset:20,                 soloArrowLeftVOffset:0,                 soloArrowRightHalign:"right",                 soloArrowRightValign:"center",                 soloArrowRightHOffset:20,                 soloArrowRightVOffset:0,                 touchenabled:"off",                     // Enable Swipe Function : on/off                 stopAtSlide:1,                          // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.                 stopAfterLoops:0,                       // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic                 hideCaptionAtLimit:0,                   // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)                 hideAllCaptionAtLilmit:0,               // Hide all The Captions if Width of Browser is less then this value                 hideSliderAtLimit:0,                    // Hide the whole slider, and stop also functions if Width of Browser is less than this value                 fullWidth:"on",                 shadow:0                                //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows -  (No Shadow in Fullwidth Version !)             });  }); 

Seems to be conflicting with this part of the tabs script:

$(document).ready(function(){ $('#tabs div').hide(); $('#tabs div:first').show(); $('#tabs ul li:first').addClass('active'); $('#tabs ul li a').click(function(){  $('#tabs ul li').removeClass('active'); $(this).parent().addClass('active');  var currentTab = $(this).attr('href');  $('#tabs div').hide(); $(currentTab).show(); return false; }); }); 

These scripts are combined in one JS file which can be found here: http://lovebomb.nl/dating/tabs.js

I used this site as a base for the tabs script: http://www.snelgeldonlineverdienen.nl/

The only difference is the jquery and the jquery UI version. If I use the version of jquery of this page, the revolution slider does not work anymore.

I am already trying to fix the tabs for about 4 hours.

Really could use some help.

Thanks in advance :)

Luuk

回答1:

At the beginning of tabs.js we have the declaration:

var tpj=jQuery; tpj.noConflict(); 

this sets the variable tpj to the jQuery object, and then puts jQuery into noConflict():

"Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If you need to use another JavaScript library alongside jQuery, return control of $ back to the other library with a call to $.noConflict()."

Now that jQuery is in no conflict mode you can no longer use the $ to access jQuery. So when we run the code at the bottom of tabs.js:

$(document).ready(function(){     $('#tabs div').hide();     $('#tabs div:first').show();     $('#tabs ul li:first').addClass('active');     $('#tabs ul li a').click(function(){      $('#tabs ul li').removeClass('active');     $(this).parent().addClass('active');      var currentTab = $(this).attr('href');      $('#tabs div').hide();     $(currentTab).show();         return false;     }); }); 

We get the error

"Uncaught TypeError: Property '$' of object [object Object] is not a function"

because $ no longer references jQuery. To access jQuery we must use jQuery or tpj

if we alter the tabs.js changing $ to either jQuery or tpj

tpj(document).ready(function(){     tpj('#tabs div').hide();     tpj('#tabs div:first').show();     tpj('#tabs ul li:first').addClass('active');     tpj('#tabs ul li a').click(function(){      tpj('#tabs ul li').removeClass('active');     tpj(this).parent().addClass('active');      var currentTab = tpj(this).attr('href');      tpj('#tabs div').hide();     tpj(currentTab).show();         return false;     }); }); 

the code should execute correctly.

回答2:

Use Latest jQuery library Version( 1.7.1 +) and Try to modify above code to following and combine both to single file in init.js and place at bottom of all *.js files included in a page.

   jQuery(document).ready(function() {        if (jQuery.fn.cssOriginal!=undefined)          jQuery.fn.css = jQuery.fn.cssOriginal;            jQuery('.fullwidthbanner').revolution({              delay:9000,             startwidth:1024,             startheight:616,             onHoverStop:"on",        // Stop Banner Timet at Hover on Slide on/off             thumbWidth:100,        // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)             thumbHeight:50,             thumbAmount:3,             navigationStyle:"round",   // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom             navigationHAlign:"center",              // Vertical Align top,center,bottom             navigationVAlign:"top",                 // Horizontal Align left,center,right             navigationHOffset:0,                 navigationVOffset:20,             soloArrowLeftHalign:"left",             soloArrowLeftValign:"center",             soloArrowLeftHOffset:20,             soloArrowLeftVOffset:0,             soloArrowRightHalign:"right",             soloArrowRightValign:"center",             soloArrowRightHOffset:20,             soloArrowRightVOffset:0,             touchenabled:"off",                     // Enable Swipe Function : on/off             stopAtSlide:1,                          // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.             stopAfterLoops:0,                       // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic             hideCaptionAtLimit:0,                   // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)             hideAllCaptionAtLilmit:0,               // Hide all The Captions if Width of Browser is less then this value             hideSliderAtLimit:0,                    // Hide the whole slider, and stop also functions if Width of Browser is less than this value             fullWidth:"on",             shadow:0                                //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows -  (No Shadow in Fullwidth Version !)         });  });            jQuery(document).ready(function(){       jQuery('#tabs div').hide();       jQuery('#tabs div:first').show();       jQuery('#tabs ul li:first').addClass('active');       jQuery('#tabs ul li a').click(function(){        jQuery('#tabs ul li').removeClass('active');       jQuery(this).parent().addClass('active');        var currentTab = jQuery(this).attr('href');       jQuery('#tabs div').hide();      jQuery(currentTab).show();      return false;     });     }); 

回答3:

Came across this issue while getting a canned html/css/js landing page template to work on Meteor. In my case removing the jquery-1.11.1.min.js and jquery-1.11.1.min.map files from the solution fixed the problem because I already have the latest version installed as a package. Hope this helps a solution searcher in the future.

文章来源: Jquery tabs conflicting with revolution slider