Dynamic content

This script is a simple demo that hopefully shows you some of the benefits of AJAX. The list you see on the right side of the demo is a group of articles.

Download code Visit demo

Tags: dynamic-content

<< Ajax Feed Ajax Chat >>

Dynamic content demo

Changes to the code below will update the demo above in real time.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<base href="http://www.ajaxdaddy.com/media/demos/play/1/dynamic-content/dynamic-content/" />

#mainContainer{
	width:555px;
	margin:0 auto;
	text-align:left;
	padding:5px;
	margin-top:20px;
	border:1px solid #000;
	background-color: #FFF;
}
#contentContainer{
	float:left;
	border:1px solid #000;
	background-color: #E2EBED;
	overflow:auto;
	margin-right:10px;
	padding:10px;
	
	/* CSS HACK */
	width: 397px;	/* IE 5.x */
	width/* */:/**/380px;	/* Other browsers */
	width: /**/380px;
	
	/* CSS HACK */
	height: 412px;	/* IE 5.x */
	height/* */:/**/390px;	/* Other browsers */
	height: /**/390px;
			
}

#contentContainer .openingText{
	color:red;
}

#articleListContainer{	/* <ul> container for article list */
	float:left;
	height:410px;
	overflow:auto;	
	width:140px;
	border:1px solid #000;
	background-color:#FFF;	
}
.articleList{
	margin:0px;
	padding:2px;
}
.articleList li{	/* General layout article in list */
	list-style-type:none;
	border:1px solid #999;
	background-color:#EEE;
	height:50px;
	margin:1px;
	padding:2px;
	color:#333;
	cursor:pointer;
}
.articleList li.articleMouseOver{	/* Mouse over article in list - layout */
	border:1px solid #000;
	color:#000;
}
.articleList li.articleClick{	/* Active article in list - layout */
	border:1px solid #000;
	color:#000;
	background-color:#317082;
	color:#FFF;
}

.keyText{	/* Just a column I use for key text inside articles - the one with the light blue bg and dotted border */
	background-color:#FFF;
	border:1px dotted #000;
	float:right;
	margin-top:5px;
	margin-left:5px;
	margin-bottom:5px;
	width:150px;
	padding:3px
}
.clear{
	clear:both;
}
</style>
<script type="text/javascript" src="javascript/sack.js"></script>
	
</head>
<body>

<div id="mainContainer">
	<div id="header">
		
	</div>
	<div id="contentContainer">
		<h2 class="openingText">Click on one of the articles to the right.</h2>
		<p>This will load the the content of external articles into this DIV</p>
	</div>
	<div id="articleListContainer">
		<ul id="articleList" class="articleList">
			<li id="article1">This is article number one</li>
			<li id="article2">This is the second article</li>
			<li id="article3">Article number 3</li>
			<li id="article4">About AJAX</li>
			<li id="article5">Article number 5</li>
			<li id="article6">Article number 6</li>
			<li id="article7">Article number 7</li>
			<li id="article8">Article number 8</li>
			<li id="article9">Article number 9</li>
		</ul>
	</div>
	<div class="clear"></div>
</div>
<script type="text/javascript">
/************************************************************************************************************
Ajax dynamic articles 
Copyright (C) 2006  DTHMLGoodies.com, Alf Magne Kalleland

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA

Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
written by Alf Magne Kalleland.

Alf Magne Kalleland, 2006
Owner of DHTMLgoodies.com

************************************************************************************************************/	
var ajax = new sack();
var articleListObj;
var activeArticle = false;
var clickedArticle = false;
var contentObj	// Reference to article content <div>

function mouseoverArticle()	// Highlight article
{
	if(this==clickedArticle)return;
	if(activeArticle && activeArticle!=this){
		if(activeArticle==clickedArticle)
			activeArticle.className='articleClick';
		else
			activeArticle.className='';
		
	}
	this.className='articleMouseOver';
	activeArticle = this;	// Storing reference to this article
}

function showContent()	// Displaying content in the content <div>
{
	contentObj.innerHTML = ajax.response;	// ajax.response is a variable that contains the content of the external file	
}

