Avatar billede steen_hansen Forsker
18. marts 2006 - 13:31 Der er 26 kommentarer og
1 løsning

Byt om på åben/lukket

Når man går ind på siden med den nedenstående menu, er den som standard åben. Jeg vil gerne have at den er lukket, eller "klappet sammen", men det er ikke umiddelbart så nemt, som jeg umiddelbart troede. Jeg har haft gang i spørgsmålet længe. Håber én af Jer vil lave det for mig, så jeg kan få det i orden i dag.

<form id="MenuPersonal" name="frmMenuPersonal" method="post" action="/members/default.asp" class="menutable">
<script type="text/JavaScript" language="JavaScript">
var navPersonal = '';
if(document.cookie.indexOf('PersonalClosed') > -1){
navPersonal += 'PersonalClosed';
}
</script>
<table id="PersonalOpen" class="menutable">
    <tr onclick="navPersonal=navPersonal+'PersonalClosed';menuNavPersonal();" title="Fold menu sammen">
        <td class="menuheadlineClose">Din profil</td>
    </tr>
    <tr>
        <td style="width: 156px; padding: 0px;">
            <table style="width: 156px; padding: 0px; margin: 0px auto; border-collapse: collapse; background-color: #f8f8f8;">
                <tr>
                    <td class="menutr">
                        Ret profil<br>
                        Se profil<br>
                        Slet profil
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<table id="PersonalClosed" class="menutable">
    <tr onclick="navPersonal=navPersonal.replace('PersonalClosed','');menuNavPersonal();" title="Udvid menu">
        <td class="menuheadlineOpen">Din profil</td>
    </tr>
</table>
<script type="text/JavaScript" language="JavaScript">
function menuNavPersonal(){
if(navPersonal.indexOf('PersonalClosed') > -1){
document.getElementById('PersonalOpen').style.display='none';
document.getElementById('PersonalClosed').style.display='block';
}else{
document.getElementById('PersonalOpen').style.display='block';
document.getElementById('PersonalClosed').style.display='none';
}
document.cookie='navigationPersonal='+navPersonal;
}
</script>
<script type="text/JavaScript" language="JavaScript">
menuNavPersonal();
</script>
</form>
Avatar billede mclemens Nybegynder
18. marts 2006 - 17:20 #1
Noget i den stil her?
(udvid selv tabellerne)
<html><head>
<script language="javascript">
function vl(atab){

for(mc=1;(document.getElementById("menu"+mc));mc++){
  if(document.getElementById("table"+mc)){
  if(mc!=atab)document.getElementById("table"+mc).style.display="none";
  else{
    if(document.getElementById("table"+mc).style.display=="none")document.getElementById("table"+mc).style.display="block";
    else document.getElementById("table"+mc).style.display="none";
  }
  }
}
}
</script>
</head>

<body onload="vl(0)">

<div id="menu1" onclick="vl(1)"><b>Vis/skjul tabel 1</b></div>
<table id="table1"><tr><td>1. tabel</td></tr></table>
<div id="menu2" onclick="vl(2)"><b>Vis/skjul tabel 2</b></div>
<table id="table2"><tr><td>2. tabel</td></tr></table>
<div id="menu3" onclick="vl(3)"><b>Vis/skjul tabel 3</b></div>
<table id="table3"><tr><td>3. tabel</td></tr></table>

</body></html>
Avatar billede mclemens Nybegynder
18. marts 2006 - 17:24 #2
Alternativ hvis den ikke selv skal lukke alle fra start af og lukke dem når man skifter:

<html><head>
<script language="javascript">
function vl(atab){
if(document.getElementById("table"+atab).style.display=="none")document.getElementById("table"+atab).style.display="block";
else document.getElementById("table"+atab).style.display="none";
}
</script>
</head>

<body>

<div id="menu1" onclick="vl(1)"><b>Forside</b></div>
<table id="table1" style="display:none;"><tr><td>1. tabel</td></tr></table>
<div id="menu2" onclick="vl(2)"><b>Forside</b></div>
<table id="table2" style="display:block;"><tr><td>2. tabel</td></tr></table>
<div id="menu3" onclick="vl(3)"><b>Forside</b></div>
<table id="table3" style="display:block;"><tr><td>3. tabel</td></tr></table>

