Lager

13 svar · 374 visningar · startad av DavidB 11 mars 2003

DavidBMedlem sedan jan. 20001 372 inlägg

Frågan11 mars 2003 22:17#1

har följande kod:

<script language="JavaScript">

function show(id){
	if(document.all){
		document.all[id].style.visibility='visible';
	} else if (document.layers){
		document.layers[id].visibility='visible';
	} else if (document.getElementById){
		document.getElementById(id).style.visibility='visible';
	}
}

function hide(id){
	if(document.all){
		document.all[id].style.visibility='hidden';
	} else if (document.layers){
		document.layers[id].visibility='hidden';
	} else if (document.getElementById){
		document.getElementById(id).style.visibility='hidden';
	}
}

</script>

<body onload="javascript:hide('helpwindow')">

<div id="helpwindow" style="position:relative">
<table border="1" cellspacing="0" cellpadding="0" width="150">
<tr>
<td>mer text</td>
</tr>
</table>
<br>
</div>

<table border="1" cellspacing="0" cellpadding="0" width="150">
<tr>
<td><a href="#" onmouseover="javascript:show('helpwindow')" onmouseout="javascript:hide('helpwindow')">visa hjälpfönster</a></td>
</tr>
</table>

det jag nu vill få fungera är att när den övre tabellen är "hidden" så ska den andra tabellen "hoppa upp" och lägga sig på den övres position och när den övre blir "visible" så ska den hoppa ner och hamna på ursprungpositionen. nån som vet?

ejickMedlem sedan mars 2001895 inlägg

12 mars 2003 09:17#2

Hmm.. Det är väl bara att trixa till det med position:relative; ?

Du kan ju förenkla scriptet du har enligt följande:


function showHide(name,value)
{
    if (document.all)
    {
        docuemnt.all[name].style.visibility=value;
    }
    else if (document.layers)
    {
        document.layers[name].style.visibility=value;
    }
    else if (document.getElementById)
    {
        document.getElementById(name).style.visibility=value;
    }
}

...

Anrop sker enligt följande:

onMouseOver="showHide('lagernamn','visible_eller_hidden');"

DavidBMedlem sedan jan. 20001 372 inlägg

12 mars 2003 12:16#3

ändrar jag till position:relative så hamnar den översta tabellen över den andra så att denna inte syns. jag vill ha att båda syns såhär:

när den är onmouseout:

<table border="1" cellspacing="0" cellpadding="0" width="150">
<tr>
<td><a href="#" onmouseover="java script:show('helpwindow')" onmouseout="java script:hide('helpwindow')">visa hjälpfönster</a></td>
</tr>
</table>

och när den är onmouseover så ska den vara såhär:

<table border="1" cellspacing="0" cellpadding="0" width="150">
<tr>
<td>mer text</td>
</tr>
</table>
<br>

<table border="1" cellspacing="0" cellpadding="0" width="150">
<tr>
<td><a href="#" onmouseover="java script:show('helpwindow')" onmouseout="java script:hide('helpwindow')">visa hjälpfönster</a></td>
</tr>
</table>

båda skall alltså synas hela tiden

ordellMedlem sedan sep. 200278 inlägg

12 mars 2003 12:25#4

Jag vet inte hur du löser det för NS 4, men om du är beredd att släppa den till förmån för NS 6 så kan du använda dig av display istället för visibility.

[style]
display: none;
display: block;
[/style]

Genom att ändra display-egenskapen kan du ändra vilket lager som ändras

JS;
function showhide(lagrets_id)
{
var obj = document.getElementById(lagrets_id)
obj.style.display == 'block' ? obj.style.display = 'none' : obj.style.display = 'block'
}

Nåt sånt :-)

DavidBMedlem sedan jan. 20001 372 inlägg

12 mars 2003 14:09#5

har kommit såhär långt:

<script language="JavaScript">

