webForumDet fria alternativet
Logga in

Byta css filer genom klickning?

23 svar · 2 199 visningar · startad av vagann

vagannMedlem sedan juli 2011171 inlägg
#1

hejsan
undrar om nån kunde hjälpa så att jag fixar en funktion , jag skulle göra så att användare kan byta css filen genom att klicka på bilden , så långt har jag kommit men inte så lång iaf :P , så va behöver jag mer så att det funkar som jag vill :D !! tackar !!

<div id="tchange">
<a href="" onclick="SetCookie(nameOfCookie, 1, exp); doRefresh();"><img src="./files/colour-button-def.png" title="Default Style" alt="Default Style"></a>
<a href="" onclick="SetCookie(nameOfCookie, 2, exp); doRefresh();"><img src="./files/colour-button-pink.png" title="Pink Style" alt="Pink Style"></a>
<a href="" onclick="SetCookie(nameOfCookie, 3, exp); doRefresh();"><img src="./files/colour-button-green.png" title="Green Style" alt="Green Style"></a>
<a href="" onclick="SetCookie(nameOfCookie, 4, exp); doRefresh();"><img src="./files/colour-button-red.png" title="Red Style" alt="Red Style"></a>
<a href="" onclick="SetCookie(nameOfCookie, 5, exp); doRefresh();"><img src="./files/colour-button-blue.png" title="Blue Style" alt="Blue Style"></a>
</div>
voigtann1Medlem sedan juni 20019 519 inlägg
#2

Hur ser din SetCookie och doRefresh metod ut?
Vad är exp för något? och nameOfCookie?

@ndersMedlem sedan juni 200032 969 inlägg
#3

Och vad är efe?

vagannMedlem sedan juli 2011171 inlägg
#4

@nders skrev:

Och vad är efe?

ojjdå , ber om ursäkt , jag bara skrev efe för att förhandsgranska inlägget sen har jag glömt ändra namnet XD men kan du byta namnet till "byta css filer genom klickning?" är du snäll :) ?

voigtann1: jag har bara gjort html delen och behöver hjälp med JS delen ,jag kan nästan ingenthing om JS ! men kanske detta skulle hjälpa ?
http://www.webforum.nu/showthread.php?t=183651

@ndersMedlem sedan juni 200032 969 inlägg
#5

vagann skrev:

ojjdå , ber om ursäkt , jag bara skrev efe för att förhandsgranska inlägget sen har jag glömt ändra namnet XD men kan du byta namnet till "byta css filer genom klickning?" är du snäll :) ?

Åh ja! Your wish is my command! :)

vagannMedlem sedan juli 2011171 inlägg
#6

@nders skrev:

Åh ja! Your wish is my command! :)

Tackar :bire snällt av dig !!

voigtann1Medlem sedan juni 20019 519 inlägg
#7

Är det hela CSS:en eller är det som du tänker att den skall "bygga ut" från en bas CSS? Kör du någon ramverk som jquery eller prototype? Eller skall det vara ren JS kod?

vagannMedlem sedan juli 2011171 inlägg
#8

det skall vara ren JS kod , och medan jag sökte på google hitta jag ett script , här har du det

// These are the variables; you can change these if you want
var expDays = 9999;  // How many days to remember the setting
var standardStyle = '5'; // This is the number of your standard style sheet; this will be used when the user did not do anything.
var nameOfCookie = 'switchstyle'; // This is the name of the cookie that is used.
var urlToCSSDirectory = 'http://www.test.com/v2/css/'; // This is the URL to your directory where your .css files are placed on your site.  
// These are the names of your different .css files; use the name exactly as on your Web site
var ScreenCSS_1 = 'index.css';
var ScreenCSS_2 = 'pink.css';
var ScreenCSS_3 = 'green.css';
var ScreenCSS_4 = 'red.css';
var ScreenCSS_5 = 'blue.css';

// If you use different .css files for printing a document, you can set these.  If you don't even know what this is, name then everything exactly the same as above.
// So: make then PrintCSS_1 the same as ScreenCSS_1, for example "screen_1.css".
//var PrintCSS_1 = 'index.css';
//var PrintCSS_2 = 'test.css';
//var PrintCSS_3 = 'print_3.css';
//var PrintCSS_4 = 'print_4.css';
//var PrintCSS_5 = 'print_5.css';

/***********************************************************************************************

    DO NOT CHANGE ANYTHING UNDER THIS LINE, UNLESS YOU KNOW WHAT YOU ARE DOING

***********************************************************************************************/

