24 svar · 966 visningar · startad av Kalufs
Har sett på vissa sidor (glömt vilka) att de har en länk där man kan stänga av CSS. Hur gör man? Sökt men icke hittat.
Med javascript kan du byta ut CSS-fil. Om du så skapar en helt tom CSS-fil och byter till det borde det bli samma sak som att stänga av CSS.
http://www.alistapart.com/articles/alternate/
http://www.alistapart.com/articles/n4switch/
Tex med JavaScript.
javascript:(function(){for(i=0; i<document.styleSheets.length;i++){document.styleSheets[i].disabled=true;}})()
För att lägga ut länkar kan man göra såhär:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS Toggle</title>
<script type="text/javascript">
window.onload = function(){
for(var i = 0; i < document.styleSheets.length; i++){
var placeHolder = document.getElementById('placeHolder');
var a = document.createElement('a');
a.href = 'javascript:(function(){document.styleSheets['+
i+'].disabled=document.styleSheets['+i+'].disabled?false:true;})();';
placeHolder.appendChild(a);
var aText = document.createTextNode('Toggle CSS ['+i+']');
a.appendChild(aText);
var br = document.createElement('br');
placeHolder.appendChild(br);
}
}
</script>
<style type="text/css">
html { font-weight:bold; }
</style>
<style type="text/css">
html { font-family:sans-serif; }
</style>
</head>
<body>
<p>Test</p>
<div id="placeHolder"></div>
</body>
</html>
:)
Tack Web-Tor och zcorpan.
zcorpan: Testade din kod men fick det inte att fungera. Eftersom jag inte kan det minsta lilla javascript så kopierade jag den rakt av men det gick tydligen inte..?
Hittade en sida som har en länk: http://www.hicksdesign.co.uk
Hans länk "Turn off styling" går till "http://www.hicksdesign.co.uk/?css=off"
Hur fixade han det?
Tacksam för mer hjälp...
Kalufs skrev:
Hur fixade han det?
Inga konstigheter - bara lite fiffigt användande av PHP ;)
Hans sida skapas av ett php-baserat system som genererar stilmallslänken (som i sin ur pekar ut en separat PHP-fil som bygger ihop stilmallen åt honom) beroende på vad som står i URL:en...
"normalt" skapas länken
<link rel="stylesheet" href="/textpattern/css.php?n=default" type="text/css" media="screen" />
Om du lägger med ?css=off genereras <link>-taggen såhär istället:
<link rel="stylesheet" href="/textpattern/css.php?n=off" type="text/css" media="screen" />
Korta svaret är alltså att han genererar sin CSS-fil vid varje anrop utifrån vad som står med som parameter i stilmallsfilens URL med hjälp av PHP.
Okej. Lät läskigt. Men tack för svaret ändå.
Du får byta ut "java script:" mot "javascript:" för att det ska funka. ;)
Lättaste sätt att fixa det med PHP är såhär:
<?php
if($_GET['css'] != 'off'){
echo '<link rel="stylesheet" type="text/css" href="style.css">' . "\n";
}
?>
Sen har du en vanlig länk:
<a href="./?css=off">Stäng av stilmallen</a>
:)
zcorpan: den variabeln följer väl inte med automatiskt? Behövs inte cookies?
zcorpan skrev:
Lättaste sätt att fixa det med PHP är såhär:
<?php if($_GET['css'] != 'off'){ echo '<link rel="stylesheet" type="text/css" href="style.css">' . "\n"; } ?>Sen har du en vanlig länk:
<a href="./?css=off">Stäng av stilmallen</a>:)
Tack!
Skulle man kunna få se ett fullt exempel på detta..? En enkel sida bara.. Får inte till det :/
Ledsen om man är trögfattad :D
shun skrev:
den variabeln följer väl inte med automatiskt? Behövs inte cookies?
Helt rätt - den följer inte med automatiskt.
Vill du ha css="off" att följa med så kan du kan antingen använda cookies (dvs utöka testet i koden ovan till att även kolla en kaka), eller så ser du till att din PHP-kod lägger till URL-parametern css="off" på alla "interna" länkar om css finns med i $_GET (fast med det senare alternativet kommer besökarens val att "köra utan" inte att kommas ihåg (om besökaren inte kopierar en länk som har css="off" i URL:en ;) ) )
Ett tredje alternativ kan vara att kolla i HTTP_REFERER om variablen finns där...kanske :)
zcorpan skrev:
Ett tredje alternativ kan vara att kolla i HTTP_REFERER om variablen finns där...kanske :)
Det finns det ingen mening med, eftersom då kan du lika bra (eller t o m bättre) kolla GET-variabeln istället.
Att sätta en cookie låter dock som den smartaste lösningen.
zcorpan skrev:
Ett tredje alternativ kan vara att kolla i HTTP_REFERER om variablen finns där...kanske :)
Ajo - visst, men eftersom en del elaka proxies/brandväggar/whatever regelmässigt filtrerar bort all information i just HTTP_REFERER för användare som har oturen att passera igenom dem på vägen till ens webbsida, så är det säkrare att lägga den i URL:en (med ungefär samma resonemang som det där om att det inte är 100% garanterat att en cookie verkligen sparas hos besökaren eftersom han kan tänkas ha kakblockering påslagen)
/red: dectgap - du var mer aktivt på hugget än jag inatt :birp
jarvklo, dectgap, zcorpan m.fl...
Kan inte någon vara snäll och snickra ihop ett litet exempel på detta i XHTML med php inkluderat eller vad som nu behövs. Det som är enklast, ni tror fungerar bäst och där minst kunskap (från mig) krävs :) Känner mig helt borta i den här diskussionen!
Det vore väldigt snällt!!
Jag vill bara påpeka att css:en på http://www.hicksdesign.co.uk/?css=off inte alls är avstängd.... utan att han bara tagit bort allt dekorativt...
mv icaaq
icaaq>>> Japp - det var visst någon som antydde precis det lite högre upp i tråden tror jag :P
jarvklo skrev:
Korta svaret är alltså att han genererar sin CSS-fil vid varje anrop utifrån vad som står med som parameter i stilmallsfilens URL med hjälp av PHP.
Kalufs>>> Ursäkta oss förståsigpåare att vi drev ut i en massa tekniskt tjitter-tjatter vid sidan av din egentliga fråga...
Men som du kanske har insett vid det här laget så är detta en fråga som hamnar lite vid sidan av bara "ren" (X)HTML och CSS...
Och ibland triggar vi förståsigpåare igång varandra lite olyckligt när frågor hamnar lite emellan olika tekniker sådär - du får ursäkta oss, det är inte illa ment :bire
Kalufs skrev:
Kan inte någon vara snäll och snickra ihop ett litet exempel på detta i XHTML med php inkluderat eller vad som nu behövs. Det som är enklast, ni tror fungerar bäst och där minst kunskap (från mig) krävs :) Känner mig helt borta i den här diskussionen!
Det vore väldigt snällt!!
Såklart.
Om ingen annan hinner före (eller om ingen ger sig på att förtydliga zcorpans kod, som faktiskt funkar om man bara skriver ihop "java" och "script" i koden (som wF särskrivit utan zcorpans välsignelse ;) ) ) så kommer det en version från mig senare under kvällen - man vill ju hålla sig till ämnet emellanåt också :birp
Om man väljer att göra det genom cookies och PHP är här ett sätt, som använder sig av lite JavaScript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test av CSS-väljare</title>
<?php if(!isset($_COOKIE['css']) || $_COOKIE['css'] != 'on'): ?>
<style type="text/css">
html { background-color: red; }
</style>
<?php endif; ?>
<script type="text/javascript">
function turnCSSOff() {
setCookie("css", "off");
window.location.reload();
}
function turnCSSOn() {
setCookie("css", "on");
window.location.reload();
}
function setCookie(name, value) {
document.cookie = escape(name) + "=" + escape(value);
}
</script>
</head>
<body>
<p>
<a href="#" onclick="turnCSSOff()">Stäng av CSS</a> <br />
<a href="#" onclick="turnCSSOn()">Sätt på CSS</a>
</p>
</body>
</html>
Fast det räcker ju egentligen med att använda ett språk, och då kan man nöja sig med PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test av CSS-väljare</title>
<?php
if(isset($_GET['css']) && in_array($_GET['css'], array('on', 'off'))) {
$_COOKIE['css'] = $_GET['css'];
$useCss = $_GET['css'];
}
if((isset($useCss) && $useCss = 'on') || (!isset($useCss) && (!isset($_COOKIE['css']) || $_COOKIE['css'] != 'on'))): ?>
<style type="text/css">
html { background-color: red; }
</style>
<?php endif; ?>
</head>
<body>
<p>
<a href="<?php echo $_SERVER['REQUEST_URI']; ?>?css=off">Stäng av CSS</a> <br />
<a href="<?php echo $_SERVER['REQUEST_URI']; ?>?css=on">Sätt på CSS</a>
</p>
</body>
</html>
Jag har inte testat skriptet och jag är medveten om problemet med $_SERVER['REQUEST_URI'] eftersom det kan innehålla en query string, men jag hoppas att principen framgår.
Av användarvänlighet borde man gömma länkarna när JavaScript är inaktiverat/inte stöds, annars får man två länkar som inte fungerar... ;) (Eller så kan man falla tillbaka på PHP, det är vilket som.)
Skapa länkarna med js (alltså finns de inte utan js):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test av CSS-väljare</title>
<?php if(!isset($_COOKIE['css']) || $_COOKIE['css'] != 'on'): ?>
<style type="text/css">
html { background-color: red; }
</style>
<?php endif; ?>
<script type="text/javascript">
// <![CDATA[
function turnCSSOff() {
setCookie("css", "off");
window.location.reload();
}
function turnCSSOn() {
setCookie("css", "on");
window.location.reload();
}
function setCookie(name, value) {
document.cookie = escape(name) + "=" + escape(value);
}
window.onload = function(){
var cssLankar = document.getElementById('cssLankar');
if (document.getElementsByTagName('html')[0].tagName == 'html' && document.createElementNS){ // XML
var a1 = document.createElementNS('http://www.w3.org/1999/xhtml','a');
var a2 = document.createElementNS('http://www.w3.org/1999/xhtml','a');
var br = document.createElementNS('http://www.w3.org/1999/xhtml','br');
} else { // HTML
var a1 = document.createElement('a');
var a2 = document.createElement('a');
var br = document.createElement('br');
}
a1.href = 'javascript:turnCSSOff();';
cssLankar.appendChild(a1);
var a1Text = document.createTextNode('Stäng av CSS');
a1.appendChild(a1Text);
cssLankar.appendChild(br);
a2.href = 'javascript:turnCSSOn();';
cssLankar.appendChild(a2);
var a2Text = document.createTextNode('Sätt på CSS');
a2.appendChild(a2Text);
}
// ]]>
</script>
</head>
<body>
<p id="cssLankar"></p>
</body>
</html>