|
|
Hallo!
Hier ein kleiner Ausschnitt aus meinem Dokument:
<head>
<script type="text/javascript">
if (screen.width<1024) {valx=350; fsize=12.0pt} else{ [...] }
</script>
</head>
<body>
<span style='font-size:fsize;color:black'><a
href="Link.htm">Link</a></span>
</body>
In meinem Script habe ich verschiedene if than else Befehle aufgeführt, für verschiedene Auflösungen verschiedene Schriftgrössen. Nun scheint die Schriftgrösse allerdings immer auf die Standartgrösse zurückgesetzt zu werden, das Script funktioniert also nicht richtig. Syntaktisch habe ich noch folgenden kleine Modifikation ausprobiert: if () {valx=350; fsize='12.0pt'} , also die 12.opt in '' , scheint aber auch keine Wirkung zu haben.
Könnt ihr mir helfen?
|
|
| 19.10.2005 11:32:26 |
|
Validome
Administrator
Registriert: 04.04.2005
Beiträge: 313
|
|
Hallo,
das funktioniert so nicht. Sie können keine Javascriptvariablen einfach ins HTML schreiben, zumal schon die Variable "fsize" falsch beschrieben wird.
Richtig währe hier (wie von Ihnen bereits probiert) fsize='12.0pt' da es sich (im Gegensatz zu valx) um einen String (Zeichenkette) handelt.
Jetzt bleibt jedoch noch das Problem bestehen wie man die Variable ins HTML bringt.
Das könnte man z.B. mit document.write erledigen, was jedoch sehr "hässlich" ist. Da es sich hier um dynamisches CSS handelt, würde ich das ganze über Klassen regeln.
Zunächst legen wir für jede Auflösung eine Klasse an:
Im Header:
Code:
<style type="text/css">
span._800 { font-size:10px; }
span._1024 { font-size:13px; }
usw....
</style> |
Nun müssen Sie nur noch dem span-Tag die entsprechende Klasse zu geben:
Z.B. document.getElementsByTagName('span')[0].className = '_800';
Etwas schöner währe es, wenn das span-Tag über ein Id-Attribut verfügen würde (z.B. id="link").
Dann könnte man es folgendermaßen schreiben:
document.getElementById('link').className = '_800';
Und zu guter letzt muss der script-Bereich aus dem Header vor das schließende body-Tag verschoben werden, da sonst der Script ausgeführt wird bevor das span-Tag überhaupt vom Browser geladen ist.
mfg
Thomas Mell
|
|
| 19.10.2005 12:47:58 |
|
|
|
nein, alles verlohrengegangen. muss es halt nochmals schreiben
Hallo Validrome,
herzlichen Dank für Ihre sehr ausführliche und hilfreiche Antwort. Leider funktioniert diese Lösung noch nicht, was ich auf ein Missverständnis Meinerseits zurückführe. Das System setzt wieder die Standartschriftgrösse ein.
Hier den Ausschnitt des Codes, der für die Beurteilung wichtig sein könnte:
Code:
<head>
<style type="text/css">
._800font { font-size:18.0pt;color:#FF9900 }
</style>
</head>
<script type="text/javascript">
if (screen.width<1024) {valx=350; document.getElementById('font').className = '_800font' } [...]
</script>
<body>
<span style.id="font"> [...]
</body> |
Ich bin mir auch nicht sicher, ob ich die ID bei "style" syntaktisch korrent eingefügt habe. Ich wurde nicht fündig auf selfhtml
Herzliche Grüsse
Lukas
|
|
| 19.10.2005 14:19:01 |
|
|
|
Der HTML Editor "phase 5.3" meldet folgendes:
'document.getElementById(...)' ist Null oder kein Objekt
bei folgender Zeile: else{if (screen.width<=1280 && screen.width>1024) {valx=450; document.getElementById('font').className='_800font'} else{
|
|
| 19.10.2005 15:00:32 |
|
|
|
leider kann ich nicht editieren, deshalb schreibe ich einen neuen Beitrag
[...]wobei man das etwas differenzieren muss, denn Phase hat schon oft zum Einen falsche Fehlermeldungen gegeben bei denen sich zum Anderen auch noch der Gehler auf einer volkommen anderen Zeile befand. Und da bin ich mir sicher dass Phase <b>diesen</b> Fehler in <b>dieser</b> Zeile meinte...
|
|
| 19.10.2005 15:14:18 |
|
Validome
Administrator
Registriert: 04.04.2005
Beiträge: 313
|
|
Hallo,
wie ich schon weiter oben geschrieben habe, muss der Scriptbereich hinter das span-Tag (am besten vor dem schließenden body-Tag) geschrieben werden.
Wie soll der Script auf ein Element zugreifen können, das zu diesem Zeitpunkt noch gar nicht vom Browser geladen ist?
mfg
Thomas Mell
|
|
| 20.10.2005 02:07:49 |
|
|
|
Validome schrieb:
Hallo,
wie ich schon weiter oben geschrieben habe, muss der Scriptbereich hinter das span-Tag (am besten vor dem schließenden body-Tag) geschrieben werden.
Wie soll der Script auf ein Element zugreifen können, das zu diesem Zeitpunkt noch gar nicht vom Browser geladen ist?
mfg
Thomas Mell |
Lieber Validrome,
Sie haben natürlich recht, das habe ich überlesen oder missinterpretiert, obwohl ich Ihren Beitrag mindestens fünf Mal gelesen habe. Seltsamerweise funktioniert die Sache immer noch nicht. Ich möchte wieder eine auf das Wesentliche verkürzte Form des Codes posten
Code:
<head>
<style type="text/css">
._800font { font-size:50.0px }
</style>
</head>
<body>
<span style.id="font">text</span> *
<script type="text/javascript">
else{if (screen.width<=1280 && screen.width>1024) {document.getElementById('font').className='_800font'} else{ [...]
</body> |
*an dieser Stelle habe ich schon alles ausprobiert, was mit in den Sinn kam, um möglichst einen syntaktischen Fehler zu vermeiden... <span id="font"> <span.id="font"> <span style.id="font> <span style='id="font"'> usw.
Die Fehlermeldung, die der HTML Editor Phase 5.3 herausgibt ist wieder die selbe, document.getElementById('font').className='_800font' sei Null oder kein Objekt...
|
|
| 20.10.2005 08:26:09 |
|
|
|
ah, den das script schliessende Tag habe ich noch vergessen
|
|
| 20.10.2005 08:44:57 |
|
|
|
dr. orange schrieb:
ah, den das script schliessende Tag habe ich noch vergessen |
wobei das nicht die Ursache des Problems ist, denn in meinem Code ist dieses Tag natürlich vorhanden, ich wollte dies nur anmerken um eine falsche Fehlerquelle auszuschliessen
|
|
| 20.10.2005 08:46:55 |
|
|
|
Die Fehlermeldung wird bei <span id="font"> nicht ausgegeben, die im CSS Script festgelegte Formatierung wird dabei allerdings nicht übernommen
|
|
| 20.10.2005 09:01:54 |
|
|
|
natürlich habe ich CSS nicht deaktiviert...
|
|
| 20.10.2005 09:39:01 |
|
|
|
Ich habe es zur Hälfte geschafft! Ein Schritt zurück, eineinhalb nach vorn :-D Hier ein Ausschnitt des neuen Codes:
Code:
<head>
<style type="text/css">
#800font { font-size:50.0px }
#1024font { font-size:50.0px }
</style>
</head>
<body>
<span id="800font">text</span>
</body> |
nur das neue Problem: Wie kann ich nun bewerkstelligen, dass per JS die Richtige CSS ausgewählt wird? Ich habe ja schon im Span das auszuwählende JS eindeutig bestimmt... Im JS kann ich natürlich per if(screen.width == 1024) { document.getElementById('font').className='_800font'} auflösungsabhängig die richtige CSS auswählen, doch wie bringen ich <span> dazu, das richtige auszuwählen??
|
|
| 20.10.2005 10:26:54 |
|
Validome
Administrator
Registriert: 04.04.2005
Beiträge: 313
|
|
Hallo,
sie haben mehrere Fehler in den letzten Beispielen:
1. Mit einem führenden # (z.B. #800font) gibt man die Style-Eigenschaften eines Elementes mit dieser id an. Eine id kann aber nicht per Javascript geändert werden, demnach auch nicht die Style-Eigenschaften.
2. Pixelangaben mit Nachkommastellen sind nicht erlaubt (Sie schreiben z.B. 50.0px); es existieren nur ganze Pixel (oder gibt es schon TFT-Monitore mit halben Pixeln ? ;-)))
3. Klassennamen dürfen nicht mit dem Unterstrich beginnen.
Hier nun ein funktionierendes Beispiel:
Code:
<html>
<head>
<style type="text/css">
.font800 { font-size:50px; }
</style>
</head>
<body>
<span id="font">text</span>
<script type="text/javascript">
if(screen.width < 1024) {
document.getElementById('font').className = 'font800';
}
</script>
</body>
</html> |
mfg
Thomas Mell
|
|
| 20.10.2005 22:53:17 |
|
|
|
Lieber Herr Mell,
herzlichen Dank für Ihre grossartige Hilfe. Das ganze funktioniert prima, hat aber einen entscheidenden Nachteil. Zuerst habe ich lange am Code herumgebastelt bis selfhtml mich belehrte: IDs dürfen nur einmal im gesamten Dokument vorkommen, ich kann also nicht zwei Tabellen mit derselben ID bezeichnen, was auch logisch ist. Somit kann ich die schöne Variante leider vergessen, da ziemlich viele Tabellen vorkommen, und sogar deren Zellen alle dieselbe ID haben müssten - das JS würde länger als der Body, was nicht besonders rechenintensiv ist ;-) .
Sie haben mir noch einen zweiten Vorschlag gemacht: document.getElementsByTagName. Wenn ich das richtig verstehe, liest dieser Befehl alle <xyz> heraus (weiss die Bezeichnung leider nicht für <...> tag?). Wenn ich dies bei den Zellen anwenden würde, wäre da das Problem dass nicht alle Zellen derselben Klasse zugewiesen werden dürften. Ich dürfte aber auch nicht willkürliche <...> erfinden, da ich so, soviel ich weiss, die Hintergrundfarbe der Zelle nicht ändern könnte...
Wissen Sie einen Ausweg? Vielleicht diesen: Die CSS auslagern und je nach Zustand die entsprechende laden? Ginge das auch mit JS? Denn soviel ich von der Materie verstehe schreit dies nach PHP, und da kenne ich mich absolut nicht aus...
|
|
| 25.10.2005 16:38:41 |
|
