25. oktober 2003 - 16:46
Der er
18 kommentarer og 1 løsning
Tænde/slukke div'er med display
Jeg har en side med en masse div'er hvor nogen af dem skal erstattes med en i samme størrelse ved onmouseover... Jeg har tidlige brugt visibility i tabeller. Det virker fint. Men med display block|none kan jeg ikke få det til at virke... Enybody?
Annonceindlæg tema
Offentlig digitalisering
Fra effektivisering til digital suverænitet. Hvordan skaber det offentlige en digital fremtid med AI, sikkerhed og kontrol i centrum?
Slettet bruger
25. oktober 2003 - 17:03
#1
Er det ved onmouseover på div'en, det skal ske? Eller et det et link/billede?
25. oktober 2003 - 17:03
#2
<script> function toggleDisplay(who) { elem = document.getElementById(who); if( elem.style.display == "none" ) { elem.style.display = "block"; } else { elem.style.display = "none"; } } </script> <div onclick="toggleDisplay('felt1')"> tænd/sluk felt 1</div> <div id="felt1" style="display:none;"> Hejsa </div>
25. oktober 2003 - 17:06
#3
det nederste skal selvfølgelig være i body script-blokken bør være i HEAD-delen og så bør man måske sætte MIME-type på <script type="text/javascript">...</script>
25. oktober 2003 - 17:18
#4
Jeg har 12 div'er sat lige under hinanden med float:left i en øvre div container med fast højde og bredde. Div'erne lægger sig i containeren 3 pr. række. Jeg har så 3 ekstra div med display:none som skal "tændes" ved mouseover på 3 andre. Det kan jeg godt men display skal "slukke/erstatte" de 3 første... Som det er nu bliver der bare sat 3 ekstra ind...
25. oktober 2003 - 17:55
#5
Kan du så ikke lige poste din kode ... -- Det vil være nemmere at fejlsøge ...
25. oktober 2003 - 18:01
#6
Here U go: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>CV</title> <script language="JavaScript"> function findObj(n, d) { var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p); } if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function showLayers() { var g,b,k,f,args=showLayers.arguments; var a = parseInt(args[0]);if(isNaN(a))a=0; if(!document.setc) { c=new Array();document.setc=true; for (var u=0;u<10;u++) { c[u] = new Array(); } } for(k=0; k<c[a].length; k++) { if((g=findObj(c[a][k]))!=null) { b=(document.layers)?g:g.style;b.display="none"; } } for(k=1; k<args.length; k++) { if((g=findObj(args[k])) != null) { b=(document.layers)?g:g.style;b.display="block";f=false; for(j=0;j<c[a].length;j++) { if(args[k]==c[a][j]) { f=true; } } if(!f) { c[a][c[a].length++]=args[k]; } } } } </script> </head> <body bgcolor="#ccccccc"> <div id="sitecontainer" style="width : 408px; height : 408px; padding : 2px 1px 3px 1px; background-color : #ffffff;"> <div id="html" style="float : left; display : none; width : 97px; height : 97px; margin : 2px; z-index : 10;"><img src="grafik/top_left.gif" width="97" height="97" border="0"></div> <div id="html2" style="float : left; width : 97px; height : 97px; margin : 2px; background-color : #3A9AF0; z-index : 11;"></div> <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/top_left2.gif" width="97" height="97" border="0"></div> <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/top_right2.gif" width="97" height="97" border="0"></div> <div id="word" style="float : left; display : none; margin : 2px;"><img src="grafik/top_right.gif" width="97" height="97" border="0"></div> <div id="word2" style="float : left; width : 97px; height : 97px; margin : 2px; background-color : #01018F;"></div> <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/middle_top_left.gif" width="97" height="97" border="0"></div> <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/middle_top_left2.gif" width="97" height="97" border="0"></div> <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/middle_top_right2.gif" width="97" height="97" border="0"></div> <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/middle_top_right.gif" width="97" height="97" border="0"></div> <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/middle_bottom_left.gif" width="97" height="97" border="0"></div> <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/middle_bottom_left2.gif" width="97" height="97" border="0"></div> <div style="float : left; width : 97px; height : 97px; margin : 2px;"><a onmouseover="showLayers(0,'html')"><img src="grafik/middle_bottom_right2.gif" width="97" height="97" border="0"></a></div> <div style="float : left; width : 97px; height : 97px; margin : 2px;"><a onmouseover="showLayers(0,'word')"><img src="grafik/middle_bottom_right.gif" width="97" height="97" border="0"></a></div> <div id="pdf" style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/bottom_left.gif" width="97" height="97" border="0"></div> <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/bottom_left2.gif" width="97" height="97" border="0"></div> <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/bottom_right2.gif" width="97" height="97" border="0"></div> <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/bottom_right.gif" width="97" height="97" border="0"></div> </div> </body> </html>
25. oktober 2003 - 18:19
#7
hmm ... hvordan skal det lige virke - hvis man f.eks. trykker på på div[id=pdf] skal den så vise de tre div som er nedenunder eller ?
25. oktober 2003 - 18:29
#8
kan du med ord prøve at forklare, hvad det er du gerne vil have ... Noget siger mig at du er igang med at lave noget kode som er mere kompleks end hvad der er brug for.
25. oktober 2003 - 19:20
#9
De 3 div'er der har id skal skifte med dem der ligger lige nedenunder og hedder det samme med et 2 tal efter. Jeg poster det lige igen (har rettet lidt i det) <div id="sitecontainer" style="width : 408px; height : 408px; padding : 2px 1px 3px 1px; background-color : #ffffff;"> <div id="html" style="float : left; display : none; width : 97px; height : 97px; margin : 2px;"><img src="grafik/top_left.gif" width="97" height="97" border="0"></div> <div id="html2" style="float : left; width : 97px; height : 97px; margin : 2px; background-color : #3A9AF0;"></div> <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/top_left2.gif" width="97" height="97" border="0"></div> <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/top_right2.gif" width="97" height="97" border="0"></div> <div id="word" style="float : left; display : none; margin : 2px;"><img src="grafik/top_right.gif" width="97" height="97" border="0"></div> <div id="word2" style="float : left; width : 97px; height : 97px; margin : 2px; background-color : #01018F;"></div> <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/middle_top_left.gif" width="97" height="97" border="0"></div> <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/middle_top_left2.gif" width="97" height="97" border="0"></div> <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/middle_top_right2.gif" width="97" height="97" border="0"></div> <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/middle_top_right.gif" width="97" height="97" border="0"></div> <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/middle_bottom_left.gif" width="97" height="97" border="0"></div> <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/middle_bottom_left2.gif" width="97" height="97" border="0"></div> <div style="float : left; width : 97px; height : 97px; margin : 2px;"><a onmouseover="showLayers(0,'html')"><img src="grafik/middle_bottom_right2.gif" width="97" height="97" border="0"></a></div> <div style="float : left; width : 97px; height : 97px; margin : 2px;"><a onmouseover="showLayers(0,'word')"><img src="grafik/middle_bottom_right.gif" width="97" height="97" border="0"></a></div> <div id="pdf" style="float : left; display : none; width : 97px; height : 97px; margin : 2px; background-color : #CC3333;"></div> <div id="pdf2" style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/bottom_left.gif" width="97" height="97" border="0"></div> <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/bottom_left2.gif" width="97" height="97" border="0"></div> <div style="float : left; width : 97px; height : 97px; margin : 2px;"><a onmouseover="showLayers(0,'pdf')"><img src="grafik/bottom_right2.gif" width="97" height="97" border="0"></a></div> <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/bottom_right.gif" width="97" height="97" border="0"></div> </div>
25. oktober 2003 - 20:05
#10
en lille tanke : hvis det er at alle felter alligevel skal være 97x97 px store og have en margin på 2px, samt float:left, så ville det virkelig være en ide at samle en class omkring den definition <div class="felt"> og .felt { float:left; width: 97px; height: 97px; margin: 2px; }
25. oktober 2003 - 20:21
#11
jeg er næsten ved at give op - jeg kan simpelthen ikke gennemskue, hvad det er du vil med den kode... Kan du ikke (som jeg skrev tidligere) prøve at forklare, hvad det er du vil... Uden brug af kode... Prøv at forklar hvad du vil opnå, og hvordan du havde tænkt dig at det skulle gøres... Jeg er sikker på at det kan gøres noget simplere... og selv har jeg ikke tid til at skulle gætte på hvad variabler som n, d, x, g, b, k, c og f skal arbejde med.... (nogle af dem kan gættes nemt -andre er stadig et mysterium) Jeg vil gerne hjælpes- men for at hjælpe skal jeg vide, hvad du egenligt pønser på.... Derfor -- væk med koden og lad os høre, hvad det egenligt er du vil ...
25. oktober 2003 - 20:47
#12
fint nok... jeg styler div'erne senere så glem det. Jeg vil have at div'en "html" skifter med div'en "html2" og vise versa med "word" og "word2" og "pdf" og "pdf2". Det der sker nu er at 2'erne vises ved mouseover på de 3 andre, men dem uden 2 lukker ikke... så derfor er der for mange "åbne" div'er. Er jeg helt gal på den?
25. oktober 2003 - 20:54
#13
vil du vise nogle divs eller taler vi om at "bytte html ud med html2" osv
25. oktober 2003 - 20:59
#14
bytte..
25. oktober 2003 - 21:05
#15
ok. to sek
25. oktober 2003 - 21:17
#16
thanks
25. oktober 2003 - 21:28
#17
ok... her er et eksempel, som du nok kan arbejde videre med... <html> <script> function toggleBetween( diva, divb ) { A= document.getElementById(diva); B= document.getElementById(divb); if(A.style.display == "none") { A.style.display = "block"; B.style.display = "none"; } else { B.style.display = "block"; A.style.display = "none"; } } </script> <body> <div onclick="toggleBetween('feltA', 'feltB')"> feltA eller feltB </div> <div id="feltA" style="display:block;"> FELT A </div> <div id="feltB" style="display:none;"> FELT B </div> </body> </html> /Søren
25. oktober 2003 - 23:08
#18
eller tak for hjælpen. jeg klarede den sådan her: function vis(navn){ var arr_elementer = new Array('html','word','pdf'); for (var i=0;i< arr_elementer.length;i++) { document.getElementById(arr_elementer[i]).style.display='none'; document.getElementById(arr_elementer[i]).style.visibility='hidden'; document.getElementById(arr_elementer[i]+'2').style.display='block'; document.getElementById(arr_elementer[i]+'2').style.visibility='visible'; } if (navn !=null) { document.getElementById(navn+'2').style.display='none'; document.getElementById(navn+'2').style.visibility='hidden'; document.getElementById(navn).style.display='block'; document.getElementById(navn).style.visibility='visible'; } }
26. oktober 2003 - 22:26
#19
bearhugx -> Tak for hjælpen...
Vi tilbyder markedets bedste kurser inden for webudvikling