nicht angemeldet
Dynamisch bis zum Gehtnichtmehr :(
Hallo Leute
Ist es irgendwie möglich, die Breite eines Wortes (ev. durch <span> umfasst) in Pixel zu bestimmen oder den horizontalen Abstand eines Elements zum linken Fensterrand auszulesen?
Ich muss ein absolut dynamisches (*verzweifel*) Drop-Down-Menü schreiben, kann die Submenus jedoch nicht schön unter den Menüpunkt stellen.
Bin für jede Hilfe dankbar.
MfG
Tom2
-
hi,
Ist es irgendwie möglich, die Breite eines Wortes (ev. durch <span> umfasst) in Pixel zu bestimmen oder den horizontalen Abstand eines Elements zum linken Fensterrand auszulesen
nun, grundsaetzlich geht sowas eher, indem Du die Breite des umgebenden Elementes herausfindest. In einem div-layer z. B., der wiederum ein span mit Text enthaelt, sollte es mit dom-faehigen Browsern etwa so gehen:
document.getElementById("divid").firstChild.offsetWidth;
Ich muss ein absolut dynamisches (*verzweifel*) Drop-Down-Menü schreiben, kann die Submenus jedoch nicht schön unter den Menüpunkt stellen.
Bist Du sicher, dass Du Deinen Ansatzpunkt nicht noch mal ueberdenken solltest? Anyway, ich habe hier noch ein Test zum Buschstabenbreite-Herausfinden rumliegen, den haenge ich mal dranne.
Gruesse Joachim
<html>
<head><style type="text/css">
#ebene0 {
position:absolute;
width:auto;
height:auto;
visibility:hidden;
}
</style><script language="javascript1.2">
// some known objects
var nc = !!(document.captureEvents && !document.getElementById);
var ie4 = !!(document.all && !document.documentElement);// einfache div-layer referenzieren
function dRef(num) {return (nc? document.layers[num] : (ie4? document.all[num] : document.getElementById(num)))}//Div-Breite
function divBreit(obj)
{
if(nc) return obj.document.width;
else return obj.offsetWidth;
}function go()
{
var str = document.feld.eing.value;
if(nc)
{
with(document.ebene0.document)
{
open(); write(str); close();
}
}
else
{
dRef("ebene0").innerHTML = str;
}var size = divBreit(dRef("ebene0"));
document.feld.eing.value = size;
}
</script></head>
<body marginheight="0" marginwidth="0">
<form Name="feld">
<input type="text" name="eing" size="10">
<input type="button" value="Buchstabenbreite" onclick="go()">
</form>
<div id="ebene0">Erstes Div</div></body>
</html>-
Hallo ihr Antwortenden
Vielen Dank für eure Hilfe, ich glaube, dass ich damit mein Problem lösen kann.
Da es nicht allen ganz klar war, was ich machen will erklär ich es hier nochmal etwas ausführlicher:
Ich mache eine DHTML-Seite mit Drop-Down-Menüs, was ja eigentlich kein Problem wäre. Das Menü muss jedoch aus einer Konfigurations-Datei kommen und mit Hilfe von ASP generiert werden. Hier tauchen jedoch einige Probleme auf: Ich weiss nicht wieviele Objekte und <div>s ich in der Seite haben werde und vorallem wo die einzelnen <divs> stehen müssen.Ich hab's eigentlich geschaft, nur die Submenus muss ich nun noch richtig positionieren.
Bist Du sicher, dass Du Deinen Ansatzpunkt nicht noch mal ueberdenken solltest?
Hm, wie meinst du das? Hast du eine bessere Idee?
MfG & ein big Thanks
Tom2
-
Moin!
Da es nicht allen ganz klar war, was ich machen will erklär ich es hier nochmal etwas ausführlicher:
Ich mache eine DHTML-Seite mit Drop-Down-Menüs, was ja eigentlich kein Problem wäre. Das Menü muss jedoch aus einer Konfigurations-Datei kommen und mit Hilfe von ASP generiert werden. Hier tauchen jedoch einige Probleme auf: Ich weiss nicht wieviele Objekte und <div>s ich in der Seite haben werde und vorallem wo die einzelnen <divs> stehen müssen.Sobald du in ASP die Konfigurationsdatei gelesen hast, weißt du aber doch, wieviele Menüpunkte es sind und wo die stehen müssen, oder? Zumindest wäre mein Ansatz, es _dort_ herauszufinden. :)
Ich hab's eigentlich geschaft, nur die Submenus muss ich nun noch richtig positionieren.
Wenn alle Stricke reißen: Man kann <div>s auch verschachteln, relativ positionieren, als Inline-Element formatieren etc. Ist halt alles nur eine Frage der Browserkompatibilität. ;)
Bist Du sicher, dass Du Deinen Ansatzpunkt nicht noch mal ueberdenken solltest?
Hm, wie meinst du das? Hast du eine bessere Idee?Wenn dein Design ultimativ von Wortlängen abhängt - dann sollte die Position der Submenüs nicht "positioniert" passend erscheinen, sondern aufgrund der Wortlänge am richtigen Ort sein.
Wie genau das laufen könnte, kann man aber nur sagen, wenn du etwas mehr über die Struktur des Menüs verrätst, und auch über das "drumherum".
- Sven Rautenberg
-
Hallo Sven
Sobald du in ASP die Konfigurationsdatei gelesen hast, weißt du aber doch, wieviele Menüpunkte es sind und wo die stehen müssen, oder?
Ja, das weiss ich dann. Das Problem war, dass ich auch das JavaScript und die onMouseover-Attribute generieren musste. Einen haufen Arbeit also.
Wenn alle Stricke reißen: Man kann <div>s auch verschachteln, relativ positionieren, als Inline-Element formatieren etc. Ist halt alles nur eine Frage der Browserkompatibilität. ;)
Hab ich auch mal kurz probiert. Das ganze muss eigentlich nur zu IE kompatibel sein, is für's Intranet.
Wie genau das laufen könnte, kann man aber nur sagen, wenn du etwas mehr über die Struktur des Menüs verrätst, und auch über das "drumherum".
Ok, ich habe eine horizontale "Leiste" mit ca. 5 Top-Menüpunkten. Fährt man mit dem Curser einen solchen, so soll unter diesem (dafür brauche ich die Wortbreite) ein Menü erscheinen. In diesem Menü sollen wieder Untermenüs möglich sein, die dann jedoch Links vom vorhergehenden Menü stehen. Zudem ist der "Weg" zu dem untersten Angezeigten Menü rot hinterlegt.
Für die Windows-User, welche das immer noch nicht checkten: nehmt eure Taskleiste, setzt sie an den oberen Bildschirmrand und stellt euch vor, ihr hättet mehrere Start-Buttons. So siehts etwa aus, nur einfach in 'schön', vom Design her. ;)
Ich werd' mich bald dahinter machen.
MfG
Tom2
-
Yo!
Ok, ich habe eine horizontale "Leiste" mit ca. 5 Top-Menüpunkten. Fährt man mit dem Curser einen solchen, so soll unter diesem (dafür brauche ich die Wortbreite) ein Menü erscheinen. In diesem Menü sollen wieder Untermenüs möglich sein, die dann jedoch Links vom vorhergehenden Menü stehen. Zudem ist der "Weg" zu dem untersten Angezeigten Menü rot hinterlegt.
Für die Windows-User, welche das immer noch nicht checkten: nehmt eure Taskleiste, setzt sie an den oberen Bildschirmrand und stellt euch vor, ihr hättet mehrere Start-Buttons. So siehts etwa aus, nur einfach in 'schön', vom Design her. ;)
Ich werd' mich bald dahinter machen.
Wenn du einfach eine durchschnittliche Pixelbreite pro Buchstaben ermittelst (Pi mal Daumen), links und rechts vom Wort noch etwas Sicherheitsabstand einplanst (falls viele breite Ms kommen) und so eine Layerbreite errechnest, sollten die gröbsten Probleme vorüber sein.
Also so: length(Menüwort)*10px+10px = Layerbreite
:)
Wichtig ist natürlich, die Schriftgröße und -art in Pixeln festzulegen, sonst zerreißt dir das Layout möglicherweise. ;)
Ich bin außerdem fast sicher, daß man durch geschicktes Schachteln, Verstecken und Positionieren von Layern auch was reißen könnte. Das wäre dann allerdings wieder eher die Variante "Layout in HTML", und das sollte ja vermieden werden.
- Sven Rautenberg
-
Hi, Tom2
Ok, ich habe eine horizontale "Leiste" mit ca. 5 Top-Menüpunkten. Fährt man mit dem Curser einen solchen, so soll unter diesem (dafür brauche ich die Wortbreite) ein Menü erscheinen. In diesem Menü sollen wieder Untermenüs möglich sein, die dann jedoch Links vom vorhergehenden Menü stehen. Zudem ist der "Weg" zu dem untersten Angezeigten Menü rot hinterlegt.
Das hört sich für mich ganz nach dem Menü von http://milonic.co.uk/menu/ an. Soweit ich mich erinnern kann, ist es damit auch möglich, den "Weg" farblich zu kennzeichnen. Die Konfigurationsdatei könntest du bei Bedarf auch on-the-fly erzeugen. Vielleicht inspiriert dich ja der Quelltext :) Nachdem es sich um ein Intranet handelt, spielt dessen Größe ja keine Rolle.
LG Orlando26 ;-p
-
-
-
-
-
hi,
Ich muss ein absolut dynamisches (*verzweifel*) Drop-Down-Menü schreiben
Ich weiß zwar nicht, was Du genau mit "absolut dynamisch" meinst,
kann die Submenus jedoch nicht schön unter den Menüpunkt stellen.
aber wenn es nur um die optische Gestaltung einer Drop-Down-Verweisliste geht (?), dann versuch mal, Sonderzeichen einzufügen, z.B. Bullets oder Pfeile. Du findest sie unter http://selfhtml.teamone.de/html/referenz/zeichen.htm, sie werden auch in einem Drop-Down-Menü angezeigt, vorausgesetzt Du hast kein eingeschränktes Charset notiert. Steht alles da...
Falls ich an Dir vorbeigeredet habe, beschreib nochmal genauer, was Du meinst.
Bei bei,
AndY -
Hi,
Ist es irgendwie möglich, die Breite eines Wortes (ev. durch <span> umfasst) in Pixel zu bestimmen
Ich hatte vor einiger Zeit sowas gemacht, liegt noch unter:
http://www.floridee.de/char2length.htm rum.
Ich hoffe, du wirst schlau draus,viele Grüße
Rol