// This is the main function that does all the work
function switchStyleOfUser(){
    var fontSize = GetCookie(nameOfCookie);
    if (fontSize == null) {
        fontSize = standardStyle;
    }

    if (fontSize == "1") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_1 + '" media="screen"><link rel="stylesheet" type"text/css" href="' + urlToCSSTB + ScreenCSS_6 + '" media="screen">'); }
    if (fontSize == "2") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_2 + '" media="screen"><link rel="stylesheet" type"text/css" href="' + urlToCSSTB + ScreenCSS_6 + '" media="screen">'); }
    if (fontSize == "3") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_3 + '" media="screen"><link rel="stylesheet" type"text/css" href="' + urlToCSSTB + ScreenCSS_6 + '" media="screen">'); }
    if (fontSize == "4") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_4 + '" media="screen"><link rel="stylesheet" type"text/css" href="' + urlToCSSTB + ScreenCSS_6 + '" media="screen">'); }
    if (fontSize == "5") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_5 + '" media="screen"><link rel="stylesheet" type"text/css" href="' + urlToCSSTB + ScreenCSS_6 + '" media="screen">'); }

    //if (fontSize == "1") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_1 + '" media="print">'); }
    //if (fontSize == "2") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_2 + '" media="print">'); }
    //if (fontSize == "3") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_3 + '" media="print">'); }
    //if (fontSize == "4") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_4 + '" media="print">'); }
    //if (fontSize == "5") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_5 + '" media="print">'); }

    var fontSize = "";
    return fontSize;
}

var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));

// Function to get the settings of the user
function getCookieVal (offset) {
    var endstr = document.cookie.indexOf (";", offset);
    if (endstr == -1)
    endstr = document.cookie.length;
    return unescape(document.cookie.substring(offset, endstr));
}

// Function to get the settings of the user
function GetCookie (name) {
    var arg = name + "=";
    var alen = arg.length;
    var clen = document.cookie.length;
    var i = 0;
    while (i < clen) {
        var j = i + alen;
        if (document.cookie.substring(i, j) == arg)
        return getCookieVal (j);
        i = document.cookie.indexOf(" ", i) + 1;
        if (i == 0) break;
    }
    return null;
}

// Function to remember the settings
function SetCookie (name, value) {
    var argv = SetCookie.arguments;
    var argc = SetCookie.arguments.length;
    var expires = (argc > 2) ? argv[2] : null;
    var path = (argc > 3) ? argv[3] : null;
    var domain = (argc > 4) ? argv[4] : null;
    var secure = (argc > 5) ? argv[5] : false;
    document.cookie = name + "=" + escape (value) +
    ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
    ((path == null) ? "" : ("; path=" + path)) +
    ((domain == null) ? "" : ("; domain=" + domain)) +
    ((secure == true) ? "; secure" : "");
}

// Function to remove the settings
function DeleteCookie (name) {
    var exp = new Date();
    exp.setTime (exp.getTime() - 1);
    var cval = GetCookie (name);
    document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}

// This function is used when the user gives his selection
function doRefresh(){
    location.reload();
}

// This will call the main function.  Do not remove this, because otherwise this script will do nothing...
document.write(switchStyleOfUser());

och då i html delen har jag denna :

<script src="/changer.js" type="text/javascript"></script><link rel="stylesheet" type"text=" css"="" href="css/index.css" media="screen">
<body>
		<div id="tchange">
<a href="" onclick="SetCookie(nameOfCookie, 1, exp); doRefresh();"><img src="colour-button-def.png" title="Default Style" alt="Default Style"></a>
<a href="" onclick="SetCookie(nameOfCookie, 2, exp); doRefresh();"><img src="colour-button-pink.png" title="Pink Style" alt="Pink Style"></a>
<a href="" onclick="SetCookie(nameOfCookie, 3, exp); doRefresh();"><img src="colour-button-green.png" title="Green Style" alt="Green Style"></a>
<a href="" onclick="SetCookie(nameOfCookie, 4, exp); doRefresh();"><img src="colour-button-red.png" title="Red Style" alt="Red Style"></a>
<a href="" onclick="SetCookie(nameOfCookie, 5, exp); doRefresh();"><img src="colour-button-blue.png" title="Blue Style" alt="Blue Style"></a>

men det verkar inte som det funkar , det går inte anropa andra css filer (tex pink.css) sidan använder fortfarande index.css , vet du vart felet är ?
tackar !! :)

voigtann1Medlem sedan juni 20019 519 inlägg
#9

din HTML markup för link-elementet är fel

Sen förstå jag inte alls switchStyleOfUser() varför du vill köra det på det sättet i huvudtaget, du kör en document.write i metoden och sen kör du alltid en document.write på din:

document.write(switchStyleOfUser());

Du skulle mycket hellre göra en metod anrop som gör allt åt dig, istället för att köra samma kod om och om igen, och hellre köra en array och ännu bättre, inte använda så många globala variabler.

Har du rätt URL på din variabel `urlToCSSDirectory`?

När jag försöker köra din kod:

urlToCSSTB is not defined

Ändra din metod så kommer det fungera.

vagannMedlem sedan juli 2011171 inlägg
#10

voigtann1 skrev:

din HTML markup för link-elementet är fel

Sen förstå jag inte alls switchStyleOfUser() varför du vill köra det på det sättet i huvudtaget, du kör en document.write i metoden och sen kör du alltid en document.write på din:

document.write(switchStyleOfUser());

Du skulle mycket hellre göra en metod anrop som gör allt åt dig, istället för att köra samma kod om och om igen, och hellre köra en array och ännu bättre, inte använda så många globala variabler.

Har du rätt URL på din variabel `urlToCSSDirectory`?

När jag försöker köra din kod:

Ändra din metod så kommer det fungera.

ja, har rätt url på urlToCSSDirectory och sedan urlToCSSTB behöver jag inte den så kommer att ta bort den och som sagt , jag kan nästan ingenting om JS , så kan du inte bara modifera den och sedan ge mig den rätta koden , enligt dig så är koden inte alls rätt/ bra , kanske du kunde göra det på ditt sätt ?
tack för du hjälper mig , väldigt snällt av dig :)

voigtann1Medlem sedan juni 20019 519 inlägg
#11

vagann skrev:

ja, har rätt url på urlToCSSDirectory och sedan urlToCSSTB behöver jag inte den så kommer att ta bort den och som sagt , jag kan nästan ingenting om JS , så kan du inte bara modifera den och sedan ge mig den rätta koden , enligt dig så är koden inte alls rätt/ bra , kanske du kunde göra det på ditt sätt ?
tack för du hjälper mig , väldigt snällt av dig :)

Klart man kan göra den bättre på många sätt, men att bara ge dig en ändrad kod kommer ju inte hjälpa dig att lära dig javascript alls.

Om du inte få igång det efter du har plockat bort urlToCSSTB så få du gärna postar din nya kod och berätta vad som inte fungera. Fungerar för mig på: http://voigt.se/sandbox/wf/vagann/

vagannMedlem sedan juli 2011171 inlägg
#12

ohh shiit va nice , efter att jag plockade bort urlToCSSTB blev koden så här :

// These are the variables; you can change these if you want
var expDays = 9999;  // How many days to remember the setting
var standardStyle = '5'; // This is the number of your standard style sheet; this will be used when the user did not do anything.
var nameOfCookie = 'switchstyle'; // This is the name of the cookie that is used.
var urlToCSSDirectory = 'http://www.test.com/v2/css/'; // This is the URL to your directory where your .css files are placed on your site.  
// These are the names of your different .css files; use the name exactly as on your Web site
var ScreenCSS_1 = 'index.css';
var ScreenCSS_2 = 'pink.css';
var ScreenCSS_3 = 'green.css';
var ScreenCSS_4 = 'red.css';
var ScreenCSS_5 = 'blue.css';
var ScreenCSS_6 = 'talkbox.css';

// If you use different .css files for printing a document, you can set these.  If you don't even know what this is, name then everything exactly the same as above.
// So: make then PrintCSS_1 the same as ScreenCSS_1, for example "screen_1.css".
//var PrintCSS_1 = 'index.css';
//var PrintCSS_2 = 'test.css';
//var PrintCSS_3 = 'print_3.css';
//var PrintCSS_4 = 'print_4.css';
//var PrintCSS_5 = 'print_5.css';

/***********************************************************************************************

    DO NOT CHANGE ANYTHING UNDER THIS LINE, UNLESS YOU KNOW WHAT YOU ARE DOING

***********************************************************************************************/

// This is the main function that does all the work
function switchStyleOfUser(){
    var fontSize = GetCookie(nameOfCookie);
    if (fontSize == null) {
        fontSize = standardStyle;
    }

    if (fontSize == "1") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_1 + '" media="screen">'); }
    if (fontSize == "2") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_2 + '" media="screen">'); }
    if (fontSize == "3") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_3 + '" media="screen">'); }
    if (fontSize == "4") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_4 + '" media="screen">'); }
    if (fontSize == "5") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_5 + '" media="screen">'); }

    //if (fontSize == "1") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_1 + '" media="print">'); }
    //if (fontSize == "2") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_2 + '" media="print">'); }
    //if (fontSize == "3") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_3 + '" media="print">'); }
    //if (fontSize == "4") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_4 + '" media="print">'); }
    //if (fontSize == "5") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_5 + '" media="print">'); }

    var fontSize = "";
    return fontSize;
}

