jQuery Dynamic Load Content

Saturday, March 23, 2013



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

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.


Posted in Scripting and Coding | Tags: ,
Previous :
Next :

5 kind souls comment on “jQuery Dynamic Load Content”

  1. CanV says:

    Works perfect thx!!!

  2. anthony says:

    This is great just what I have been looking for. When you click on the link to load the external page can the entire page stay fixed in position instead of it sliding up?

  3. tnl cksnm says:

    Hi mclelun,

    great script, it is very useful, thanks…

    i am implementing your script to my personal web page, everything works very well but i need your help for two cases:

    1. i tried to rewrite your code for changing slide effect to fade effect but i could not:((

    2. i tried to add a button on jqc_content div to replace the content nside the same div but it did not worked, it opened the content (x.html) as a new web page:((

    i would be very grateful if you can help me,
    thank you…

  4. Keksz says:

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

    Very great script! :)

  5. Giovanni says:

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


Write a Reply or Comment

Your email address will not be published. Required fields are marked *


Tagcloud

3D ActionScript3 AfterEffects Animation BI Blender3D Book Cocos2D Comic Cycles Event FireAlpaca Flash Flex Freestyle Game HTML5 Illustration JavaScript jQuery Painting Papermodel Photo Photoshop Pixel Tutorial Vector Vue