Joomla Template and Foundation 5 Framework

I have created a basic template for Joomla using Foundation 5 Framework but the call to include Foundation and jQuery and the call to fire Foundation needs to be the last part that is loaded.

<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bower_components/foundation/js/foundation.min.js"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bower_components/jquery/jquery.js"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/app.js"></script>

So I have added them into the template and they can be navigated to when I load the template up but for some reason foundation does not exist according to firebug and won't load.

Answers


If Firebug is saying that the file does not exist then you have used the incorrect path. As for the importing of jQuery, I would recommend you use the Joomla standards for this which will also import the file that comes package use noConflict() mode like so >> JHtml::_('jquery.framework');

Also try using the addScript() method for importing your other scripts, however please ensure that the paths are correct. So your full code will look like this:

<?php
    JHtml::_('jquery.framework');
    JHtml::_('script',  JUri::root() . 'templates/template_name/bower_components/foundation/js/foundation.min.js');
    JHtml::_('script',  JUri::root() . 'templates/template_name/js/app.js');
?>

Currently, your .js files are within the template folder, however are within different sub-folders, thus I would recommend sticking to 1 main folder for all javascript files.

Update:

I have just tested Foundations and it works fine for me. First of all, you need to ensure that jQuery is loaded first. Add the following code before the ending ` tag in your template index.php file:

<script src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/bower_components/jquery/jquery.js"></script>
<script src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/bower_components/foundation/js/foundation.min.js"></script>
<script> $(document).foundation(); </script>

Hope this helps


Need Your Help

why is log4net appearing in console and not text file

c# asp.net asp.net-mvc-3 console log4net

Trying to use log4net in a console application. I have followed this tutorial and everything works fine up until part 4: the log file is not created, instead the logs are outputted on the command p...

Goodness of fit test for power law distribution in R

r graph igraph chi-squared goodness-of-fit

I have a network for which I fit into a power-law using igraph software: