Tabellenbreite und -definitionen je nach Auflösung verändern
Balint Krizsan
- javascript
Hallo!
Ich habe ein verzwicktes Problem, was vielleicht leichter mit PHP oder CSS zu lösen ist, momentan bin ich bei JavaScript.
Der Besucher soll je nach Auflösung des Bildschrims auf eine Seite weitergeleitet werden, bei der die grafischen Elemente auf die Breite des Fensters (640, 800, 1024 usw.) abgestimmt sind.
Früher habe ich ein Frameset für jede Auflösung extra erstellt, was aber ein Aufflackern der Preload-Seite zur Folge hatte. Mittlerweile arbeite ich mit einem JavaScript, das innerhalb des Frames prüft, welche Auflösung der User hat und dann den Code dynamisch (ist das überhaupt dynamisch?) in das Dokument schreibt. Als Beispiel:
<script language="JavaScript">
<!--
var width = screen.width;
var res =(((!(640-width))*1)+((!(800-width))*2)+((!(1024-width))*3)+((!(1152-width))*4)+((!(1280-width))*5)+((!(1600-width))*6));
if(!(res)) res = 1;
if (res=='1') {document.write("<table width="635" cellspacing="0" cellpadding="0" border="0">")} /* führe aus, wenn 640 */
if (res=='2') {document.write("<table width="795" cellspacing="0" cellpadding="0" border="0">")} /* führe aus, wenn 800 */
if (res=='3') {document.write("<table width="1018" cellspacing="0" cellpadding="0" border="0">")} /* führe aus, wenn 1024 */
//-->
</script>
Diese Lösung hat aber viele Nachteile. Vor jedem Sonderzeichen muß ein Backslash geschrieben werden, der Code ist unübersichtlich und ich schreibe für jedes Tabellenstückschen drei Mal fast den selben Code.
Ich habe mir gedacht, daß ich über Variablen die Sache so gestalten könnte:
<script language="JavaScript" type="text/javascript">
<!--
var width = screen.width;
var res =(((!(640-width))*1)+((!(800-width))*2)+((!(1024-width))*3)+((!(1152-width))*4)+((!(1280-width))*5)+((!(1600-width))*6));
if(!(res)) res = 1;
if (res=='1') {
var GesTab = 642; /* lege Breite fest */
}
if (res=='2') {
var GesTab = 795;
}
if (res=='3') {
var GesTab = 1018;
}
// -->
</script>
im HEAD und dann im BODY
<table cellspacing="0" cellpadding="0" border="0" width="
<script language="JavaScript">
<!--
document.write(GesTab + "">"); /* schreibe in table */
//-->
</script>
Aber auch das sieht irgendwie blöd auch. Auch wenn's funktioniert.
Ich suche nach einer Möglichkeit, dieses Gewusel zu optimieren. Vielleicht bin ich zu ehrgeizig, aber ich möchte ein optimales Ergebnis auch auf der HTML-Ebene. Vielleicht ist soetwas leichter mit PHP oder anderen Mitteln lösbar, auch für diese Vorschläge bin ich sehr dankbar.
Das praktische Beispiel findet ihr auf http://beam.to/stac
Ich hoffe, ihr nehmt einem Pedanten ;-) dieses Posting nicht übel...
Mit freundlichen Grüßen
Bálint
Hallo!
Ich habe ein verzwicktes Problem, was vielleicht leichter mit PHP oder CSS zu lösen ist, momentan bin ich bei JavaScript.
Der Besucher soll je nach Auflösung des Bildschrims auf eine Seite weitergeleitet werden, bei der die grafischen Elemente auf die Breite des Fensters (640, 800, 1024 usw.) abgestimmt sind.
Das praktische Beispiel findet ihr auf http://beam.to/stac
Also vorneweg: Ich habe momentan massive Probleme, deine Seiten überhaupt dazustellen. Ohne Javascript scheint es schonmal garnicht zu funktionieren. Dazu kommt dann noch, das es anscheinend eine fürchterlich schneckenlahme Verbindung ist. Von zehn Versuchen habe ich nur einmal eine komplette Seite zu sehen bekommen, und selbst auf der fehlte eine Grafik.
An dem, was ich sehen konnte (hübsches Design BTW), deutet aber nichts darauf hin, daß du dich überhaupt um verschiedene Bildschirmauflösungen kümmern müsstest. Das sollte sich alles wunderbar flexibel ohne Javascript und feste Breiten verteilen lassen. Du solltest mal ein wenig mit CSS rumspielen: Positionierung, Hintergründe, etc.
Mehr kann ich dazu leider nicht sagen, siehe oben.
Gruß,
soenk.e
Hallo!
Also vorneweg: Ich habe momentan massive Probleme, deine Seiten
überhaupt dazustellen. Ohne Javascript scheint es schonmal
garnicht zu funktionieren. Dazu kommt dann noch, das es
anscheinend eine fürchterlich schneckenlahme Verbindung ist. Von
zehn Versuchen habe ich nur einmal eine komplette Seite zu sehen
bekommen, und selbst auf der fehlte eine Grafik.
Tja, im IE lädt alles (auch nach Löschung der Caches) wunderbar. In Opera hingegen läuft es langsam. Das Zeug liegt auf tripod.com, eigentlich sind die nicht so lahm. Stimmt, ohne JavaScript läuft es nicht, weil die Grafiken per JS geladen werden.
An dem, was ich sehen konnte (hübsches Design BTW), deutet aber
nichts darauf hin, daß du dich überhaupt um verschiedene
Bildschirmauflösungen kümmern müsstest. Das sollte sich alles
wunderbar flexibel ohne Javascript und feste Breiten verteilen
lassen. Du solltest mal ein wenig mit CSS rumspielen:
Positionierung, Hintergründe, etc.
Ja, das werde ich versuchen. Nur mit den mittleren Teilen sehe ich da Probleme, aber ich setze mich dran. Danke für die Aufklärung.
An weiteren Lösungsvorschlägen bin ich aber weiterhin interessiert!
Bálint