Question

the following code is being problematic.

<script type="text/javascript" src="<javascript/prototype.js"></script>
<script type="text/javascript">

// <![CDATA[
$(document).ready(function () {

// Start Tabbing <---------------------
// Hide features tab
$('#detailFeatures').hide();

$('#menu a').click(function(){

    if ($(this).attr('rel') == 'pdf') return true;

    selected = $(this).attr('href');

    // Clear active tab
    $('#menu li').removeClass('active');

    // Add class to clicked
    tab = selected + 'Tab';
    $(tab).addClass('active');

    // Hide all content
    $('.productTab').css('display','none');

    // Show selected tab
    $(selected).css('display','block');

    return false;

    });
// End Tabbing <------------------

The above code is used to create a tabbed panel that allows seeing either a product overview or a product feature list

In the console im getting the error “Uncaught TypeError: Object # has no method ‘ready'”

Im using the standard prototype.js for lightbox and jquery.js for the tabbing, unchanged.

Thanks in advance.

Answer 1

Wrap your code in an anonymous function:

(function($){
   //JQuery code here, example:
   $(document).ready(...);
})(jQuery);

This piece of code “converts” $ “back” to a JQuery object, so that the code inside this wrapper can safely use JQuery methods on $.