Conflicting Javascript

Permalink
Hi there,

I've got a problem on one page of my site which means I can't edit anything in edit mode, and the c5 header is missing.

I've looked at other posts on the same subject and I've fixed this when I've had similar problem in the past, but this time it's proving difficult!

I've got the following js code:

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript" src="js/bgstretcher.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
        //  Initialize Backgound Stretcher      
      $('BODY').bgStretcher({
         images: ['images/hp_bg1.jpg', 'images/hp_bg2.jpg' ],
         imageWidth: 2000, 
         imageHeight: 1441, 
         slideDirection: 'N',
         slideShowSpeed: 1000,
         transitionEffect: 'fade',
         sequenceMode: 'normal',


I've also tried removing these lines:
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script>

 
mnakalay replied on at Permalink Reply
mnakalay
Hello,
Do you have a live address we could check out?

That jquery line seems like it shouldn't be there indeed but if you already tried to remove it and it didn't change anything the problem must go deeper.
lou28 replied on at Permalink Reply
Sure, here it is:http://innovationcapitaladvisors.com...

Thank you!
lou28 replied on at Permalink Reply
I've now got this working so that the jquery is doing all the things it should be on page, and the edit bar is now back, however the only problem now is that the edit content block doesn't fully load - all the various tools on the tool bar do not show.

Any ideas why this might be?

Thanks
Lou
rainmaker replied on at Permalink Reply
rainmaker
Maybe have it where the custom jQuery is called when not in edit mode? I've had some jQuery issues when external jQuery addons are called. That usually works for me.
lou28 replied on at Permalink Reply
Hi rainmaker - could you please advise how I can do this?

Many thanks
rainmaker replied on at Permalink Best Answer Reply
rainmaker
Hey Lou!

Of course. :) It's simple.

<?php if(!$c->isEditMode()){ ?>
<script type="text/javascript" src="js/bgstretcher.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
        //  Initialize Backgound Stretcher      
      $('BODY').bgStretcher({
         images: ['images/hp_bg1.jpg', 'images/hp_bg2.jpg' ],
         imageWidth: 2000, 
         imageHeight: 1441, 
         slideDirection: 'N',
         slideShowSpeed: 1000,
         transitionEffect: 'fade',
         sequenceMode: 'normal',
         anchoring: 'left top',


The isEditMode() returns true if you're in edit mode. This is great for tweaking CSS (or turning of jQuery) while in edit mode. I usually use it to add an "edit-mode" CSS class to the body so I can tweak CSS for functionality purpose. :)

Just like mnakalay said, C5 already has the core files for jQuery so you don't have to include them.

Let me know how it turns out!
lou28 replied on at Permalink Reply
Hey,

Thanks for the code, I added it to my site however it seemed to turn off the javascript even when viewing the live site.

Any ideas why?

Many thanks!
rainmaker replied on at Permalink Reply
rainmaker
Oh crap! Take of the ! sorry! So replace this line:

<?php if(!$c->isEditMode()){ ?>


...with....

<?php if($c->isEditMode()){ ?>


Sorry!! Coffee wasn't in my system yet.
lou28 replied on at Permalink Reply
Haha! Well I tried that but it's still switching off the javascript in live mode:http://www.innovationcapitaladvisors.com/...

Have I missed something obvious?

Thanks
rainmaker replied on at Permalink Reply
rainmaker
Hmmm. Can you attach your header file?
lou28 replied on at Permalink Reply
Sure, here's all the code in my header file:
<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php  
Loader::element('header_required');
$html = Loader::helper('html');
?>
<link type="text/css" href="<?=$this->getThemePath()?>/style.css" rel="stylesheet" />
<link type="text/css" href="<?=$this->getThemePath()?>/typography.css" rel="stylesheet" />
<link type="text/css" href="<?=$this->getThemePath()?>/jquery-ui-1.8.10.custom.css" rel="stylesheet" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<?php if($c->isEditMode()){ ?>
<script src="<?=$this->getThemePath()?>/js/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
<script src="<?=$this->getThemePath()?>/js/bgstretcher.js" type="text/javascript"></script>
rainmaker replied on at Permalink Reply
rainmaker
Actually replace that line back. The jQuery should only trigger when NOT in edit mode so I had it right the first line. And try clearing your cache on your site. That should work.
lou28 replied on at Permalink Reply
Ok I put the ! back in, and now the javascript now is rendering in both live and edit mode... it seems that the php override is being ignored completely...

But I have no idea why!?
rainmaker replied on at Permalink Reply
rainmaker
Lou, can you maybe create me a temporary login and PM the information? Just so I can test a few things.
rainmaker replied on at Permalink Reply
rainmaker
After looking, the functionality is working. So when you're in edit mode, the jQuery is excluded so it doesn't conflict with the Editing functionality. Is that not what you wanted?
lou28 replied on at Permalink Reply
Ahh, I was being an idiot and thought it would disable the functionality even when just logged into the admin site. Just realised that it does indeed switch off when in edit mode itself.

Thanks for all your help... and patience! ;)
rainmaker replied on at Permalink Reply
rainmaker
No worries! :D Just making sure that it was working the way it was supposed to. You can delete that test account. Thanks for setting it up!

Can you mark one of my answers as the "Best answer" maybe?
rainmaker replied on at Permalink Reply
rainmaker
Actually you don't have to now that I think of it. You came up with your own answer. :) sorry about that.

Have a great day!
lou28 replied on at Permalink Reply
I've marked your earlier post as best answer - as did indeed help!

Thanks :)
rainmaker replied on at Permalink Reply
rainmaker
Thanks Lou!! :D
mnakalay replied on at Permalink Reply
mnakalay
C5 uses jquery UI for it's backend and I think a custom version of it. It probably conflicts with yours (even though you tried to delete it already)