Next Prev

Dynamic content

Read more and download "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.

Web 2.0 Box Generator

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<!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/ajax/dynamic-content/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>

<style type="text/css">
#contentContainer h2{	/* No margins above <h2> tags */
	margin-top:0px;
}

#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>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

2009-12-10 15:02:35

help - lockups on line 137, "permission denied" I just paste it in front page. i'm a newbe and im clueless

Chris

2009-06-04 04:17:01

For many users this script wont work as it is. You need to change the 'POST' in the ajax file to be 'GET'. Look at your web log. If you get a http 405 error then this is the cause. Happens on a few scripts on this website for IIS users.

Vicheanak

2008-11-27 04:02:51

Looks like nice because it doesn't work.

Webdesign

2008-11-03 01:47:04

Nice the example doesnt work that well but the code was good for me to try some Ajax

2008-09-05 09:35:09

simply dosnt work....

Newbie Answer

2008-07-24 03:26:49

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

2008-07-01 04:38:12

This example is just taken from dhtmlgoodies.com, where it is explained fully, much more usefully.

Different Newbie

2008-06-30 08:21:45

I have the same query. I don't understand how to get the path to the individual articles.

Newbie

2008-05-09 01:20:00

I have a problem whereby i don't know where is the path for the article1.html, article2.html etc...

Moshfiq

2007-11-27 01:08:49

hey, great things buddy. thanx a lot to share this..

Noob

2007-11-06 14:57:17

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!

Web Man

2007-08-17 05:48:17

Great stuff - does anyone know how search friendly it is? With regards to the extrenal html files?

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

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.

Comment on this example

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

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.

Comment on this example

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.