style wissel met cookie

Status
Niet open voor verdere reacties.
F

Frenske123

Terugkerende gebruiker
Lid geworden
2 jul 2007
Berichten
1.267
Hallo

Via een bootstrap toggle box verander ik de style van website
maar bij opnieuw laden pagina komt standaard style weer tevoorschijn
(standaard removeClass('night')'

Kan ik dit aanpassen door een cookie en hoe of onderstaande zodanig aanpassen dat ik gewoon kan kiezen zonder dat een herladen van pagina invloed heeft indien mogelijk.

HTML: 
<div class="toggle-box">
<input type="checkbox" name="checkbox1" id="toggle-box-checkbox" />
<label for="toggle-box-checkbox" class="toggle-box-label-left"></label>
<label for="toggle-box-checkbox" class="toggle-box-label"></label>
</div>


Code: 
$('#toggle-box-checkbox').on('change', function(){
  if(this.checked){
    $('body').addClass('night');
  }else{
    $('body').removeClass('night');
  }
});
 
Laatst bewerkt:
Wat "Geen idee" ?
 
Kijk eens naar het voorbeeld in checkcookie(), hoe het bij de naam werkt. Probeer het toe te passen in jouw code.
 
Ik begrijp nog wel waar die 3 functies voor zijn , maar voor de rest houd het op
 
Iemand klikt de functie op 'nachtstand' en jij slaat een cookje op met nachtstand (en past de style aan). Als deze wordt uitgeklikt verwijder je het koekje (en verwijder je de style)

En dan moet je ook van tevoren het koekje uitlezen, om vervolgens de stijl aan te passen.

Ik denk dat het nu wel met de twee functies lukt.
 
Laatst bewerkt:
Je moet gewoon de twee functies gebruiken op de juiste plekken. De checkCookie() is alleen maar een voorbeeld.
Pas setCookie() en getCookie() eens toe in deze code:

Code: 
// plaats hier de getCookie() en setCookie() functies.


// 'lees cookie' hier {
 $('body').addClass('night');
// }


$('#toggle-box-checkbox').on('change', function(){
  if(this.checked){
    // 'plaats cookie' hier
    $('body').addClass('night');
  }else{
    // 'verwijder cookie' hier
    $('body').removeClass('night');
  }
});
 
Laatst bewerkt:
Je weet hopelijk hoe functies werken?

cname staat voor cookie-name. Een koekje moet wel een naam hebben uiteraard.
De functies kan je laten zoals het is, het gaat om het aanroepen ervan.
 
Waar loop je dan op vast?

Je moet gewoon op de juiste plekken de functies aanroepen!
Kijk eens terug naar mijn code hierboven, en kijk eens goed naar het commentaar achter de //

- Weet je hoe een functie werkt?
- Weet je wat een functie is?
- Weet je hoe je een functie moet aanroepen?
 
Laatst bewerkt:
Code: 
function getCookie(cname) {
$('#toggle-box-checkbox').on('change', function(){
  if(this.checked){
    $('body').addClass('night');
  }else{
    $('body').removeClass('night');
  }
});
}

$('#toggle-box-checkbox').on('change', function(){
  if(this.checked){
    // 'plaats cookie' hier
    $('body').addClass('night');
  }else{
    // 'verwijder cookie' hier
    $('body').removeClass('night');
  }
});
[CODE]
[/CODE]
 
Nee, zo werkt een functie niet.
Die zijn bedoelt om meerdere keren te gebruiken, dat kan ik niet ontdekken in jouw code.
Lees je uberhaupt wel wat er op die site staat, of sta je nu gewoon te gokken?

Die functies moet je intact laten, en enkel AANROEPEN in jouw code!
Kijk nog eens goed naar het bericht van 10:58:

Stap 1) Plaats de functies bovenaan (laat ze zoals het is)
Stap 2) Roep de functies aan op de genoemde plekken
Stap 3) Controleer het, en profit.

Aan de hand van de voorbeeldcode (pseudo-code) moet wel duidelijk zijn hoe het moet

Ik kan het wel helemaal voordoen, maar daar leer je niks van ;)
give a man a fish and you feed him for a day; teach a man to fish and you feed him for a lifetime
Klik om te vergroten...
 
Laatst bewerkt:
De GET en SET functie snap ik nog wel , maar toe passen in mijn script...

Code: 
function setCookie(cname,cvalue,exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires=" + d.toGMTString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

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



$('#toggle-box-checkbox').on('change', function(){
  if(this.checked){
  function setCookie(cname,cvalue,exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires=" + d.toGMTString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
    $('body').addClass('night');
	
  }
  else{
   function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
    $('body').removeClass('night');
  }
});
 
Laatst bewerkt:
Zit je nou echt wat aan te rommelen?

Even een schone lei:
Code: 
/* Hier beginnen de functies! Niks meer aan doen dus*/

/* Functie setCookie() voor plaatsen van cookie*/
function setCookie(cname,cvalue,exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires=" + d.toGMTString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

/* Functie getCookie() voor uitlezen*/
function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
/* einde van de functies! */

/* Vanaf hier jouw code. Lees goed het commentaar na de // */

// 'lees cookie' functie hier aanroepen {
 $('body').addClass('night');
// }


$('#toggle-box-checkbox').on('change', function(){
  if(this.checked){
    // 'plaats cookie' hier
    $('body').addClass('night');
  }else{
    // 'verwijder cookie' hier
    $('body').removeClass('night');
  }
});

Even terug naar de lesbank :).
Ik neem aan dat je weet wat het verschil is tussen een functie maken een aanroepen?
Ik leg het hier in een simpel rekenvoorbeeld even uit.
Code: 
/* Hier maak je een functie */
function Vermenigvuldigen(a, b) {
  return a * b; // vermenigvuldig de eerste parameter a met b
}

var x = Vermenigvuldigen(1, 8); // hier roepen we een functie aan, en slaan dit voor het gemak het antwoord in een variabele x op.
var y = Vermenigvuldigen(2, 8); // en eventueel kunnen we hem nog een keer aanroepen, en slaan dit voor het gemak het antwoord in een variabele y op.
var z = Vermenigvuldigen(4, 2); // en als je zin heb kan je hem nog een keer aanroepen, en slaan dit voor het gemak het antwoord in een variabele z op.

// laten we nu even de antwoorden tevoorschijn toveren.
alert('De antwoorden:' + x +','+ y +' en '+ z);
Zo zie je dat je met één functie meerdere keren een taak (vermenigvulden in dit geval) kan uitvoeren.
Druk dit voorbeeld eens, en klik op RUN
 
Laatst bewerkt:
Vermenigvuldigen is dus het "trefwoord"

Ja klopt ben aan het gokken...zal het straks nog bekijken nu ff er van door , bedankt.
 
Als je gaat gokken, dan kan je beter hier heen gaan :P
Als je wilt programmeren moet je begrijpen wat er gebeurt.

Het vermenigvuldigen is alleen maar een praktisch voorbeeld waar je een functie in kan toepassen. In jouw script hoef je uiteraard niet te vermenigvuldigen, maar moet je gewoon de juiste cookie-functies toepassen. Maar met de practische uitleg moet nu wel duidelijk zijn hoe je dat kan toepassen.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan