I've been working on adding this sweeeet tabbed navigation box to my wordpress blog sidebar. The tabbed nav uses mootools. The mootools causes the main menu of the blog not to work. It a script library confilct. The mootools code is in the tabbed php file. Can anyone help?
My Blog header:
Code:
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/jquery.jcarousel.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/skin.css" type="text/css" media="screen" />
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/pngfix.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.lavalamp.1.3.2-min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.jcarousel.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/superfish.js"></script>
<script type="text/javascript">
function mycarousel_initCallback(carousel)
{
// Disable autoscrolling if the user clicks the prev or next button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});
carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});
// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
$(document).ready(function(){
// dropdown
$("ul.superfish").superfish();
// featured carousel effect
jQuery('#mycarousel').jcarousel({
auto: 3,
scroll:1,
wrap: 'last',
initCallback: mycarousel_initCallback
});
});
</script>
</head>
<body>
<div id="base">
<div id="header">
<div id="page-menu" class="clearfix">
<script type="text/javascript">
$(function() {
$('#nav1').lavaLamp({fx: 'swing', speed: 333,click: function(event, menuItem) {return true;}});
});
</script>
My tabbed PHP head:
Code:
<!-- TABBED BOX MOOTOOLS from http://www.cssmenubuilder.com/tutorial-files/mootools-tabs/example -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools-yui-compressed.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
initTabs();
});
function initTabs() {
$ES('a','tabMenu').each(function(el) {
el.addEvent('click',function(e) {
var ev = new Event(e).stop();
tabState(el);
});
});
}
function tabState(ael) {
$ES('a','tabMenu').each(function(el) {
if(el.hasClass('active')) {
el.removeClass('active');
}
});
ael.addClass('active');
$$('#tabContent div.content').each(function(el) {
if(el.hasClass('active')) {
el.removeClass('active');
}
});
var ac = ael.getProperty('href');
$(ac).addClass('active');
}
</script>
<!-- END MOOTOOLS -->
Threaded Mode
