URGENT ! DHTML Page Nesting

mishchenko · Apr 1, 2001

Here's what I would like to do:

1) Start with the script located at

http://www.wsabstract.com/javatutors/dynamiccontent5.shtml

2) Change it from a rotation script to an input-based script >>> the dynamic part should change depending on a visitor's selection in a <SELECT> box.

3) Have the script call up external .html files as opposed to including all of the dynamic pages' HTML code in the script itself.

Is this possible ?? Can someone help me out with this ??

mishchenko · Apr 5, 2001

I'd really prefer to have these as separate HTML files so that they could have their own <HEAD> and <BODY> tags, could be easily changed, etc. etc.

mishchenko · Apr 5, 2001

As for getting it to work in all browsers:

http://www.wsabstract.com/javatutors/dynamiccontent5.shtml

is an excellent example of cross-browser dynamic content (NS4,NS6,IE)!!

All you need to do is to add a <SELECT> box functionality to it.

aperfectcircle · Apr 5, 2001

Here is a similar example that I've tested in Netscape 4, Netscape 6, and IE 5.5.

Code:

<html>
<head>
<title>Cross-Browser Dynamic Test</title>
<script language=&quot;javascript&quot; type=&quot;text/javascript&quot;>
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
ns6 = (document.getElementById)? true:false

function layerWrite(id,nestref,text) {
	if (ns4) {
		var lyr = (nestref)? eval('document.'+nestref+'.document.'+id+'.document') : document.layers[id].document
		lyr.open()
		lyr.write(text)
		lyr.close()
	}
	else if (ie4) document.all[id].innerHTML = text
	
	else if (ns6) document.getElementById(id).innerHTML = text
}

function complete() {
 if (document.form.type.selectedIndex == 0) {
 layerWrite('div1',null,'<span class=\'white\'>option 1</span>')
 }
 if (document.form.type.selectedIndex == 1) {
 layerWrite('div1',null,'<span class=\'white\'>option 2</span>')
 }
 if (document.form.type.selectedIndex == 2) {
 layerWrite('div1',null,'<span class=\'white\'>option 3</span>')
 }
 }
//-->
</script>
<style type=&quot;text/css&quot;>
<!--
.white {color:white;}
#div1 {position:absolute; left:100; top:10; width:100; height:30; clip:rect(0,100,30,0); background-color:#004080; layer-background-color:#004080;}
-->
</style>
</head>
<body>
<form name=&quot;form&quot;>
<select name=&quot;type&quot; onchange=&quot;complete()&quot;>
 <option selected=&quot;selected&quot;>option 1</option>
 <option>option 2</option>
 <option>option 3</option>
</select>
<br />
<div id=&quot;div1&quot;><span class=&quot;white&quot;>option 1</span></div>
</form>
</body>
</html>

I got the base for the code from

http://www.dansteinman.com/dynduo/en/writing.html

mishchenko · Apr 5, 2001

That looks just great. Would it be possible to somehow move the dynamic content into external HTML files and have the script call those up ??

aperfectcircle · Apr 6, 2001

Like I said before, I can tell you how to do it with external js files, but not external html files.
An external js file wouldn't really differ too much from an html file...you would have something like:

ext = '<div align="center">Text</div>'
+ '<br />'
+ 'More text'

And then you would just call that variable where you want it to be... In the example above it would be:

layerWrite('div1',null,ext)

mishchenko · Apr 6, 2001

but could I convert an entire HTML file like the one below to the format you described while still keeping all of the tags >>>

<HTML>
<HEAD>
<TITLE>title</TITLE>
</HEAD>
<BODY>content</BODY>
</HTML>

aperfectcircle · Apr 6, 2001

You could, but I don't think the browser would like it too much. I guess you would make the javascript rewrite the whole document when you select an option, but it would be a pain to get the dynamic functionality to work with that.
It would definitely be more trouble than it's worth IMO.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

URGENT ! DHTML Page Nesting

mishchenko

MIS

mishchenko

MIS

mishchenko

MIS

aperfectcircle

Programmer

mishchenko

MIS

aperfectcircle

Programmer

mishchenko

MIS

aperfectcircle

Programmer

Similar threads

Part and Inventory Search

Sponsor