Avatar billede Slettet bruger
06. maj 2005 - 15:45 Der er 7 kommentarer og
1 løsning

Give brugerne mulighed for valg/ændring af baggrundsfarve?

Hej folkens

Er ved at lave et nyt site... Her kunne jeg tænke mig at give brugerne mulighed for selv at vælge/ændre baggrundsfarven - og KUN baggrundsfarven.

Siden er i ganske alm. HTML og pt. uden stylesheet (da det ikke er nødvendigt endnu).

Det jeg forestiller mig jeg skulle ha', er en 3 - 6 små farve-ikoner, hvorved man som bruger kan ændre baggrundsfarven på hele siden.
Der skal selvf. være en default bg-farve når man kommer ind, og det ville bestemt ikke gøre noget, hvis brugerens efterfølgende valg blev "husket" af en cookie eller noget...
Kunne man erstatte default med et bg-billede gjorde det naturligvis heller ikke noget, men det er nu ikke det væsentlige.

Funktionen skal kunne laves uden brug af database,- da jeg ikke har et klap forstand på det. Så jeg forestiller mig noget med et stylesheet eller et JavaScript - hvis dette overhovedet kan lade sig gøre ??

Funktionen SKAL minimum virke i både IE og FF !

Hvad siger i, - kan jeg glemme alt om det her.. eller hvordan..??
Avatar billede xyborx Nybegynder
06. maj 2005 - 15:49 #1
Umiddelbart ville jeg lave flere stylesheets, som brugeren så kan vælge imellem. I firefox vil der komme et ikon nede i højre hjørne. Jeg ved så ikke om det virker med IE.
Avatar billede roenving Novice
06. maj 2005 - 16:01 #2
Det kan sagtens laves, også uden et stylesheet, men det kunne jo også give mulighed for at ændre andre parametre ...

-- men en cookielæser, en cookieskriver og et onload-script, som aflæser en evt. cookie samt nogle knapper, som ændrer og bruger skriveren kan klare det !-)
Avatar billede Slettet bruger
06. maj 2005 - 16:03 #3
xyborx:

Udemærket ide, men hvordan laver man selve "vælger-funktionen" på siden ?? Og vil brugerens valg så blive "husket" ??
Avatar billede schwarz84 Nybegynder
06. maj 2005 - 16:04 #4
Det er let at ændre baggrundsfarven med Javascript. Denne metode ændrer eksempelvis farven til rød:
document.bgColor = red;
Det virker i både IE og FF.
Avatar billede schwarz84 Nybegynder
06. maj 2005 - 16:06 #5
Man kan lave vælgeren med links, der med onClick-hændelsen ændrer baggrundsfarven. Det er ikke noget problem. Det er lidt mere kompliceret at "huske" valget.
Avatar billede Slettet bruger
06. maj 2005 - 16:11 #6
roenving:

Fedt ! Kan vi mon finde ud af noget med sådan et script ?? Jeg må sige, jeg endnu engang er på bar bund her...
(Knapperne er dog ikke noget problem..)

Jeg ønsker IKKE andre parametre end baggrundsfarven, da alt andet passe til det øvrige design.

Denne funktion skal gøre siden bruger-venlig mht. til temperament omkring mørkt/lyst udtryk. Jeg har derfor lavet alt andet indhold, så det kan passe til begge dele.
Avatar billede Slettet bruger
18. maj 2005 - 17:38 #7
Okay, nu skal jeg bruge noget hjælp !

Har lavet 3 forskellige stylesheet's, med forskellig background-color, og har så fundet noget script på: http://www.alistapart.com/articles/alternate/

Jeg kan ikke få det til at virke - hvad er der galt ??:

<html>
<head>
<title> bla bla... </title>

<link rel=stylesheet type="text/css"  href="/stylesheet/default.css">
<link rel=stylesheet type="text/css"  href="/stylesheet/blue.css">
<link rel=stylesheet type="text/css"  href="/stylesheet/dark.css">

<script type="text/javascript">
function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}

function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
      && a.getAttribute("rel").indexOf("alt") == -1
      && a.getAttribute("title")
      ) return a.getAttribute("title");
  }
  return null;
}

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 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;
}

window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
</script>

</head>

<body>

<a href="#"
onclick="setActiveStyleSheet('default');
return false;">default</a>

<a href="#"
onclick="setActiveStyleSheet('blue');
return false;">blue</a>

<a href="#"
onclick="setActiveStyleSheet('dark');
return false;">dark</a>

</body>
</html>

Alle point går til den der først får dette til at virke korrekt !
Please....
Avatar billede Slettet bruger
18. maj 2005 - 18:44 #8
Har selv fundt fejlen !!

Havde glemt/overset at "title attribute" og "alternate" stylesheet-linket...:

<link rel="alternate stylesheet" type="text/css" href="/stylesheet/dark.css" title="wacky" />
<link rel="alternate stylesheet" type="text/css" href="/stylesheet/blue.css" title="kacky" />
<link rel="alternate stylesheet" type="text/css" href="/stylesheet/default.css" title="macky" />

Nu virker det sgu... hehe...

Hvis i har kommentare er i selvf. velkommen til at berige mig dem.
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