jQuery in theme not working right. . .
Permalink
Greetings all,
I've got a nifty drop-down menu I've made that uses a little jQuery to make drop-downs roll down and bounce at the bottom. It's subtle and looks great. Only problem is, once I plugged it into c5 using Auto-Nav, the effect is no longer visible in Safari, Chrome, or FF. Oddly enough it works still in IE—that's a first.
I'm wondering if there's some setting in the c5 jQuery that I need to change, or if I need to add something to my theme's jQuery script to make it over-ride the c5 jQuery for this option only.
Any help is greatly appreciated!
I've got a nifty drop-down menu I've made that uses a little jQuery to make drop-downs roll down and bounce at the bottom. It's subtle and looks great. Only problem is, once I plugged it into c5 using Auto-Nav, the effect is no longer visible in Safari, Chrome, or FF. Oddly enough it works still in IE—that's a first.
I'm wondering if there's some setting in the c5 jQuery that I need to change, or if I need to add something to my theme's jQuery script to make it over-ride the c5 jQuery for this option only.
Any help is greatly appreciated!
You're not loading jQuery (the main jQuery script) in your template header, are you? concrete5 does this automatically by nature, and loading it twice will cause issues.
No.
Here's what I'm loading, and it's in the footer right before the ending body tag.
I removed the two links to the google hosted api's, and that didn't do anything, and the effect quite working in IE too.
Originally, the c5 editor disappeared when I first activated my template. Found out it was b/c of the links, so I have them wrapped in php that disables them if in edit mode:
Any ideas?
Thanks for your help!
Here's what I'm loading, and it's in the footer right before the ending body tag.
<!-- * jQUERY (linked to Google hosted libraries) * --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js" type="text/javascript"></script> <script type="text/javascript" src="<?php echo $this->getThemePath()?>/js/scripts.js"></script>
I removed the two links to the google hosted api's, and that didn't do anything, and the effect quite working in IE too.
Originally, the c5 editor disappeared when I first activated my template. Found out it was b/c of the links, so I have them wrapped in php that disables them if in edit mode:
<?php /* Hide this when in EDIT MODE so it doesn't conflict w/ c5's jQuery, which is needed for editing */ $u = new user(); $p = new Permissions($c); if (!($p->canApproveCollection())) { ?> jQuery links here <?php } ?>
Any ideas?
Thanks for your help!
take a look at this line and the beggining part of it- it should be
<script type="text/javascript" src="<?php echo $this->getThemePath()?>/js/scripts.js"></script>
<?php=$this->getThemePath()?>/
Nice catch. Took care of that and still no dice.
Not sure why, works fine in local testing as straight HTML.
Also, is the jquery.effects library included in c5? I don't see it in the core. But if I connect to the google api version, the nice bounce effect still doesn't work.
Thanks in advance.
Not sure why, works fine in local testing as straight HTML.
Also, is the jquery.effects library included in c5? I don't see it in the core. But if I connect to the google api version, the nice bounce effect still doesn't work.
Thanks in advance.
Hey 12345j,
First time I did this fix I missed the "=" after <?php b/c of it's light green color. I didn't see it. Just noticed it, tried it, and it gives an error of "Unexpected "=" on line. . . ".
I haven't actually seen the = method used before, just echos.
Is it supposed to be "=" instead of "echo". None of the themes I've looked at use "=". Just wondering where you got that.
First time I did this fix I missed the "=" after <?php b/c of it's light green color. I didn't see it. Just noticed it, tried it, and it gives an error of "Unexpected "=" on line. . . ".
I haven't actually seen the = method used before, just echos.
Is it supposed to be "=" instead of "echo". None of the themes I've looked at use "=". Just wondering where you got that.
http://www.concrete5.org/documentation/how-tos/designers/make-a-theme/
it uses php short tags, so i just added the official
it uses php short tags, so i just added the official
i went through all your jquery posts, but still i am finding it difficult to come over the jquery problems i am having. there is no edit bar at the top but when i remove my javascript and also the files link attached to it, it works properly with edit bar. plz help...
sharpfence.com / index.php
Yes. Every page shows the navigation menu.
well I still see the google hosted jquery. ALso, i wouldn't use the @import for c5. Maybe clear the cache?
Yeah, I removed it and saw it didn't do any good, and it caused it to quit working in IE, so I put it back in.
I commented it out again and emptied the cache so you can see for yourself. It's not active now. Animation effect still doesn't work, and it doesn't work in IE now.
As for the @imports, I have not had any issues at all so I think they're fine to use. The issue here is w/ jQuery, not the CSS.
Thanks for your advice.
I commented it out again and emptied the cache so you can see for yourself. It's not active now. Animation effect still doesn't work, and it doesn't work in IE now.
As for the @imports, I have not had any issues at all so I think they're fine to use. The issue here is w/ jQuery, not the CSS.
Thanks for your advice.
Hey 12345j!
Just wanted to see if you had any ideas on why the animation isn't working. I commented out the links to the jQuery. Do you know if c5 has the "jquery.effects.core.js" ?
I looked in the concrete/js folder, but I don't see that exact name there, though it could be under a different name I suppose.
Do I need to have that one commented out, or just the link to the jQuery library?
Just wanted to see if you had any ideas on why the animation isn't working. I commented out the links to the jQuery. Do you know if c5 has the "jquery.effects.core.js" ?
I looked in the concrete/js folder, but I don't see that exact name there, though it could be under a different name I suppose.
Do I need to have that one commented out, or just the link to the jQuery library?
For one thing, you are loading jQuery twice, just as LucasAnderson cautioned against. It's being loaded in the doc head by C5, and then you are loading it again from Google's CDN at the end of the doc. There might be other issues as well, but this is certainly something you should correct.
-Steve
-Steve
Thanks for the reply shotster. I removed the jQuery linked to google earlier by just commenting it out. It still doesn't work. I'm stumped.
Well, when I load the page now, it says that the file...
/js/scripts.js
...cannot be found.
-Steve
/js/scripts.js
...cannot be found.
-Steve
Because it's looking for the JS file at the root level.
/js/file.js
INSTEAD OF
/themes/<themename>/js/file.js
/js/file.js
INSTEAD OF
/themes/<themename>/js/file.js
No. It's got the theme js file correctly and still doesn't work.
I'm thinking maybe something in the c5 jQuery core overrides it?
I'm thinking maybe something in the c5 jQuery core overrides it?
Same Problem here. Using jQuery for some special effects, but when trying to integrate C5 to the website the Edit Bar disappears when putting the
<?php Loader::element('header_required'); ?>
in top of the head. putting Loader::element to the bottom in the head, my effects don't work, but the edit bar is back.
Comparing the jquery.js in /concrete/js with the 1.4.2 from jquery.com it's not the same file! So uses C5 a customized jquery.js ?
<?php Loader::element('header_required'); ?>
in top of the head. putting Loader::element to the bottom in the head, my effects don't work, but the edit bar is back.
Comparing the jquery.js in /concrete/js with the 1.4.2 from jquery.com it's not the same file! So uses C5 a customized jquery.js ?
jquery can be compiled with different features, which is why there are differences
But than it's definitely wrong to say "jquery is already included in C5 and there's no need to load it again". Also many other things like menus or effects don't work with C5 correctly.
As normal developer I take the tools like jquery "as is" fromhttp://docs.jquery.com/Downloading_jQuery#Download_jQuery....
But what's the solution then?
As normal developer I take the tools like jquery "as is" fromhttp://docs.jquery.com/Downloading_jQuery#Download_jQuery....
But what's the solution then?
In the docs under system one of the pages shows what jquery libraries are
loaded, and no its not misleading.
On Mar 7, 2011 5:15 AM, "Concrete5 Community" <discussions@concretecms.com>
wrote:
loaded, and no its not misleading.
On Mar 7, 2011 5:15 AM, "Concrete5 Community" <discussions@concretecms.com>
wrote:
You can also see the loaded js in concrete/js, but comparing the file sizes you'll discover the differences between the official jQuery release and the used one.
the only thing bothering me is the head in jquery.js:
/*!
* jQuery JavaScript Library v1.4.2
*http://jquery.com/
*
* Copyright 2010, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
*http://jquery.org/license
*
* Includes Sizzle.js
*http://sizzlejs.com/
* Copyright 2010, The Dojo Foundation
* Released under the MIT, BSD, and GPL Licenses.
*
* Date: Sat Feb 13 22:33:48 2010 -0500
which is not the case. that's all I want to say..
the only thing bothering me is the head in jquery.js:
/*!
* jQuery JavaScript Library v1.4.2
*http://jquery.com/
*
* Copyright 2010, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
*http://jquery.org/license
*
* Includes Sizzle.js
*http://sizzlejs.com/
* Copyright 2010, The Dojo Foundation
* Released under the MIT, BSD, and GPL Licenses.
*
* Date: Sat Feb 13 22:33:48 2010 -0500
which is not the case. that's all I want to say..
Hey sk01,
I never got the issue resolved. Loved the menu I had, and it worked in IE only—again, that's probably the only time I'll say that. I just settled for not having it, unfortunately. c5's usefullness is too great to let a little thing like a drop-down menu bounce keep me from using it. Though it would have been nice to have. Maybe someday ˆ—ˆ. Did you ever figure out a solution?
I never got the issue resolved. Loved the menu I had, and it worked in IE only—again, that's probably the only time I'll say that. I just settled for not having it, unfortunately. c5's usefullness is too great to let a little thing like a drop-down menu bounce keep me from using it. Though it would have been nice to have. Maybe someday ˆ—ˆ. Did you ever figure out a solution?
Had a similar issue & went in and replaced the concrete/jquery.js file with the contents ofhttps://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js...
Fixed my issue. But I've not thoroughly tested the rest of my site or questioned the core team as to whether they modified the jquery file in ways that are necessary (??).
Fixed my issue. But I've not thoroughly tested the rest of my site or questioned the core team as to whether they modified the jquery file in ways that are necessary (??).
Good idea!
I may give that a whirl. Rather than replace the content, could it just be commented out or deleted then a link inserted to get the latest version of jQuery from google?
I'm sure it could be scraped w/ PHP as well.
Just musing. What's your thoughts?
Thanks of the advice too!
I may give that a whirl. Rather than replace the content, could it just be commented out or deleted then a link inserted to get the latest version of jQuery from google?
I'm sure it could be scraped w/ PHP as well.
Just musing. What's your thoughts?
Thanks of the advice too!
Well, what I did actually isn't the best fix because it messes with a core file. The other option would be to create a local /elements/header_required.php file. Around line 63, you can call the google version rather than the local version.
However, if you're logged in, jquery still gets called and I can't put my finger on why just yet. I'll let you know as I get time to dig a little deeper.
However, if you're logged in, jquery still gets called and I can't put my finger on why just yet. I'll let you know as I get time to dig a little deeper.
Temporarily, instead of hacking the core, I've created a jquery.js file in my local js/ directory and copied Google's updated version there.
But I'm still curious about where jquery gets called other than the header_required.php file.
But I'm still curious about where jquery gets called other than the header_required.php file.
I have a Jquery issue and I can't find the source of the problem.
I want to use a nice Jquery RollOver effect and implemented a HTML block. The effect needs these files:
1.http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js...
2.http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min....
3. jquery.easing.1.3.js
4. jquery.iconmenu.js - this is the Jquery written for the effect.
and this code:
I know that there could be some issues with the first couple of files, since C5 loads them automatically (or?), so I Commented them out and just left the last "jquery.iconmenu.js". But even this file makes the C5 edit mode frozen and the effect is not working.
Can somebody take a look what's going on?
I attached the last file
Thank you!
agetis
I want to use a nice Jquery RollOver effect and implemented a HTML block. The effect needs these files:
1.http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js...
2.http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min....
3. jquery.easing.1.3.js
4. jquery.iconmenu.js - this is the Jquery written for the effect.
and this code:
<script type="text/javascript"> $(function() { $('#sti-menu').iconmenu(); }); </script>
I know that there could be some issues with the first couple of files, since C5 loads them automatically (or?), so I Commented them out and just left the last "jquery.iconmenu.js". But even this file makes the C5 edit mode frozen and the effect is not working.
Can somebody take a look what's going on?
I attached the last file
Thank you!
agetis
You need jquery and ui, but you need to make sure the C5 version of both is also added in view mode (they are only added by C5 by default in edit mode).
Also, you probably don't want your effects to be enabled in edit mode, so need to put an 'if not edit mode' about the code.
There are plenty of examples in the forums and in the howtos if you search, with where and how to load the files and test for edit mode.
Also, you probably don't want your effects to be enabled in edit mode, so need to put an 'if not edit mode' about the code.
There are plenty of examples in the forums and in the howtos if you search, with where and how to load the files and test for edit mode.
@JohntheFish thanks for your suggestions. I've searched around the forum and found a solution that worked.
So what did I do:
1. Since I used the HTML block I copied also the head to this block. But now I copied all my <head> content into the header.php file.
2. The second thing is a suggestion I found in forums to put the line
before you JavaScript and jQuery is being called. This helped and the Rollover effect started to work! Yeay.
3. Then after checking other pages on my site I found an issue with the "Amiant Image Gallery" I'm using. It didn't even load the thumbnails. So I started to delete the JavaScript lines line after line and found that
line is causing the trouble. And since C5 is apparently loading this jQuery file by its self the RollOver didn't stop working. Cool.
I hope this will help someone.
Is there a list of jQuery files that C5 is loading? It could be helpful to further eliminate my JavaScript lines that are unnecessary.
So what did I do:
1. Since I used the HTML block I copied also the head to this block. But now I copied all my <head> content into the header.php file.
2. The second thing is a suggestion I found in forums to put the line
<?php Loader::element('header_required'); ?>
before you JavaScript and jQuery is being called. This helped and the Rollover effect started to work! Yeay.
3. Then after checking other pages on my site I found an issue with the "Amiant Image Gallery" I'm using. It didn't even load the thumbnails. So I started to delete the JavaScript lines line after line and found that
http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
line is causing the trouble. And since C5 is apparently loading this jQuery file by its self the RollOver didn't stop working. Cool.
I hope this will help someone.
Is there a list of jQuery files that C5 is loading? It could be helpful to further eliminate my JavaScript lines that are unnecessary.
After more testsing I found some issues again while in the edit mode. When trying to click on a block the pop-up windows is all distorted. This was corrected by deleting yet another script line
but since the rollover needs this file I tryied JohntheFishs suggestion and put the ifEditMode statement around it.
Now my code looks like that.
This solves the issue in a way. But I do still get a little floating pop-up window with the word "Help" written on it in the edit mode. Now sure where that came from.
My question at this place is: Is my ifEditMode statement correct or is there a better solution?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
but since the rollover needs this file I tryied JohntheFishs suggestion and put the ifEditMode statement around it.
Now my code looks like that.
<?php if (!$c->isEditMode()) { ?> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script> <?php } ?>
This solves the issue in a way. But I do still get a little floating pop-up window with the word "Help" written on it in the edit mode. Now sure where that came from.
My question at this place is: Is my ifEditMode statement correct or is there a better solution?
Please, never include jquery or jquery ui from anywhere other than the C5 versions. That is the root cause of your difficulties. I am sorry I thought I had made that clear earlier, but obviously I had not.
C5 will always include its own versions of these in edit mode. The C5 version of jQuery UI has its own version of dialog. When you include the CDN versions you get will spurious double loading faults and break many of C5's dialogs.
The code you should include in your block controller on_load function, or in your theme header, is:
C5 will then get these from the C5 versions of the scripts.
Then, you can put the isEditMode test about the code that inserts your own script that calls various jQuery methods. That way, C5 has what it needs to function, and your own script is blocked from interfering in edit mode.
The only exception to the above is if you are using a development build of C5.5, which is fully compatible with the CDN versions of jQuery.
C5 will always include its own versions of these in edit mode. The C5 version of jQuery UI has its own version of dialog. When you include the CDN versions you get will spurious double loading faults and break many of C5's dialogs.
The code you should include in your block controller on_load function, or in your theme header, is:
$this->addHeaderItem($html->javascript("jquery.js")); $this->addHeaderItem($html->css("jquery.ui.css")); $this->addHeaderItem($html->javascript("jquery.ui.js"));
C5 will then get these from the C5 versions of the scripts.
Then, you can put the isEditMode test about the code that inserts your own script that calls various jQuery methods. That way, C5 has what it needs to function, and your own script is blocked from interfering in edit mode.
The only exception to the above is if you are using a development build of C5.5, which is fully compatible with the CDN versions of jQuery.
Thanks for that. I didn't know this information about the CDN.
I now added your C5 links to the header.php, needed though to exclude the first jquery.js link since it again interfered with my gallery, but the rollover effect wasn't affected. And yes, there is no more issues in the edit mode.
So it worked! Thanks.
Only one thing, I couldn't link to the files like you suggested - I believe you meant to include those links into a <php echo line - but now I used the full URL to make it work.
I now added your C5 links to the header.php, needed though to exclude the first jquery.js link since it again interfered with my gallery, but the rollover effect wasn't affected. And yes, there is no more issues in the edit mode.
So it worked! Thanks.
Only one thing, I couldn't link to the files like you suggested - I believe you meant to include those links into a <php echo line - but now I used the full URL to make it work.
When you call add header item from the on_load event of a block controller, the relevant scripts are added to a table of scripts that C5 then consolidates (removes duplicates) and outputs in the header element of your theme with Loader::element('header_required'). In that context, duplication does not matter because C5 is designed to sort it out.
When you are actually within a theme header element, you are correct that you actually need to write the path. However, be careful about doing so because you could still end up with a double inclusion of jQuery.ui, particularly when in edit more - once from the C5 header_required, and once from your own link, which is one of the places where the !isEditMode test is useful.
When you are actually within a theme header element, you are correct that you actually need to write the path. However, be careful about doing so because you could still end up with a double inclusion of jQuery.ui, particularly when in edit more - once from the C5 header_required, and once from your own link, which is one of the places where the !isEditMode test is useful.
i cant understand your instructions. can u help in deeper details
Hello world! The main question of the topic is somewhat old, but I thought it may be helpful for someone if I post my solution to this problem. Similar to the original post, I had perfectly working jQuery code, which stopped working when integrated into C5. Unfortunatelly, it was not working in any browsers for me. The problem turned out to be, that Loader::element('header_required') was needed to be called before the actual <script> elements. I had just copied the base structure from an online tutorial and had not thought of this. So, the solution for my problem was to change this:
to this:
Good luck for anyone stumbling across this problem!
<link rel="stylesheet" type="text/css" href="<?php echo $this->getThemePath(); ?>/css/default.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="<?php echo $this->getThemePath(); ?>/js/cufon-yui.js"></script> <script type="text/javascript" src="<?php echo $this->getThemePath(); ?>/js/titillium-cufon.js" /></script> <script type="text/javascript" src="<?php echo $this->getThemePath(); ?>/js/main.js"></script> <?php Loader::element('header_required'); ?>
to this:
<?php Loader::element('header_required'); ?> <link rel="stylesheet" type="text/css" href="<?php echo $this->getThemePath(); ?>/css/default.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="<?php echo $this->getThemePath(); ?>/js/cufon-yui.js"></script> <script type="text/javascript" src="<?php echo $this->getThemePath(); ?>/js/titillium-cufon.js" /></script> <script type="text/javascript" src="<?php echo $this->getThemePath(); ?>/js/main.js"></script>
Good luck for anyone stumbling across this problem!
Hey!
I did try that, but the problem still exists. The menu (scrolling between pages) isn't working. When i remove the "<?=Loader::element("footer_required");?>" php code, it works again.
The page is located:http://tigu.hk.tlu.ee/~kristjan.ulst/uusrif/concrete5/...
Any other suggestions?
Thank you!
I did try that, but the problem still exists. The menu (scrolling between pages) isn't working. When i remove the "<?=Loader::element("footer_required");?>" php code, it works again.
The page is located:http://tigu.hk.tlu.ee/~kristjan.ulst/uusrif/concrete5/...
Any other suggestions?
Thank you!
It appears you are loading jQuery twice which is a no-no.
Try removing this old version from your theme:
http://tigu.hk.tlu.ee/~kristjan.ulst/uusrif/concrete5/themes/rif/js...
Try removing this old version from your theme:
http://tigu.hk.tlu.ee/~kristjan.ulst/uusrif/concrete5/themes/rif/js...
Thanks!! That worked!
