Editing (v7+)

Conflicting Javascript

Permalink May 13, 2013 at 7:04 AM

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',

Viewing 15 lines of 26 lines. View entire code block.

 
<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',
         anchoring: 'left top',
         anchoringImg: 'left top'
      });
 
   });
 
 
</script>
 
<script type="text/javascript">
   $(function(){
 
      // Tabs
      $('#tabs').tabs();
 
   });
</script>

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 May 13, 2013 at 11:03 am Permalink Reply

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 May 13, 2013 at 11:18 am Permalink Reply

Sure, here it is:http://innovationcapitaladvisors.com...

Thank you!

lou28 replied on May 13, 2013 at 4:45 pm 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 May 13, 2013 at 6:30 pm Permalink Reply

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 May 14, 2013 at 4:14 am Permalink Reply

Hi rainmaker - could you please advise how I can do this?

Many thanks

rainmaker replied on May 14, 2013 at 11:20 am Permalink Best Answer Reply

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',

Viewing 15 lines of 26 lines. View entire code block.

 
<?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',
         anchoringImg: 'left top'
      });
 
   });
 
 
</script>
 
<script type="text/javascript">
   $(function(){
 
      // Tabs
      $('#tabs').tabs();
 
   });
</script>
<?php } ?>

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 May 14, 2013 at 11:36 am 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 May 14, 2013 at 11:49 am Permalink Reply

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 May 14, 2013 at 11:54 am 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 May 14, 2013 at 12:00 pm Permalink Reply

Hmmm. Can you attach your header file?

lou28 replied on May 14, 2013 at 12:06 pm 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>

Viewing 15 lines of 51 lines. View entire code block.

 
<?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>
<script src="<?=$this->getThemePath()?>/js/main.js" type="text/javascript"></script>
 
<script type="text/javascript">
   $(document).ready(function(){
 
        //  Initialize Backgound Stretcher      
      $('BODY').bgStretcher({
         images: ['<?=$this->getThemePath()?>/images/hp_bg1.jpg', '<?=$this->getThemePath()?>/images/hp_bg2.jpg', '<?=$this->getThemePath()?>/images/hp_bg2.jpg' ],
         imageWidth: 2000, 
         imageHeight: 1441, 
         slideDirection: 'N',
         slideShowSpeed: 3000,
         transitionEffect: 'fade',
         sequenceMode: 'normal',
         anchoring: 'left top',
         anchoringImg: 'left top'
      });
 
   });
 
 
</script>
 
<script type="text/javascript">
   $(function(){
 
      // Tabs
      $('#tabs').tabs();
 
   });
</script>
<?php } ?>
 
 
</head>
 
<body>
 
<div id="headerbg">
    <div id="header">
        <div id="nav">
            <?php
                    $a = new Area('navigation');
                    $a->display($c);
            ?> 
       </div>
    </div>
</div>

rainmaker replied on May 14, 2013 at 12:27 pm Permalink Reply

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 May 14, 2013 at 12:49 pm 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 May 14, 2013 at 1:04 pm Permalink Reply

Lou, can you maybe create me a temporary login and PM the information? Just so I can test a few things.

rainmaker replied on May 14, 2013 at 1:22 pm Permalink Reply

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 May 14, 2013 at 1:32 pm 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 May 14, 2013 at 1:37 pm Permalink Reply

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 May 14, 2013 at 1:50 pm Permalink Reply

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 May 14, 2013 at 1:54 pm Permalink Reply

I've marked your earlier post as best answer - as did indeed help!

Thanks :)

rainmaker replied on May 14, 2013 at 2:57 pm Permalink Reply

Thanks Lou!! :D

mnakalay replied on May 13, 2013 at 7:12 pm Permalink Reply

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)

Forums

Editing (v7+)

Conflicting Javascript

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?