Adding a JavaScript or CSS tag to your Joomla header! (per page - not site wide).

Carlos LlanosIT Manager
Published:
Browse All Articles > Adding a JavaScript or CSS tag to your Joomla header! (per page - not site wide).
First of all, we will need Jumi component or Sourcerer plugin for this to work. We need either of these because the main focus here is custom development outside of the standard modules or articles within Joomla.

You can find Jumi here...it's my favority extension to Joomla other than Breezing Forms.
http://extensions.joomla.org/extensions/edition/custom-code-in-content/1023?qh=YToxOntpOjA7czo0OiJqdW1pIjt9

~My little advertisement on Jumi~

*Jumi is a component that allows you to write custom php and js pages and load them into your Joomla site.  So, if you are needing to add some AJAX or interactivity to your website, Jumi is the component for you.  Jumi is compatible with J1.0, J1.5, and J1.6.  With Jumi, you can add custom content to your modules, articles, etc...

New to Jumi?  View these helpful tutorials here: http://edo.webmaster.am/jumi/tutorial

~Now, back to the good stuff!~

When custom coding your pages and you need to add a little javascript or css to it, normally you would have to add those links to the <head></head> location of your template's index.php page...however, now these scripts and css are applied site wide and might mess up the scripts and the css for the template on every page.  There's is a way that you can add these scripts and css pages WITHOUT having to manually add them to your index.php page and that won't affect the entire site's scripts or css.

If you plug this in at the top of your customized php page, you will get the results you need only on the pages you add this code to.

  
<?php
                      $document =& JFactory::getDocument();
                      $document->addStyleSheet('files/css/default.css');
                      $document->addScript('files/scripts/test.js');
                      ?>

Open in new window


This will add the script and css file to the <head> tag for that particular page.  Then you can feel free to modify that page without worrying about messing up the entire site.

Please view these two Joomla articles that will provide further assistance for you, if you should run into any trouble.
http://docs.joomla.org/Adding_JavaScript
http://docs.joomla.org/Adding_JavaScript_and_CSS_to_the_page
0
13,280 Views
Carlos LlanosIT Manager
Ask a related question

Comments (14)

Carlos LlanosIT Manager

Author

Commented:
Is the calendar script something you added to the header section like I mentioned in the article above?

It would look something like this:

<?php
$document->addScript('files/scripts/calendar.js');
?>

Open in new window

Jorge BatresIT

Commented:
this is the code I need to load in the header section
<script type="text/javascript" src="http://www.cancun.vacationpeople.com/functions/templating.js"> </script>
  <script type="text/javascript" src="http://www.cancun.vacationpeople.com/functions/sarissa/sarissa/sarissa.js"> </script><script type="text/javascript">
  <!--

    hotel_calendarname = "Villa del Palmar Hotel & Spa";
    hotel_reservationsname = "villa-delpalmar";

    function LoadPicker (){
       cmp = new Block("tsdatepicker", hotel_calendarname, hotel_reservationsname);
       cmp.WhenLoaded(DrawPicker);
    }

    function DrawPicker (block) {
       var node = block.MakeNode();
       var block_class = block.attachedClasses[0].value;
       SetChildNodes(document.getElementById("tsdatepicker"), node);
    }

    var old_onload = window.onload;
    window.onload = function (e) {
      if (old_onload) {
        old_onload(e);
      }
      LoadPicker();
    }

  //-->
  </script>
  <script src="http://www.cancun.vacationpeople.com/reservations/data/script/lib.js" type="text/javascript"></script>
  <script src="http://www.cancun.vacationpeople.com/scripts/functions/villa-delpalmar.js" type="text/javascript"></script>

Open in new window

Carlos LlanosIT Manager

Author

Commented:
OK, then code it like this:
  
<?php
$document =& JFactory::getDocument();
$document->addScript('files/scripts/templating.js');
$document->addScript('files/scripts/sarissa.js');
$document->addScript('files/scripts/misc.js');
$document->addScript('files/scripts/lib.js');
$document->addScript('files/scripts/villa-delpalmar.js');

echo 'Hello World!';

?>

Open in new window


Naturally, you will need to change the location of where the files are pointing.  In the misc.js file put your code:
  
hotel_calendarname = "Villa del Palmar Hotel & Spa";
    hotel_reservationsname = "villa-delpalmar";

    function LoadPicker (){
       cmp = new Block("tsdatepicker", hotel_calendarname, hotel_reservationsname);
       cmp.WhenLoaded(DrawPicker);
    }

    function DrawPicker (block) {
       var node = block.MakeNode();
       var block_class = block.attachedClasses[0].value;
       SetChildNodes(document.getElementById("tsdatepicker"), node);
    }

    var old_onload = window.onload;
    window.onload = function (e) {
      if (old_onload) {
        old_onload(e);
      }
      LoadPicker();
    }

Open in new window


See if that loads properly for you.
Carlos LlanosIT Manager

Author

Commented:
Just to clarify and help you more:

Change the previously place code above to this:
  
<?php
$document =& JFactory::getDocument();
$document->addScript('functions/templating.js');
$document->addScript('functions/sarissa/sarissa/sarissa.js');
$document->addScript('functions/misc.js');
$document->addScript('reservations/data/script/lib.js');
$document->addScript('scripts/functions/villa-delpalmar.js');

echo 'Hello World!';

?>

Open in new window


That should give you the correct paths.

Also remember to add that additional script to misc.js and save that file in the functions/misc.php location.
Abhijeet RananawareWeb & Mobile Developer

Commented:
question was posted long time back and solution was found.

Regards,
Abhijit

View More

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.