Adding custom javascript library to C5 correctly
Permalink
Hi
I have been trying to add a couple of custom javascript libraries to my C5 website. One of them being jplayer and the other is a script for running quizzes.
I experienced many problems. If I add the scripts directly in the body (html block), the dashboard bar disappears. If I add it in the Header Extra Content, the jplayer script will break my navigation menu and links (using superfish.js) while the quiz js will cause the dashboard bar to disappear as well.
My question is this: what is the correct way of adding custom js to a C5 website? What am I missing here?
Many thanks!
I have been trying to add a couple of custom javascript libraries to my C5 website. One of them being jplayer and the other is a script for running quizzes.
<script type="text/javascript" src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>
https://github.com/dublintech/JavaScript_Examples/blob/master/jsquiz/js/jQuiz.js
I experienced many problems. If I add the scripts directly in the body (html block), the dashboard bar disappears. If I add it in the Header Extra Content, the jplayer script will break my navigation menu and links (using superfish.js) while the quiz js will cause the dashboard bar to disappear as well.
My question is this: what is the correct way of adding custom js to a C5 website? What am I missing here?
Many thanks!
First of all, I am not a developer. I have almost no programming knowledge except for html and css coding basics.
@Moongrab, so something as simple as "put this inside your template , <head> section ..." is intimidating to me. Does this mean creating a html block in the header section of C5 and pasting the entire code? If this is about amending header.php file, I also need some help to identify exactly where to insert those lines. Sorry to sound like a dumbo.
And yes, I have read up the forums and know that there is a bunch of scripts already included in C5. Those I need to use are not.
@Remo
*I am using jplayer script, amongst others in future.
*No it does not belong to the theme
*Is it site specific? Not sure what this means. I just want to use jplayer on my site. I am not a mass developer or anything.
I am sorry to offend with the github link. Not sure why this is offensive.
Thanks again and hope to hear more specific advice!
@Moongrab, so something as simple as "put this inside your template , <head> section ..." is intimidating to me. Does this mean creating a html block in the header section of C5 and pasting the entire code? If this is about amending header.php file, I also need some help to identify exactly where to insert those lines. Sorry to sound like a dumbo.
And yes, I have read up the forums and know that there is a bunch of scripts already included in C5. Those I need to use are not.
@Remo
*I am using jplayer script, amongst others in future.
*No it does not belong to the theme
*Is it site specific? Not sure what this means. I just want to use jplayer on my site. I am not a mass developer or anything.
I am sorry to offend with the github link. Not sure why this is offensive.
Thanks again and hope to hear more specific advice!
I believe adding it in the header extra content should do the trick, provided header extra content does what I think it does. I've never actually used it, I usually edit my template files.
So let's say it does what I think it does. In that case, line 1 of the code I gave you says "if I'm not in edit mode, do stuff:". Then line 2 is stuff. It can be as many lines as you like.
Finally, line 3 says "ok, kthxbye" so your site can continue operating normally.
PS: since we somewhat broke the threading here, I'm referencing my previous comment (http://www.concrete5.org/community/forums/customizing_c5/adding-custom-javascript-library-to-c5-correctly/#492627)
So let's say it does what I think it does. In that case, line 1 of the code I gave you says "if I'm not in edit mode, do stuff:". Then line 2 is stuff. It can be as many lines as you like.
Finally, line 3 says "ok, kthxbye" so your site can continue operating normally.
PS: since we somewhat broke the threading here, I'm referencing my previous comment (http://www.concrete5.org/community/forums/customizing_c5/adding-custom-javascript-library-to-c5-correctly/#492627)
<?php if (!$c->isEditMode()) { ?> <script type="text/javascript" src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script> <?php } ?>
Put this inside your template, in your <head> section.
This should give you a general idea of how you should add your javascript files to your site, but not to your site in administration mode.
Another common mistake is to load jQuery and/or jQuery UI manually. Don't do it, c5 already does it for you by default.
Also, avoid any kinds of hotlinking. It's not cool.
Thanks. I added that code in the header.php. It works but it's still causing my original problem. After adding jplayer script, all my other stuff in the Header such as Homepage link, superfish.js navigation menu, breadcrumbs are all not working.
Do you think there is another way to add the jplayer such that it won't break all of those in the header?
Thanks again.
Do you think there is another way to add the jplayer such that it won't break all of those in the header?
Thanks again.
About hot-linking, read this:http://frontend.co.il/articles/hotlinking-to-source-code-repos-is-d...
Is there any JavaScript error when you run into this problem? I wouldn't expect any problem just because of an additional javascript.
Is there a link we can check it ourselves?
Is there any JavaScript error when you run into this problem? I wouldn't expect any problem just because of an additional javascript.
Is there a link we can check it ourselves?
Here's the link. Just so you know, the only error I saw on the developer console is that caused by disqus. I then had that removed as well as the AddThis widgets. The conflict is still there so I put them back again.
http://goo.gl/EpMy5
http://goo.gl/EpMy5
Actually there are a lot of requests that are made by jplayer when you click on the logo, for example.
The only thing you have done is load jPlayer's source on your website.
jPlayer seems to require some configuration.
I suggest that you readhttp://www.jplayer.org/latest/quick-start-guide/step-1/...
The only thing you have to avoid doing is to include jQuery manually. So skip step 2 and disregard the "Your <head> code should look like:" part on step 3.
I haven't read the whole documentation but based on what I saw, it's completely relevant to your situation.
The only thing you have done is load jPlayer's source on your website.
jPlayer seems to require some configuration.
I suggest that you readhttp://www.jplayer.org/latest/quick-start-guide/step-1/...
The only thing you have to avoid doing is to include jQuery manually. So skip step 2 and disregard the "Your <head> code should look like:" part on step 3.
I haven't read the whole documentation but based on what I saw, it's completely relevant to your situation.
There's not a single answer to your questions.
* Is the JavaScript parts of a package you've built
* Does it belong to the theme?
* Is it something site specific?