12 svar · 273 visningar · startad av qwerty
Hej!
Jag undrar hur man gör för att dölja/visa ett lager genom att klicka på samma länk.
(Först visas det, och klickar man igen försvinner det.)
Det måste fungera i både NS oc IE.
Jag har sökt runt efter ett svar men hittar ingen som stämmer exakt.
Tacksam för svar!
------------------
Qwerty
Den som provar han testar...
<html>
<head>
<script language="Javascript">
var n=1
function hideShow(){
n=n*-1; vis = (n==1)? "hidden" : "visible";
if(document.all){document.all("lager").style.visibility=vis;}
if(document.getElementById){document.getElementById("lager").style.visibility=vis;}
if(document.layers){document.layers["lager"].visibility=vis;}
}
</script>
</head>
<body>
<a href="javascript:hideShow();">visa/dölj</a>
<div id="lager" style="position:absolute; visibility:hidden;">innehåll</div>
</body>
</html>
------------------
- J-O-H-N-S-E-N -
------------------
johnsen: tack!
Gustav: nej, jag heter inte markus
------------------
Qwerty
Den som provar han testar...
Säg såhär:
...att jag har 3 olika länkar som funkar på samma sätt. (visar/döljer varsitt lager). Om jag vill att endast ett lager ska kunna vara synligt samtidigt.
Altså att när man trycker på en av länkarna döljs först de 2 andra lagrena.
Hur lösa detta?
------------------
Qwerty
Den som provar han testar...
På ett enkelt sätt:
<html>
<head>
<script language="Javascript">
function hide(vilket){
document.all(vilket).style.visibility="hidden";
}
function show(vilket){
document.all(vilket).style.visibility="visible";
}
</script>
</head>
<body>
<a href="javascript:show('lager1');hide('lager2');hide('lager3');">visa första</a><br>
<a href="javascript:show('lager2');hide('lager1');hide('lager3');">visa andra</a><br>
<a href="javascript:show('lager3');hide('lager1');hide('lager2');">visa tradje</a><br>
<div id="lager1" style="position:relative;">innehåll 1</div>
<div id="lager2" style="position:relative;">innehåll 2</div>
<div id="lager3" style="position:relative;">innehåll 3</div>
</body>
</html>
Detta är för IE, men du kan säkert själv lägga till så att det funkar i NN/NS.
------------------
- J-O-H-N-S-E-N -
------------------
Du överskattar min förmåga...
Jag kan alltså inte klura ut hur man ska få det att funka i Netscape.
...men det funkar bra i explorer förutom att alla lager var synliga från början.
Men det klarade jag däremot att fixa till ;)
------------------
Qwerty
Den som provar han testar...
Dåså, då skall du få lite hjälp på traven: http://cgi.webforum.nu/wf/Forum13/HTML/000878.html
Och för att återknyta till din signatur:
Den som söker han letar...
------------------
- J-O-H-N-S-E-N -
------------------
men...
I ditt exempel ovan (som för övrig funkar i båda webläsarna) anväder du ju inte både visible och show.
Kanske är jag trög, men resonemanget i tråden du tipsade om var lite väl komplicerat för en java-nybörjare som jag.
Jag lyckas alltså fortfarande inte att få det att funka.
Kan man inte ändra något i det här scriptet så alla anrda lager stängs när det nya öppnas?
<script language="Javascript">
var n=1
function naringvisa(){
n=n*-1; vis = (n==1)? "hidden" : "visible";
if(document.all){document.all("naring").style.visibility=vis;}
if(document.getElementById){document.getElementById("naring").style.visibility=vis;}
if(document.layers){document.layers["naring"].visibility=vis;}
}
</script>
Tacksam för svar!
------------------
Qwerty
Den som provar han testar...
Om Visa/Dölj-länken ligger i samma lager dom den Visar/Döljer så kan man göra på ett annat lite mer amatörmässigt sätt...som jag brukar göra! :e
Men det beror ju på...om länken ligger i en meny nån annanstans går det inte...men ligger den högst upp i lagret eller liknande så funkar det.
Ok.
För att ändra synbarheten på ett lager i IE anropar man:
document.all("lagrets_namn").style.visibility="visible"/"hidden"
För NS4+ som har en annan lagerhantering blir det:
document.layers["lagrets_namn"].visibility="show"/"hide"
Och för NS6 och även IE5+ används:
document.getElementById("lagrets_namn").style.visibility="visible"/"hidden"
För att rätt modell skall användas måste vi fråga läsaren vad som skall användas:
if(document.all){document.all("lagrets_namn").style.visibility="hidden";}
Sålunda skulle en funktion som gömmer ett lager kunna se ut så här:
function hide(){
if(document.all){document.all("lagrets_namn").style.visibility=hidden;}
if(document.getElementById){document.getElementById("lagrets_namn").style.visibility=hidden;}
if(document.layers){document.layers["lagrets_namn"].visibility=hide;}
}
För att slippa skriva "lagrets_namn" varje gång och slippa ha en funktion per lager, kan man skicka med namnet som en variabel när man anropar funktionen.
Anropet:
<a href="javascript:show('lager1')">visa 1</a>
och funktionen:
function show(vilket){
if(document.all){document.all(vilket).style.visibility=visible;}
if(document.getElementById){document.getElementById(vilket).style.visibility=visible;}
if(document.layers){document.layers[vilket].visibility=show;}
}
Där vilket ersätts av det man skickade med vid anropet.
Vill man starta fler funktioner med samma knapptryck lägger man bara till anrop:
<a href="javascript:show('lager1');show('lager2');show('lager3')">visa alla</a>
Dina funktioner hide() och show() skulle kunna se ut så här:
function hide(vilket){
if(document.all){document.all(vilket).style.visibility=hidden;}
if(document.getElementById){document.getElementById(vilket).style.visibility=hidden;}
if(document.layers){document.layers[vilket].visibility=hide;}
}
function show(vilket){
if(document.all){document.all(vilket).style.visibility=visible;}
if(document.getElementById){document.getElementById(vilket).style.visibility=visible;}
if(document.layers){document.layers[vilket].visibility=show;}
}
Lycka till!
------------------
- J-O-H-N-S-E-N -
------------------
Jag har skrivit denna koden som visas. Men jag vill inte att lagrerna ska synas från början.
<html>
<head>
<script language="Javascript">
function hide(vilket){
document.all(vilket).style.visibility="hidden";
}
function show(vilket){
document.all(vilket).style.visibility="visible";
}
</script>
</head>
<body>
<a href="javascript:show('lager1');hide('lager2');hide('lager3');">visa första</a><br>
<a href="javascript:show('lager2');hide('lager1');hide('lager3');">visa andra</a><br>
<a href="javascript:show('lager3');hide('lager1');hide('lager2');">visa tradje</a><br>
<div id="lager1" style="position:relative;">innehåll 1</div>
<div id="lager2" style="position:relative;">innehåll 2</div>
<div id="lager3" style="position:relative;">innehåll 3</div>
</body>
</html>
Hjälp mig nån!!!
+~~~~~~+
|mjpj87|
+~~~~~~+
Hej, så här gör jag, funkar i NS4+ (inkl nästlade lager), IE4+, NS6 och Opera5:
Släng upp koden i en webbläsare och testa, kolla sen på koden så bör du hänga med på hur den funkar.
Läs kommentarerna för att se vad varje del gör (allt med // framför är kommentar)
<html>
<head>
<title>--- ett testscript...--- </title>
<SCRIPT LANGUAGE="Javascript">
<!--//
// Laddar om sidan då man ändrar storlek, men bara om det är Netscape 4
function reLoad(){
if(document.layers){
location.reload();
}
}
// skapar en referens till det namngivna lagrets olika egenskaper, tar emot följande: lagrets id samt det lager som lagret du vill påverka ligger i om det är nästlat (typ tabell i tabell men lager)det omgivande lagrets id är frivilligt.
function getObj(name, nest) {
if (document.getElementById)
return document.getElementById(name).style;
else if (document.all)
return document.all[name].style;
else if (document.layers)
if (nest != ''){
return eval('document.'+nest+'.document.layers["'+name+'"]');
}else{
return document.layers[name];
}
}
//Visar ett lager genom att spara referensen till lagrets egenskaper i "x", lägga till egenskapen visibility och sen sätta den till visible.
function showLayer(layerName, nest){
var x = getObj(layerName, nest);
x.visibility = "visible";
}
//Gömmer ett lager genom att spara referensen till lagrets egenskaper i "x", lägga till egenskapen visibility och sen sätta den till hidden.
function hideLayer(layerName, nest){
var x = getObj(layerName, nest);
x.visibility = "hidden";
}
//-->
</SCRIPT>
</head>
<body onResize="javascript:reLoad();">
<DIV ID="NewsDrop" STYLE="position:absolute; z-index:2; left:100px; top:24px; visibility:hidden;">
Lager med id NewsDrop
</DIV>
<DIV ID="NewsDrop1" STYLE="position:absolute; z-index:2; left:100px; top:50px; visibility:hidden;">
Lager med id NewsDrop1
</DIV>
<BR><BR><BR><a href="javascript:showLayer('NewsDrop','');hideLayer('NewsDrop1','');">Visa lagret NewsDrop</a>
<BR><BR>
<a href="javascript:showLayer('NewsDrop1');hideLayer('NewsDrop');">Visa lagret NewsDrop1</a>
<BR><BR>
För att starta med lagren osynliga måste du i DIV-taggen ange visibility:hidden som i exemplet ovan, det är den egenskapen som du sen påverkar med scriptet.
</body>
</html>
Lycka till!
Dan
------------------
Freedom without discipline is chaos. Discipline without freedom is tyranny.
DmSProject
[Redigerat av DmS den 12 apr 2001]