How to include js files in header?

Everything to do with Joomla! 1.5 templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
anwartheravian
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Tue Jun 15, 2010 11:49 pm

How to include js files in header?

Postby anwartheravian » Fri Oct 29, 2010 8:41 am

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

User avatar
ooffick
Joomla! Master
Joomla! Master
Posts: 11200
Joined: Thu Jul 17, 2008 3:10 pm
Location: Ireland
Contact:

Re: How to include js files in header?

Postby ooffick » Fri Oct 29, 2010 9:09 am

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
Olaf Offick - Global Moderator
http://learnskills.org

anwartheravian
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Tue Jun 15, 2010 11:49 pm

Re: How to include js files in header?

Postby anwartheravian » Fri Oct 29, 2010 9:45 am

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/template/jquery.js"></script>

Please answer.

Thanks.

User avatar
ooffick
Joomla! Master
Joomla! Master
Posts: 11200
Joined: Thu Jul 17, 2008 3:10 pm
Location: Ireland
Contact:

Re: How to include js files in header?

Postby ooffick » Fri Oct 29, 2010 10:19 am

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
Olaf Offick - Global Moderator
http://learnskills.org

anwartheravian
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Tue Jun 15, 2010 11:49 pm

Re: How to include js files in header?

Postby anwartheravian » Fri Oct 29, 2010 10:26 am

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.

User avatar
ooffick
Joomla! Master
Joomla! Master
Posts: 11200
Joined: Thu Jul 17, 2008 3:10 pm
Location: Ireland
Contact:

Re: How to include js files in header?

Postby ooffick » Fri Oct 29, 2010 10:47 am

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

Olaf
Olaf Offick - Global Moderator
http://learnskills.org

anwartheravian
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Tue Jun 15, 2010 11:49 pm

Re: How to include js files in header?

Postby anwartheravian » Fri Oct 29, 2010 2:05 pm

ooffick wrote: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 $()?

User avatar
ooffick
Joomla! Master
Joomla! Master
Posts: 11200
Joined: Thu Jul 17, 2008 3:10 pm
Location: Ireland
Contact:

Re: How to include js files in header?

Postby ooffick » Fri Oct 29, 2010 2:20 pm

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

Olaf
Olaf Offick - Global Moderator
http://learnskills.org

anwartheravian
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Tue Jun 15, 2010 11:49 pm

Re: How to include js files in header?

Postby anwartheravian » Fri Oct 29, 2010 2:48 pm

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.

User avatar
ooffick
Joomla! Master
Joomla! Master
Posts: 11200
Joined: Thu Jul 17, 2008 3:10 pm
Location: Ireland
Contact:

Re: How to include js files in header?

Postby ooffick » Fri Oct 29, 2010 3:05 pm

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
Olaf Offick - Global Moderator
http://learnskills.org

Biomehaniker
Joomla! Intern
Joomla! Intern
Posts: 74
Joined: Tue Jul 11, 2006 8:17 pm

Re: How to include js files in header?

Postby Biomehaniker » Sun May 06, 2012 1:23 pm

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
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 165
Joined: Thu Aug 16, 2012 5:32 pm

Re: How to include js files in header?

Postby jdran » Fri Feb 22, 2013 6:53 pm

Biomehaniker wrote: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?

ooffick wrote:

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');

User avatar
jaman_vvip
Joomla! Intern
Joomla! Intern
Posts: 59
Joined: Fri Aug 29, 2014 2:13 pm
Location: Bangladesh
Contact:

Re: How to include js files in header?

Postby jaman_vvip » Sat Jan 16, 2016 4:45 pm

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
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 165
Joined: Thu Aug 16, 2012 5:32 pm

Re: How to include js files in header?

Postby jdran » Tue Jan 19, 2016 9:16 am

jaman_vvip wrote: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.


Return to “Templates for Joomla! 1.5”

Who is online

Users browsing this forum: No registered users and 13 guests