Fontsizer JS - wie geht's?

[Iller13]

Ahoi zusammen,
ich würde gerne das Fontsizer JS von OG einbauen. Das hier: http://forum.phpwcms.org/viewtopic.php? ... 29#p105025
Des läuft aber irgendwie nicht bzw. vergesse ich mit Sicherheit etwas, was vermutlich aber nirgendwo dokumentiert ist.

Also, die beiden *.js Dateien lade ich in ein Verzeichnis, z.B. ...template/inc_js
Anschließend erstelle ich in einer Vorlage im "Haupt" einen DIV-Container: <div id="fontsizer"></div> und
einen DIV-Container der da heißt: <div id="content">{CONTENT}</div>
Im Frontend-CSS positioniere ich mir die DIVs an gewünschte Stelle.
Soweit so gut, nun sieht das auf der Seite bei mir ungefähr so aus:
• A-
• A=
• A+

Nun zu den Problemen:
Stimmt das, was ich oben geschrieben habe?
Warum schaut das so aus und nicht A A A in verschiedenen Größenabstufungen? (Übrigens auch in der beigelegten index.html)
Wie und wo muss ich im CSS die Schriften definieren? Mit em als Größe ist klar, aber welche Klassen verändere ich? (Vielleicht hat ja jemand ein Beispiel CSS?)

Hoffe ihr könnt mir helfen!

Beste Grüße
13

[flip-flop]

Was für eine CMS-Version verwendest du?
Achtung: Der Umgang mit Mootools hat sich in neueren Versionen geändert. -> Init Mootools Library

Daher ist

Also, die beiden *.js Dateien lade ich in ein Verzeichnis, z.B. ...template/inc_js

sicher nicht richtig.

Knut

[nameless1]

die erzeugung der a+ a= und a- spricht doch schonmal dafür das es funktioniert.
die unterschiedlich großen buchstaben mußt du dir wohl selbst zusammen basteln.

gruß.

nml

[flip-flop]

Zusammengefasst für MooTools V1.2.x -> Dynamische Schriftgrößenänderung

Knut

[Iller13]

Hallo zusammen!
Dankeschön für eure antworten, ich werde es hoffentlich im Laufe des Tages testen können!
Werde mich dann nochmals dazu melden!

Beste Grüße13

[Iller13]

Ich bekomme folgende Fehlermeldung rein:

Code: Select all

Meldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.
Zeile: 80
Zeichen: 13
Code: 0
URI: http://www.XXXXXXXX.de/cms/template/lib/mootools/plugin-1.2/mootools.fontsize.js

???

Grüßle 13

[Iller13]

Gibt's schon Neuigkeiten zwecks dem Fehler?

[flip-flop]

Ja,

Fehlerkorrektur 12.01.2011 KH: Conversion from mootools 1.11 to mootools 1.2
* Cookie.set(key, value[, options]); ->Cookie.write(key, value[, options]);
* Cookie.remove(cookie[, options]); -> Cookie.dispose(cookie[, options]);

Im wiki geändert: Dynamische Schriftgrößenänderung

Knut

[Iller13]

Hi Knut!
Leider geht's bei mir noch immer nicht.
Ich bekomme zwar nun die Darstellung der AAAs in verschiedenen Größen, diese aber doppelt, also 2 mal 3 As hintereinander und eine Reaktion zeigt der Content auch noch immer nicht. Hier mal ein Auszug aus meiner Vorlage:

Code: Select all

<div class="top">
<!-- JS: fontsize -->
<div id="fontsizer"></div>
</div>

<div id="content">{CONTENT}</div>

OK, ich habe gerade festgestellt, so würde es gehen, wobei die sechs As immer noch da sind:

Code: Select all

<div class="top">
<!-- JS: fontsize -->
<div id="fontsizer"></div>
</div>

<div id="content">DIES IST EIN TEST</div>

</div>

Muss dann der Content in die Vorlage?

Beim klicken auf das mittlere A erhalte ich auch noch folgende Fehlermeldung:

Code: Select all

Details zum Fehler auf der Webseite

Meldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.
Zeile: 1
Zeichen: 39694
Code: 0
URI: http://ajax.googleapis.com/ajax/libs/mootools/1.2/mootools-yui-compressed.js

?!?

Grüße
13

[flip-flop]

Weshalb die Buchstaben bei dir doppelt erscheinen weiß ich nicht.
Ich würde mit Firebug prüfen was dort auf der Seite im Argen liegt.

Der JS-Fehler taucht nur im IE auf (wo auch sonst).

Bitte etwa bei Zeile 90 auskommentieren:

Code: Select all

			$( fsize_section ).setStyle('');

nach

Code: Select all

//			$( fsize_section ).setStyle('');

So funktioniert das Script bei mir unter Windows ohne Probleme im Opera, IE und FF.

Z.B. gerade testweise eingebaut: kw-hamm.de

Code: Select all

<!-- JS: fontsize --><div class="fs"><div id="fontsizer"></div></div>

CSS:

Code: Select all

/* FONTSIZER ------------------------------- */
.fs {
    font-size: 1.0em;
    float: right;
    top: 0px;
    padding: 0 30px 0 0;
}
.fs a {
    cursor:pointer;
    text-decoration: none;
}
.fs .smaller {
    font-size: 11px;
    padding-right: 3px;
}
.fs .bigger, .fs .larger {
    font-size: 18px;
    padding-left: 2px;
}
.fs .normal {
    font-size: 15px;
    padding-left: 2px;
    padding-right: 3px;
    font-weight: bold;
}

Knut