Disappearing Layers?

[AndyB21]

Wondering if anybody can help me? I am trying to design a web page that has various form fields to fill in dependant on which radio button choice you select at the top of the page. Essentially, I want a dedicated space that you can replace with a different content without affecting the surrounding page. Also want it done by the client not via a server-side transaction.

As an example, the "express search" section on the

http://www.expedia.co.uk/Default.asp

site is almost exactly what I'm looking for - does anybody have any code that replicates this? How is this type of "block-replacement" done?

Any help appreciated.

Andy

 

[Boomerang]

Hi Andy,

I did someting simular, see thread216-192793

On the site "expedia.co.uk" the next two functions are used in the onclick-event (just right click on the page, view source and search in the code):

For the first radio-button: onclick="hideAll();show('flt')"
For the next radio-button: onclick="hideAll();show('hot')"
For the third radio-button: onclick="hideAll();show('car')"
For the fourth radio-button: onclick="hideAll();show('hol')"
For the fifth radio-button: onclick="hideAll();show('ski')"

these are the functions:

hideAll(){hide('flt');hide('hot');hide('car');hide('hol');hide('ski');hide('dts','flt');}

function show(idLayer,idParent){cLayer=dom?document.getElementById(idLayer).style:document.all[idLayer].style;cLayer.display='block';var d=document.Wiz;if(idLayer=='car'){AttB(d.CAge);AttB(d.Ctime1);AttB(d.Ctime2);d.srch[2].status='true';}else if(idLayer=='hot'){d.srch[1].status='true';}else if(idLayer=='ski'){d.srch[4].status='true';}else if(idLayer=='flt'){AttB(d.FcAdu);d.srch[0].status='true';if(idParent!='flt'&&d.opts[1].checked)show('dts','flt');}else if(idLayer=='hol'){d.srch[3].status='true';}}

So now you have to search in the code again to see how they build the layers etc.
look in the code for:

<div id=&quot;flt&quot; align=center>
<table width=370 ..........</div>

<div id=&quot;hot&quot; align=center>
<table width=320 ..........</div>

<div id=&quot;car&quot; align=center>
<table width=380 ..........</div>

<div id=&quot;hol&quot; align=left>
<font style= ..............</div>

and

<div id=&quot;ski&quot; align=left>
<font style= .............</div>


Hope this helps,
Erik <!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (

http://www.boomerang2002.com)

!! Many Happy Returns !! -->