RocketTheme - TOPIC: Custom jQuery causing conficts [Solved]

Welcome Guest! Login

0 items Join Now

ROCKETTHEME IS CLOSING ON JUNE 30, 2025. As a thank-you to our community, enjoy 50% off all themes with the promo code THANKYOU before we shut down. Read our Farewell Blog Post for more details.

- Espial
- Newbie
- Posts: 14
- Thanks: 0
SOLVED Custom jQuery causing conficts

Posted 13 years 6 months ago
- Hi there
  
  Like the title says, I am having problems implementing my own jQuery. I read on some other posts that it can conflict with Mootools, so I guess that this is the problem.
  
  I added my jQuery to the main HTML page in the template editor. Works fine, but it causes many of my plugins, such as rokTabs, to stop working. If I move my code to above the php code that includes the header content my custom code stops working and the plugins work fine. Obviously a naming conflict.
  
  I tried installing this plugin ( http://extensions.joomla.org/extensions/core-enhancements/scripts/7230 ), but no difference.
  
  Anyone have an idea how I can solve this?
- Last Edit: 13 years 6 months ago by Espial.
#739328
- prim
- Preeminent Rocketeer
- Posts: 17290
- Thanks: 217
Re: SOLVED Custom jQuery causing conficts

Posted 13 years 6 months ago
- Looks like the plug-in is not updated anymore. I don't see any version for Joomla 1.7.x.
  
  Btw, can't you just add No.Conflict(); code to your own script?
- Please reply with a direct link to the issue & create a new thread for each new issue.
  
  A template is only as good as the content that goes into it - DanG
#739441
- Espial
- Newbie
- Posts: 14
- Thanks: 0
Re: SOLVED Custom jQuery causing conficts

Posted 13 years 6 months ago
- Hi Prim, and thanks for the reply
  
  My apologies. I should have added versions to my description. I am using Joomla 1.5 with the Panacea template installed. I needed to create some custom jQuery rollovers for my home page and did so using jQuery 1.7.
  
  I was not familiar with the $.noConflict() command, but just read up on it. Will implement and let you know how it went.
  
  Thanks for the help
#739585

Espial
Newbie
Posts: 14
Thanks: 0

Re: SOLVED Custom jQuery causing conficts

Posted 13 years 6 months ago

Hi again

I tried implementing the $.noConflict mommand, but it is not working as expected. When I add it my RockTabs work again, but my custom jQuery stops working again.

Here is the code I am using in my head. It starts with the standard php for the Panacea template followed by my custom jQuery. Am I using the noConflict script correctly?

<head>
 
     <?php 
          $gantry->displayHead();
          $gantry->addStyles(array('template.css','joomla.css','overlays.css','typography.css'));
          if (!$gantry->get('rotator-enabled')) {
               $gantry->addInlineScript("
                    window.addEvent('domready', function() {
                         var content = $$('#rt-rotator .rotator-desc'), overlay = $$('.rotator-overlay');
                         if (!content.length) { if (overlay.length) overlay.setStyle('display', 'none'); } 
                    });
               ");
          }
 
          if ($gantry->get('articledetails') == 'layout3' && $gantry->browser->engine == 'trident') $gantry->addScript('gantry-ie-zindex.js');
     ?>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
<script type="text/javascript">
          $.noConflict();
     $(document).ready(function(){
          $('.home .hitArea').mouseover(function(event){
               var $fader = $(this).parent().parent().children('.prodBack');
               $fader.animate({opacity:0.4},200);
               var $colorChange =  $(this).parent().parent().children('h1');
               $colorChange.css({"color":"#82C036 !important"});
          });
          $('.home .hitArea').mouseout(function(event){
               var $fader = $(this).parent().parent().children('.prodBack');
               $fader.animate({opacity:1},200);
               var $colorChange =  $(this).parent().parent().children('h1');
               $colorChange.css({"color":"#000000 !important"});
          });
     });
</script>
</head>

#739587

- Espial
- Newbie
- Posts: 14
- Thanks: 0
Re: SOLVED Custom jQuery causing conficts

Posted 13 years 6 months ago
- Hi again
  
  Solved my problem. As mentioned earlier I installed the SC Extgen plugin (found here http://extensions.joomla.org/extensions/core-enhancements/scripts/7230 ), but it did not fix my problem.
  
  After scratching around, and yes, reading the instructions , I found that I need to place my code elsewhere. I was trying to place it directly into the template's PHP section, but the component has a special area the it needs to go in.
  
  Once installing it go to the plugin manager, find the "System - SC jQuery" plugin and click on it. In the configuration make sure that it is enabled. Then place your code in the field provided on the right hand side marked "Enter custom code here".
  
  Hope this helps someone
#739645

Time to create page: 0.070 seconds