How to include js files in header?
Moderator: General Support Moderators
Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
-
- Joomla! Apprentice
- Posts: 9
- Joined: Tue Jun 15, 2010 11:49 pm
How to include js files in header?
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
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
- Joomla! Master
- Posts: 11616
- Joined: Thu Jul 17, 2008 3:10 pm
- Location: Ireland
- Contact:
Re: How to include js files in header?
Hi,
you can add javascript files into your template's index.php file.
Try to find the following code:
And add your javascript script tag directly above that line.
Olaf
you can add javascript files into your template's index.php file.
Try to find the following code:
Code: Select all
</head>
Olaf
Olaf Offick - Global Moderator
learnskills.org
learnskills.org
-
- Joomla! Apprentice
- Posts: 9
- Joined: Tue Jun 15, 2010 11:49 pm
Re: How to include js files in header?
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.
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
- Joomla! Master
- Posts: 11616
- Joined: Thu Jul 17, 2008 3:10 pm
- Location: Ireland
- Contact:
Re: How to include js files in header?
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:
or:
(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
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>
Code: Select all
<script type="text/javascript" src="/templates/[MY TEMPLATE]/js/mynewscript.js"></script>
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
learnskills.org
learnskills.org
-
- Joomla! Apprentice
- Posts: 9
- Joined: Tue Jun 15, 2010 11:49 pm
Re: How to include js files in header?
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.
I quite frequently use jquery, any piece of advise on how to tackle the compatibility issue?
Thanks again.
- ooffick
- Joomla! Master
- Posts: 11616
- Joined: Thu Jul 17, 2008 3:10 pm
- Location: Ireland
- Contact:
Re: How to include js files in header?
Your could try to use jQuery() instead of $() and then run jQuery in noConlict mode.
Olaf
Olaf
Olaf Offick - Global Moderator
learnskills.org
learnskills.org
-
- Joomla! Apprentice
- Posts: 9
- Joined: Tue Jun 15, 2010 11:49 pm
Re: How to include js files in header?
I really understood what you meant. Where should i write jQuery() instead of $()?ooffick wrote:Your could try to use jQuery() instead of $() and then run jQuery in noConlict mode.
Olaf
- ooffick
- Joomla! Master
- Posts: 11616
- Joined: Thu Jul 17, 2008 3:10 pm
- Location: Ireland
- Contact:
Re: How to include js files in header?
ok, give me an example of what kind of jQuery code you would like to add?
Olaf
Olaf
Olaf Offick - Global Moderator
learnskills.org
learnskills.org
-
- Joomla! Apprentice
- Posts: 9
- Joined: Tue Jun 15, 2010 11:49 pm
Re: How to include js files in header?
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
- Joomla! Master
- Posts: 11616
- Joined: Thu Jul 17, 2008 3:10 pm
- Location: Ireland
- Contact:
Re: How to include js files in header?
So instead of this code:
you would need to use this:
Olaf
Code: Select all
$('#basicModalContent').modal(); // jQuery object; this demo
Code: Select all
jQuery.noConflict();
jQuery('#basicModalContent').modal(); // jQuery object; this demo
Olaf Offick - Global Moderator
learnskills.org
learnskills.org
-
- Joomla! Intern
- Posts: 74
- Joined: Tue Jul 11, 2006 8:17 pm
Re: How to include js files in header?
just found this posting via google ... I would prefer to use:
More infos here: http://docs.joomla.org/JDocument/addScript
instead of adding a file "hardcoded" to the template.
Code: Select all
$this->addScript(/path/to/file.js);
instead of adding a file "hardcoded" to the template.
-
- Joomla! Enthusiast
- Posts: 186
- Joined: Thu Aug 16, 2012 5:32 pm
Re: How to include js files in header?
You probably mean $doc->addScript(/path/to/file.js);Biomehaniker wrote:just found this posting via google ... I would prefer to use:
More infos here: http://docs.joomla.org/JDocument/addScriptCode: Select all
$this->addScript(/path/to/file.js);
instead of adding a file "hardcoded" to the template.
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?
Hey, Olaf, what if we include more than one js? Should we write JQuery.noConflict(); in every one of them?ooffick wrote:Code: Select all
jQuery.noConflict(); jQuery('#basicModalContent').modal(); // jQuery object; this demo
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
- Joomla! Intern
- Posts: 66
- Joined: Fri Aug 29, 2014 2:13 pm
- Location: Bangladesh
- Contact:
Re: How to include js files in header?
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.
-
- Joomla! Enthusiast
- Posts: 186
- Joined: Thu Aug 16, 2012 5:32 pm
Re: How to include js files in header?
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.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.