Schrift mit StyleSwitch vergrößern

Grille

Hallo,

Ich habe ein JS geschrieben um verschiedene Styles (Ich brauche es um Schriften zu vergrößern) umzuschalten.

Hier ist mein JS:

PHP

var i = 1;
var styles = 4;


function aa(){


	if (i < styles){
		i++;
	}
	var linkElems = document.getElementsByTagName("link");
	for (var k=0; k<linkElems.length; k++) {
		if (linkElems[k].rel == "stylesheet") {
			linkElems[k].href = 'wp-content/themes/fallseason/style_'+i+'.css';
			break;
		}
	}
}


function a(){
	if (i > 1){
		i--;
	}
	var linkElems = document.getElementsByTagName("link");
	for (var k=0; k<linkElems.length; k++) {
		if (linkElems[k].rel == "stylesheet") {
			linkElems[k].href = 'wp-content/themes/fallseason/style_'+i+'.css';
			break;
		}
	}
}

Alles anzeigen

Funktion "aa()" macht die Schrift größer .. und "a()" macht sie kleiner.

In meinem Wordpress sind oben zwei Buttons um die Schriftgröße zu verändern. Eigentlich funkioniert das auch, nur wird leider das Style wieder zurückgesetzt, sobald man auf irgend einen Button klickt und er die Seite neu läd.

Kennt sich jemand mit Javascript-cookies aus? kann man vielleicht die Einstellung zwischenspeichern?

Oder gibt es für meinen Zweck schon eine Wordpress-Lösung?

Gruß,
Grille

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

marX

Cookies dürften die beste Lösung sein:
SELFHTML: JavaScript / Objektreferenz / document

Grille

Hallo .. hat super geklappt ...

hier für andere die das brauchen:

Das JS:

PHP

var styles = 4;


if (document.cookie) {
	var i = document.cookie;
	setstyle()
}else{
	var i = 1;
	setstyle()
}


function aa(){
	if (i < styles){
		i++;
	}
	setstyle()
}


function a(){
	if (i > 1){
		i--;
	}
	setstyle()
}


function setstyle(){
	var linkElems = document.getElementsByTagName("link");
	for (var k=0; k<linkElems.length; k++) {
		if (linkElems[k].rel == "stylesheet") {
			linkElems[k].href = 'wp-content/themes/fallseason/style_'+i+'.css';
			document.cookie = i;
			break;
		}
	}
}

Alles anzeigen

Und auf die Buttons kommt entweder: onclick="aa();" für "styles vorblättern" ... oder onclick="a();" für "styles zurückblättern"

Gruß, Grille

marX

Kleiner Tipp: "i" als globale Variable könnte dir irgendwann auf den Kopf fallen, falls du mal mehr JavaScripte in deine Seite einbaust. Nimm da lieber sprechende Namen, auch für die Funktionen. (Besser wäre natürlich, das ganze objektorientiert aufzuziehen, aber das ist für nen Anfänger sicher etwas zu hoch ;-))

Alphawolf

Barrierefreier wäre es natürlich, einfach den Wert per GET zu übertragen, also über die URL domain.de/?fsize=1 etc...

Und da ich so einen Fontsize-Switcher auch gerade gestern brauchte, hier meine Lösung, die ohne verschiedene CSS-Dateien auskommt, basierend auf jQuery:

Code

jQuery(document).ready(function(){
	var contentarea = jQuery('div#content');
	var num_ee = contentarea.css('font-size');
	var num_e = parseFloat(num_ee, 10);
	jQuery("a.fchange").click(function() {
		var currentSize = contentarea.css('font-size');
		var num = parseFloat(currentSize, 10);
		var unit = currentSize.slice(-2);
		if (this.id == 'linkLarge'){
			num = num * 1.2;
		} else if (this.id == 'linkSmall') {
			num = num / 1.2;
		} else if (this.id == 'linkDefault') {
			num = num_e;
		}
		contentarea.css('font-size', num + unit);
   		return false;
	});
});

Alles anzeigen

Ohne Cookie-Support zwar, aber der wäre mit jQuery ja ein Klacks.

HTML:

Code

