Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
Thread Tools Display Modes
Share |
  #1  
Old 10-28-2009, 10:38 PM
cde010 cde010 is offline
Junior Member
 
Join Date: 09-21-07
Posts: 7
iTrader: 0 / 0%
Tabbed menu jscript help

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 -->
 
Reply With Quote

Advertisement

Advertisement

  #2  
Old 10-29-2009, 08:32 AM
aescrc27 aescrc27 is offline
Junior Member
 
Join Date: 10-28-09
Posts: 5
iTrader: 0 / 0%
Check this site out: http://docs.jquery.com/Core/jQuery.noConflict

I haven't had much luck figuring out how to overcome the conflict with this myself, but I've read that it overwhelmingly succeeds for others who are more adept than I am.
 
Reply With Quote
  #3  
Old 10-29-2009, 03:04 PM
megamoose's Avatar
megamoose megamoose is offline
v7n Mentor
 
Join Date: 06-04-06
Location: Guildford
Posts: 557
iTrader: 2 / 100%
What blog software are you using?

What function is conflicting?

Can you not just rename the function that is conflicting to blogFunc1 and then mooFunc2?
 
Reply With Quote
  #4  
Old 10-30-2009, 05:55 AM
cde010 cde010 is offline
Junior Member
 
Join Date: 09-21-07
Posts: 7
iTrader: 0 / 0%
Thanks for those responses....I admit that javascript is not my forte. I read some "no conflict" docs but didn't understand how to apply it to my case.

I am using Wordpress. As far as the conflicting function..i'm not sure. The tabbed navagation box that i am adding contains the following line:

Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools-yui-compressed.js">
It is this mootools file that causes my dropdown menu not to work. Removing this line fixes the dropdown menu, but kills the tabbed nav box.

I'm open for suggestions. Thanks again.
 
Reply With Quote
  #5  
Old 10-30-2009, 10:47 AM
megamoose's Avatar
megamoose megamoose is offline
v7n Mentor
 
Join Date: 06-04-06
Location: Guildford
Posts: 557
iTrader: 2 / 100%
Try using jQuery. Here's a tutorial about embedding it into WordPress:
http://digwp.com/2009/06/including-j...-the-right-way

The jQuery main website is:
http://jquery.com/

Check out the demos page of jQuery and you'll see some of the great stuff it can do.

Apparently it doesn't have any conflicts, and I know from using it myself it's a great piece of code.
 
Reply With Quote
  #6  
Old 11-02-2009, 06:32 PM
cde010 cde010 is offline
Junior Member
 
Join Date: 09-21-07
Posts: 7
iTrader: 0 / 0%
Thank you so much! I found some great stuff on jquery. I replaced the mootools tabbed nav with one that uses jquery. Thanks again!
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
need help with menu daraptor Web Design Lobby 1 01-07-2008 01:30 AM
Tabbed modules? - watley Coding Forum 5 05-24-2007 11:41 PM
DHTML Menu | Drop Down Menu Pen Tongue SEO Forum 4 01-06-2005 07:18 PM
DHTML Menu slide menu how to make it relative to table ajay201975 Web Design Lobby 0 05-25-2004 09:54 AM
Tabbed menu with CSS BerSerK Coding Forum 4 05-20-2004 08:06 AM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 03:36 PM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC