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.

Visit PhpDaddy.com

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

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.