Java Script conflicts in an imported theme.
Permalink
Hi All,
Thanks for taking the time to read this. I am customising a template for use in C5. Here is the original for reference:
http://www.styleshout.com/templates/preview/PageOne10/index.html...
This is my site as it stands:
http://www.tailored-personal-training.com/scrolltest...
I have already converted it into an editable site for C5 and can edit blocks and so on. The smooth scrolling effect also works fine.
The problem arises with the Nivo slider and Fancy Box pop up. In page edit mode the Nivo slider works fine, pictures display, slider controls display and work etc...but not in normal view mode. The Fancy Box pop up doesnt work at all, just opens the images in a new tab.
I have a copy of the page on my local PC which all works fine. I assume that there is some problem with what js is getting loaded, but I can't figure out whats cnflicting with what. I have looked through what gets loaded using Firebug and C5 seems to load PowerSlider as well as jquery 1.7.1. I dont know if this is causing problems too.
As always, any help much appreciated.
J
Thanks for taking the time to read this. I am customising a template for use in C5. Here is the original for reference:
http://www.styleshout.com/templates/preview/PageOne10/index.html...
This is my site as it stands:
http://www.tailored-personal-training.com/scrolltest...
I have already converted it into an editable site for C5 and can edit blocks and so on. The smooth scrolling effect also works fine.
The problem arises with the Nivo slider and Fancy Box pop up. In page edit mode the Nivo slider works fine, pictures display, slider controls display and work etc...but not in normal view mode. The Fancy Box pop up doesnt work at all, just opens the images in a new tab.
I have a copy of the page on my local PC which all works fine. I assume that there is some problem with what js is getting loaded, but I can't figure out whats cnflicting with what. I have looked through what gets loaded using Firebug and C5 seems to load PowerSlider as well as jquery 1.7.1. I dont know if this is causing problems too.
As always, any help much appreciated.
J
On a C5 site, you should load jQuery from the concrete version, not from google or elsewhere. This would argue with C5's version of jQuery when logged in. So you can find the lines in the theme header element that do:
And replace them with:
(Its generally a good idea to use this pattern for all script/css loading)
That may be all you need to do as it looks like everything else is loading. The fancybox and slider issues are arising because neither is within the jquery namespace at the time they are initialised. So initialisation is failing and the slider and fancybox simply are not there.
So once you have the right copy of jQuery and have removed jQuery collisions, you may need to change the order in which plugins are loaded or the events and sequence you start them in.
Another thing to watch out for is that some popular plugins get loaded by all sorts of blocks, so you may end up with collisions and need to edit some blocks to avoid the conflict. fancybox is one such popular plugin. There are plenty of threads in the forums about this and avoiding it.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/jquery-1.6.1.min.js"><\/script>')</script>
And replace them with:
$this->addHeaderItem($html->javascript('jquery.js'));
(Its generally a good idea to use this pattern for all script/css loading)
That may be all you need to do as it looks like everything else is loading. The fancybox and slider issues are arising because neither is within the jquery namespace at the time they are initialised. So initialisation is failing and the slider and fancybox simply are not there.
So once you have the right copy of jQuery and have removed jQuery collisions, you may need to change the order in which plugins are loaded or the events and sequence you start them in.
Another thing to watch out for is that some popular plugins get loaded by all sorts of blocks, so you may end up with collisions and need to edit some blocks to avoid the conflict. fancybox is one such popular plugin. There are plenty of threads in the forums about this and avoiding it.
Looks like we were both looking at this, so also ditto to what Jero said.
Wow. That, most emphatically, worked.
Hero : I addressed the issue you raised first. I had read somewhere that the <header required> statement was to go before the </head> tag, so I changes that position.
JTF, also I added your line of code, but now it looks like this:
purely because it more closely resembled the other calls in the php file.
Thanks a lot, everthing works fine. Let me know how I can add some rep points to you guys as that was great.
Cheers,
J
Hero : I addressed the issue you raised first. I had read somewhere that the <header required> statement was to go before the </head> tag, so I changes that position.
JTF, also I added your line of code, but now it looks like this:
<?=$this -> addHeaderItem($html->javascript('jquery.js'))?>;
purely because it more closely resembled the other calls in the php file.
Thanks a lot, everthing works fine. Let me know how I can add some rep points to you guys as that was great.
Cheers,
J
You can mark one answer as 'Best Answer'. Click the link for Jero and give him the points because his comment was more insightful than mine.
People are clearly more considerate at your end of the M4 than at this one....
Thanks guys. I'm not getting into the M4 debate, I'm much too far away these days.
You're going to hit problems doing that, as C5 is also going to load jQuery itself, assuming you've added
directly after your <head> tag, although looking at your page source, I'm not convinced you are.
I sould also suggest that you upgdate to 5.5.2.1