Forums

Adding custom JS files c5

Permalink 1 user found helpful
Hello,

I am new to C5. I am wondering if anyone has any advice on adding custom JS files to the c5 structure. I have created a directory in the root of my theme directory called _js.

Then, in a template I called Homepage, after I call:

<?php $this->inc('elements/footer.php'); ?>

I have placed my two custom javascript calls:

<script type="text/javascript" src="<?=$this->getThemePath()?>/_js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="<?=$this->getThemePath()?>/_js/scroll.js"></script>

For some reason C5 doesn't like this, the JS works, but my main autonav disappears.

Any advice?

Thanks,
C
cavidano1
 
MattGreyDesign replied on at Permalink Reply
MattGreyDesign
When I made my site I just stack a folder in my theme and pointed the link in the header to that file, like so...
<?php 
if(!$c->isEditMode()) { ?> 
<script type="text/javascript" src="<?=$this->getThemePath()?>/elements/jq.plug.settings.js"></script>
<?php } ?>


I wrapped it in an if statement to make sure the JavaScript doesn't conflict with Concrete5 in edit mode.
cavidano1 replied on at Permalink Reply
cavidano1
Thanks for the reply, Matt. I do not know why, but it is still breaking my main navigation. I am also accustomed to put JS call at the bottom of the page. Does it always need to go in the head in C5?

Either way, it still breaks my main nav.

Thanks,
Carl
MattGreyDesign replied on at Permalink Reply
MattGreyDesign
Its better to put it in the head as it needs to run before the rest of the page (DOM) loads.
MattGreyDesign replied on at Permalink Reply
MattGreyDesign
Would you be able to attach your JS file, it may be a problem with that.
jordanlev replied on at Permalink Reply
jordanlev
When you say "breaks your navigation", what do you mean? What is your navigation? Are you using javascript for that? Is it showing an error? Is it disappearing? Is it in the wrong place? If you're using javascript for your nav menu and the nav menu script is running before your footer where you're including those other javascript libraries, that could be an issue I suppose. Did you even try moving the javascript include up to the <head> instead of down at the bottom to see if that helps? Also make sure you're not including your own copy of jquery because concrete5 does that already for you so if you include your own it will cause conflicts.
cavidano1 replied on at Permalink Reply
cavidano1
Thanks Guys,

This issue has been resolved.

Best,
C
gbda replied on at Permalink Reply
gbda
Hi,
I see this post was from a while a go , but I am really struggling with getting javascript to work in a site I have created

I also want to use cycle.js plugin. I have been trying to create a powerslider type slideshow that validates. (an example of the functioning slideshow on a static html site is gbda.co.uk)


I could well be using concrete5 in an incorrect way, but whatever I try to do the javascript seems to be conflicting with C5 javascript or not being recognised

Can you remember how this issue was resolved?

Really appreciate any time you can take to help

Thanks
Graeme
MattGreyDesign replied on at Permalink Reply
MattGreyDesign
As it said above, simply comment out the code you dont want to conflict with this...

<?php 
if(!$c->isEditMode()) { ?> 
Your script (or link to script (src)), also works with css and other code
<?php } ?>


This will remove the code when you're editing the page.
gbda replied on at Permalink Reply
gbda
Thanks for your reply, I appreciate you taking the time : )

Where do I put this code?
MattGreyDesign replied on at Permalink Reply
MattGreyDesign
In your header.php of your template where your javascript is linked, you might want to read some more of the documentation before going ahead with what youre doing.
gbda replied on at Permalink Reply
gbda
Thanks I will do and will let you know how I get on : )