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!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

experts, can someone help me with "layer" problem ?

Status
Not open for further replies.

JeroenB

Programmer
Apr 8, 2001
93
BE
Hi,
I have the following problem and I hope You can help me out
Take a look at the following page of my site;


It is possible to start the page with all the layers closed or all the layers opened, and this by changing the value "1" in onLoad="initPage(0, 'full display')".

Now, I want to do the following: I want to start the page with for instancce 1 layer open and 3 closed.

I know you can do this in IE by adding : style=&quot;display:none&quot; in <div id=&quot;MenueREPLChild&quot; class=&quot;child&quot;>

But my site also has to work within Netscape Nav.; So people told me I will have to solve this by using <layer>-tags ....

Is someone familiar with this kind of stuff and can show me concretely how to deal with this problem as I really am no expert in this matter and I need to get my deadline. I would really appreciate your help !

Thanks in advance
Jeroen
JeroenBekaert@hotmail.com
 
Just add this to the <div> tags ---

style=&quot;visibility: hidden&quot;

or

style=&quot;visibility: visible&quot;

to set your defaults when the page loads, and then you go ahead and manipulate them like you already are to do what you need to do.

:)
Paul Prewett
 
this does not seem to work;
It has to work with IE as well as with Netscape Nav.

I don't know if I'm doing something wrong; could You change the page for me and send it to my email or put it somewhere online ?

Thanks in advance
with kind regards
JeroenB
 
Well, I got your page, but was unable to get it to do what you want it to do. It's built up a little differently than what I'm used to...

Development is my strong point, not design. I would suggest you put this thread over in the HTML forum, or even the Dreamweaver forum... they have good people over there, and I bet someone could get you going.

good luck! :)
Paul Prewett
 

<HTML>
<title> Test</title>
<HEAD>
<Script language=&quot;Javascript&quot;>
// This code was created by Reuben Lawrence Owens
// Global variables
var isNav, isIE
var insideWindowWidth
var range = &quot;&quot;
var styleObj = &quot;&quot;
if (navigator.appVersion.charAt(0) >= &quot;4&quot;) {
if (navigator.appName == &quot;Netscape&quot;) {
isNav = true
insideWindowWidth = window.innerWidth

} else {
isIE = true
range = &quot;all.&quot;
styleObj = &quot;.style&quot;
}
}
function getObj(obj) {
var theObj;
if (typeof obj == &quot;string&quot;) {
theObj = eval(&quot;document.&quot; + range + obj + styleObj);
} else {
theObj = obj;
}
return theObj
}
// Setting the visibility of an object to visible
function show(obj) {
var theObj = getObj(obj)
theObj.visibility = &quot;visible&quot;
}

// Setting the visibility of an object to hidden
function hide(obj) {
var theObj = getObj(obj)
theObj.visibility = &quot;hidden&quot;
}

// Cross Plateform Layer obj
function layer_setLayerTable(LayerTable){
this.LayerTable = LayerTable
}
function layer_setInnerLayer(InnerLayer){
this.InnerLayer = InnerLayer
}

function layer_writePrototype(doc){
var backgroundcolor = &quot;&quot;;
var position = &quot;&quot;;
var width = &quot;&quot;;
var height = &quot;&quot;;
var visibility = &quot;&quot;;
var top = &quot;&quot;;
var left=&quot;&quot;;

if (this.bgcolor != null) backgroundcolor = &quot;background-color:&quot;+this.bgcolor+&quot;;&quot;;
if (this.position != null) position = &quot;position:&quot;+this.position+&quot;;&quot;;
if (this.width != null) width = &quot;width:&quot;+this.width+&quot;;&quot;;
if (this.height != null) height = &quot;height:&quot;+this.height+&quot;;&quot;;
if (this.visibility != null) visibility = &quot;visibility:&quot;+this.visibility+&quot;;&quot;;
if (this.top != null) top = &quot;top:&quot;+this.top+&quot;;&quot;;
if (this.left != null) left = &quot;left:&quot;+this.left+&quot;;&quot;;

doc.write(&quot;<style type='text/css'>&quot;);
doc.write(this.name + &quot; {&quot;+position+&quot; &quot;+width+&quot; &quot;+height+&quot; &quot;+visibility+&quot; &quot;+top+&quot; &quot;+left+&quot;}&quot;);
doc.write(&quot;</style>&quot;);
if (this.InnerLayer != null) this.InnerLayer.writePrototype(doc);
}

function layer_write(doc){
var backgroundcolor = &quot;&quot;;
var position = &quot;&quot;;
var width = &quot;&quot;;
var height = &quot;&quot;;
var visibility = &quot;&quot;;
var top=&quot;&quot;;
var left=&quot;&quot;;

if (navigator.appVersion.charAt(0) >= &quot;4&quot;) {
if (navigator.appName == &quot;Netscape&quot;) this.browser = &quot;Nav&quot;
else this.browser = &quot;IE&quot;
}

if (this.browser == &quot;IE&quot;) {
if (this.bgcolor != null) backgroundcolor = &quot;background-color:&quot;+this.bgcolor+&quot;;&quot;;
if (this.position != null) position = &quot;position:&quot;+this.position+&quot;;&quot;;
if (this.width != null) width = &quot;width:&quot;+this.width+&quot;;&quot;;
if (this.height != null) height = &quot;height:&quot;+this.height+&quot;;&quot;;
if (this.visibility != null) visibility = &quot;visibility:&quot;+this.visibility+&quot;;&quot;;
if (this.top != null) top = &quot;top:&quot;+this.top+&quot;;&quot;;
if (this.left != null) left = &quot;left:&quot;+this.left+&quot;;&quot;;

doc.write(&quot;<div id='&quot;+this.name + &quot;' style= '&quot; +position+&quot; &quot;+backgroundcolor+&quot; &quot;+width+&quot; &quot;+height+&quot; &quot;+visibility+&quot; &quot;+top+&quot; &quot;+left+&quot;' >&quot;)
if (this.data != null) doc.write(this.data);
if (this.LayerTable != null) this.LayerTable.colorWrite(doc);
if (this.InnerLayer != null) this.InnerLayer.write(doc);

doc.write(&quot;</div>&quot;);

}
else {
if (this.bgcolor != null) backgroundcolor = &quot;BGCOLOR='&quot; + this.bgcolor + &quot;'&quot;;
if (this.width != null) width = &quot;width=&quot; + this.width;
if (this.height != null) height = &quot;height=&quot; + this.height;
if (this.visibility != null) visibility = &quot;visibility='&quot; + this.visibility + &quot;'&quot;;
if (this.top != null) top = &quot;top = &quot;+this.top;
if (this.left != null) left = &quot;left = &quot;+this.left;

doc.write(&quot;<layer name='&quot; + this.name + &quot;' &quot; + width + &quot; &quot; + height + &quot; &quot; + backgroundcolor+&quot; &quot;+visibility+&quot; &quot;+top+&quot; &quot;+left+&quot;>&quot;);

if (this.data != null) doc.write(this.data);
if (this.LayerTable != null) this.LayerTable.colorWrite(doc);
if (this.InnerLayer != null) this.InnerLayer.write(doc);
doc.write(&quot;</layer>&quot;);
}
}

function layer(name){
this.browser = null
this.name=name
this.top=null
this.left=null
this.position = &quot;absolute&quot;
this.width = null
this.height = null
this.bgcolor = null
this.visibility = null
this.data = null
this.LayerTable = null
this.InnerLayer=null
this.setLayerTable = layer_setLayerTable
this.setInnerLayer = layer_setInnerLayer
this.write = layer_write
this.writePrototype = layer_writePrototype
}
</script>


<Script language=&quot;JavaScript&quot;>
Test1 = new layer(&quot;First&quot;);
Test1.left=&quot;0&quot;;
Test1.top=&quot;50&quot;;
Test1.width = &quot;200&quot;;
Test1.height = &quot;200&quot;;
Test1.bgcolor = &quot;#008000&quot;;
Test1.visibility = &quot;visible&quot;;
Test1.data = &quot;This is the first Layer&quot;;
Test1.writePrototype(document);

Test2 = new layer(&quot;Second&quot;);
Test2.left=&quot;0&quot;;
Test2.top=&quot;50&quot;;
Test2.width = &quot;200&quot;;
Test2.height = &quot;200&quot;;
Test2.bgcolor = &quot;White&quot;;
Test2.visibility = &quot;hidden&quot;;
Test2.data = &quot;This is the SECOND Layer&quot;;
Test2.writePrototype(document);

function Switch(){
var Obj1 = getObj(&quot;First&quot;);
var Obj2 = getObj(&quot;Second&quot;);

if (Obj1.visibility == &quot;show&quot; || Obj1.visibility == &quot;visible&quot;) {
hide(Obj1);
show(Obj2);
}
else {
hide(Obj2);
show(Obj1);
}
}

</Script>
</HEAD>

<BODY >
<FORM>
<INPUT TYPE=&quot;button&quot; VALUE=&quot;Switch&quot; onClick=&quot;Switch()&quot; onDblClick=&quot;Switch()&quot;>
<Script language=&quot;Javascript&quot;>
Test1.write(document);
Test2.write(document);
</script>
</form>
</BODY>
</HTML>
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top