Jump to content
j.silver

Proper Location of js/jQuery Scripts

Recommended Posts

<php at the top of page>
<followed by an html tags, then by below php>
<?php
include ('./includes/footer.html');
?>
<script type= "text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type= "text/javascript" src= "./js/collabsible.js"></script>
For one odd page of the website I wanted to have collapsible/uncollapsible text using jQuery, so I placed the relevant scripts at the bottom of the page as seen above. It works.
But in a previous communication it was stated that the ideal place for inclusion of js/jQuery scripts is before the closing tag of the body. The footer file, included before the scripts, closes the body and html tags, which means the scripts are placed even after the closed html. If scripts are placed before inclosure of the footer file, it would then be before some html tags. I cannot place them in the footer file before closure of the body tag because I need scripts in this page only while footer is also in the rest of site pages.
It seems I have only two options: leaving them as seen above or make one additional footer page for this page only where I can place the scripts before body closure tag. Any help or guidance will be appreciated.

Share this post


Link to post
Share on other sites

If the footer.html file has a closing </body> tag in it, then you must put the scripts before that file is included. The script tags don't need to be exactly before the body tag, it just needs to be further down the page than all the elements it needs to access.

Share this post


Link to post
Share on other sites

So this means I have to make one extra footer page to have the scripts placed before the closing body tag?

Share this post


Link to post
Share on other sites

Not necessarily. Put the scripts wherever you want to, it's not that big of a deal.

 

This works:

<script type= "text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script><script type= "text/javascript" src= "./js/collabsible.js"></script><?php include ('./includes/footer.html'); ?>

Share this post


Link to post
Share on other sites

The better, more practical, less confusing option it not to separate html opening or closing tags into separate include files.If the closing body and html tags are placed in footer anyone looking at this will think where are theses tags, must have missed them out, and reinsert them.

<!DOCTYPE html><html><head><title>Page Title</title></head><body><?php include "nav.php"; ?><h1>This is a Heading</h1><p>This is a paragraph.</p><?php include "specificjquery.html"; ?><?php include "footer.html"; ?>
While having it as this below setup anyone can see everything in is in its proper place, and if you should ever want to use JavaScript/jQuery to access element on footer, because the links to these are below footer element, you will not have any problems. You are just opening up yourself in the future to possibly more problems or more work by doing it as above. You can use php to retrieve current url address compare with specific url and insert jquery code link if they match.
<!DOCTYPE html><html><head><title>Page Title</title></head><body><?php include "nav.php"; ?><h1>This is a Heading</h1><p>This is a paragraph.</p><?php include "footer.html"; ?><?php include "specificjquery.html"; ?></body></html>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...