Carry Over Webpage Elements with JQuery Tutorial

This is a tutorial on how to use JQuery to implement consistent elements across multiple webpages.

Introduction
What is JQuery?
Setting Up Your HTML File(s)
Adding Elements to Your Pages
Resources and Closing Remarks

Introduction

Early on in my web design journey, I used this method to have a navigation bar, header, and footer consistently show up on each page of my website. Then, I found out about iframes and thought "Oh, cool now my website doesn't have to be as dependent on Javascript to function!" Then, I found out that being able to bookmark specific pages and being able to keep the website's intended layout at the same time was basically impossible (unless you use Melonking's Frame-Link System. Which I used to use, but I still found it too inconvenient for my purposes. But hey, if it works for you, feel free to ignore this tutorial.) With that, I went back to using JQuery, but the thing is, I know that sadgrl had a tutorial on this (or at least I thought she did.) But I can't find it anymore, hence I decided to write up one myself.

What is JQuery?

JQuery is a library of the Javascript language that makes it easier to implement Javascript functions on your website. JQuery has a simpler language to grasp compared to Javascript and can do in a single line of code what requires Javascript to do with multiple lines of code.

An important thing to know is that JQuery will not be automatically be usable on a webpage. You would need to download the JQuery library from JQuery.com and place it in the same directory as the pages using JQuery or put this line of code in the <head> block of each webpage JQuery code will be used:

I personally find the latter method easier.

Setting Up Your Element HTML File(s)

Once you get the JQuery library added to your website, you will need to code whatever element(s) you would like to be carried over from webpage to webpage. Using my own website as an example, it has the navigation bar and the footer consistently show up on each page. So, both the navigation bar and the footer are made into their own individual HTML files. The JQuery code itself will not be implemented in these files, so there's no need to add that one line of code to their head block. The element's HTML file can be as minimalistic as you want it to be. For example, this is all the code that is in my footer.html:

Adding Elements to Your Pages

After setting up your element HTML files, it's time to actually add them to your pages. In the webpages you wish to add these consistent elements, you need blocks with an ID attribute attached to it. That way, the JQuery code can find where to put in the element's HTML file's code.

Using my own website as an example again, I have two <div> block. One with the ID "nav" and one with the ID "footer". The JQuery/Javascript code will be looking for these two IDs and will insert the HTML from the Navigation Bar and the Footer HTML files into those blocks.

As for the actual JQuery code, you would need to create a Javascript file (a file with the .js extension) and put it somewhere on your server. (I named mine carry-over.js but you may name yours whatever you want.) The best place for it would most likely be your root folder (your top-level folder where your main index.html file is.) The code you would put into the Javascript file will look something like this:

To understand how this code works, I'll go through each part of it one by one.

$document.ready(); makes it so that the webpage is fully loaded before executing any code that's within the parentheses. If the page is not done loading, the code may not execute properly because it may be looking for an element that is not loaded yet.

Within the parentheses, we have function(){} which executes whatever function is within the curly braces.

Within the curly braces is $("#ID").load("/ID.html"); This is the actual function the code is executing. It is taking "ID.html" and loads its contents into the block with the ID that matches "#ID" without the pound sign (or hashtag, if you prefer).

Note: if you put your JQuery code in the root folder like I recommended, having the forward slash along with the name of the HTML file that's being loaded allows that element to be loaded into any webpage you add your JQuery functionality to regardless of what subfolder it is in.

Once you have your Javascript file set up, you will need your HTML pages to actually use said file. You will need to insert a script block that has your Javascript file as the source as shown here:

<script src="/carry-over.js"></script>

Again, the forward slash makes sure that the HTML file searches for the Javascript file in the root folder. And remember, you will need to make sure your webpages can access the JQuery library in order to execute the code in the Javascript file. With all that, you are done!

Resources and Closing Remarks