Hackerboard Wiki HaboBlog
Hackerboard bei Facebook Hackerboard bei Google+ Hackerboard bei Twitter

[HaBo]

 
(Web-) Design und webbasierte Sprachen Tipps & Tricks, Designabgleich, HTML & Javascript, Flash, ASP, PHP, Perl/CGI...

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

Diskussion: JavaScript und CSS für Textgrößen-Switcher im Forum (Web-) Design und webbasierte Sprachen, in der Kategorie Web, Network & Multimedia Palace; Anzeige Hi, ich möchte auf meiner Seite einer Switcher einbauen, um den Text zwischen klein, normal und groß umschalten zu ...

Antwort
Alt 28.08.04, 13:44   #1 (permalink)
 
Registriert seit: 20.08.04
bibo Leistung: Facit NTK
Likes: 0
Standard JavaScript und CSS für Textgrößen-Switcher

Anzeige

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:

[I]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

bibo ist offline   Mit Zitat antworten
Alt 28.08.04, 19:49   #2 (permalink)
 
Registriert seit: 12.05.04
Lars007 Leistung: Facit NTK
Lars007 eine Nachricht über ICQ schicken
Likes: 0
Standard

Vielleicht einfach den Code auch in der HTML-Datei einbinden, die im IFrame angezeigt wird...?
Lars007 ist offline   Mit Zitat antworten
   
HaBOT
 
- Anzeige -

Werbung ist gerade online    
Alt 28.08.04, 23:46   #3 (permalink)
Themenstarter
 
Registriert seit: 20.08.04
bibo Leistung: Facit NTK
Likes: 0
Standard

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]); i++)" so umändern, dass auch die Seite im iFrame übernommen wrd,
bibo ist offline   Mit Zitat antworten
Alt 29.08.04, 14:04   #4 (permalink)
Administrator
 
Benutzerbild von Mackz
 
Registriert seit: 02.10.01
Mackz Leistung: Pentium IMackz Leistung: Pentium I
Likes: 30
Standard

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.
__________________
RL sux big time... auch 2012!

Deleting pr0n is like killing your best friend

[HaBo] bei Facebook - Werde Fan
Mackz ist offline   Mit Zitat antworten
Alt 29.08.04, 16:12   #5 (permalink)
 
Registriert seit: 28.05.04
chrisi Leistung: Facit NTK
Likes: 0
Standard

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-Code:
<?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 ist offline   Mit Zitat antworten
Alt 29.08.04, 16:49   #6 (permalink)
 
Registriert seit: 12.05.04
Lars007 Leistung: Facit NTK
Lars007 eine Nachricht über ICQ schicken
Likes: 0
Standard

@ 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.
Lars007 ist offline   Mit Zitat antworten
Alt 29.08.04, 18:16   #7 (permalink)
 
Registriert seit: 28.05.04
chrisi Leistung: Facit NTK
Likes: 0
Standard

@ 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 ist offline   Mit Zitat antworten
Alt 29.08.04, 19:35   #8 (permalink)
 
Registriert seit: 12.05.04
Lars007 Leistung: Facit NTK
Lars007 eine Nachricht über ICQ schicken
Likes: 0
Standard

@ 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...
Lars007 ist offline   Mit Zitat antworten
Alt 29.08.04, 20:06   #9 (permalink)
 
Registriert seit: 28.05.04
chrisi Leistung: Facit NTK
Likes: 0
Standard

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
chrisi ist offline   Mit Zitat antworten
Alt 29.08.04, 20:22   #10 (permalink)
 
Registriert seit: 12.05.04
Lars007 Leistung: Facit NTK
Lars007 eine Nachricht über ICQ schicken
Likes: 0
Standard

Zitat:
Original von chrisi
die meisten Browser [Cntr] + [+] und [Cntr] + [-] zum Vergroessern und Verkleinern der Schrift... ohne Reload!
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.
Lars007 ist offline   Mit Zitat antworten
Antwort
   
- Anzeige -

Werbung ist gerade online    

[HaBo] » Web, Network & Multimedia Palace » (Web-) Design und webbasierte Sprachen » JavaScript und CSS für Textgrößen-Switcher
Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks sind aus
Pingbacks sind aus
Refbacks sind aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
JavaScript ein Sicherheitsrisiko? odigo (In)security allgemein 3 30.03.08 01:43
soundkarten switcher rob-otter Code Kitchen 0 27.10.06 21:49
JavaScript Chris Programmiersprachen 0 17.12.02 18:59
JavaScript-Einbindung... WIE? boppy (Web-) Design und webbasierte Sprachen 0 08.07.02 22:35
JavaScript RedAngel (Web-) Design und webbasierte Sprachen 2 27.11.01 13:39


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61