Avatar billede lopolla123 Nybegynder
13. februar 2006 - 13:10 Der er 25 kommentarer og
1 løsning

træmenu - huske indstillinger

Hejsa.......

Jeg har en træmenu - endelig lykkes det :-)
Jeg kunne dog enormt godt tænke mig, at træet kan huske indstillingen (åben/lukket). Dette løses vel igennem cookies?
Jeg kan løse det delvist igennem PHP, men jeg vil gerne lave noget stationær html-kode, men er ikke en hardcore javascript-haj :-/

Er der nogle forslag (eller andre eksempler), hvor man får de enkelte punkter til at huske sine indstillinger)?

Og please husk, at jeg er nubi mht. javascript ;)
Glæder mig til at høre fra jer!


Her et lille uddrag af koden:
-------------------------------------------

<script type="text/javascript">
    function showHide(id)
    {
        var div = document.getElementById(id)
        div.style.display = div.style.display == "block" ? "none" : "block"
    }
</script>

<div id="mydiv_1">
       
       
        <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tr>

                <td width="20" align="left"><img src="Includes/Javascript/TreeMenu2/Images/branch.gif"></td>

                <td width="16" height="16" align="left" valign="middle">
                    <img src="Includes/Javascript/TreeMenu2/Images/leaf.gif" border="0">
                </td>

                <td align="left" valign="middle">
                    <span class="TextNormal">
                        bbb
                    </span>

                </td>
            </tr>
        </table>
       
       
       
        <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tr>
                <td width="20" align="left"><img src="Includes/Javascript/TreeMenu2/Images/branch.gif"></td>

                <td width="16" height="16" align="left" valign="middle">
                    <a href="#" onClick="showHide('mydiv_3')"><img src="Includes/Javascript/TreeMenu2/Images/nodePlus.gif" border="0"></a>

                </td>

                <td align="left" valign="middle">
                    <span class="TextNormal">
                        ccc
                    </span>
                </td>
            </tr>
        </table>
        <div id="mydiv_3">
..............

</div></div>

-------------------------------------------
Avatar billede roenving Novice
13. februar 2006 - 14:37 #1
I hvilken forbindelse vil du have den til at huske ?-)

-- skal den være på det samme næste gang brugeren kommer eller er det kun i den session, brugeren er på besøg i ?o]

-- altså, hvor lang tid skal der huskes ...
Avatar billede lopolla123 Nybegynder
13. februar 2006 - 18:15 #2
Hejsa! Helst så den husker det "permanent" - eller X tid, dvs. ikke kun i den gældende session.
Avatar billede roenving Novice
14. februar 2006 - 10:43 #3
Så f.eks.

<script type="text/javascript">
  function showHide(id){
    var st = document.getElementById(id).style;
    st.display = st.display != "block" ? "block" : "none";
    var exp = new Date(new Date() + 365*24*60*60*100).toGMTString();/365 dage = 1 år !-)
    document.cookie = "openMenu=" + (st.display != "block" ? id : "") + ";expires=" + exp + ";path=/";
  }
  window.onload = function(){
    var c = document.cookie;
    if(c){
      var id = c.split("openMenu=")[1].split(";")[0];
      if(id && document.getElementById(id))
        showHide(id);
    }
  }
</script>
Avatar billede lopolla123 Nybegynder
14. februar 2006 - 10:59 #4
Det ser spændende ud. Jeg kigger på det senere idag - glæder mig allerede :-)
Avatar billede lopolla123 Nybegynder
14. februar 2006 - 14:37 #5
Nu har jeg kigget lidt nærmere på det, og harforeløbig lavet følgende:

var cookie_name    = 'mydiv_2';
var mydiv_2_val    = get_cookie(cookie_name);

// Cookie er IKKE sat
if(mydiv_2_val == false)
{
    var mydiv_2 = 'mydiv_2';
    createCookie('mydiv_2','open','100');
}

// Cookie er sat - hent værdien
var mydiv_2_val = get_cookie(cookie_name);


Jeg ved ikke, om man kan gøre det jeg nu havde tænkt mig.......
Der er to muligheder:
1. Cookie har værdien: open
2. Cookie har værdien closed (laver jeg selv på en og anden måde senere)

Hvis open - vis træet åbent - ellers luk træet (altså den relevante del)
Håber du/I kan bære over med min tanke......jeg er som bekendt ny i j-script-faget :-/

