webForumDet fria alternativet

Överlappning med layers

0 svar · 101 visningar · startad av i-or

i-orMedlem sedan nov. 2001294 inlägg
#1

Jag hämtade hem ett script från dhtmlcentral.com och har försökt att ändra på det för att få det som jag vill.

Scriptet i head-taggen ser ut så här:

<style type="text/css">
#divCont {position:absolute; z-index:1; left:40px; top:165px; height:400px; width:138px; visibility:hidden;}
.clTop   {position:absolute; z-index:1; width:170px; line-height:19px;}
.clSub   {position:absolute; z-index:1; left:50px; top:5px; width:100px; line-height:14px;}

#divCont .clTop a {font-family: Verdana, Tahoma; font-size: 7.5pt; color: #000000; font-weight: bold; text-decoration: none}
#divCont .clTop a:hover {font-family: Verdana, Tahoma; font-size: 7.5pt; color: #000000; font-weight: bold; text-decoration: none}
#divCont .clTop .clSub a {font-family: Verdana, Tahoma; font-size: 7.5pt; font-weight: bold; color:#0000dd; text-decoration: none}
#divCont .clTop .clSub a:hover {font-family: Verdana, Tahoma; font-size: 7.5pt; font-weight: bold; color:#ff8000; text-decoration: none}
</style>
<script language="JavaScript" type="text/javascript">
/**********************************************************************************   
FoldoutMenu 
*   Copyright (C) 2001 <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
*   This script was released at DHTMLCentral.com
*   Visit for more great scripts!
*   This may be used and changed freely as long as this msg is intact!
*   We will also appreciate any links you could give us.
*
*   Made by <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a> 
*********************************************************************************/

function lib_bwcheck(){
	this.ver=navigator.appVersion
	this.agent=navigator.userAgent
	this.dom=document.getElementById?1:0
	this.opera5=this.agent.indexOf("Opera 5")>-1
	this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; 
	this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
	this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
	this.ie=this.ie4&#0124;&#0124;this.ie5&#0124;&#0124;this.ie6
	this.mac=this.agent.indexOf("Mac")>-1
	this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
	this.ns4=(document.layers && !this.dom)?1:0;
	this.bw=(this.ie6 &#0124;&#0124; this.ie5 &#0124;&#0124; this.ie4 &#0124;&#0124; this.ns4 &#0124;&#0124; this.ns6 &#0124;&#0124; this.opera5)
	return this
}
var bw=new lib_bwcheck()

FoldNumber = 10
var stayFolded = false
foldImg = 0
mainOffsetY = 0

var px = bw.ns4&#0124;&#0124;window.opera?"":"px";

if(navigator.userAgent.indexOf('Opera')>-1 && document.getElementById){ //Opera 5 resize fix.
	scrX= innerWidth; scrY= innerHeight;
	document.onmousemove= function(){
		if(scrX<innerWidth-10 &#0124;&#0124; scrY<innerHeight-10 &#0124;&#0124; scrX>innerWidth+10 &#0124;&#0124; scrY>innerHeight+10){
			scrX = innerWidth;
			scrY = innerHeight;
			initFoldout();
		}
	};
}

function makeMenu(obj,nest){
	nest= (!nest)?"":'document.'+nest+'.';
	this.el= bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):document.getElementById(obj);	
   	this.css= bw.ns4?this.el:this.el.style;
	this.ref= bw.ns4?this.el.document:document;		
	this.x= (bw.ns4&#0124;&#0124;bw.opera5)?this.css.left:this.el.offsetLeft;
	this.y= (bw.ns4&#0124;&#0124;bw.opera5)?this.css.top:this.el.offsetTop;
	this.h= (bw.ie&#0124;&#0124;bw.ns6)?this.el.offsetHeight:bw.ns4?this.ref.height:bw.opera5?this.css.pixelHeight:0;
    this.vis= b_vis;
	this.hideIt= b_hideIt;
    this.showIt= b_showIt;
    this.moveIt= b_moveIt;
	return this
}
function b_showIt(){this.css.visibility='visible'}
function b_hideIt(){this.css.visibility='hidden'}
function b_vis(){if(this.css.visibility=='hidden' &#0124;&#0124; this.css.visibility=='HIDDEN' &#0124;&#0124; this.css.visibility=='hide') return true;}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x+px; this.css.top=this.y+px}

function menu(num){
	if(bw.bw){
		if (!stayFolded){
			for (var i=0; i<oSub.length; i++){
				if (i!=num){
					oSub[i].hideIt()
					if (foldImg)oTop[i].ref["imgA"+i].src = unImg.src
				}
			}
			for(var i=1; i<oTop.length; i++){
				oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].h)
			}
		}
		if (oSub[num].vis()){
			oSub[num].showIt()
			if (foldImg)oTop[num].ref["imgA"+num].src = exImg.src
		}else{
			oSub[num].hideIt()
			if(foldImg)oTop[num].ref["imgA"+num].src = unImg.src
		}
		
	}
}

function initFoldout(){
	bw.opera5 = (navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?true:false
	if (bw.opera5) bw.ns6 = 0

	oTop = new Array()
	oSub = new Array()
	for (var i=0; i<FoldNumber; i++){
		oTop[i] = new makeMenu('divTop'+i,'divCont')
		oSub[i] = new makeMenu('divSub'+i,'divCont.document.divTop'+i)
		oSub[i].hideIt()
	}
	
	oTop[0].moveIt(0,0)
	for (var i=1; i<oTop.length; i++){
		oTop[i].moveIt(0, oTop[i-1].y+oTop[i-1].h+mainOffsetY)
	}
	
	oCont = new makeMenu('divCont')
	oCont.showIt()
}

if(bw.bw) onload = initFoldout;
</script>

Koden på själva sidan (exemplet är en rubrik med underrubriker) ser ut så här:

<div id="divCont">

<div id="divTop0" class="clTop"><a href="#" onclick="menu(0); return false" onfocus="this.blur()">
LOST?</A><BR>
<div id="divSub0" class="clSub">
<P ALIGN="right">
<TABLE BORDER="1" BORDERCOLOR="FF8000">
<TR>
<TD ALIGN="right">
<A HREF="default.asp">home</A><BR>
<A HREF="mum.asp">to mum</A><BR>
</TD>
</TR>
</TABLE>
</P>
</div>
</div>

</div>

divTop är huvudrubrikerna och divSub är det som kommer upp om man trycker på en av huvudrubrikerna.

Ibland överlappar divTop och divSub varandra. Jag vill då att den del av divTop som överlappas av divSub ska försvinna eller åtminstone att divSub ska vara över divTop och inte tvärsom som det är nu. Går det att lösa på något sätt? I så fall, hur?

133 ms totalt · 3 externa anrop · v20260731065814-full.2b84b982
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
131 ms — hämta tråd, inlägg och bilagor (db)