function showWaitMessage()
{
	contentObj.innerHTML = 'Finding article.....<br>Please wait<br /><img src=files/loader.gif>';
}
function getAjaxFile(fileName)
{
	ajax.requestFile = 'files/'+fileName;	// Specifying which file to get
	ajax.onCompletion = showContent;	// Specify function that will be executed after file has been found
	ajax.onLoading = showWaitMessage;	// Action when AJAX is loading the file
	ajax.runAJAX();		// Execute AJAX function	
}

function selectArticle()	// User have clicked on an article
{
	getAjaxFile(this.id + '.html');	// Calling the getAjasFile function. argument to the function is id of this <li> + '.html', example "article1.html"
	if(clickedArticle && clickedArticle!=this)clickedArticle.className='articleMouseOver';
	this.className='articleClick';
	clickedArticle = this;
}

function initAjaxDemo()
{
	articleListObj = document.getElementById('articleList');
	var articles = articleListObj.getElementsByTagName('LI');
	for(var no=0;no<articles.length;no++){
		articles[no].onmouseover = mouseoverArticle;
		articles[no].onclick = selectArticle;
	}	
	
	contentObj = document.getElementById('contentContainer');
}
initAjaxDemo();
</script>	
</body>
</html>

Aug. 17, 2007, 5:48 a.m. - Web man: Great stuff - does anyone know how search friendly it is? With regards to the extrenal html files?
Nov. 6, 2007, 2:57 p.m. - Noob: I was wondering if it were possible to randomly rotate each page every 5 seconds or so? I have seen other examples, but all lacked the ability to call full html pages. Other then that good stuff! Cheers!
Nov. 27, 2007, 1:08 a.m. - Moshfiq: hey, great things buddy. thanx a lot to share this..
May 9, 2008, 1:20 a.m. - newbie: I have a problem whereby i don't know where is the path for the article1.html, article2.html etc...
July 1, 2008, 4:38 a.m. - NN: This example is just taken from dhtmlgoodies.com, where it is explained fully, much more usefully.
July 24, 2008, 3:26 a.m. - Newbie answer: The URL is in the id of the li item. So id="article1" opens article1.html. If you changed the id to "info" it would open info.html
Sept. 5, 2008, 9:35 a.m. - 1: simply dosnt work....
Nov. 3, 2008, 1:47 a.m. - webdesign: Nice the example doesnt work that well but the code was good for me to try some Ajax
Nov. 27, 2008, 4:02 a.m. - Vicheanak: Looks like nice because it doesn't work.
Aug. 14, 2009, 7:29 a.m. - Iklan baris: nice posting.. thanks
Sept. 1, 2009, 3:38 a.m. - bansi: getting nothing, becoz new to ajax. simplify...
Nov. 16, 2009, 1:50 a.m. - diensh: this is a test coment
Dec. 8, 2009, 1:38 a.m. - charllyano: c'est super, je cherche cet script long temps... Merci
Dec. 10, 2009, 3:02 p.m. - d: help - lockups on line 137, "permission denied" I just paste it in front page. i'm a newbe and im clueless
July 28, 2010, 11:41 a.m. - newbie: whats the path of the html files
July 30, 2010, 8:42 p.m. - Kaneeda: Hei dud, i dont find a text (article1, article2...)documents, i need help, dont have time to find more this files. Thx
Aug. 6, 2010, 1:55 a.m. - jeter: thanks a lot to share this..
Dec. 7, 2010, 4:32 a.m. - IgoPog: Nothing works. If it downloaded no article shows.
Dec. 7, 2010, 6:12 a.m. - IgoPog: I've got it! The problem is in server - if u have no it it shouldn't work
Jan. 26, 2011, 1:57 a.m. - Chris Niese: L.s., Looks great but how to get it to work? please send me a copy of an working dynamic carousel or the how to's Thanks
Dec. 8, 2011, 7:52 p.m. - Koli: I wanna say, guys, actually it works, if and only if you upload your files onto your server and view this page as a WEB page. I even further developed the codes and it works perfectly for me now.