MiiniMedlem sedan apr. 201216 inläggHar lyckats fixa så att användaren kan välja mellan 4 olika stilmallar i en drop-down meny. Nu ska jag bara få den valda stilmallen att sparas i en cookie, så när sidan besöks igen ska det senast valda stilmallen aktiveras (genom att läsa av cookien). Säker inte så svårt om man kan det :)
Har i alla fall försökt att skapa en cookie, är dock inte säker på om jag lyckats eller om det bara är några små saker som måste rättas till? Men som det är nu så fungerar det inte!
Är jag på rätt väg? I så fall, var i koden ligger felen? :p
såhär ser min kod ut i js-filen:
//Hitta cookie
function findValue(value)
{
var cookies = document.cookie.split('; ');
for (var i=0; i<cookies.length; i++)
{
var cookieParts = cookies[i].split('=');
var cookieName = cookieParts[0];
var cookieValue = cookieParts[1];
if (value == cookieName)
{
return cookieValue;
}
}
return false;
}
//Skapa cookie
function createTimedCookie(links, days)
{
var cookieTime = links[0] + days;
document.cookie = cookieTime;
}
//Kolla vilken stilmall som ska sparas
function refreshPageValue(links, days)
{
links = findValue("style1", "style2", "style3");
if (links == false || "style1")
{
links[0].href = "style1.css"; //Tror det är lite fel här, men vet inte vad jag ska skriva?
}
else if (links == "style2")
{
links[0].href = "style2.css"; //Samma gäller även här,
}
else if (links == "style3")
{
links[0].href = "style3.css"; //här,
}
else
{
links[0].href = "style4.css"; //och här!
}
changeStyle(links, 30);
}
//Antal dagar cookien ska sparas
function changeStyle(links, days)
{
var date = new Date();
var days = date.toGMTString(30);
date.setDate(date.getDate()+ days);
createTimedCookie(links, 30);
refreshPageValue(links, 30);
}
//init
function init()
{
//Byrer stilmall
function show()
{
var links = document.getElementsByTagName("link");
var value = this.id;
switch (value)
{
case "style1":
links[0].href = "style1.css";
refreshPageValue(links, 30);
break;
case "style2":
links[0].href = "style2.css";
refreshPageValue(links, 30);
break;
case "style3":
links[0].href = "style3.css";
refreshPageValue(links, 30);
break;
case "style4":
links[0].href = "style4.css";
refreshPageValue(links, 30);
break;
}
}
}
window.onload = init;
Till att börja med är funktionen för att skapa cookien helt åt skogen. Jag rekommenderar att du använder följande två rutiner från quirksmode.
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;
}
Sen finns det en hel del andra saker att anmärka på, som t ex hur du använder funktionerna. Du verkar försöka spara en separat cookie per stilmall, eller nåt. Du bör spara en enda cookie, där värdet motsvarar den valda stilmallen.
function changeStyle(style)
{
// "style" är en sträng, som är cookiens namn
// style är en variabel som innehåller namnet på den valda stilen
createCookie("style", style, 30);
var links = document.getElementsByTagName("link");
link[0].href = "style" + style + ".css";
}
function init(){
// Hämta sparad stil
var style = readCookie("style");
// Om det inte finns någon cookie, välj stil 1
if (style == null){
style = 1;
}
changeStyle(style);
}
window.onload = init;
Och sen anropar du funktionen typ så här:
<a href="#" onclick="changeStyle(1);">Byt till stil 1</a>
<a href="#" onclick="changeStyle(2);">Byt till stil 2</a>
<a href="#" onclick="changeStyle(3);">Byt till stil 3</a>
MiiniMedlem sedan apr. 201216 inlägg Tusen tack för hjälpen!! :)
Fungerar som det ska i FF och IE, men tyvärr inte i Chrome?
Hoppsan. Jag skrev koden utan att testköra, så det var bra att den funkade alls. (Jag noterar ett litet stavfel, link/links i changeStyle, vilket jag antar att du fixade.)
Ny kod:
<html>
<head>
<link rel="stylesheet" href="stil0.css" type="text/css" disabled="disabled">
<link rel="stylesheet" href="stil1.css" type="text/css" disabled="disabled">
<link rel="stylesheet" href="stil2.css" type="text/css" disabled="disabled">
<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 changeStyle(style)
{
// "style" är en sträng, som är cookiens namn
// style är en variabel som innehåller namnet på den valda stilen
createCookie("style", style, 30);
var links = document.getElementsByTagName("link");
for(var i=0; i<3; i++){
if(i == style){
links[i].disabled = false;
}else{
links[i].disabled = true;
}
}
}
function init(){
// Hämta sparad stil
var style = readCookie("style");
// Om det inte finns någon cookie, välj stil 0
if (style == null){
style = 0;
}
changeStyle(style);
}
window.onload = init;
</script>
</head>
<body>
<a href="#" onclick="changeStyle(0);">Byt till stil 1</a>
<a href="#" onclick="changeStyle(1);">Byt till stil 2</a>
<a href="#" onclick="changeStyle(2);">Byt till stil 3</a>
</body>
</html>
Notera ett par saker. Jag numrerar nu kode stilmallarna från 0 istället för från 1, eftersom det är så datorer "vill" att man ska göra. (Saker blir oftare enklare då.)
stattinMedlem sedan jan. 2005713 inläggNu vet inte jag om du testkör lokalt på datorn eller om sidan ligger uppe någonstans, men chrome sparar inga cookies lokalt.
Kan vara bra att veta.
BbabaMedlem sedan maj 20122 inlägg Jag behöver låna tråden från dig Miini, hoppas det inte gör mycket.
En sak jag funderade över var hur lösningen hade sett ut ifall man inte fick använda javascrpit som t.ex. onclick="changeStyle() i HTML-filen utan kopplade det istället genom javascript-filen?
leta upp DOM objekteten och bind click event på den.
BbabaMedlem sedan maj 20122 inlägg Som i detta fall när man skapar en drop-down meny skapar man först menyn med ett ul<element> som har ett id i HTML-filen.
För att sedan greppa alla länkarna använder man
var exempel = document.getElementById('ulElementetsId').getElementsByTagName('a');
Sedan tappar jag tråden lite. Jag antar att man kör en for-loop för att gå igenom alla länkar där man till slut ropar på
exempel[i].onclick = changeStyle(style);
Det jag undrar nu är vad händer med
var style = readCookie("style");
// Om det inte finns någon cookie, välj stil 0
if (style == null){
style = 0;
}
Ska det också tillhöra for-loopen eller vad händer med det?