Kan denne måde du, fordi jeg kunne altså ikke ved roenvings eksempel få det til at fungere umiddelbart :-(
Avatar billede roenving Novice
14. februar 2006 - 14:44 #6
-- hvilke fejl fik du ?-)
Avatar billede lopolla123 Nybegynder
14. februar 2006 - 14:47 #7
Cookie: name:"openmenu" har ingen værdier selv om jeg åbner og lukker diverse menuer. Jeg formoder, at denskal fyldes med nogle værdier? (for at gemme ved refresh) - dermed foldede menuerne sig også ud efter refresh, underordnet om jeg havde lukket dem før.
Avatar billede lopolla123 Nybegynder
14. februar 2006 - 14:51 #8
En lille ting er, at når jeg tømmer alle cookies (hvilket ikke er unormalt), så får jeg fejl i at "var id = c.split("openMenu=")[1] ikke har nogle properties.....jeg ved ikke om dette er en fatal error......
Avatar billede roenving Novice
14. februar 2006 - 14:52 #9
Prøv at vise, hvad du har forsøgt (et link er bedst !-)
Avatar billede roenving Novice
14. februar 2006 - 14:54 #10
-- jo det kunne det nok være, så skal vi bare lave betingelsen grundigere:

    var c = document.cookie;
    if(c && c.indexOf("openMenu")>-1){
      var id = c.split("openMenu=")[1].split(";")[0];
Avatar billede lopolla123 Nybegynder
14. februar 2006 - 14:56 #11
Her er link.......
http://cms2.linuxhouse.dk/
Avatar billede roenving Novice
14. februar 2006 - 15:05 #12
Det ser ud til, at alt er sat til at blive vist ?-)
Avatar billede roenving Novice
14. februar 2006 - 15:16 #13
-- men det ser da godt mystisk ud, at du bruger 4 gange tabeller til at indeholde en simpel overskrift ?-)
Avatar billede lopolla123 Nybegynder
14. februar 2006 - 15:36 #14
Mht. overskriften.......det skal du ikke tænke på - det er fordi der skal proppes noget mere ind forskellige steder senere :-)

Men kan du forklare "fejlen" - eller hvad jeg monstro skal gøre her?
Avatar billede roenving Novice
14. februar 2006 - 15:42 #15
Du skal da sætte en klasse på de divs, så de er skjulte fra start !-)

-- men hvis de er nestede i flere lag, bliver der jo behov for en mekanisme, der også kan åbne overliggende grene ...
Avatar billede lopolla123 Nybegynder
14. februar 2006 - 16:31 #16
Som sagt er jeg lidt en newbie til javascript, men kan du angive noget simpelt, med cookie, der virker, hvor man trykker på sammen link?

Nu har jeg ændret lidt i det, og jeg fatter bare ikke sammenhængen med hvordan den læser linien (jeg er vant til PHP), hvor man "bare" skal lave koden backend, og vise skidtet........
Avatar billede roenving Novice
14. februar 2006 - 16:34 #17
Sæt en klasse på dine divs (class="treeMenuNode" !-)

-- og tilføj en style-regel:

.treeMenuNode{display:none;}
Avatar billede lopolla123 Nybegynder
14. februar 2006 - 16:53 #18
Yes sir - forbedring :-)
Men den husker stadig ikke sin egen "position" efter refresh.....hvad f..... gør jeg galt?
Avatar billede roenving Novice
14. februar 2006 - 17:46 #19
Har siddet og pillet lidt i det, og du skal jo så, ved lukning af en gren, sætte cookien til at pege på den parent-node, der så er foldet ud, og det er noget tricky !-)
Avatar billede lopolla123 Nybegynder
14. februar 2006 - 18:26 #20
Nu har jeg muligvis fikset en løsning. Det eneste irriterende er bare, at ved reload, så folder den hele menuen ud, hvorefter den lukker de rigtige steder - det er  lidt en øjebæ, men måske det kan fikses.
Jeg ved ikke om det er den "rigtige" måde, men vi får at se :-)

Jeg har så brugt din showhide-dimmer - det er smukt - kom gerne med kommentarer - og læg gerne et svar - så er der i hvert fald points :-)

Det eneste er, at den kommer med en warning om, at jeg skal bruge getelementbyid istedet for nedenstående:
eval(\"document.all.\" + obj + \".style.display='block'\");

Forslag til den fejl?
Avatar billede lopolla123 Nybegynder
14. februar 2006 - 18:28 #21
Og så skal det lige styles så det osse står godt i IE - bruger firefox :-)
Avatar billede roenving Novice
14. februar 2006 - 18:37 #22
Ja, du skal da bare bruge:

document.getElementById(obj).style.display='block';

-- den, du viser er for det første kun gyldig i IE, for det andet benytter den en af de tungeste native javascript-funktioner, og som du kan se er den for det tredje fuldstændig overflødig !-)

-- og så er det altså kun overpunkterne, der bliver foldet sammen, virker den, hvis du har flere grene, der kan foldes ud i flere lag ?-)
Avatar billede lopolla123 Nybegynder
14. februar 2006 - 18:44 #23
Tak for den sidste der! Det virker.
Jeg er ikke helt med på, hvad du mener. Menuen er tænkt således, at til et punkt er der kun underpunkter eller ligestillede punkter.....

Hvis du mener, at den OSSE skal folde underpunkter ind, hvis man klikker på et overpunkt, så er det ikke meningen - underpunkterne skal bare forblive lukkede, men det kunne man godt fikse.

Selve menuen laves genereres vha PHP. Men skulle man principielt bare ud i, at overpunktet skal lukkede punkter under sig - det kunne man jo osse godt.....
Avatar billede roenving Novice
14. februar 2006 - 18:56 #24
Ok, så velbekomme '-)
Avatar billede roenving Novice
14. februar 2006 - 19:05 #25
-- og tak for point ;~}
Avatar billede lopolla123 Nybegynder
14. februar 2006 - 19:07 #26
Selv tak - de er "hard" earned men sådan en newbie som mig. Jeg har bare så svært ved at komme fra backend til frontend. Jeg forstår grundlæggende ikke, at klienten kan afvikle noget som helst ;)

Jeg har jo altid redigeret alting "omme bagfra". Og javascript er bare en anden verden.......men mange tak for hjælpen og tålmodigheden!
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