Add Page-Specific JavaScript or CSS in Joomla

Add page-specific javascript or CSS in Joomla

I ended up creating a plugin to do this for a site I maintain; I may release the code for it, but it's pretty simple to explain. You build a content plugin that searches for tags like {css path/to/a/css/file.css}, strips them out, then adds the files to the HTML <head>. Once you have the name of the CSS or JS file you want to include, here is the code you use to get it in the header:

$document =& JFactory::getDocument();
$document->addStyleSheet(JURI::base() . 'path/to/style.css');
$document->addScript(JURI::base() . 'path/to/script.js');

Joomla - Insert .js and .css files into a single Joomla article?

Try using a custom code extension such as JUMI. It is designed exactly for this purpose.

From the description: With Jumi you can include php, html, javascript scripts into the modules position, articles, category or section descriptions, or into your own custom made component pages.

Joomla: Load different css for specific page

Assuming you have inserted your HTML in an article, what you can do is install Sourcerer which allows you to add custom code to your articles. Once installed you can use the following to import a CSS file:

{source}
<?php
    JHtml::_('stylesheet', JUri::root() . 'path/to/your/file.css');
?>
{/source}

or if you don't want to import a file, you can just insert the CSS like so:

{source}
<style>
    #element {
        /* some code */
    }
</style>
{/source}

If Sourcerer seem like quite a heavy plugin to use, you can also download DirectPHP else you could developer a small module

Joomla load script in a specific page

Are you trying to do this in a content item or a component? If you're trying to do it in a component, this is the way to add a JavaScript file to the head portion for only that page:

$document =& JFactory::getDocument();
$document->addScript(JURI::base() . 'path/to/sample.js');

If you're trying to do this in a content item, you'll most likely need to find or build a content plugin to scan for a token that tells Joomla to run code like above. I did this on one of the sites I built a while back. I had it set so that a plugin would search for tags like {js sample.js} in content items, extract the file name, add the script to the document, then search and replace the tag out of the article.

javascript in Joomla custom module

I would not add things like this to your index.php file. This is Joomla, not a static html website ;)

You have 3 options:

Option 1 would be to develop your own module and install it on your Joomla site. This option would take the longest amount of time and would require you to get your handy in a bit of coding.

Option 2 would be to firstly download, install and enable a plugin called Sourcerer. Once done, in the Joomla backend, create a new "Custom Module" and manually add your html code. After, below the big textbox, you will see a button below saying "Insert code". O modal will popup allowing you to add your custom code. Simply add your CSS and JS using the <style> and <script> tags.

Option 3 would be to use a pre-built Image Gallery extensions from the Joomla Extensions Directory. There are loads to choose from.

Hope this helps

Adding javascript to head of Joomla website

Be careful about which files you add code to. Editing core files like the index.php in the templates folder might not be the best solution. What if there is a template update? The file will get overridden. So just bare that in mind.

Before you add the script, it is good idea to get the name of current template:

$app = JFactory::getApplication();
$template = $app->getTemplate();

You can use the following to import a .js file the <head> tags:

$doc = JFactory::getDocument(); //only include if not already included
$doc->addScript(JUri::root() . 'templates/' . $template . '/file.js');

or you can add the Javascript there and then like so:

$doc = JFactory::getDocument();
$js = "
       //javascript goes here
      ";
$doc->addScriptDeclaration($js);

Hope this helps

Include a javascript file only once in Joomla

The joomla way would be to instantiate the document inside your module and unset only the conflicting script as described in this question here just before you load the module's script:

1) get an instance if the document object and remove the js files (you
could do that in a plugin) :

<?php 
         //get the array containing all the script declarations
         $document = JFactory::getDocument(); 
         $headData = $document->getHeadData();
         $scripts = $headData['scripts'];

         //remove your script, i.e. mootools
         unset($scripts['/media/system/js/mootools-core.js']);
         unset($scripts['/media/system/js/mootools-more.js']);
         $headData['scripts'] = $scripts;
         $document->setHeadData($headData);
?>

Or in your case, I think you could try the dirty solution below inside your js files:

//1st module script

var unique_name;

if (unique_name == false || unique_name == null) { 
    unique_name = true; 
    //code here.. 
    alert("Included 1st script");
}else{
    //do nothing
    alert("Not included 1st script")
}

//2nd module script

var unique_name;

if (unique_name == false || unique_name == null) { 
    unique_name = true; 
    //code here.. 
    alert("Included 2nd script");
}else{
    //do nothing
    alert("Not included 2nd script")
}

Here is a DEMO

Page-specific logic in Joomla

Each page can be given an alias. We can retrieve the alias using code from the forum:

function getCurrentAlias()
{
   $menu   = &JSite::getMenu();
   $active   = $menu->getActive();
   return $active->alias;
}

We can then inject this into the Javascript:

var alias= '<?php echo getCurrentAlias(); ?>';

Add Page-Specific JavaScript or CSS in Joomla