DOM , Javascript und CSS

[Stranger1980]

Hallo erstmal zusammen an alle bin neu hier

Ich arbeite derzeit an einer Webseite und habe damit im Moment so meine Bauchschmerzen ;>

Aber erstmal eine kleine Vorgeschichte :

Ich habe mir eine Idee in den Kopf gesetzt und tüftele nun immer mehr und mehr an dieser Idee...

Webseiten haben ja in der Entstehungsphase immer eine Grundsatzfrage :

Statisches Layout oder Dynamisches Layout ?

Ich war von der Idee sehr angetan ein Layout zu haben welches sich dynamisch in der Grösse an den verfügbaren Anzeigebereich anpasst und trotzdem das angestrebte Seitenverhältnis beibehält. Mit reinem CSS stösst man dann schnell an seine Grenzen wenn man mit positionierten Elementen und auch mit transparenten Grafiken und Menüs arbeiten will die sich in der Grösse skalieren lassen.

Also habe ich mir eine Alternative einfallen lassen und eine Seite geschrieben die mit aktiviertem Javascript die HTML-Elemente css-technisch umstyled auf die erechneten Werte. Falls kein Java-Script aktiviert ist kriegt der Benutzer ein statisches Layout alá 960x600 (sowohl vertikal als auch horizontal zentriert) zu sehen.

Wenn Java-Script aktiv ist werden die Elemente die skalierbar sind (also grösser oder kleiner werden sollen) per Javascript entsprechend vergrössert oder verkleinert.

Warum mache ich das ganze ? Zum einen ist es natürlich die Grundidee :

a) Ich habe ein Design - egal auf welchem Monitor das nun landet es wird der grösstmögliche Anzeigebereich möglich gemacht.

Bei der Skalierung wird das Seitenverhältnis des Designs beibehalten und es entsteht entweder ein Rand oben und unten oder halt links und rechts.

Anfangs war alles noch relativ gut lösbar und ich habe die Seitenelemente alle schön skaliert darstellen können ohne nennenswerte Probleme zu haben. Desto mehr Elemente ich aber mit der Anweisung getElementbyID("box").style.width <-- ein Beispiel dann formartierte, desto stärker wurde die Verzögerung sichtbar die entsteht, weil ja wirklich so ziemlich alles berechnet wird

Das Menü war eine kleine Herausforderung weil ich merkte das ein simples CSS-Hover-Menu so ohne weiteres nicht funktioniert da man Hintergrundbilder von Boxen nicht skalieren kann. Also wurde das Menü auch in Javascript geschrieben und somit die Grafiken in Java einfach ausgetauscht an der entsprechenden Stelle.

Naja nun habe ich aber soviele Elemente die umgestylt werden das man immer kurzzeitig eine Verzögerung sieht wenn man die Seite oder deren weiteren Inhalte aufruft. Mir ist schon irgendwie klar was dort in welcher Reihenfolge passiert :

a) HTML-Kopf wird aufgerufen

Standard-Stylesheet wird gesetzt

c) Javascript-Schnipsel ausgeführt (abmessungen werden berechnet)

d) Seite wird aufgebaut <--- und ist ja schon sichtbar aber mit dem Standardstylesheet

e) Java-Script-Schnipsel ausgeführt (berechnete Abmessungen werden style-technisch zugewiesen)

f) Elemente der Seite skalieren auf die gewollten Abmessungen

Hmm nun ist mir die Verzögerung aber zu doof. Ich könnte mit einem anfänglichen Laden der Seite leben mit einem Ladebalken sicher auch - und dann hat der User die Seite richtig gestylt (maximale Abmessungen) komplett navigierbar auf dem Browser.

Habt ihr eine Idee ?

Soll ich die Styleabmessungen in eine Datenbank schreiben und von dort abrufen ?

und der Besucher erhält einen Cookie in dem steht welchen Eintrag aus der Datenbank zu seinem Browser gehört ?

oder ist das nicht der richtige Weg ?

Hier der Link damit man besser mitreden kann : Praxis fr Physiotherapie & Osteopathie Petra Arenz .- Home -.