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

Solution 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.

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

Solution 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.