Load javascript on certain pages

General questions relating to Joomla! 2.5. Note: All 1.6 and 1.7 releases have reached end of life and should be updated to 2.5. There are other boards for more specific help on Joomla! features and extensions.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
katefisher
Joomla! Apprentice
Joomla! Apprentice
Posts: 23
Joined: Sun Mar 18, 2012 6:48 pm

Load javascript on certain pages

Postby katefisher » Fri Feb 01, 2013 10:33 am

Hi,

have a script which needs to be loaded as early as possible on a page within the

Code: Select all

<head> </head>
area. Could I ask how to control which page the script is loaded within joomla. Is there a joomla page property I can test for in the template php files?

The script needs to load in the head area of the page (first thing) as it supports html5 animation which occurs on a page of the website

Appreciate any assistance you can offer as Ive been searching on joomla.org not found similar posts / answers.

Many thanks

K

User avatar
bewebdev
Joomla! Ace
Joomla! Ace
Posts: 1017
Joined: Tue Apr 17, 2012 11:28 am
Location: Lincolnshire, UK

Re: Load javascript on certain pages

Postby bewebdev » Fri Feb 01, 2013 11:24 am

Hi Kate,

We put in a little bit of extra code into the template files, so we can restrict certain modules, scripts etc... to particular pages.

Before the doctype declaration in your template/index.php add

Code: Select all

<?php defined( '_JEXEC' ) or die( 'Restricted access' );
$Itemid = JRequest::getInt('Itemid');
?>

Then, on the page you want your JS to load, put

Code: Select all

<?php echo $Itemid; ?>
just after <body>.
Reload that page, and you'll see a number appear at the top. This is the itemid that you need.

Now, go back to your template file, remove the code that you inserted after body.

At the top of the file, where you want your JS to appear, type (and replace my xxx with the itemid that you just got from your template):

Code: Select all

<?php if ($Itemid==xxx) { ?>
<script type="text/javascript">your javascripty stuff here</script>
<?php } ?>


This works for us for customising templates.

Regards,
@bewebdev ^EK
Joomla & Magento Specialists.
white label web talent
http://www.missingmojo.co.uk

katefisher
Joomla! Apprentice
Joomla! Apprentice
Posts: 23
Joined: Sun Mar 18, 2012 6:48 pm

Re: Load javascript on certain pages

Postby katefisher » Fri Feb 01, 2013 9:14 pm

Superb, many thanks for your all of your assistance :)

User avatar
chiappa
Joomla! Intern
Joomla! Intern
Posts: 81
Joined: Wed Oct 26, 2011 6:53 pm
Location: Mostly Northeast Asia
Contact:

Re: Load javascript on certain pages

Postby chiappa » Wed Nov 06, 2013 11:02 am

I was so looking for this one, thanks so much. Now I can restrict some external javascript & css files to specific pages, articles in Joomla. This way I can make the website lighter!

Btw. a much easier way to find the ID is to go to the Menu Manager and check the ID column. :)

User avatar
chiappa
Joomla! Intern
Joomla! Intern
Posts: 81
Joined: Wed Oct 26, 2011 6:53 pm
Location: Mostly Northeast Asia
Contact:

Re: Load javascript on certain pages

Postby chiappa » Wed Nov 06, 2013 1:12 pm

One question! What if you want to assign it to multiple page IDs?

tylerancell
Joomla! Apprentice
Joomla! Apprentice
Posts: 11
Joined: Fri Aug 16, 2013 4:14 am

Re: Load javascript on certain pages

Postby tylerancell » Mon Jan 20, 2014 10:20 pm

I'm also interested in this - I would love to know how to assign multiple page id's

Thanks in advance!

tylerancell
Joomla! Apprentice
Joomla! Apprentice
Posts: 11
Joined: Fri Aug 16, 2013 4:14 am

Re: Load javascript on certain pages

Postby tylerancell » Tue Jan 21, 2014 5:22 am

Code: Select all

<?php if ($Itemid==xxx or $Itemid==xxx or $Itemid==xxx) { ?>
<script src="<?php echo $document->baseurl; ?>/path-to/your.js"></script>
// or you could put potentially anything in here, script, php, etc.
<?php } ?>


This is saved me TONS of extra load on pages that didn't need it. Thank you so much for the original snippet.

I feel like there's probably a less sloppy way to do this, but it works for me.

random12
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 103
Joined: Wed Jan 16, 2013 9:02 pm

Re: Load javascript on certain pages

Postby random12 » Sun Apr 27, 2014 11:28 am

Is this still working for Joomla 3.2? (cant get it to work, itemid returns nothing)

richardhale
Joomla! Intern
Joomla! Intern
Posts: 50
Joined: Wed Feb 12, 2014 1:59 am
Location: West Virginia
Contact:

Re: Load javascript on certain pages

Postby richardhale » Sun Apr 27, 2014 2:10 pm

Thanks for the Joomla resources bewebdev!

User avatar
ionut
Joomla! Ace
Joomla! Ace
Posts: 1264
Joined: Thu May 27, 2010 1:00 pm
Location: EU

Re: Load javascript on certain pages

Postby ionut » Sun Apr 27, 2014 2:42 pm

random12 wrote:Is this still working for Joomla 3.2? (cant get it to work, itemid returns nothing)


better use a plugin, it seems you have a lot of options: http://extensions.joomla.org/extensions ... /head-code

User avatar
chiappa
Joomla! Intern
Joomla! Intern
Posts: 81
Joined: Wed Oct 26, 2011 6:53 pm
Location: Mostly Northeast Asia
Contact:

Re: Load javascript on certain pages

Postby chiappa » Wed Aug 27, 2014 8:29 am

Confirmed still working on "Joomla! 3.3.3".

bwest213
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Sun Dec 04, 2016 1:54 pm

Re: Load javascript on certain pages

Postby bwest213 » Fri Jan 05, 2018 6:48 pm

I'm a relative noob and am having difficulty where to place my page specific JS code referenced above and updated to with my JS.

I found the article ID in the menu page in the admin panel as suggested by another user. I added it to the template this thread provided. The code I'm trying to implement is for a simple image slider, updated with the class I coded in the img emlements on the page I want them on. I FTP'd the updated index.php with several different placement variations, but no joy. I would use a module, but like the global css border-box value which messes with the modules I found on the extensions store pages.

The instructions on how to specify pages for JS say to place the index dot php page specific code template at, "the top of the file," and, "where you want the JS to appear." The question is, which file is the php code being placed in? The index dot php? I think as the code is formatted with an opening tag of <?p, it goes in the index.php file. If this is correct, and if I haven't made any other changes to the protostar index dot php file, where?

Also, how do I know where the javascript will appear? And where exactly does it go if I want it to appear after the last closing p tag on the target page itself? Before the index opening tag declaration, after the body php closing tag? I looked at the index.php file and could not be sure of where the javascript would appear due my lack of php skill and code comprehension.

I am learning, but having just started a few weeks ago, its going to take me some time. I'm using a combination of classes from the absolute beginner's guide to joomla, udemy, w3, and MDN to familiarize myself, but I'm constantly reminded of how much I don't know yet.

Any help would be tremendously appreciated!

-BW


Return to “General Questions/New to Joomla! 2.5”

Who is online

Users browsing this forum: No registered users and 7 guests