Follow mclelun on Twitter +deviantWatch mclelun +fan mclelun +fan mclelun RSS Feed
mclelun.com

jQuery Dynamic Load Content

I had been using this little dynamic loaded content jQuery JavaScript in my website comic section for a while now. Have a look at this sample page, to see it in action. There are a lot of better written script out there, but I hope my version will be useful to you as well.

jquery dynamic content

Features

  • Using Hashtag as custom link for dynamic content.
  • On page first load, will check for hashtag and load for the correct content.
  • Track Back button with setInterval. Not the best solution, but it work.
  • Both ul list or ahref link implementation are in example.

How To Use

You will need to do some editing on the page you will be using this, but the script is quite simple and self explanatory. There are only few simple steps you need to do.

1) Download
Ofcourse, you will need to download the sample zip files first.
jqcontent.zip 3.1KB

2) Include the JavaScript and CSS
Include jQuery library(jquery.min.js), JavaScript (jqcontent.js) and CSS (jqcontent.css) for this banner in your page header, which are

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="jqcontent.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="jqcontent.css" />

3) Include the div where dynamic content will be load
To tell the script where to load the dynamic content, include the following HTML in your page.

<div id="jqc_content">
<center><h1>Click an option below</h1></center>
</div>
<div id="jqc_loading">
<h2>LOADING...</h2>
</div>

jqc_content are the div where dynamic content will be load and jqc_loading is the div to show loading status. Customize the jqc_loading div to suit your need.

3) Include link or list button to call load content function.
There are two ways to do this, ul list or ahref link. Advantage of using normal ahref link is with javascript disable, browser will still open the content. pick one that suit your needs.

Using ul list:

<ul id="jqc_menu">
<li id="1">Load content 1</li>
<li id="2">Load content 2</li>
<li id="3">Load content 3</li>
</ul>

Using normal ahref hyperlink:

<div id="jqc_menu_link">
<a href="content/1.html" id="1">Load content 1</a><br/>
<a href="content/2.html" id="2">Load content 2</a><br/>
<a href="content/3.html" id="3">Load content 3</a><br/>
</div>

In the script that I had written. It will grab the id value from UL list or AHREF link to construct the content URL. The id value is also the hashtag value.

Inside jqcontent.js, line 26

$("#jqc_content").empty().load("content/"+p_ID+".html", jqc_fnDone);

In this case, the id value is actually the file name for a HTML in the “content” subfolder. You will need to modify both the JavaScript and HTML according to your file name and location.

Example

If it is abit confusing due to my bad engrish explantion. Here are some examples.

CASE 1
To load day1.html from diary subfolder. You will need to modify it like this.

Using ul list:

<ul id="jqc_menu">
<li id="day1">View Day 1</li>
</ul>

Using normal ahref hyperlink:

<div id="jqc_menu_link">
<a href="diary/day1.html" id="day1">View Day 1</a><br/>
</div>

Inside jqcontent.js, line 26
$("#jqc_content").empty().load("diary/"+p_ID+".html", jqc_fnDone);

CASE 2
You can use the id value as the folder name as well.

Inside jqcontent.js, line 26
$("#jqc_content").empty().load(p_ID+"/index.html", jqc_fnDone);

Well, that’s all. Just download the sample files in the zip and play around with it. Like this article/tutorial? Follow me on my Facebook page to get more updates.

Comments

2 kind souls comment on “jQuery Dynamic Load Content”
Comments and share some love now!

  1. Keksz says:

    You need to running PHP server (Apache, EasyPHP).

    Very great script! :)

  2. Giovanni says:

    Hi, great pludin, but when i download it don’t work, why?

Your comment

Ideas, suggestion and criticism.

archives


logo Copyright © 2010-2014 mclelun.
Valid XHTML. Subscribe RSS.
spam eaten
65,107 spam!