Script und Einbindung Für Sehbehinderte gesucht Teil 2

Marcolino · 7. Januar 2012

@ zwoemti-Mario,

ich kann mich Bernie nur anschließen: SUPER-ARBEIT!
Mir gefällt haargenau so wie Du es gemacht hast.
Du sagtest "es ist noch nicht ganz fertig?"
Was stört DICH denn noch?

wegen Deinem Bild: Hm, Ist meen Footer `ne Bremse? Oder die Besucherzähler? Oder das mitlaufende Menü?

Danke auf jeden Fall für Deine Belehrung, die Hinweise und das TUT.

@ pcssa:

Du hast Recht! Eigentlich logisch. Ich denke dass werde ich im nächsten Urlaub
mal ausprobieren. Momentan geht`s nicht: Das neue Jahr hat mich kalt gepackt.
ABER WIE GESAGT: DAS WAS MARIO DA ZUSAMMENGESTELLT HAT,
GEFÄLLT MIR DICKE.

Danke Euch allen!

Marcolino · 7. Januar 2012

@ zwoemti:

kleener "fehler" auf http://hilfe.unofficialwsx5.de/:

"BS"? BLAUSCHWARZ? - Es wird BLAU/GELB benötigt, like:

Spoiler anzeigen

....

zwoemti · 7. Januar 2012

War ja auch nicht fertig

ich denke bei dir die Lupen sollte man drin lassen so kann man mit der Lupe vergrößern und mit der anderen Auswahl die Farben wechseln...bei einem Seitenwechsel wird die Farbe gespeichert und die Schriftgröße geht wieder auf normal zurück.

Die Größen musst du selbst erarbeiten da hab ich keine Ahnung.

Ich schreib dir hier mal alles rein was ich drin habe auf der Seite....

also erstmal alle Dateien im Head einbinden...ich habe hier Ordner gewählt...

Code

<script src="js/jquery.cookie.js" type="text/javascript"></script>
<script src="js/jquery.textresizer.js" type="text/javascript"></script>
<script src="js/jquery.autolineheight.js" type="text/javascript"></script>
<script src="js/jqem-uncompressed.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style/textsize.css" media="screen" />

Dann die drei Scripte um sie anzusprechen...

Code

<script type="text/javascript">
$(function() {
$('.ff1 ,.fs20 ,.ff2 ,.fs18').autolineheight({
minWidth : 19,
minLineHeight : 0.9,
ratio : .02
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
var contentarea = jQuery('.ff1 ,.fs20 ,.ff2 ,.fs18');
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;
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#textsizer-embed a").textresizer({
target : ".ff1 ,.fs20 ,.ff2 ,.fs18 ,.cf2 ,.cb2 ,.cf0",
type : "css",
sizes : [
// Small. Index 0
{
"font-size" : "12px",
"background" : "transparent",
"color" : "black",
},
// Medium. Index 1
{
"font-size" : "20px",
"color" : "green",
"background" : "black",
"margin" : "auto"
},
// Large. Index 2
{
"font-size" : "20px",
"color" : "white",
"background" : "black"
},
// Larger. Index 3
{
"font-size" : "30px",
"color" : "yellow",
"background" : "blue"
}],
selectedIndex : 1
});
});
</script>

Alles anzeigen

Im letzten wird die Schriftgröße und Farbe festgelegt.... das ist nen Haufen Javascript...

Dann kommen die Buttons bei der Gestaltung des Templates... im neuen ist das per css (textsize.css) gestaltet kannst du natürlich ändern so wie du es willst.

größer - kleiner - Standard

Code

<a class="fchange" id="linkLarge" href="javascript:void(0);"><img src="bilder/plus.png" alt="Größere Schriftgröße" title="Größere Schriftgröße" border="0" /></a>
<a class="fchange" id="linkDefault" href="javascript:void(0);"><img src="bilder/x.png" alt="Normale Schriftgröße" title="Normale Schriftgröße" border="0" /></a>
<a class="fchange" id="linkSmall" href="javascript:void(0);"><img src="bilder/minus.png" alt="Kleinere Schriftgröße" title="Kleinere Schriftgröße" border="0" /></a>

Farbenauswahl mit Größenangabe

Code

<div id="textsizer-embed">
<ul class="textresizer">
<li><a href="#nogo" class="small-text" title="zurücksetzen">Reset</a></li>
<li><a href="#nogo" class="medium-text" title="schwarz-gelb">SG</a></li>
<li><a href="#nogo" class="large-text" title="schwarz-weiß">SW</a></li>
<li><a href="#nogo" class="larger-text" title="blau-gelb">BG</a></li>
</ul>
</div>

