JavaScript und CSS für Textgrößen-Switcher

B

bibo

0
Hi,

ich möchte auf meiner Seite einer Switcher einbauen, um den Text zwischen klein, normal und groß umschalten zu können. (Die Scripts befinden sich weiter unten ...) Das alles funktioniert nun ganz gut, aber nur auf der index-Seite. Ich habe noch einen iFrame, für dem das Umschalten nicht übernommen wird. Irgendwie muss ich doch in das Script dazu bekommen, auch den iFrame zu übernehmen ........


So lade ich die alternativen CSS Stylesheets in das index-File:

<link rel="alternate stylesheet" type="text/css" href="format/textsmall.css" title="small" />
<link rel="alternate stylesheet" type="text/css" href="format/textlarge.css" title="large" />


Das JavaScript, welches ich in einer externen Datei eingebunden habe:

function setActiveStyleSheet(title)
{
var i, a;

for (i=0; (a = document.getElementsByTagName("link")); i++)
{
if (a.getAttribute("rel").indexOf("style") != -1 &&
a.getAttribute("title"))
{
a.disabled = true;
if (a.getAttribute("title") == title)
{
a.disabled = false;
}
}
}
}


Mit folgender Anweisung übergebe ich ich "Klick"

<a onclick="setActiveStyleSheet('small'); return false;" href="#"><img border="0" src="images/small.gif" alt="small" /></a>
<a onclick="setActiveStyleSheet(''); return false;" href="#"><img border="0" src="images/normal.gif" alt="normal" /></a>
<a onclick="setActiveStyleSheet('large'); return false;" href="#"><img border="0" src="images/large.gif" alt="large" /></a>



P.S.: Ich habe keine Ahnung von JavaScript
 
Vielleicht einfach den Code auch in der HTML-Datei einbinden, die im IFrame angezeigt wird...?
 
Hi,

nein, dass bringt nichts, da dann der "klick" übergeben werden muss. Man muss (soweit hat es mir schon gesagt) die Ziele " for (i=0; (a = document.getElementsByTagName("link")); i++)" so umändern, dass auch die Seite im iFrame übernommen wrd,
 
Code: 
function setActiveStyleSheet(title)
{
var i, a, b;

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;
}
}
}
for (i=0; (b = window.frames.iframename.document.getElementsByTagName("link")[i]); i++)
{
if (b.getAttribute("rel").indexOf("style") != -1 && b.getAttribute("title"))
{
b.disabled = true;
if (b.getAttribute("title") == title)
{
b.disabled = false;
}
}
}
}
"iframename" musst du durch den Namen des Iframes ersetzen.
Du musst aber trotzdem die CSS Styles auch in der html im Iframe einbinden.
 
hm machs doch lieber mit PHP - du musst bedenken, dass 1) ein JavaScript laenger braucht und 2) nicht jeder JS aktiviert hat.

Ich wuerds so machen:
Die Datei heisst zB index.php.

PHP: 
<?php
echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>";
?>
<!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>blabla</title>
<meta http-equiv="..." content="..." />
<?php
$HTTP_GET_VARS["css"] = "large";
    if (isset($HTTP_GET_VARS["css"])) {
        $css = $HTTP_GET_VARS["css"];
       }
    if (!isset($css)) {
        $style = "fontsize_normal.css";
    } else {
            switch($css){
                case "large":
                    $style = "fontsize_large.css";
                    break;
                case "normal": 
                    $style = "fontsize_normal.css";
                    break;
                case "small":
                    $style = "fontsize_small.css";
                    break;
               }
    }
echo "<link rel=\"stylesheet\" href=\"./css/\".$style.\" type=\"text/css\" />";
?>
</head>

<body>
<-- styleselector -->
<a href="./index.php?css=large>grosse Schrift</a>
<a href="./index.php?css=normal>normale Schrift</a>
<a href="./index.php?css=small>kleine Schrift</a>
<-- /styleselector -->
....

hm habs nicht getestet aber so muesste es funzen... auch ohne JS ;)
den StyleSelector kannst du nattl auch mit <option> - Tags oder so etwas huebscher machen, aber das is ja nur mal als Anregung gemeint...

Vorteil: du kannst erstens den php-Teil als include Datei irgendwo speichern und immer wieder verwendern, zweitens ist $style dann im ganze Dokument, auch in iframes (von denen hab ich nicht wirklich Ahnung) abruf- und vor allem einsetzbar...

LG ~chrisi~

PS: merkt man, dass ich fuer JS nicht viel ueberhab? ;)
 
@ chrisi
Der Clou bei der Variante mit JS ist, dass die Seite nicht neugeladen werden muss, um die Schriftgröße zu ändern. Ich weiß nicht, ob das bei obigen Schnipsel so ist, aber es ist auf jeden Fall möglich, auch ohne Reload die Schriftgröße zu ändern.
 
@ Lars:
hm schon moeglich, bei obigen "Schnipseln" (naja ist eigentlich der gesamte benoetigte HTML - Head) muss sie zwar neu geladen werden, aber ich find das weniger stoerend, als ne Seite, die bei deaktiviertem JavaScript nicht richtig funktioniert oder die beim Laden mehr Zeit als unbedingt notwendig braucht...
Es ist mir zwar klar, dass es hier um JS ging, aber irgendwie sprechen fuer mich persoenlich mehr Gruende fuer Dokumente, bei denen reines HTML transferiert wird - deshalb wollt ich nur mal sagen, dass es auch so geht ;)

LG ~chrisi~
 
@ chrisi
Das war mir schon klar. Ich setze selbst lieber serverseitige Sprachen ein, als clientbasierte. Bei kleineren Seiten macht das auch Sinn. Nur wenn ich eine Seite mit z.B. einer Tabelle laden möchte, die sehr groß ist, ist es doch ein merklicher Unterschied, ob ich beim Laden 5s länger warte und die Schriftgröße nach Belieben ändern kann oder ob ich bei jeder Änderung 20s auf die Seite warten muss.

Aber es gibt halt überall pro und kontra und man muss halt je nach Verwendungszweck abwägen.

Gruß aus dem verregneten Bremerhaven,
Lars

P.S.: Java und JavaScript nicht verwechseln! Auch nicht aus Versehen... ;)
 
Okay, korrigiert ;)

Ja, stimmt auch wieder... aber bei PHP kann man zB auf der von der Dokumentgroesse eher klein gehaltenen index.php den Wert fuer $style festlegen, und dann dann entweder diesen oder $css ja rein theoretisch ueber die URL auf die daraufhin aufgerufene, erwaehte grosse tabelle.php uebertragen - somit wird die Seite dann in der voreingesstellten Schriftgroesse auch nur einmal geladen... (...nur mal so als Vorschlag, wenn wir schon beim Theorethisieren sind ;) ...wenn man danach noch die Groesse aendern will, muss man eben reloaden, darum kommt man halt nicht rum)
Aber by the way: eigentlich unterstuetzten doch die meisten Browser [Cntr] + [+] und [Cntr] + [-] zum Vergroessern und Verkleinern der Schrift... ohne Reload! ;)

liebe gruesse aus einem leider noch immer schwuel-wettrigen Kaff bei Wien :)
 
Original von chrisi
die meisten Browser [Cntr] + [+] und [Cntr] + [-] zum Vergroessern und Verkleinern der Schrift... ohne Reload! ;)
Zum Vergrößern anklicken....
Ja schon, dabei geht aber meistens das Layout ***** (sonstwohin) und diese Funktion kennen auch nicht alle User. Eine Funktion direkt auf der Seite kommt den meisten Usern daher sehr gelegen.
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben