0

My overall aim is to have an tabbed menu with 4 tabs. Within each tab I also want a simple slider to work, where I can add different things in each of these sliders.

Currently I have code which on its own create an tabbed menu, which works fine (currently each tab has static text). I also have a working simple slider.

I thought that if I replace the static text I currently have with the slider divs etc it would give me the final product I want (an tabbed menu with sliders).

However when I add these two things together in one page, it doesn't work. The tabbed menu just overflows (shows all four tabbed areas rather than just one). I'm a novice at JQuery so any help/explanations would be greatly appreciated. My JQuery code combined is below:

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

This code is for my tabbed menu.

jQuery.noConflict();
try {
jQuery(document).ready(function($){ 
    $(".right-button").stop(true, true).fadeOut();
    $(".left-button").stop(true, true).fadeOut();
    simpleSlide({
        'set_speed': 1000
    }); 

    $('#slide').hover(

    function () {
            $(".right-button").stop(true, true).fadeIn();
            $(".left-button").stop(true, true).fadeIn();
    }, 
    function () {
            $(".right-button").stop(true, true).fadeOut();
            $(".left-button").stop(true, true).fadeOut();
    }
    );
});
} catch (e) {alert(e);}

This is the code for the simple slider.

user1669256
  • 151
  • 1
  • 1
  • 10
  • Have you tried inspecting the browser console log to see if an error is produced? – noj Sep 18 '12 at 09:51
  • I have just done it, I get an "Uncaught TypeError: Property '$' of object [object Window] is not a function" error – user1669256 Sep 18 '12 at 09:54
  • I have changed the "$(document).ready(function(){" line of the tabbed menu code to "jQuery(document).ready(function(){" which has removed the error, however the result of the slider and tabbed menu is the same. – user1669256 Sep 18 '12 at 10:00
  • Change `jQuery(document).ready(function(){` to `jQuery(document).ready(function($){` or get rid of the noConflict line. – noj Sep 18 '12 at 11:30

1 Answers1

0

why do you use the jQuery.noConflict();? do you use other JavaScript frameworks aside from JQuery? well its not recommended to use the jQuery namespace directly

Netorica
  • 18,523
  • 17
  • 73
  • 108
  • I've only started using JQuery (which I only started using for a couple of days) and no other frameworks. I used it as it was in a tutorial I have gone through. I will remove it. – user1669256 Sep 18 '12 at 09:56