Om jag nu vill ha flera lager ovanpå varandra och sen ska jag klicka på en bild däruppe i menyn och så ska diven komma fram hur gör man
Lager
14 svar · 399 visningar · startad av joohn
<style type="text/css">
.hidden {visibility: hidden; position: absolute; top: 20px; left: 20px; width: 100px; height: 100px; overflow: auto;}
img {border: none;}
</style>
<script type="text/javascript"><!--
layerNames = ["layer1","layer2","layer3","layer4"]
function hideAllBut(showid){
for(i=0;i<layerNames.length;i++){
document.getElementById(layerNames[i]).style.visibility = (showid == layerNames[i])? "visible" : "hidden";
}
}
--></script>
<a href="#" onclick="hideAllBut('layer1');"><img src="bild1.gif" /></a> - <a href="#" onclick="hideAllBut('layer2');"><img src="bild2.gif" /></a> - <a href="#" onclick="hideAllBut('layer3');"><img src="bild3.gif" /></a> - <a href="#" onclick="hideAllBut('layer4');"><img src="bild4.gif" /></a>
<div class="hidden" id="layer1">
1
</div>
<div class="hidden" id="layer2" style="visibility: visible;">
2
</div>
<div class="hidden" id="layer3">
3
</div>
<div class="hidden" id="layer4">
4
</div>
Med reservation för felskrivningar :)
Det där verkar vara en ganska lång kod
själv har jag testat en kortare kod som funkar prima som kommer här under.. har annars den här - https://www.mongo.nu/portfolio men då fungerar det inte vet inte varför någon kanske som kan se något fel?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="JavaScript" src="js/mail.js" type="text/javascript"></script>
<script language="javascript">
function showHideDiv(strDivToHide){
var oDivToHide = document.getElementById(strDivToHide);
oDivToHide.style.display = (oDivToHide.style.display == "none")? "block" : "none";
}
</script>
</head>
<body>
<div onclick="showHideDiv('gb')">gb</div>
<div id="gb" class="hideMenu">apapapapa</div>
</body>
</html>
Använd nitro2k01s alternativ. Det är ju mindre kod i hans än det du själv skrev! Dessutom funkar hans även i Firefox.
r/ http://www.webforum.nu/showthread.php?s=&postid=837206#post837206
Nackdelen med det scriptet är att man måste lägga till i javascriptet också när man gör en ny div.
joohn skrev:
Nackdelen med det scriptet är att man måste lägga till i javascriptet också när man gör en ny div.
Inte i det scriptet som du hittar i min länk som jag postade i tidigare inlägg.
Provade förövrigt jojoxxs script men det fungerar inte heller.
<!-- #include file="adovbs.inc" -->
<%
Set com1 = Server.CreateObject("ADODB.Connection")
com1.open "driver={Microsoft Access Driver (*.mdb)};dbq=" & Server.MapPath("db/lankar.mdb")&";"
Set rs1 = Server.CreateObject("ADODB.Recordset")
If request.querystring("a")="alf" Then
sql1 = "SELECT * FROM lankar ORDER BY titel ASC"
ElseIf request.querystring("a")="dat" Then
sql1 = "SELECT *, Format$([datum],'yymmdd') AS fDatum, Format$([datum],'hh:mm') AS fTid FROM lankar ORDER BY datum DESC"
Else
sql1 = "SELECT *, Format$([datum],'yymmdd') AS fDatum, Format$([datum],'hh:mm') AS fTid FROM lankar ORDER BY datum DESC"
End If
rs1.open sql1, com1, 3, 3
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>mongo.nu </title>
<link rel="stylesheet" href="css/mongo.css" type="text/css" />
<script language="JavaScript" src="js/mail.js" type="text/javascript"></script>
<script type="text/javascript">
var lastid;
function show(id){
if(lastid){ document.getElementById(lastid).style.display="none"; }
document.getElementById(id).style.display="block";
lastid=id;
return false;
}
</script>
</head>
<body>
<div id="top">
<a href="#" onclick="return show('gb');">gb</a><br />
<ul style="list-style-type:none;">
<li>Apa</li>
<li>Apa2</li>
<li>Apa3</li>
<li>Apa4</li>
</ul>
<script language="JavaScript" src="js/datum.js" type="text/javascript"></script>
</div>
<div id="container">
<div id="menu">
<div id="aboutme" class="hideMenu">om mig </div>
<div id="gb" class="hideMenu">apapapapa</div>
<div id="cv">cv</div>
<div id="photo">
<script type="text/javascript">
var SlideShowSpeed = 3000;
var CrossFadeDuration = 2;
var Picture = new Array();
var showHot = false;
Picture[1] = 'photo/00.gif';
Picture[2] = 'photo/01.jpg';
Picture[3] = 'photo/02.jpg';
Picture[4] = 'photo/03.jpg';
Picture[5] = 'photo/04.jpg';
Picture[6] = 'photo/05.jpg';
Picture[7] = 'photo/06.jpg';
Picture[8] = 'photo/07.jpg';
Picture[9] = 'photo/08.jpg';
Picture[10] = 'photo/09.jpg'; Picture[11] = 'photo/10.jpg';
Picture[12] = 'photo/11.jpg';
Picture[13] = 'photo/12.jpg';
Picture[14] = 'photo/13.gif';
Picture[15] = 'photo/13.jpg';
Picture[16] = 'photo/14.jpg';
Picture[17] = 'photo/15.jpg'; Picture[18] = 'photo/16.jpg';
Picture[19] = 'photo/17.jpg';
Picture[20] = 'photo/18.jpg';
Picture[21] = 'photo/19.jpg';
Picture[22] = 'photo/20.jpg';
Picture[23] = 'photo/21.jpg';
Picture[24] = 'photo/22.jpg';
Picture[25] = 'photo/23.jpg';
Picture[26] = 'photo/24.jpg';
Picture[27] = 'photo/25.jpg';
var tss;
var iss;
var jss = 0;
var pss = Picture.length-1;
var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}
function control(how){
if (showHot){
if (how=="H") jss = 1;
if (how=="F") jss = jss + 1;
if (how=="B") jss = jss - 1;
if (jss > (pss)) jss=1;
if (jss < 1) jss = pss;
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=2)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
}}
</script>
</div>
<div id="print">print
</div></div>
<div id="mail">
<div class="mail-in">
<form action="http://mail.mongo.nu/src/redirect.php" method="post" target="new" onsubmit="this.login_username.value += '@mongo.nu'; document.location.reload();">
<input type="text" name="login_username" value="Login" onfocus="this.value='';" class="mailform" /><br /><br />
<input type="password" name="secretkey" value="password" onfocus="this.value='';" class="mailform" />
<input type="hidden" name="js_autodetect_results" value="SMPREF_JS_OFF" />
<input type="hidden" name="just_logged_in" value="1" /><br /><br />
<input name="submit" type="image" src="login.gif" value="Logga in" />
</form>
</div>
</div>
<br />
<br />
<br />
<div id="linkadder">
sortera efter:<a href="index.asp?a=alf"> bokstav</a> - <a href="index.asp?a=dat">datum</a> <br /> <br />
<%
rs1.movefirst
If rs1.eof Then
response.write "listan är tom"
Else
Do Until rs1.eof
%>
<div class="linkadder-datetime">
<div class="linkadder-datetime-in">
<%=rs1("fDatum") & " - " & rs1("fTid")%>
</div>
</div>
<div class="linkadder-linkmessage">
<div class="linkadder-linkmessage-in">
<b><a href=" <%=rs1("http")%> " target="_blank"> <%=rs1("titel")%></a></b>
<%=rs1("beskr")%><br /><br />
</div>
</div>
<%
rs1.movenext
Loop
End If
rs1.close
com1.close
%>
</div>
</div>
<div id="footer"> [url]www.mongo.nu [/url]| <a href="mailto:john@mongo.nu">john@mongo.nu</a> | <a title="Validates as XHTML 1.0 Transitional at W3C" href="http://validator.w3.org/check/referer" target="new">XHTML
1.0</a> | <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.mongo.nu/portfolio/css/mongo.css" target="new">CSS
2.0</a> </div>
</body>
</html>
Uhm... Ingen orkar plöja igenom den där koden.
Jojjox script funkar hur bra som helst. Se efter själv hur jag har gjort på min sida: https://www.silfver.se/livsviktigt.php
Det gör det säkert, också mitt script som jag hade från början. Är något som stör och jag vet inte vad det är.
Lägg scriptet innanför <body> istället för emellan <head>.
silfver; testat, fungerar ändå inte :/
Då får du hitta felet.
<script type="text/javascript">
var lastid;
function show(id){
if(lastid){ document.getElementById(lastid).style.display="none"; }
document.getElementById(id).style.display="block";
lastid=id;
return false;
}
</script>
[blue]<a href="#" onclick="return show('firstlink');">Här är en länk.</a><br/>[/blue]
<div id="firstlink" style="display:none;">en massa onödig text</div>
[blue]<a href="#" onclick="return show('secondlink');">En till länk.</a><br/>[/blue]
<div id="secondlink" style="display:none;">en mer massa onödig text</div>
Det ska ju se ut sådär. Se till att du har rätt "id" och så vidare.
Flyttas från HTML, XHTML & CSS
Nu har jag äntligen fått det att funka :)
Vet inte vad som var felet men tog bort alla javascripts och aspkoder sen satte jag in dom igen
<style type="text/css">
.hidden {visibility: hidden; position: absolute; top: 20px; left: 20px; width: 100px; height: 100px; overflow: auto;}
img {border: none;}
</style>
<script type="text/javascript"><!--
function hideAllBut(showid){
allLayers = document.all ? document.all : document.getElementsByTagName("*");
for(i in allLayers){
allLayers [i].style.visibility = (showid == allLayers [i].id)? "visible" : "hidden";
}
}
--></script>
<a href="#" onclick="hideAllBut('layer1');"><img src="bild1.gif" /></a> - <a href="#" onclick="hideAllBut('layer2');"><img src="bild2.gif" /></a> - <a href="#" onclick="hideAllBut('layer3');"><img src="bild3.gif" /></a> - <a href="#" onclick="hideAllBut('layer4');"><img src="bild4.gif" /></a>
<div class="hidden" id="layer1">
1
</div>
<div class="hidden" id="layer2" style="visibility: visible;">
2
</div>
<div class="hidden" id="layer3">
3
</div>
<div class="hidden" id="layer4">
4
</div>
Sådär, nu behöver man inte deklarera alla lager i förväg.