sample page for creating dynamic elements in HTML using Javascript.
For working Please COPY & PASTE in an editor and run it on browser.
Please edit the Js part for modify the code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<meta name="GENERATOR" content="Quanta Plus">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
//Please edit the Js part for modify the code
function show_new()
{
var id=document.getElementById('count').value;
var currentVal = document.getElementById('showTr').innerHTML;
document.getElementById('showTr').innerHTML = currentVal +"<tr><td align=\"center\" width=\"33%\">"+id+"<input type=\"text\" name=\"events_venue_"+id+"\" ></td><td align=\"center\" width=\"33%\"><input type=\"text\" name=\"events_title_"+id+"\" size=\"10\"></td><td align=\"center\" width=\"33%\"><input type=\"radio\" name=\"events_date_"+id+"\">Yes <input type=\"radio\" name=\"events_date_"+id+"\">No</td></tr>";
document.getElementById('count').value = parseInt(id)+1;
}
</script>
</script>
</head>
<body>
<TR>
<TR>
<td align="center" colspan="2"> <a href="javascript:void(0);" onclick="show_new()">add more</a></td>
</TR>
<tr><TD><table id="showTr">
<tr><td align="center" width="33%"><input type="text" name="events_venue" ></TDd><td align=center
width=33%><input type='text' name="events_title" size="10"></td><td align="center" width="33%"><input type="radio" name="events_date">Yes <input type="radio" name="events_date">No</td></tr>
</table>
</TD>
</tr>
<TR>
<td align="center" colspan="2"><input type="hidden" name="count" id="count" value="2"></td>
</TR>
</table>
</body>
</html>
Here are some links for displaying Tooltips and balloons
http://www.dhtmlgoodies.com/index.html?page=tooltip
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
http://web-graphics.com/mtarchive/001717.php
http://boxover.swazz.org/
http://www.nickstakenburg.com/projects/prototip/
http://demos.mootools.net/Tips
http://examples.learningjquery.com/62/demo/index.html#examplesection
http://ajaxian.com/archives/tooltipjs-creating-simple-tooltips
http://ashishware.com/Tooltip.shtml
http://www.twinhelix.com/dhtml/supernote/
http://www.beauscott.com/2006/08/19/ajax-enabled-help-balloons/
http://www.robertnyman.com/glt/index.htm
http://www.e-magine.ro/web-dev-and-design/46/tooltips-from-ajax-dom-nodes-or-inline-attributes-contents/
http://www.codylindley.com/blogstuff/js/jtip/
http://www.thinkvitamin.com/misc/yui-demos/demo-11.html
http://www.twinhelix.com/dhtml/tipster/demo/
http://www.texsoft.it/index.php?%20m=sw.js.htmltooltip&c=software&l=it
http://www.kryogenix.org/code/browser/nicetitle/
http://www.1976design.com/blog/archive/2003/11/21/nice-titles/
http://www.walterzorn.com/tooltip/tooltip_e.htm
http://developer.yahoo.com/yui/container/tooltip/
http://www.bosrup.com/web/overlib/
// function for random string, in this function there are 6 different types of string functions are available.
they are alphanumeric,numeric,nonzero numeric,alphabets,alpha numerics with special charectors like -_#@ and unique one.
function randomKey($type = 'alphanum', $len = 8)
{
switch($type)
{
case 'alphanum' :
case 'numeric' :
case 'nonzero' :
case 'alpha' :
case 'alphanumspechar':
switch ($type)
{
case 'alphanum' : $pool = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
break;
case 'numeric' : $pool = '0123456789';
break;
case 'nonzero' : $pool = '123456789';
break;
case 'alpha' : $pool = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
break;
case 'alphanumspechar': $pool = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_-#@'; break;
}
$str = '';
for ($i=0; $i < $len; $i++)
{
$str .= substr($pool, mt_rand(0, strlen($pool) -1), 1);
}
return $str;
break;
case 'unique' : return md5(uniqid(mt_rand()));
break;
}
}
//function redirecting the page
function funRedirect($url = '', $type = 'location')
{
switch($type)
{
case 'refresh' : header("Refresh:0;url="($url);
break;
default : header("Location: ".($url);
break;
}
exit;
}
//function to find out time finished in words
function timeFinishedInWords($datetime_string, $format = 'j/n/y', $backwards = false, $return = false) {
$datetime = $this->fromString($datetime_string);
$inSeconds = $datetime;
if ($backwards) {
$diff = $inSeconds - time();
} else {
$diff = time() - $inSeconds;
}
$months = floor($diff / 2419200);
$diff -= $months * 2419200;
$weeks = floor($diff / 604800);
$diff -= $weeks * 604800;
$days = floor($diff / 86400);
$diff -= $days * 86400;
$hours = floor($diff / 3600);
$diff -= $hours * 3600;
$minutes = floor($diff / 60);
$diff -= $minutes * 60;
$seconds = $diff;
if ($months > 0) {
$relativeDate = 'on ' . date($format, $inSeconds);
$old = true;
} else {
$relativeDate = '';
$old = false;
if ($weeks > 0) {
// weeks and days
$relativeDate .= ($relativeDate ? ', ' : '') . $weeks . ' week' . ($weeks > 1 ? 's' : '');
$relativeDate .= $days > 0 ? ($relativeDate ? ', ' : '') . $days . ' day' . ($days > 1 ? 's' : '') : '';
} elseif ($days > 0) {
// days and hours
$relativeDate .= ($relativeDate ? ', ' : '') . $days . ' day' . ($days > 1 ? 's' : '');
$relativeDate .= $hours > 0 ? ($relativeDate ? ', ' : '') . $hours . ' hour' . ($hours > 1 ? 's' : '') : '';
} elseif ($hours > 0) {
// hours and minutes
$relativeDate .= ($relativeDate ? ', ' : '') . $hours . ' hour' . ($hours > 1 ? 's' : '');
$relativeDate .= $minutes > 0 ? ($relativeDate ? ', ' : '') . $minutes . ' minute' . ($minutes > 1 ? 's' : '') : '';
} elseif ($minutes > 0) {
// minutes only
$relativeDate .= ($relativeDate ? ', ' : '') . $minutes . ' minute' . ($minutes > 1 ? 's' : '');
} else {
// seconds only
$relativeDate .= ($relativeDate ? ', ' : '') . $seconds . ' second' . ($seconds != 1 ? 's' : '');
}
}
$ret = $relativeDate;
// show relative date and add proper verbiage
if (!$backwards && !$old) {
$ret .= ' ago';
}
return $this->output($ret, $return);
}