script das transparente runde ecken erzeugt
Mel
- javascript
0 Patrick Andrieu0 rob0 Gernot Back
hallo mein liebes forum,
ich wollte mal fragen ob dem einen oder anderen ein script bekannt ist welches runde ecken erzeugt und nicht an eine Hintergrundfarbe festgelegt ist. ich stelle mir eine skalierbare und in der breite nat. variable box mit abgerundeten ecken vor, mit halbtransparenten hintergrund welche als tooltipp über alle möglichen inhalte schweben kann. Sieht man ja des öfteren man als tooltipp, ich persönlich finde das schon sehr stylish. ich will mich jetzt einfach unverbindlich informieren ob so etwas über JS zu realisieren ist und falls ja ob ihr damit gute oder eher sehr schlechte erfahrungen gemacht habt.
wie eine skalierbare box mit runden ecken auf herkömmlichen wege (css und html ;) zu erstellen ist ist bekannt, die vielen ineinander verschachtelten blockelemente sind allerdings auch nicht gerade der traum. deshalb die nachfrage nach einer JS-Lösung.
danke schonmal, mel
Hallo Mel!
wie eine skalierbare box mit runden ecken auf herkömmlichen wege (css und html ;) zu erstellen ist ist bekannt, die vielen ineinander verschachtelten blockelemente sind allerdings auch nicht gerade der traum. deshalb die nachfrage nach einer JS-Lösung.
Mit JavaScript kannst Du eine Box erstellen (createElement) oder sichtbar machen, wenn vorher auf visibility:hidden oder display:none gesetzt. Aber für das Aussehen der Box ist JavaScript nicht zuständig. Die musst Du schon mit CSS formatieren.
BTW: Such mal im Archiv nach Eibox (*g*). Auch wiberg hat letztens ein schönes Beispiel vorgestellt, dort werden die Boxen ausschließlich mit JavaScript erstellt: http://advanced-outfit.de/windowmanager/test.html.
Viele Grüße aus Frankfurt/Main,
Patrick
Hi!
wie eine skalierbare box mit runden ecken auf herkömmlichen wege (css und html ;) zu erstellen ist ist bekannt
Na, dann hast du ja deine Lösung.
Wie sollte es mit einem JavaScript denn anders gehen?
Das JavaScript erzeugt dann doch HTML/CSS.
die vielen ineinander verschachtelten blockelemente sind allerdings auch nicht gerade der traum.
Man ist ja nicht unbedingt dazu gezwungen, haufenweise Elemente ineinander zu verschachteln.
deshalb die nachfrage nach einer JS-Lösung.
Im Endeffekt kommt das Gleiche dabei raus.
Du kannst mit JavaScript HTML-Code schreiben und/oder CSS-Eigenschaften verändern.
Aber es ist immer HTML/CSS was für die Darstellung zuständig ist.
Schöner Gruß,
rob
Hallo Mel,
wie eine skalierbare box mit runden ecken auf herkömmlichen wege (css und html ;) zu erstellen ist ist bekannt, die vielen ineinander verschachtelten blockelemente sind allerdings auch nicht gerade der traum. deshalb die nachfrage nach einer JS-Lösung.
Du könntest allen Browsern nachhelfen, die weder border-radius noch etwas Entsprechendes verstehehen, indem du von allen Elementen der Klasse die die gerundeten Ecken darstellen soll, über cloneNode zunächst eine identische Kopie erstellst, in einer For-Schleife über einen Vergleich zwischen this und childNodes[i] deren Position im jeweiligen Mutterelement ermittelst und das Original über replaceChild mit der Kopie ersetzt, um die du zuvor über createElement und appendChild weitere Vorfahrenselemente geschachtelt hast, die die Hintergrundgrafiken über entsprechende Klassennamen beherbergen.
Auf Glättung an den Ecken wirst du dabei aber verzichten müssen, denn du weißt ja nie, vor welchem Hintergrund sie zu stehen kommen.
Dieses Vorgehen, wenn man den Aufwand denn überhaupt betreiben will, hätte den Vorteil, dass der ausgelieferte HTML-Quellcode für nicht-visuelle Ausgabemedien und solche in denen Javascript nicht zum Tragen kommt, deutlich schlanker und übersichtlicher bliebe.
Gruß Gernot