webForumDet fria alternativet
Logga in / Bli medlem

Lager

JavaScript

14 svar · 401 visningar · startad av joohn

joohnMedlem sedan jan. 200463 inlägg
Trådstart#1

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

nitro2k01s avatarnitro2k01Medlem sedan aug. 20039 340 inlägg
#2
<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 :)

joohnMedlem sedan jan. 200463 inlägg
#3

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>
silfverMedlem sedan apr. 200312 679 inlägg
#4

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

joohnMedlem sedan jan. 200463 inlägg
#5

Nackdelen med det scriptet är att man måste lägga till i javascriptet också när man gör en ny div.

silfverMedlem sedan apr. 200312 679 inlägg
#6

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.

joohnMedlem sedan jan. 200463 inlägg
#7

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&nbsp;&nbsp;[/url]|&nbsp;&nbsp;<a href="mailto:john@mongo.nu">john@mongo.nu</a>&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a title="Validates as XHTML 1.0 Transitional at W3C" href="http://validator.w3.org/check/referer" target="new">XHTML 
  1.0</a>&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<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>
silfverMedlem sedan apr. 200312 679 inlägg
#8

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

joohnMedlem sedan jan. 200463 inlägg
#9

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.

silfverMedlem sedan apr. 200312 679 inlägg
#10

Lägg scriptet innanför <body> istället för emellan <head>.

joohnMedlem sedan jan. 200463 inlägg
#11

silfver; testat, fungerar ändå inte :/

silfverMedlem sedan apr. 200312 679 inlägg
#12

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.

jarvkloMedlem sedan juli 20013 378 inlägg
#13

Flyttas från HTML, XHTML & CSS

joohnMedlem sedan jan. 200463 inlägg
#14

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

nitro2k01s avatarnitro2k01Medlem sedan aug. 20039 340 inlägg
#15
<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.

279 ms totalt · 4 externa anrop · v20260731065814-full.51f67c91
135 ms — deklarationer (db)
0 ms — hämta statistik (cache)
140 ms — hämta tråd, inlägg och bilagor (db)
134 ms — ändringar (db)