How to include js files in header?

[anwartheravian]

Hello Forum Members,

I am new to Joomla, and want to ask a simple question (and expect a simple answer), How can i include javascript files in header to make them work in my joomla template, and where can i place these files.

Thank you very much if you are reading this. I'll be further delighted if you bother to answer.

Anwaar

[ooffick]

Hi,

you can add javascript files into your template's index.php file.
Try to find the following code:

Code: Select all

</head>

And add your javascript script tag directly above that line.

Olaf

[anwartheravian]

Thanks ooffick for your reply.

Where should i place these js files on the server? And should the include syntax remain the same as it is for general html pages like:
<script type="text/javascript" src="http://forum.joomla.org/styles/joomla09 ... "></script>

Please answer.

Thanks.

[ooffick]

Hi,

you could add the file to a new folder (e.g. "js") and then add that file there.

You could add the HTML script tag like this:

Code: Select all

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/js/mynewscript.js"></script>

or:

Code: Select all

<script type="text/javascript" src="/templates/[MY TEMPLATE]/js/mynewscript.js"></script>

(You will need to replace [MY TEMPLATE] with your template name) If your joomla website is not in the root of the domain, you might need to add the path as well.

However, please note if you are going to use a jquery script that you might run into compatibility issues between mootools and jquery.

Olaf

[anwartheravian]

Thank you very very much. I tried the first method and it worked! Its quite a relief.

I quite frequently use jquery, any piece of advise on how to tackle the compatibility issue?

Thanks again.

[ooffick]

Your could try to use jQuery() instead of $() and then run jQuery in noConlict mode.

Olaf

[anwartheravian]

Your could try to use jQuery() instead of $() and then run jQuery in noConlict mode.

Olaf

I really understood what you meant. Where should i write jQuery() instead of $()?

[ooffick]

ok, give me an example of what kind of jQuery code you would like to add?

Olaf

[anwartheravian]

Lets say, i want to integrate a jQuery pop-up function, for this i have downloaded function files from http://www.ericmmartin.com/projects/simplemodal-demos/, and now i want to place them in my header of the template, so the functionality starts working on the pages.

[ooffick]

So instead of this code:

Code: Select all

$('#basicModalContent').modal(); // jQuery object; this demo

you would need to use this:

Code: Select all

jQuery.noConflict();
jQuery('#basicModalContent').modal(); // jQuery object; this demo

Olaf

[Biomehaniker]

just found this posting via google ... I would prefer to use:

Code: Select all

$this->addScript(/path/to/file.js);

More infos here: http://docs.joomla.org/JDocument/addScript

instead of adding a file "hardcoded" to the template.

[jdran]

just found this posting via google ... I would prefer to use:

Code: Select all

$this->addScript(/path/to/file.js);

More infos here: http://docs.joomla.org/JDocument/addScript

instead of adding a file "hardcoded" to the template.

You probably mean $doc->addScript(/path/to/file.js);

And this is another way but.. why you say it is any different from previous options? It still seems "hardcoded" to me... What am I missing?

Code: Select all

jQuery.noConflict();
jQuery('#basicModalContent').modal(); // jQuery object; this demo

Hey, Olaf, what if we include more than one js? Should we write JQuery.noConflict(); in every one of them?
Guess this still counts for Joomla 2.5/3.0

Edit: Just found this, it is an old article but I don't know if there is any improvement to that issue or a newer/better approach.

So in index.php we include this on the head:

Code: Select all

$document = JFactory::getDocument();
$document->addScript('path/to/jquery.js');
$document->addScript('path/to/jquery.noconflict.js');

[jaman_vvip]

Can anybody explain step by step how can i add my below code in between <head></head> section. I tried several times to insert in this section in index.php file directly but after insert it its not showing in between <head></head> area. When i view in view source its showing in body area. Pl help me some one why its showing in body and the solution.

[jdran]

Can anybody explain step by step how can i add my below code in between <head></head> section. I tried several times to insert in this section in index.php file directly but after insert it its not showing in between <head></head> area. When i view in view source its showing in body area. Pl help me some one why its showing in body and the solution.

You forgot to show the "below code" you are trying to insert. Also, did you read the posts above? Perhaps you can find the answer there.