Die Dateien hab ich mal angehangen da es zuviel Code zum rauskopieren sonst wird...
Eine Seite unsichtbar machen und dort ein HTML Widget einfügen und die Dateien anfügen so sind sie immer beim Projekt dabei. Unter Eigenschaften der Seite die Seite natürlich noch aus der Sitemap ausbinden.

Marcolino · 9. Januar 2012

@ zwoemti: ähm, will mich nun ranwagen an Deine Codes...
Habe sie auch halbwegs verstanden und wie ich`s handhaben muss.

Eine Frage noch:
Bei dem Script für die Größenveränderung kann ich erkennen wo ich BUTTON-Bilder
(wie z.B. die Lupen) einfügen kann.
Doch: Wo kann ich dasselbe für die Farbänderungen tun? Würde dafür ebenso gerne
Bilder verwenden.

Habe ich was übersehen?

zwoemti · 9. Januar 2012

in den a tag kommt der img tag wie vorher auch

Den Namen Reset SG und so weiter durch den img tag ersetzen... also

Code

<a href="#nogo" class="medium-text" ><img src="bilder/schwarz-gelb.png" alt="schwarz-gelb" title="schwarz-gelb" border="0" /></a></li>

das class kannst du auch weglassen bzw. ändern um Formatierungen anzuwenden oder auch nicht.

Marcolino · 5. Juni 2012

Hui,
entschuldigt das ich dieses Thema nochmal ausgrabe, aber ich habe ein kleenes Script Problem.
Alles bezieht sich noch auf den obrigen Code von Zwoemti.
Er läuft momentan testweise auf:

Spoiler anzeigen

Läuft eigentlich alles wie gewollt (siehe: Header rechts)
nur DER LETZTE EFFEKT (= TV mit Farbbalken) sollte RESET-Funktion sein.
Also die Schriftarten wieder in der ursprünglichen Farbe und alle normalo.
Momentan ist da backround: transparent und schriftfarbe: black

Ich kenne mich damit zu schlecht aus... benötige Jemand der sich mal meinen Code anschaut
und eine LÖSUNG für mich hätte.

Danke Euch

zwoemti · 5. Juni 2012

Zeilenhöhe ist zu gering eingestellt, wenn mit Farbe hinterlegt nicht alles lesbar!

Könntest du mal ein Bild machen wo ich sehe was nicht richtig zurückgestellt wird.

Dieser Wert stellt das bei den Farbänderungen zurück (10)

JavaScript

var num_e = parseFloat(num_ee, 10);
jQuery("a.fchange").click(function() {
var currentSize = contentarea.css('font-size');
var num = parseFloat(currentSize, 10);

Marcolino · 5. Juni 2012

1. ZEILENHÖHE: Ja Du hast natürlich Recht, aber wo stelle ich die Zeilenhöhe ein? Find eich bei WS X5 nicht...

2. Das ist jetzt sonderbar: In WS X5 habe ich alle Texte in verschiedenen Schriftgrößen/-arten und
vor allem Farben gestaltet.
Beim ersten hochladen und der "Premiere" der Seite war alles so wie ich es gebaut habe,
aber kaum habe ich die Farbbuttons verwendet, geht die Seite nicht mehr auf Ihren Ursprung zurück.
So als hätte der Code für das PiC "TV-Farbbalken" (backround: transparent, color: black)
Das Steuer in die Hand genommen.

Das bleibt auch so, wenn "aktuelle seite neuladen" im Firefox tätige oder
erneut alles per FTP hochlade.
(Kann Dir also kein vorher/nacher Bild senden)

Marcolino · 5. Juni 2012

Diesen Code, habe ich HEAD:

HTML

</script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#textsizer-embed a").textresizer({
target : ".ff1 ,.fs20 ,.ff2 ,.fs18 ,.cf2 ,.cb2 ,.cf0",
type : "css",
sizes : [
// Medium. Index 0
{
"font-size" : "14px",
"background" : "black",
"color" : "white",
},
// Medium. Index 1
{
"font-size" : "14px",
"color" : "green",
"background" : "black",
"margin" : "auto"
},
// Medium. Index 2
{
"font-size" : "14px",
"color" : "yellow",
"background" : "blue"
},
// Medium. Index 3
{
"font-size" : "14px",
"color" : "black",
"background" : "transparent"
}],
selectedIndex : 1
});
});
</script>

Alles anzeigen

Marcolino · 5. Juni 2012

Diesen für den S/W-TV:

HTML

<div id="textsizer-embed">
<ul class="textresizer">
<li><a href="#nogo" class="small-text" ><img src="http://zfk-bb.de/images/1x1TV-sw-png.png" alt="schwarz-weiss" title="schwarz-weiss" border="0" /></a></li>
</ul>
</div>

Schwarz/Grün-TV:

HTML

<div id="textsizer-embed">
<ul class="textresizer">
<li><a href="#nogo" class="small-text" ><img src="http://zfk-bb.de/images/1x1TV-sg-png.png
" alt="schwarz-grün" title="schwarz-grün" border="0" /></a></li>
</ul>
</div>

Blau/Gelb-TV:

HTML

<div id="textsizer-embed">
<ul class="textresizer">
<li><a href="#nogo" class="small-text" ><img src="http://zfk-bb.de/images/1x1TV-bg-png.png
" alt="blau-gelb" title="blau-gelb" border="0" /></a></li>
</ul>
</div>

Farbbalken-TV:

HTML

<div id="textsizer-embed">
<ul class="textresizer">
<li><a href="#nogo" class="small-text" ><img src="http://zfk-bb.de/images/1x1TV-normal-png.png" alt="zurücksetzen" title="reset" border="0" /></a></li>
</ul>
</div>

Und ich denke hier liegt ein falscher Code für den Farbbalken-TV vor.
Per Farbbalken-TV sollte die gesamte Seite, inkl. aller Schriftarten/-farben/-größen usw. zurückgesetzt werden.

zwoemti · 5. Juni 2012

1. hier

JavaScript

minWidth : 19,
minLineHeight : 0.9,
ratio : .02

dort musst du mit den Werten spielen...ich glaub 1.1 war ganz gut zu lesen....

2. das hier

JavaScript

// Medium. Index 3
{
"font-size" : "",
"color" : "",
"background" : ""

musst du als letztes benutzen...du überschreibst sonst immer das Standard CSS mit der Farbe und Größe die du dort eingibst...

zwoemti · 5. Juni 2012

im Head hast du textsize.css stehen...die Datei ist nicht erreichbar!

Marcolino · 5. Juni 2012

Danke ZWOEMTI!

Die Seite spinnt noch ein bisschen, aber im großen ganzen scheint es nun zu funktionieren.

Und dies kommt mit in den erweiterten HEAD Bereich? >>>

JavaScript

minWidth : 19,
minLineHeight : 0.9,
ratio : .02

zwoemti · 5. Juni 2012

hast du schon im Head stehen nur

minLineHeight auf 1.1 mal stellen...

Marcolino · 5. Juni 2012

Sauber! Jetzt habe ich`s glaube ich...

