Patrik81Medlem sedan okt. 2001538 inlägg Hejsan allihopa.
Jag har sökt här på forumet, och försökt klura ut det själv, men javascript har aldrig varit min starka sida, så jag hoppas få lite uppbackning här...
<html>
<head>
<title>test</title>
<style>
<!--
body{
font-family:verdana;
font-size:12px;
}
.layer{
position: absolute;
left:50px;
top:100px;
width:500px;
height:500px;
border: solid #000000 1px;
background-color:#eeeeee;
visibility:hidden;
}
//-->
</style>
</head>
<body>
<script language="JavaScript" type="text/javascript">
function showLayer(id){
if(document.all){
document.all[id].style.visibility = "visible";
}else if(document.layers){
document.layers[id].visibility = "show";
}else if(document.getElementById){
document.getElementById(id).style.visibility = "visible";
}
}
function hideLayer(id){
if(document.all){
document.all[id].style.visibility = "hidden";
}else if(document.layers){
document.layers[id].visibility = "hide";
}else if(document.getElementById){
document.getElementById(id).style.visibility = "hidden";
}
}
function showRight(id){
if(id == 'nul'){
hideLayer();
}else{
hideLayer();
showLayer(id);
}
}
</script>
<form>
<select onChange="showRight(this.options[this.selectedIndex].value)">
<option value="nul" selected> -- Ursprungsvärde --</option>
<option value="foo"> -- Värde 1 -- </option>
<option value="boo"> -- Värde 2 -- </option>
</select>
<div class="layer" id="foo">layer 1</div>
<div class="layer" id="boo">layer 2</div>
</body>
</html>
Det här är koden jag har, och det jag försöker åstadkomma är att när sidan laddas skall alla lager vara dolda och Select-boxen skall ha alternativet nul förvalt.
Väljer man något av de andra alternativen skall först en funktion köras som döljer alla lager (utifall att ett lager ligger uppe så skall det döljas) och sedan efter detta visa det lagret som man valde att visa genom select-boxen. Och till sist, om man väljer nul, ursprungsvärdet, så skall alla lager döljas.
Någon som har kunskapen och lusten att hjälpa mig?
MVH Patrik
Patrik81Medlem sedan okt. 2001538 inlägg Jag måste säga att jag hade ju räknat med ett liiiite större gensvar, men ok, svaret kanske är så uppenbart at tjag borde fatta det själv ;)
Men iaf. jag satte mig ned nu idag, lite piggare än igår, och gav mig fan på att jag skulle få det att fungera, så jag tänkte först efter riktigt noga exakt vad jag ville att funktionerna skulle göra, och gick runt på lite olika siter och läste lite om javascript, och hajjade inte alltför mycket, men lyckades till slut knåpa ihop denna nya och förbättrade kod, där jag inte längre får något script-fel...
<html>
<head>
<title>test</title>
<style>
<!--
body{
font-family:verdana;
font-size:12px;
}
.layer{
position: absolute;
left:50px;
top:100px;
width:500px;
height:500px;
border: solid #000000 1px;
background-color:#eeeeee;
visibility:hidden;
}
//-->
</style>
<script language="JavaScript" type="text/javascript">
function showLayer(id){
if(document.all){
document.all[id].style.visibility = "visible";
}else if(document.layers){
document.layers[id].visibility = "show";
}else if(document.getElementById){
document.getElementById(id).style.visibility = "visible";
}
}
function hideLayer(id){
if (id == 'alla'){
if(document.all){
document.all["boo","foo"].style.visibility = "hidden";
}else if(document.layers){
document.layers["boo","foo"].visibility = "hide";
}else if(document.getElementById){
document.getElementById("boo","foo").style.visibility = "hidden";
}
}
else if(document.all){
document.all[id].style.visibility = "hidden";
}else if(document.layers){
document.layers[id].visibility = "hide";
}else if(document.getElementById){
document.getElementById(id).style.visibility = "hidden";
}
}
function showRight(id){
if(id == 'nul'){
hideLayer('alla');
}else{
hideLayer('alla');
showLayer(id);
}
}
</script>
</head>
<body>
<form>
<select onChange="showRight(this.options[this.selectedIndex].value)">
<option value="nul" selected> -- Ursprungsvärde --</option>
<option value="foo"> -- Värde 1 -- </option>
<option value="boo"> -- Värde 2 -- </option>
</select>
<div class="layer" id="foo">layer 1</div>
<div class="layer" id="boo">layer 2</div>
</body>
</html>
Men, den här koden fungerar inte helt som den skall.
Om jag ur listan väljer att visa lager 1 så visas lager 1, och väljer jag sedan att visa lager 2 så kommer lager 2 fram, men om jag sedan vill hoppa tillbaka till lager 1 eller dölja alla lager genom att välja ursprungsvärdet... så händer ingenting...
Och koden jag har nu är ju inte direkt dynamisk, fick ju typ hard-koda vad scriptet skulle göra. Å det är ju inte jättebra heller :/
Nåväl, hoppas att någon har tid och lust att hjäpla mig
MVH Patrik
Patrik81Medlem sedan okt. 2001538 inlägg Hej hej
Nu må ni tro att jag är glad.
Detta är ju inte den mest optimala kod eller mest dynamiska kod man kan få tag på, men den löser mitt problem.
Ändrade i javascriptet som finns i inlägget ovan till detta:
<script language="JavaScript" type="text/javascript">
function showLayer(id){
if(document.all){
document.all[id].style.visibility = "visible";
}else if(document.layers){
document.layers[id].visibility = "show";
}else if(document.getElementById){
document.getElementById(id).style.visibility = "visible";
}
}
function hideLayer(){
if(document.all){
document.all["foo"].style.visibility = "hidden";
document.all["boo"].style.visibility = "hidden";
}else if(document.layers){
document.layers["foo"].visibility = "hide";
document.layers["boo"].visibility = "hide";
}else if(document.getElementById){
document.getElementById("foo").style.visibility = "hidden";
document.getElementById("boo").style.visibility = "hidden";
}
}
function showRight(id){
if(id == 'nul'){
hideLayer();
}else{
hideLayer();
showLayer(id);
}
}
</script>
och då fungerade det finfint.
Ibland behöver man nog bara få skriva av sig sina tankar och idéer för att själv inse lösningen *tror*
MVH Patrik