<a class="fchange" id="linkLarge" href="javascript:void(0);"><img src="uploads/tf/text-bigger.gif" alt="Größere Schriftgröße" title="Größere Schriftgröße" border="0" /></a>
<a class="fchange" id="linkSmall" href="javascript:void(0);"><img src="uploads/tf/text-smaller.gif" alt="Kleinere Schriftgröße" title="Kleinere Schriftgröße" border="0" /></a>
<a class="fchange" id="linkDefault" href="javascript:void(0);"><img src="uploads/tf/text-default.gif" alt="Normale Schriftgröße" title="Normale Schriftgröße" border="0" /></a>

Grille

Hallo ... eigentlich bin ich ja mit meinem JS, welches jetzt direkt in meiner header.php hinter dem BODY-Tag steht, ganz zufrieden ... da ich es etwas angepasst habe, will ich es nochmal zeigen:

PHP

<body>


<script type="text/javascript">
	var url='<?php bloginfo('stylesheet_url')?>';
	var styles = 4;
	
	if (document.cookie) {
		var iihhi = document.cookie;
		setstyle();
	}else{
		var iihhi = 1;
		setstyle();
	}
	
	function fontbigger(){
		if (iihhi < styles){
			iihhi++;
		}
		setstyle();
	}
	
	function fontsmaler(){
		if (iihhi > 1){
			iihhi--;
		}
		setstyle();
	}
	
	function setstyle(){
		var linkElems = document.getElementsByTagName("link");
		for (var ka=0; ka<linkElems.length; ka++) {
			if (linkElems[ka].rel == "stylesheet") {
				linkElems[ka].href = url.replace(".css", "_"+iihhi+".css");
				document.cookie = iihhi;
				break;
			}
		}
	}	
</script>


<div id="outer">


	<div id="styleswitch">
		<div id="aa" onclick="fontbigger();">&nbsp;</div>
		<div id="a" onclick="fontsmaler();">&nbsp;</div>
	</div>

Alles anzeigen

doch leider wird mir das layout kaputt gemacht, sobald ich zB. aus dem Admin-Bereich den Bolg ansehen will. Als CSS steht dann zB. sowas drin:

PHP

<link
media="screen"
type="text/css" href="http://gvb/wp-content/themes/gvb/style_1; wordpress_test_cookie=WP+Cookie+check; wordpress_logged_in_117d39069ace4d906f1a0a5535b39f46=admin%7C1221984518%7Cba81add5cfe1f406a28afbf06a87b6a8.css"
rel="stylesheet"/>

Weis jemand was für ein Salat der da reinschreibt und wie man das abstellen kann?
Gruß,
Grille

Grille

Habe den Fehler gefunden:

WP benutzt im Adminmodus auch Javascript-cookies. daher schreibt er in das cookie welches die Schriftgröße speichern soll noch andere Sachen.

An erster Position steht aber immer noch die Schriftgrößeneinstellung ... daher liest das JS jetzt die erste Stelle des Cookies aus .. mit "charAt(0);"

PHP

</head>
<body>


<script type="text/javascript">
	var url='<?php bloginfo('stylesheet_url')?>';
	var styles = 4;
	
	if (document.cookie) {
		var iihhi = document.cookie;
		iihhi = iihhi.charAt(0);
		setstyle();
	}else{
		var iihhi = 1;
		setstyle();
	}
	
	function fontbigger(){
		if (iihhi < styles){
			iihhi++;
		}
		setstyle();
	}
	
	function fontsmaler(){
		if (iihhi > 1){
			iihhi--;
		}
		setstyle();
	}
	
	function setstyle(){
		var linkElems = document.getElementsByTagName("link");
		for (var ka=0; ka<linkElems.length; ka++) {
			if (linkElems[ka].rel == "stylesheet") {
				linkElems[ka].href = url.replace(".css", "_"+iihhi+".css");
				document.cookie = iihhi;
				break;
			}
		}
	}	
</script>


<div id="outer">


	<div id="styleswitch">
		<div id="aa" onclick="fontbigger();">&nbsp;</div>
		<div id="a" onclick="fontsmaler();">&nbsp;</div>
	</div>

Alles anzeigen

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Schrift mit StyleSwitch vergrößern

Jetzt mitmachen!