login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:
Scripts > Overige > CSS > Verschillende layouts met cookies

Verschillende layouts met cookies

Auteur: SunTzu - 19 april 2005 - 15:34 - Gekeurd door: Maarten - Hits: 5392 - Aantal punten: 2.50 (1 stem)





Deze bestanden krijg je:

style1.css / style2.css
layout.js
pagina.html

Code:
Ok, wat gaan we doen: Een pagina maken met verschillende layouts!
Voorbeeld: http://www.dreamix-design.com/nannie/index.php

- Je heb voor deze tutorial/script wel basiskennis van html & css nodig!
- Heb je dit nog niet? ga dan naar: http://www.site...&id=13

Zoals de meeste weten, kun je met stylesheets hele layouts maken. Nu ga ik je uitleggen hoe je deze layouts werkend kan krijgen! Je krijg de volgende bestanden:

style1.css / style2.css
layout.js
pagina.html

___________________________
> Pagina.html

Maak een gewone pagina aan, met tabellen. Geef deze tabellen een paar classes zodat je de tabellen kleuren kan geven. Voor de eerste keer raad ik je aan 1 of 2 tabellen te gebruiken.

Tussen de <head> & </head> zet je de volgende code:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script>
  2. function SetCookie(value)
  3. {
  4.     var expdate = new Date ();
  5.     expdate.setTime(expdate.getTime() + (3650 * 24 * 60 * 60 * 1000));
  6.     document.cookie = "mkstyle=" + escape (value) + "; expires=" + expdate.toGMTString() + "; path=/";
  7. }
  8. </script>
  9. <script src="layout.js">
  10. </script>


*****

> style1.css

Je gaat hier de classes opmaken. Dus krijg je het normale stylesheet idee:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. .tabel	{background-color: #545454;
  2. 	}

enz.

Kopier het de tekst nu, en maak een nieuw document wat je style2.css noemt. Plak de inhoud en verander de kleur van de tabel.

Nu ben je klaar met de stylesheets. Let op dat je ze goed heb opgeslagen!
*****

> layout.js

Dit is een javascript documentje wat de pagina inlaad. Je maakt zon documentje net als een stylesheet gewoon in kladblok of een ander editor. Kopieer de volgende code en verander als je iets wil veranderen:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. var prefix = "mkstyle=";
  2. var cookieStartIndex = document.cookie.indexOf(prefix);
  3. var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length);
  4. if (cookieEndIndex == -1)
  5. cookieEndIndex = document.cookie.length;
  6. var value=unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex));
  7. if ((value !='1') & (value!='2') & (value!='3'))
  8. document.write('<LINK REL=STYLESHEET TYPE=text/css HREF=stylesheet.css>');
  9. if (value=='1')
  10. document.write('<LINK REL=STYLESHEET TYPE=text/css HREF=stylesheet.css>');
  11. if (value=='2')
  12. document.write('<LINK REL=STYLESHEET TYPE=text/css HREF=stylesheet2.css>');
  13. if (value=='3')
  14. document.write('<LINK REL=STYLESHEET TYPE=text/css HREF=stylesheet3.css>');

*****

Nu ben je bijna klaar, je moet er alleen zorgen dat er een link is dat naar de cookies lerwijst zodat hij je instellingen opslaat voor de volgende keer.

Je gebruik gewoon de volgende code om van styles te veranderen:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href=index.php onClick="SetCookie('1');">Style 1</a><br>
  2. <a href=index.php onClick="SetCookie('2');">Style 2</a><br>


Ik hoop dat je er nu uit kan komen, zo niet? je kunt mij altijd mailen op: ddpsam[at]gmail.comDownload code! Download code (.txt)

 Bekijk een voorbeeld van dit script!
 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (4)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.044s