function ShowHide(namn,varde){
	if (document.all){
		if(varde == 'visible'){
			document.all[namn].style.visibility='visible';
			document.all[namn].style.position='relative';
		} else if(varde == 'hidden') {
			document.all[namn].style.visibility='hidden';
			document.all[namn].style.position='absolute';
		}
	} else if (document.layers) {
		if(varde == 'visible'){
			document.layers[namn].visibility='visible';
			document.layers[namn].position='relative';
		} else if(varde == 'hidden') {
			document.layers[namn].visibility='hidden';
			document.layers[namn].position='absolute';
		}
	} else if (document.getElementById) {
		if(varde == 'visible'){
			document.getElementById(namn).style.visibility='visible';
			document.getElementById(namn).style.position='relative';
		} else if(varde == 'hidden') {
			document.getElementById(namn).style.visibility='hidden';
			document.getElementById(namn).style.position='absolute';
		}
	}
}

</script>

<body onload="ShowHide('helpwindow','hidden')">

<div id="helpwindow" style="position:absolute">
<table border="1" cellspacing="0" cellpadding="0" width="150">
<tr>
<td>asd</td>
</tr>
</table>
</div>

<table border="1" cellspacing="0" cellpadding="0" width="150">
<tr>
<td>
<a href="#" onclick="javascript:ShowHide('helpwindow','visible')">visa</a><br>
<a href="#" onclick="javascript:ShowHide('helpwindow','hidden')">göm</a>
</td>
</tr>
</table>

nu e det bara det problemet att om jag har en "table" i lagret som ovan så visas inte tabellen men om jag lägger endast vanlig text mellan <div> och </div> så fungerar det som det skall, nån som vet vad man kan göra?

sen får någon gärna också kolla om det fungerar med andra webläsare också, har tyvärr bara IE 6 på denna datorn.
här e en länk för er om vill testa.

Peter SMedlem sedan dec. 20025 483 inlägg

12 mars 2003 17:59#6

Byt ut "relative" mot "static".

DavidBMedlem sedan jan. 20001 372 inlägg

12 mars 2003 21:08#7

funkade perfekt. tackar :)

DavidBMedlem sedan jan. 20001 372 inlägg

17 mars 2003 17:50#8

har ett litet problem till, koden ser ut såhär:

<script language="JavaScript">

function ShowHide(namn,varde){
	if (document.all){
		if(varde == 'visible'){
			document.all[namn].style.visibility='visible';
			document.all[namn].style.position='static';
		} else if(varde == 'hidden') {
			document.all[namn].style.visibility='hidden';
			document.all[namn].style.position='absolute';
		}
	} else if (document.layers) {
		if(varde == 'visible'){
			document.layers[namn].visibility='visible';
			document.layers[namn].position='static';
		} else if(varde == 'hidden') {
			document.layers[namn].visibility='hidden';
			document.layers[namn].position='absolute';
		}
	} else if (document.getElementById) {
		if(varde == 'visible'){
			document.getElementById(namn).style.visibility='visible';
			document.getElementById(namn).style.position='static';
		} else if(varde == 'hidden') {
			document.getElementById(namn).style.visibility='hidden';
			document.getElementById(namn).style.position='absolute';
		}
	}
}

</script>

<body>

[b]<a href="#" onclick="javascript:ShowHide('helpwindow','visible')" onmouseover="javascript:ShowHide('helpwindow','visible')" onmouseout="javascript:ShowHide('helpwindow','hidden')">länk</a>[/b]<br>
<p>

<div id="helpwindow" style="position:absolute;visibility:hidden">
<table border="1" cellspacing="0" cellpadding="0" width="150">
<tr>
<td>asd</td>
</tr>
</table>
<br>
</div>

<table border="1" cellspacing="0" cellpadding="0" width="150">
<tr>
<td><a href="#" onclick="javascript:ShowHide('helpwindow','hidden')">göm</a><br></td>
</tr>
</table>

Nu är det så att när man har musen över länken (fet stil) så visas lagret, och när man tar bort den så försvinner det. Grejen är den att jag vill ha det så att när man klickar på länken och sedan tar bort musen så ska lagret fortfarande visas. Fast om man inte klickar skall det vara som vanligt.

DavidBMedlem sedan jan. 20001 372 inlägg

19 mars 2003 20:56#9

ingen som vet? :q

Jesper TMedlem sedan nov. 20017 144 inlägg

19 mars 2003 21:00#10

Då är det väl bara att ta bort detta:

onmouseover="javascript:ShowHide('helpwindow','visible')" onmouseout="javascript:ShowHide('helpwindow','hidden')

DavidBMedlem sedan jan. 20001 372 inlägg

19 mars 2003 22:02#11

nä, inte riktigt. kanske inte har förklarat riktigt bra.

som det är nu så när man för över musen över länken så visas lagret, när man sedan för bort musen från länken så försvinner det.

såhär vill jag ha det:
när man för över musen över länken så visas lagret, när man sedan för bort musen från länken så försvinner det MEN om man klickade på länken innan man förde bort musen så ska lagret stanna kvar synligt.

Peter SMedlem sedan dec. 20025 483 inlägg

20 mars 2003 06:31#12

Testa detta:

<head>

<script language="JavaScript">

var clk = null;

function ShowHide(namn,varde){
	if (document.all){
		if(varde == 'visible'){
			document.all[namn].style.visibility='visible';
			document.all[namn].style.position='static';
		} else if(varde == 'hidden') {
			document.all[namn].style.visibility='hidden';
			document.all[namn].style.position='absolute';
		}
	} else if (document.layers) {
		if(varde == 'visible'){
			document.layers[namn].visibility='visible';
			document.layers[namn].position='static';
		} else if(varde == 'hidden') {
			document.layers[namn].visibility='hidden';
			document.layers[namn].position='absolute';
		}
	} else if (document.getElementById) {
		if(varde == 'visible'){
			document.getElementById(namn).style.visibility='visible';
			document.getElementById(namn).style.position='static';
		} else if(varde == 'hidden') {
			document.getElementById(namn).style.visibility='hidden';
			document.getElementById(namn).style.position='absolute';
		}
	}
}

</script>

</head>

<body>

<a href="#" onclick="javascript:ShowHide('helpwindow','visible'); clk=this;" onmouseover="javascript:ShowHide('helpwindow','visible')" onmouseout="javascript:if(!clk)ShowHide('helpwindow','hidden')">länk</a><br>
<p>

<div id="helpwindow" style="position:absolute;visibility:hidden">
<table border="1" cellspacing="0" cellpadding="0" width="150">
<tr>
<td>asd</td>
</tr>
</table>
<br>
</div>

<table border="1" cellspacing="0" cellpadding="0" width="150">
<tr>
<td><a href="#" onclick="javascript:ShowHide('helpwindow','hidden')">göm</a><br></td>
</tr>
</table>

DavidBMedlem sedan jan. 20001 372 inlägg

20 mars 2003 17:37#13

tackar, det var så jag ville ha det men det är en liten bugg.

jag har följande kod (har kortat ner den förra lite):

<script language="JavaScript">

var clk = null;

function ShowHide(name,value){
	document.all[name].style.visibility=value;
}

</script>

</head>

<body>

<a href="#" onclick="javascript:ShowHide('window','visible'); clk=this;" onmouseover="javascript:ShowHide('window','visible')" onmouseout="javascript:if(!clk)ShowHide('window','hidden')">länk</a><br>
<a href="#" onclick="javascript:ShowHide('window1','visible'); clk=this;" onmouseover="javascript:ShowHide('window1','visible')" onmouseout="javascript:if(!clk)ShowHide('window1','hidden')">länk1</a><br>
<p>

<div id="window" style="position:absolute;visibility:hidden">
<table border="1" cellspacing="0" cellpadding="0" width="150">
<tr>
<td>asd</td>
</tr>
</table>
</div>

<div id="window1" style="position:absolute;visibility:hidden">
<table border="1" cellspacing="0" cellpadding="0" width="150">
<tr>
<td>asd1</td>
</tr>
</table>
</div>

om man klickar på en länk så stannar det lagret, när man sen bara för musen över nästa länk utan att klicka så stannar detta kvar när man sedan för bort musen

DavidBMedlem sedan jan. 20001 372 inlägg

20 mars 2003 17:42#14

löste det själv:

onmouseover="javascript:ShowHide('window','visible'); clk=null;"

men det en sak till, att om man har klickat på en länk så att ett lager visas fast. hur gör man då för att detta lager skall försvinna när man för musen över en annan länk? finns det nåt sätt så att man kan sätta alla lager hidden?