Using jQuery to insert snippets of codes

jQuery is a really powerful javascript library. It lives up to its promise of writing less and doing more. In this short tutorial, I will take you through enhancing your static website project to give it the illusion of a dynamic website. Or you can just use the tutorial here to help yourself cut down the time of updating your static website.

Before we begin, I will assume that you know the basics of HTML, CSS, JavaScript and the Document Object Model or simply DOM. Although I am assuming you know any/all of this, it wouldn’t be difficult for you to just follow through. So lets get right into it.

I have the following file structure in my project. The files I will be using in this tutorial are all found in the root directory “loopreportingapp.github.io” ~ as shown by the image below.

file-structureI have my files:

  • index.html
  • jquery.js
  • menu.html
  • side-bar.html

Introduction

In my adventure today, I will be using jQuery to import code snippets of the files “menu.html” and “side-bar.html” into “index.html” and other html files that are in the project folder “reports”. Having the file system structured this ways is organized and okay but it causes havoc when it comes to updating the sidebar and navigation menu’s of html files in the reports folder.

I know most of you experts out there will suggest using php or dynamic scripting but the problem with my app is i don’t have a mysql server account or even a fair bit of knowledge about php or other dynamic scripting languages out there. If you are someone who is in my shoes, then you’re in luck coz this tutorial is for you.

Diving straight into coding

I’m going to cut the long chase and dive right into coding now.

1. Import your jQuery file intoΒ “index.html” by typing this code into header

This is assuming, your jquery file is in the same directory as your “index.html” file. 2. Navigate to where you want your “dynamic” menu to be loaded to and create a div there. Give it an ID. This is important as you shall see in the next step. Below is my example of the main navigation menu div

Make sure you put nothing else in between the opening and the closing div tags. 3. Type in this code before the closing body tag.

//

4. Save your html file and open it in a browser. You should see the menu appearing where you want it to.

Sample Files & Source Code

Below are sample source codes of my project files.

> index.html

Index page

Β 

Β 

//

> menu.html

Sources

I got most of my materials for this tutorial on these sites

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s