Avatar billede ssv Nybegynder
21. august 2008 - 14:59 Der er 11 kommentarer og
1 løsning

Vise en div kun én gang

Hello.

Jeg står og mangler noget hjælp til at gemme div. Div'en bliver vist med load af siden og når brugeren klikker på krydset (Luk boksen) skal div'en aldrig vises igen. Så jeg kunne forestille mig at man kunne sætte en cookie til den, så den ikke vises til brugeren igen.

Jeg har ledt rundt på Eksperten om dette emne, men har ikke rigtig fundet noget der kan bruges. Så, hjælp ;-)

Jeg har selv fikset lidt javascript til det, problemet er bare at div'en vises igen når siden genindlæses. Og ja, javascriptet er sikkert umoderne og forkert, men jeg er også kun lige kommet igang med det ;-)

Test-siden kan ses her: http://proads.dk/simon/close/
Avatar billede w13 Novice
21. august 2008 - 15:36 #1
Du kan vel bruge disse JS-funktioner:

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name,"",-1);
}

Ref.: http://www.quirksmode.org/js/cookies.html
Avatar billede w13 Novice
21. august 2008 - 15:38 #2
Så sætter du f.eks. en cookie med:

createCookie("closed","true",365);

Og får fat i værdien "true" igen med:

readCookie("closed");
Avatar billede ssv Nybegynder
21. august 2008 - 15:59 #3
Hvordan får jeg så præcist inkoporeret det med det javascript jeg har til at ligge der nu?

Jeg gemmer div'en med:

function hide(uknow){
  document.getElementById(uknow).style.visibility="hidden";
}

- Vil du lave et eksempel med dét indsat i cookie-koden? Så er der vist point ;-)
Avatar billede w13 Novice
21. august 2008 - 16:07 #4
Jeg ville nok skjule den ved at fjerne den helt, så den ikke ligger i scopet længere:

function hide(uknow){
  var o=document.getElementById(uknow);
  o.parentNode.removeChild(o);
  createCookie("closedbox"+uknow,"true",365);
}

function show(uknow){
  var o=document.getElementById(uknow);
  if(readCookie("closedbox"+uknow)==="true"){
    o.parentNode.removeChild(o);
  }
}

Og så skal du bruge denne kode under dit div-element:

<script type="text/javascript">
show("uKnow");
</script>
Avatar billede w13 Novice
21. august 2008 - 16:07 #5
Cookiefunktionerne skal selvfølgelig også ind og ligge på siden. Bare oppe i head-sektionen eller sådan noget.
Avatar billede ssv Nybegynder
21. august 2008 - 16:15 #6
Okay, det der blev for meget ;-)

Har du overskud til at lave det _helt_ for mig - altså samle de ting der skal samles "rigtigt" og vise hvad jeg skal linke til osv. FYI, der er kun brug for en hide-funktion.

Jeg vil gerne acceptere dit svar når der er helt styr på det - men det bliver lige engang senere, er på vej hjem ;-)
Avatar billede w13 Novice
21. august 2008 - 21:09 #7
Ja, der er ikke så meget i det.

Og jo, vi skal da have en show-funktion, som tjekker, om elementet skal vises, eller om der er sat en cookie!
Avatar billede w13 Novice
21. august 2008 - 21:11 #8
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Eksempel</title>
<script type="text/javascript">
function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name,"",-1);
}

function hide(uknow){
  var o=document.getElementById(uknow);
  o.parentNode.removeChild(o);
  createCookie("closedbox"+uknow,"true",365);
}

function show(uknow){
  var o=document.getElementById(uknow);
  if(readCookie("closedbox"+uknow)==="true"){
    o.parentNode.removeChild(o);
  }
}
</script>
<style type="text/css">
body { margin: 0; font: 11px Verdana, Arial, Helvetica, sans-serif; } img { border: 0; }
.uKnow { padding: 10px; width: 230px; border: 1px solid #ccc; background: #f4f4f4; position: absolute; margin: 15px 0 0 15px; z-index: 10; }
.close { position: absolute; z-index: 20; top: 0; right: 0; margin: 5px 5px 0 0; }
</style>
</head>

<body>

<div id="uKnow" class="uKnow">
    <strong>Information</strong><br><br>
    <em>Lorem ipsum dolor sit amet, consec adipiscing elit.<br><br>
    Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</em>
    <a href="#" onclick="hide('uKnow');"><img src="close.gif" class="close" height="12" width="12" alt="Luk boksen!"></a>
</div>

<script type="text/javascript">
show("uKnow");
</script>

</body>
</html>

Det er dog utestet!
Avatar billede ssv Nybegynder
21. august 2008 - 21:31 #9
Jeg takker for det - det ser ud til at virke ;-)

Dog er der lige en ting:

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name,"",-1);
}

--

Skal name, value, days og (name) i ovenstående ikke have en decideret titel? Altså, det skal vel udfyldes med noget indformation, ikke?
Avatar billede w13 Novice
21. august 2008 - 21:33 #10
Nej, det er funktioner. Så hvis der kun stod dét, du viser der, ville der ikke ske noget som helst.

I resten af min kode kalder jeg f.eks.:

createCookie("closedbox"+uknow,"true",365);

og:

readCookie("closedbox"+uknow)

Disse går så op og kører funktionerne med de parametre, man her overfører.
Avatar billede w13 Novice
21. august 2008 - 21:33 #11
Tak for point i øvrigt! :)
Avatar billede ssv Nybegynder
21. august 2008 - 23:04 #12
Okay, jeg ville såmænd også bare høre om det evt. var en "smutter". ;-)

Tak for din tid.
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