</body></html>
Avatar billede mclemens Nybegynder
18. marts 2006 - 17:28 #3
3. alternativ nu jeg er igang
hvis den ikke skal lukke alle fra starten af, men lukke alle når man skifter

<html><head>
<script language="javascript">
function vl(atab){

for(mc=1;(document.getElementById("menu"+mc));mc++){
  if(document.getElementById("table"+mc)){
  if(mc!=atab)document.getElementById("table"+mc).style.display="none";
  else{
    if(document.getElementById("table"+mc).style.display=="none")document.getElementById("table"+mc).style.display="block";
    else document.getElementById("table"+mc).style.display="none";
  }
  }
}
}
</script>
</head>

<body>

<div id="menu1" onclick="vl(1)"><b>Vis/skjul tabel 1</b></div>
<table id="table1" style="display:none;"><tr><td>1. tabel</td></tr></table>
<div id="menu2" onclick="vl(2)"><b>Vis/skjul tabel 2</b></div>
<table id="table2" style="display:block;"><tr><td>2. tabel</td></tr></table>
<div id="menu3" onclick="vl(3)"><b>Vis/skjul tabel 3</b></div>
<table id="table3" style="display:none;"><tr><td>3. tabel</td></tr></table>

</body></html>
Avatar billede steen_hansen Forsker
18. marts 2006 - 17:39 #4
Hej mclemens!

Det er et rigtigt flot og stort stykke arbejde, du har lavet, så jeg er næsten flov over at bede dig tage udgangspunkt i det ovenstående.

Det virker perfekt, som det er nu. Jeg vil bare gerne have, at menuerne er lukket sammen som standard, ikke åbne. Jeg vil gerne i det ovenstående kunne se hvad der skal byttes rundt på, hvor der skal sættes hvilket ind osv. Og helst med de samme navne og variabler.

Jeg har oprettet spørgsmålet før, men fik ikke noget brugbart ud af det, desværre: http://www.eksperten.dk/spm/689682
Avatar billede mclemens Nybegynder
18. marts 2006 - 18:04 #5
ok, kigger på det...
Avatar billede mclemens Nybegynder
18. marts 2006 - 18:20 #6
Det virker lidt snørklet :/
- men det er jo nok mig der ikke er langt nok inde i det :/

Hjælper det her på problemet?
(sikkert ikke det du mente - det ville være for let...)

<form id="MenuPersonal" name="frmMenuPersonal" method="post" action="/members/default.asp"

class="menutable">
<script type="text/JavaScript" language="JavaScript">
var navPersonal = '';
if(document.cookie.indexOf('PersonalClosed') > -1){
navPersonal += 'PersonalClosed';
}
</script>
<table id="PersonalClosed" class="menutable">
    <tr onclick="navPersonal=navPersonal.replace('PersonalClosed','');menuNavPersonal();"

title="Fold menu sammen">
        <td class="menuheadlineOpen">Din profil</td>
    </tr>
    <tr>
        <td style="width: 156px; padding: 0px;">
            <table style="width: 156px; padding: 0px; margin: 0px auto; border-collapse:

collapse; background-color: #f8f8f8;">
                <tr>
                    <td class="menutr">
                        Ret profil<br>
                        Se profil<br>
                        Slet profil
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<table id="PersonalOpen" class="menutable">
    <tr onclick="navPersonal=navPersonal+'PersonalClosed';menuNavPersonal();" title="Udvid menu">
        <td class="menuheadlineClose">Din profil</td>
    </tr>
</table>
<script type="text/JavaScript" language="JavaScript">
function menuNavPersonal(){
if(navPersonal.indexOf('PersonalClosed') > -1){
document.getElementById('PersonalOpen').style.display='none';
document.getElementById('PersonalClosed').style.display='block';
}else{
document.getElementById('PersonalOpen').style.display='block';
document.getElementById('PersonalClosed').style.display='none';
}
document.cookie='navigationPersonal='+navPersonal;
}
</script>
<script type="text/JavaScript" language="JavaScript">
menuNavPersonal();
</script>
</form>
Avatar billede mclemens Nybegynder
18. marts 2006 - 18:24 #7
Der er byttet rundt på (1.tabel)
<table id="PersonalOpen" class="menutable">
    <tr onclick="navPersonal=navPersonal+'PersonalClosed';menuNavPersonal();" title="Fold menu sammen">
        <td class="menuheadlineClose">Din profil</td>

Til:
<table id="PersonalClosed" class="menutable">
    <tr onclick="navPersonal=navPersonal.replace('PersonalClosed','');menuNavPersonal();"

title="Fold menu sammen">
        <td class="menuheadlineOpen">Din profil</td>



samt (2.tabel)
<table id="PersonalClosed" class="menutable">
    <tr onclick="navPersonal=navPersonal.replace('PersonalClosed','');menuNavPersonal();" title="Udvid menu">
        <td class="menuheadlineOpen">Din profil</td>

til:
<table id="PersonalOpen" class="menutable">
    <tr onclick="navPersonal=navPersonal+'PersonalClosed';menuNavPersonal();" title="Udvid menu">
        <td class="menuheadlineClose">Din profil</td>
Avatar billede steen_hansen Forsker
18. marts 2006 - 21:38 #8
Det er MEGET smukt, den er lige i øret :)

Smid et svar, bedste ven :)
Avatar billede mclemens Nybegynder
18. marts 2006 - 21:39 #9
svar ;)
Avatar billede steen_hansen Forsker
18. marts 2006 - 21:41 #10
100 point samt 1000 tak for hjælpen. Det er jo så simpelt, når man ser det foran sig. Det virker bare :)
Avatar billede mclemens Nybegynder
18. marts 2006 - 21:46 #11
ja, nogle gange kan man se sig blind i noget der egentligt var simpelt
... det gjorde jeg selv inden jeg kom med de 3 første eksempler :/
Avatar billede steen_hansen Forsker
19. marts 2006 - 11:45 #12
mclemens, jeg har et lille problem: I det øverste fungerer det på den måde, at valget bliver gemt, så de menuer man har åbnet/lukket forbliver åbne/lukkede, når man følger et link. Men det gør de ikke med 18:20:53. Har du en idé om hvor kæden hopper af?
Avatar billede mclemens Nybegynder
19. marts 2006 - 13:35 #13
Har du en idé om hvor kæden hopper af?>
- Det gør den oppe i eksempel nr. 1 fra dig af :/
- Har du en kode hvor det virker fra starten af ?
Avatar billede steen_hansen Forsker
19. marts 2006 - 13:59 #14
Det virker fint nok i eksempel nr. 1 fra mig; da er den altid åben/lukket, uanset hvor langt man navigerer.
Avatar billede steen_hansen Forsker
19. marts 2006 - 14:01 #15
Jeg testede det med 2 menuer. Jeg lukkede den ene menu, og navigerede rundt i den anden, og den ene menu var hele tiden lukket.
Avatar billede mclemens Nybegynder
19. marts 2006 - 14:19 #16
nå, på den måde - tjekker det...
Avatar billede mclemens Nybegynder
19. marts 2006 - 15:02 #17
Noget i den stil her?

<form id="MenuPersonal" name="frmMenuPersonal" method="post" action="/members/default.asp"

class="menutable">
<script type="text/JavaScript" language="JavaScript">
var navPersonal = '';
if(document.cookie.indexOf('PersonalClosed') > -1){
navPersonal += 'PersonalClosed';
}
</script>

<table id="PersonalClosed1" class="menutable">
    <tr onclick="navPersonal=navPersonal.replace('PersonalClosed1','');menuNavPersonal('1');"

title="Fold menu sammen">
        <td class="menuheadlineOpen1">Din profil</td>
    </tr>
    <tr>
        <td style="width: 156px; padding: 0px;">
            <table style="width: 156px; padding: 0px; margin: 0px auto; border-collapse:

collapse; background-color: #f8f8f8;">
                <tr>
                    <td class="menutr">
                        Ret profil<br>
                        Se profil<br>
                        Slet profil
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<table id="PersonalOpen1" class="menutable">
    <tr onclick="navPersonal=navPersonal+'PersonalClosed1';menuNavPersonal('1');" title="Udvid

menu">
        <td class="menuheadlineClose1">Din profil</td>
    </tr>
</table>




