Legge til css via en link

corsa91 · 15. desember 2010

Hei

Jeg har lagd en side men to css. Jeg vet hvordan man bytter cssen men finnes det en enklere måte å skifte css uten å gå via vis-side(stil). Jeg har sett noen sider der du trykker inn så får du annen css

Linker til de som har gjort:

http://www.pasientreiser.no/#

http://skriveriet.cappelendamm.no/minside.html

j-- · 15. desember 2010

Jeg har litt problemer med å forstå hva du mener.

Har du laget en side med to CSS-filer?

Hvor tar du "vis side" -> "stil"?

Hva er det egentlig du vil utføre?

corsa91 · 15. desember 2010

Jeg har litt problemer med å forstå hva du mener.

Har du laget en side med to CSS-filer?

Hvor tar du "vis side" -> "stil"?

Hva er det egentlig du vil utføre?

Jepp jeg har lagd en side med to css filer:

Her er filene som jeg har lagt inn i htmlen

Jeg vil ikke gå inn og skifte cssen via vis menyen og trykke stil og så trykke navnet

Det jeg vil utføre er å skifte til css via en knapp på siden. Se bilde

PHPdude · 15. desember 2010

cvłñ: Han har nok flere alternative stilark, som det er meningen at brukerne skal få velge mellom. De fleste nettlesere har innebygd valgmulighet for dette (bortgjemt) i "Vis"-menyen.

Trådstarter: Tror du kan finne løsninger gjennom et Google-søk som dette:

http://www.google.com/search?q=alternate+stylesheet+switcher

corsa91 · 15. desember 2010

Jepp. Men finnes det noen andre måter. ser her: http://www.ecst.csuchico.edu/~bertucci/csci245/styleswitcher.htm

men skjønner ikke helt hva jeg skal legge inn i htmlen?

Dimethyltryptamine · 15. desember 2010

tror dette er det samme som du linket til: http://javascript.about.com/library/blswitch.htm

men litt enklere forklart.

InsertNumLock · 15. desember 2010

I headeren legger du til standard css fila.

Så kopierer du den og skifter navnet på den til alt1. Så legger du til denne også.

I tillegg til at du legger til en tredje css fil som har en annen stil.

eksempel under. fil en og to er samme, fil 3 er alternativet.

<link href="/css/main.css" rel="stylesheet"type="text/css" title="main" media="screen" />
<link href="/css/alt1.css" rel="alternate stylesheet"type="text/css" title="alt1" media="screen" />
<link href="/css/alt2.css" rel="alternate stylesheet"type="text/css" title="alt2" media="screen" />

Legg så til følgende kode i head:

<script type="text/javascript">
function changeStyle(title) {
var lnks = document.getElementsByTagName('link');
for (var i = lnks.length - 1; i >= 0; i--) {
if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title')) {
lnks[i].disabled = true;
if (lnks[i].getAttribute('title') == title) lnks[i].disabled = false;
}}} </script>

og til slutt så legger du knappen som skifter stil en ønsket plass:

<span onclick="changeStyle('alt2')">Skift stilark</span>

Edit: Forøvrig samme som lordbost linker til.

Endret 15. desember 2010 av Hille

corsa91 · 15. desember 2010

det fungerer ikke. Får bare uten stilark. Har endret slik:


<link href="sur1.css" rel="stylesheet"type="text/css" title="Standard CSS" media="screen" /> 
<link href="sura1.css" rel="alternate stylesheet"type="text/css" title="HÃ¸ykontrast CSS" media="screen" /> 
<link href="sur1.css" rel="alternate stylesheet"type="text/css" title="Standard CSS" media="screen" /> 
[/Code]

Ingen endring på denne:

[Code]<script type="text/javascript">
function changeStyle(title) {
var lnks = document.getElementsByTagName('link');
for (var i = lnks.length - 1; i >= 0; i--) {
if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title')) {
lnks[i].disabled = true;
if (lnks[i].getAttribute('title') == title) lnks[i].disabled = false;
}}}
</script>
[/Code]

Endring her:

[Code]
<span onclick="changeStyle('sura1')">Skift stilark</span> [/Code]

InsertNumLock · 15. desember 2010

Jeg gjorde litt forandringer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" type="text/css" href="default.css" title="default" />
<link rel="alternate stylesheet" type="text/css" href="style1.css" title="style1" />
<script type="text/javascript" src="switch.js"></script>
<title>Stilark switch</title> 
</head> 
<body> 
<center>
<a href="#" onclick="setActiveStyleSheet('default'); return false;">Standard</a>
<a href="#" onclick="setActiveStyleSheet('style1'); return false;">Grønn</a>
</center>
</body>
</html>

og legg til dette i en fil du kaller switch.js

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

Da blir det sånn som dette http://hillefoto.no/html/styleswitch/

Dimethyltryptamine · 15. desember 2010

EDIT:

Ignorer denne posten.

Endret 15. desember 2010 av lordbost

corsa91 · 15. desember 2010

Det fungerer fra ene til den andre men ikke motsatt. Trenger jeg å legge inn titelen på den andre også opppi den siste

InsertNumLock · 15. desember 2010

Fikk det heller ikke til med bare en knapp. Derfor jeg prøvde alternativet med 2 knapper.

Men du ønsker kanskje bare 1 knapp?

corsa91 · 15. desember 2010

Jeg har bare lagt inn det:

<span onclick="changeStyle('sura1')">Skift stilark</span>

men vis jeg legger inn <span onclick="changeStyle('sura1')">Skift stilark</span>

igjen med annet navn så skal det gå ikkesant?

Dimethyltryptamine · 15. desember 2010

Den andre knappen blir vel slik:

<span onclick="changeStyle('sur1')">Skift stilark</span>

corsa91 · 15. desember 2010

Det fungerte med kan jeg endre skirften på den. Siden det er høykontrast så er den ikke synlig. Alt er svart. hvordan skal jeg gjøre den hvit

InsertNumLock · 15. desember 2010

<a href="#" onclick="changeStyle('sur1'); return false;">Standard</a>

<a href="#" onclick="changeStyle('sura1'); return false;">Høykontrast</a>

Hmm.. kom på at den er hvit hele tiden da.

Du må ta å sette opp en egen klasse i den css fila som inneholder høykontrast innstillingene.

Legg til følgende i høykontrast:

a.hvit {
color: #ffffff;
}

og skift til

<a href="#" onclick="changeStyle('sur1'); return false;">Standard</a>

<a class="hvit" href="#" onclick="changeStyle('sura1'); return false;">Høykontrast</a>

Endret 15. desember 2010 av Hille

corsa91 · 15. desember 2010

hvordan skal jeg få de ut som linker det kommer ikke noe strek eller noe opp

Får bare ut som vanlig skrift uten noe. men klikker jeg så går den.

<h5><span onclick="changeStyle('HÃ¸ykontrast CSS')">HÃ¸ykontrast</span>

<span onclick="changeStyle('Standard CSS')">Vanlig</span> </h5>

Endret 15. desember 2010 av corsa91

InsertNumLock · 15. desember 2010

Bruk de jeg lagte til i posten over.

Edit: Om det er vanskelig å forstå hva jeg mener så har jeg lag til koden her og http://hillefoto.no/html/styleswitch/

Endret 15. desember 2010 av Hille

Legge til css via en link

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer