Hi everyone,

This might be a terribly stupid post, but I need all the help I can get. I'm trying to jump into the deep-end and really get into my first extensive customization; however, all I keep doing is breaking my site.

So here's the brief run down...
- In the past year, I've become pretty skilled at HTML / CSS so making 90% of the cosmetic changes has been super easy

- That being said, I also want to add in some custom javascript plugins for a client including a music player that integrates SoundCloud, a hash change plugin so that the site can be navigated via AJAX, and galleria so that I can create a full screen background slideshow. Each of these obviously needs to be integrated into the template since I want them on every page.

- I know just enough about javascript that I can implement these on static websites, but on the Zen Grid Framework I'm definitely missing something. I can't even figure out where to insert the script tags so that it will be served up in the final HTML right before the closing body tag. All of the .html files I have seen are empty and I can't make heads or tails of most of the PHP files.

- According to the knowledgebase, I simply needed to drop my scripts into the user folder within the template. I tried this first with the music player script just to test if it would load. I dropped the .js file into the appropriate folder and then BLAM I can no longer access any of the front-end of my site. The back-end still works perfectly, but nothing on the front end. Even after deleting the newly added file, the problem persists

- I've tried purging all the caches, clearing my .htaccess file, and using Akeeba Admin Tool to verify permissions but it still acts like there is no content on the front end. I've got a backup that I could easily administer but I've verified that all the files and databases are unchanged so how the heck do I resolve this without resulting to Akeeba?

Hi there,

Sounds very odd that loading the js would cause that issue.

Could you post a ticket with ftp and j login details so I can see what happened?

re where to put it.

1. Usually adding js files in the user folder is the right way to go.
2. Then any inline javascript can be added either in the js/template.js file or in the extra scripts section in the template parameters.

Anthony

Thanks for the heads up. I'll give it another go. Like I said, js and PHP are still my weakest skills so it's very likely that I screwed something up. Thank goodness for being OCD about backing up my work.

For something like this Stratus music player which, to my understanding is essentially adding a small library of js functions (similar to jQuery), should I use the "Extra Scripts" box in the template back-end to call their remote copy via...

script type="text/javascript" src="stratus.sc/stratus.js"></script

(had to break the opening and closing tags since the bbCode function wasn't working) ...or would it be best to just copy their source and add it locally by copying the source code and saving the stratus.js file locally in my users folder? Here is a link to the plugin I'm referring to in case that helps :) http://stratus.sc[code] function wasn't working)

...or would it be best to just copy their source and add it locally by copying the source code and saving the stratus.js file locally in my users folder?

Here is a link to the plugin I'm referring to in case that helps
stratus.sc

Cool ..

You could add the link to the external script in the extra scripts section and then add the following to the js/template.js file:

jQuery.stratus({
links: 'soundcloud.com/foofighters/sets/wasting-light'
});

inside the document ready tags.

or you can add:

type="text/javascript" src="stratus.sc/stratus.js">

type="text/javascript">
jQuery(document).ready(function(){
jQuery.stratus({
links: 'soundcloud.com/foofighters/sets/wasting-light'
});
});


All inside the extra script option. With the relevant script tags.

You will need to escape the $ with the jQuery word.

Hope that helps.

Anthony

Perfect! It took about 15mins but I got it working and added a bit of styling to the #toTop id so that the back to top button wouldn't overlap.

Question, what is the rationale behind breaking the use of "$" as a variable for "jQuery"?

I tried the first time to load the remote copy of the Javascript player file and the template didn't like it. Firebug kept giving me some error regarding an unexpected XML source, but since the code was short I just included it within the template.js file and just executed a Find and Replace all within Dreamweaver to replace each "$" with "jQuery".

If you have to escape the "$" to use any scripting within the template, doesn't this make things a bit difficult to add in outside plug-ins?

It depends on how the plugin or extra script is coded but in Joomla when you use jQuery you need to name space the $ with the jQuery because Mootools lays claim on the $.

This is a pretty standard way to use jQuery in conjunction with other JS libraries. We just specify jQuery rather than jQ or another derivative in the framework so when you use inline doc ready statements then you need to use jQuery.

Plugins and 3rd party scripts should be fine.

hope that clears it up.

Anthony