...

View Full Version : open document via link within div tag?



des55
02-25-2004, 06:00 PM
I have a series of links in one page that I would like to have open up various documents within a table cell or location prescribed div tag ... can somebody provide me with example code on how to accomplish this?

your help is greatly appreciated!

Des

coothead
02-25-2004, 09:43 PM
Hi there des55,

Here is something that uses innerHTML...
it may suit your purposes


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta content="mshtml 6.00.2800.1264" name="generator" />
<title>Inner HTML</title>

<style type="text/css">
/*<![CDATA[*/
body
{
background-color:#aaaaff;
}
#dvone
{
position:absolute;top:5%; left:2%;
}
#dvtwo
{
position:absolute;top:50%;left:50%;margin-top:-100px;margin-left:-100px;
}
button
{
width:100px; border: solid 2px #000000; margin:2px;
}
#tbltone
{
border: solid 1px #000000; background-color:#ffffff;
}
#information
{
width:200px; height:200px; border: solid 1px #000000; text-align:center;
}
#dvthree
{
width:200px; height:200px; padding:10px; overflow:auto;
}
/*]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
function clearcell()
{
document.getElementById("information").innerHTML =
'<div id="dvthree">'+
'This cell opens onload.<br /> If required you can leave this blank .'+
' As you will see scrollbars will appear automatically.</div>';
}
function first_text()
{
document.getElementById("information").innerHTML =
'<div id="dvthree">'+
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.'+
' Praesent blandit venenatis purus. Integer massa libero,'+
' vehicula id, consequat sed, tincidunt nec, purus.'+
' Class aptent taciti sociosqu ad litora torquent per conubia nostra,'+
' per inceptos hymenaeos. Suspendisse potenti. Class aptent taciti '+
'sociosqu ad litora torquent per conubia nostra, per inceptos '+
'hymenaeos. Sed cursus feugiat mauris.'+
' <br /><a href="#"onclick="clearcell()">close</a></div>';
}
function second_text()
{
document.getElementById("information").innerHTML =
'<div id="dvthree">'+
'Here is some more text.<br />'+
'<a href="#"onclick="clearcell()">close</a></div>';
}
function third_text()
{
document.getElementById("information").innerHTML =
'<div id="dvthree">'+
'You can also use images.<br />This is an image<br />'+
'<img src="http://mysite.freeserve.com/achelous/anim2.gif"alt=""/><br />'+
'<a href="#"onclick="clearcell()">close</a></div>';
}
function fourth_text()
{
document.getElementById("information").innerHTML =
'<div id="dvthree">'+
'<object type="application/x-shockwave-flash" data="http://mysite.freeserve.com/achelous/circle.swf" width="180" height="155">'+
'<param name="movie" value="http://mysite.freeserve.com/achelous/circle.swf" /></object><br />'+
'<a href="#"onclick="clearcell()">close</a></div>';
}
//]]>
</script>
</head>

<body onload="clearcell();">

<div id="dvone">
<button onmouseover="this.style.backgroundColor='#ffffff'"
onmouseout="this.style.backgroundColor='#cccccc'"
onclick="first_text()"> Lorem </button><br />
<button onmouseover="this.style.backgroundColor='#ffffff'"
onmouseout="this.style.backgroundColor='#cccccc'"
onclick="second_text()" > More text </button><br />
<button onmouseover="this.style.backgroundColor='#ffffff'"
onmouseout="this.style.backgroundColor='#cccccc'"
onclick="third_text()" > An image </button><br />
<button onmouseover="this.style.backgroundColor='#ffffff'"
onmouseout="this.style.backgroundColor='#cccccc'"
onclick="fourth_text()" > A flash </button>
</div>

<div id="dvtwo">
<table id="tbltone"><tr>
<td id="information"></td>
</tr></table>
</div>

</body>
</html>


c:D:Dthead



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum