<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

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

Published on
19,266 Points
11,766 Views
Last Modified:
Approved
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
Comment
15 Comments

Expert Comment

by:Jorge Batres
Is this working in Joomla 1.7? I have been trying to add some script tags to the head section of an article but it is not working.
0
LVL 13

Author Comment

by:Andrew Derse
Have you tried using Jumi to create your article?  This will only work when using a program that will allow you to add custom code to your pages...such as Jumi...

And yes, this is working in J1.7 for me.
0

Expert Comment

by:Jorge Batres
I really don't know how to make an article in Jumi. I followed the examples for the "Hello Jumi" and the "blogspot" but I don't know how to make a full article with it.
0
Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

LVL 13

Author Comment

by:Andrew Derse
Ok, here's how I normally create an article using Jumi.

1) Open up Dreamweaver (you can use any text-editor that will allow you to save as a PHP file.)
2) Code your page however you want...just for testing lets use this code:
3) Save the document in this location: <site root>/components/com_jumi/files/<save here as example.php>.  So the whole thing should look like this:  <site root>/components/com_jumi/files/example.php
4) Go into the Administrative side of your website and then go to Components -> Jumi
5) Click on the "New" button
6) Title your article
7) In the Pathname enter: components/com_jumi/files/example.php
8) Now go to the Menus section of the Administrative side of the website.
9) Create a new menu item as a Jumi Application Menu Item Type.
10) Select the Jumi article title you created in steps 6-7
11) You should now be able to see your custom coded article.
<?php

echo 'Hello World!';

?>

Open in new window

0

Expert Comment

by:Jorge Batres
Thank you so much, it seems like you are sending me in the right direction. I will try this tomorrow morning and I wil respond to you tomorrow. Again thank you so much for your time and a very clear set of instruction as to how I can do this.
jbatres
0

Expert Comment

by:Jorge Batres
Well I tried but I encountered a problem uploading my PHP file to the "files" directory. It has to do with permissions ad I just couldn't change the permissions on the folder as it wouldn't allow me to do so. Any suggestions?
0
LVL 13

Author Comment

by:Andrew Derse
Try uploading them to a different directory like below:

1) Create a new folder in your root directory called "Files"  ex. <root dir>\files
2) Follow ALL of the steps above except for when you hit step 3 save it here:
    <root dir>/files/example.php
3) In step 7 use this for a path name:
    files/example.php

That should work for you.
0

Expert Comment

by:Jorge Batres
Thank you I'll give it a try now!
0

Expert Comment

by:Jorge Batres
It loaded the html part of it and I know that I would have to strip a lot a div's from it but the actual calendar script that I really need , didn't load. Please take a look
http://www.vacationpeople.com/cms/index.php?option=com_jumi&fileid=3
0
LVL 13

Author Comment

by:Andrew Derse
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

0

Expert Comment

by:Jorge Batres
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

0
LVL 13

Author Comment

by:Andrew Derse
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.
0
LVL 13

Author Comment

by:Andrew Derse
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.
0
 

Administrative Comment

by:Mark Wills
@jbatres:

Why not create a question and post the link here so NUKIT can participate in the question, and help you more formally, and give NUKIT a chance to earn some points along the way ?

Cheers,
Mark Wills
Zone Advisor
0
LVL 13

Expert Comment

by:Abhijeet Rananaware
question was posted long time back and solution was found.

Regards,
Abhijit
0

Featured Post

Become a Certified Penetration Testing Engineer

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

Join & Write a Comment

Learn how to collaborate with office 365 Office Online
I've published three five-minute Experts Exchange video Micro Tutorials that describe terrific features in an excellent, free PDF product called PDF-XChange Editor: How to rotate pages in a PDF with free software (https://www.experts-exchange.com…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month