zwoemti · 5. Juni 2012

Die beiden sollten noch aufeinander abgestimmt werden...also die farbigen buttons sollte beim reset die gleiche Schriftgröße bekommen wie die obere normale Schriftgröße....derzeit ist ja alles leergelassen.

Marcolino · 5. Juni 2012

Und ich dachte das "leer lassen" wäre Sinn der Sache.
"aufeinander abstimmen": ist das nicht zu schwer? ich habe ja ganz unterschiedliche schriftgrößen...
hm

Marcolino · 5. Juni 2012

Ach Du meinst das "X" und "TV-RESET" sollten zum selben Ergebnis führen.
Hm, mal sehen ob ich`s selber finde

Marcolino · 5. Juni 2012

... das ist schwer! Schriftgröße habe ich nun ergänzt,
aber das WS X5 Layout ist am Ende dann UNTEN immer "kaputt" oder "verschoben"...

zwoemti · 7. Juni 2012

na das sieht doch schon besser aus...du hast mich verstanden...

mit dem verschoben das musst du mir mal bildlich zeigen ich sehs nämlich nicht

ach..jetzt weiß ich was du meinst...das kann man mit dem machen aber da nicht das html objekt benutzen sondern eine andere Klasse ID ich muss noch einmal schauen ob ich das noch finde...ich hab das vor kurzem mal bei jemanden gemacht der nur das lineheight benutzt hatte...

ich werd mal nachschauen...bzw mir die emails nochmal schicken lassen ich hab sie gelöscht gehabt

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Script und Einbindung Für Sehbehinderte gesucht Teil 2

Teilen