var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));

// Function to get the settings of the user
function getCookieVal (offset) {
    var endstr = document.cookie.indexOf (";", offset);
    if (endstr == -1)
    endstr = document.cookie.length;
    return unescape(document.cookie.substring(offset, endstr));
}

// Function to get the settings of the user
function GetCookie (name) {
    var arg = name + "=";
    var alen = arg.length;
    var clen = document.cookie.length;
    var i = 0;
    while (i < clen) {
        var j = i + alen;
        if (document.cookie.substring(i, j) == arg)
        return getCookieVal (j);
        i = document.cookie.indexOf(" ", i) + 1;
        if (i == 0) break;
    }
    return null;
}

// Function to remember the settings
function SetCookie (name, value) {
    var argv = SetCookie.arguments;
    var argc = SetCookie.arguments.length;
    var expires = (argc > 2) ? argv[2] : null;
    var path = (argc > 3) ? argv[3] : null;
    var domain = (argc > 4) ? argv[4] : null;
    var secure = (argc > 5) ? argv[5] : false;
    document.cookie = name + "=" + escape (value) +
    ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
    ((path == null) ? "" : ("; path=" + path)) +
    ((domain == null) ? "" : ("; domain=" + domain)) +
    ((secure == true) ? "; secure" : "");
}

// Function to remove the settings
function DeleteCookie (name) {
    var exp = new Date();
    exp.setTime (exp.getTime() - 1);
    var cval = GetCookie (name);
    document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}

// This function is used when the user gives his selection
function doRefresh(){
    location.reload();
}

// This will call the main function.  Do not remove this, because otherwise this script will do nothing...
document.write(switchStyleOfUser());

Det som inte vekar funka är att background färgen ändras inte men där emot när jag klickar på bilderna så uppdateras sidan ! :)

voigtann1Medlem sedan juni 20019 519 inlägg
#13

Sidan laddas ju om med:

function doRefresh(){
    location.reload();
}

Så det är ju helt OK, du har ju eventet click så det händer inget förrän du trycker på länkarna.

vagannMedlem sedan juli 2011171 inlägg
#14

ja det sant :) , hur får vi det att ändra css filen då?

voigtann1Medlem sedan juni 20019 519 inlägg
#15

Det vardet jag frågade, skulle den skriva över alla css filer du ha? Eller den skall bara läggas in i din tillsammans med din huvud CSS? Du få berätta nog exakt vad du förväntas att göra med din kod....

vagannMedlem sedan juli 2011171 inlägg
#16

jaha alright :) jag vill att koden ska använda index.css i början men senare när användaren byter till "blå" så ska sidan använda blue.css istället.
ber om ursäkt , jag e lite trög ;P

voigtann1Medlem sedan juni 20019 519 inlägg
#17

Ändra: var standardStyle = '5' till det nummer du kör som default css så är du hemma.

Fast om jag få tipsar om något så hade jag gjort:

Haft en orginal CSS alltid, så även om de som kör utan Javascript/innan skriptet har hunnit köras) så ser inte helt hemskt ut. Och haft alla extra CSS som extendar orginal CSS:en

vagannMedlem sedan juli 2011171 inlägg
#18

kan du inte bara ge mig den rätta/färdiga koden , vill fixa det för mitt forum . kan lära mig JS senare just nu måste jag plugga inför fysik provet !
tackar!

voigtann1Medlem sedan juni 20019 519 inlägg
#19

vagann skrev:

kan du inte bara ge mig den rätta/färdiga koden , vill fixa det för mitt forum . kan lära mig JS senare just nu måste jag plugga inför fysik provet !
tackar!

Koden finns på länken jag har gett dig. Men även forumet kan ju vänta, studier gå före ;)

vagannMedlem sedan juli 2011171 inlägg
#20

haha visst speciellt man går i NV :P , ja men hur som helst , jag kopierade dina koder men ändå funkade den inte , vet inte varför ... håller på att bli dum *!! jag laddade upp min zip som innehåller css och html koder om du vill kontrollera koderna

137 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
135 ms — hämta tråd, inlägg och bilagor (db)