<table id="PersonalClosed2" class="menutable">
    <tr onclick="navPersonal=navPersonal.replace('PersonalClosed2','');menuNavPersonal('2');"

title="Fold menu sammen">
        <td class="menuheadlineOpen2">Din profil</td>
    </tr>
    <tr>
        <td style="width: 156px; padding: 0px;">
            <table style="width: 156px; padding: 0px; margin: 0px auto; border-collapse:

collapse; background-color: #f8f8f8;">
                <tr>
                    <td class="menutr">
                        Ret profil<br>
                        Se profil<br>
                        Slet profil
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<table id="PersonalOpen2" class="menutable">
    <tr onclick="navPersonal=navPersonal+'PersonalClosed2';menuNavPersonal('2');" title="Udvid

menu">
        <td class="menuheadlineClose2">Din profil</td>
    </tr>
</table>

<script type="text/JavaScript" language="JavaScript">
function menuNavPersonal(a){

if(a==0){runit=1;
while(navPersonal.indexOf('PersonalClosed'+runit)){
document.getElementById('PersonalOpen'+runit).style.display='block';
document.getElementById('PersonalClosed'+runit).style.display='none';runit++;}}

if(navPersonal.indexOf('PersonalClosed'+a) > -1){
document.getElementById('PersonalOpen'+a).style.display='none';
document.getElementById('PersonalClosed'+a).style.display='block';
}else{
document.getElementById('PersonalOpen'+a).style.display='block';
document.getElementById('PersonalClosed'+a).style.display='none';
}
document.cookie='navigationPersonal='+navPersonal;
}
</script>
<script type="text/JavaScript" language="JavaScript">
menuNavPersonal(0);
</script>
</form>
Avatar billede mclemens Nybegynder
19. marts 2006 - 15:03 #18
Hvis ja, så meld tilbage og forklaring kommer :)
Avatar billede mclemens Nybegynder
19. marts 2006 - 15:46 #19
Niks, virker vist ikke
- kigger videre i det :/
Avatar billede steen_hansen Forsker
19. marts 2006 - 15:52 #20
Ok, skulle lige til at skrive det :D

Jeg opretter et nyt spm med nye point bagefter :o)
Avatar billede mclemens Nybegynder
19. marts 2006 - 17:33 #21
... det skal nok lykkes - det er jo ikke umuligt, men jeg skal først finde frem til document.cookie systemet i det script du bruger p.t....

Her er et eksempel på samme løsning med et af mine scripts :/
- skal nok se om jeg kan rette fejlene i dit oprindelige script istedet :P

<html><head>
<script type="text/javascript">

cookiedage=1;

function initcook(){if(document.cookie){
boxr=document.cookie.replace("name=","");boxrs=boxr.split(",");
boksa=0;while(document.getElementById("boks"+boxrs[boksa]+"a")){
  document.getElementById("boks"+boxrs[boksa]+"b").style.display="none";
  document.getElementById("boks"+boxrs[boksa]+"a").style.display="block";boksa++;}}else{
boksa=1;while(document.getElementById("boks"+boksa+"a")){
document.getElementById("boks"+boksa+"b").style.display="none";
document.getElementById("boks"+boksa+"a").style.display="block";
boksa++;
}}}

function toggle(id){
if(document.getElementById("boks"+id+"a")){
  if(document.getElementById("boks"+id+"a").style.display=="none")
  {document.getElementById("boks"+id+"b").style.display="none";
  document.getElementById("boks"+id+"a").style.display="block";}
  else{document.getElementById("boks"+id+"a").style.display="none";
  document.getElementById("boks"+id+"b").style.display="block";}
}
tekst="";boksa=1;while(document.getElementById("boks"+boksa+"a")){
  if(document.getElementById("boks"+boksa+"b").style.display=="none"){
  if(tekst!="")tekst=tekst+","+boksa;else tekst=boksa;}boksa++;}
document.getElementById("cookiecontent").innerHTML=tekst;
datenu=new Date();datenu.setTime(datenu.getTime()+1000*60*60*24*cookiedage);
document.cookie="name="+document.getElementById("cookiecontent").innerHTML+";expires="+datenu.toGMTString();
}
</script></head>

<body onLoad="initcook();">

<table id="boks1a" class="menutable" style="display:none;" onclick="toggle(1)">
    <tr>
        <td>Din profil nr1</td>
    </tr>
</table>
<table id="boks1b" class="menutable" onclick="toggle(1)">
    <tr>
        <td>Din profil nr1</td>
    </tr>
    <tr>
        <td style="width: 156px; padding: 0px;">
            <table style="width: 156px; padding: 0px; margin: 0px auto; border-collapse:

collapse; background-color: #f8f8f8;">
                <tr>
                    <td class="menutr">
                        Ret profil<br>
                        Se profil<br>
                        Slet profil
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>



<table id="boks2a" class="menutable" style="display:none;" onclick="toggle(2)">
    <tr>
        <td>Din profil nr2</td>
    </tr>
</table>
<table id="boks2b" class="menutable" onclick="toggle(2)">
    <tr>
        <td>Din profil nr2</td>
    </tr>
    <tr>
        <td style="width: 156px; padding: 0px;">
            <table style="width: 156px; padding: 0px; margin: 0px auto; border-collapse:collapse; background-color: #f8f8f8;">
                <tr>
                    <td class="menutr">
                        Ret profil<br>
                        Se profil<br>
                        Slet profil
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>


<div id="cookiecontent" style="display:none;"></div></body></html>
Avatar billede mclemens Nybegynder
19. marts 2006 - 18:35 #22
Har lige prøvet at udvide dit første script til to tabeller - det virker ikke helt da det når man trykker et par gange på tabellerne låser tabellerne da id's er det samme ... skifter du id's lukker også ned da scriptet skal udvides (cookie funktionen) ... en udvidelse af scriptet fra min side vil sikkert ende med det ovenstående eksempel da jeg ikke ved hvordan det lige skal laves ellers ... desværre :/

- Vil du have dine point igen?
/ eller kan det sidste script bruges?
... eller mangler det nogle specielle effekter?
Avatar billede mclemens Nybegynder
19. marts 2006 - 18:36 #23
... i ovenstående eksempel skal din <form id="MenuPersonal" name="frmMenuPersonal" method="post" action="/members/default.asp" class="menutable"> og </form> nok kaster rundt om en af tabellen :/
Avatar billede steen_hansen Forsker
19. marts 2006 - 20:30 #24
Hold da tæft, hvor har du lavet meget, det var ikke meningen :o)

Men dit eksempel lader menuerne være åbne fra start?

mclemens, du skal ikke lave mere ud af det, du kan jo bruge timer på det her. Jeg troede "bare" det var et spørgsmål om at bytte rundt på en funktion, og så ville det virke. Jeg vil ikke have, at du bruger mere tid på det, det bliver for meget :o)
Avatar billede steen_hansen Forsker
19. marts 2006 - 20:31 #25
Svarer du på dette spørgsmål? :o)
Avatar billede steen_hansen Forsker
19. marts 2006 - 20:41 #26
Avatar billede mclemens Nybegynder
19. marts 2006 - 20:43 #27
ok... det er næsten for mange point - det er jo god træning ... behold lidt selv :)

scriptet lukker alle åbne fra start af med mindre du skifter denne
function initcook(){if(document.cookie){
boxr=document.cookie.replace("name=","");boxrs=boxr.split(",");
boksa=0;while(document.getElementById("boks"+boxrs[boksa]+"a")){
  document.getElementById("boks"+boxrs[boksa]+"b").style.display="none";
  document.getElementById("boks"+boxrs[boksa]+"a").style.display="block";boksa++;}}else{
boksa=1;while(document.getElementById("boks"+boksa+"a")){
document.getElementById("boks"+boksa+"b").style.display="none";
document.getElementById("boks"+boksa+"a").style.display="block";
boksa++;
}}}

over til det her (har ikke lige testet det)

function initcook(){if(document.cookie){
boxr=document.cookie.replace("name=","");boxrs=boxr.split(",");
boksa=0;while(document.getElementById("boks"+boxrs[boksa]+"a")){
  document.getElementById("boks"+boxrs[boksa]+"b").style.display="none";
  document.getElementById("boks"+boxrs[boksa]+"a").style.display="block";boksa++;}}}

- hvis det gøres vil dem der er åbnet eller lukket via cookien kun åbnes eller lukkes
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester