JS Mischung aus Tooltip und Contextmenü

**Kropff** · 14.03.2005, 09:53

du kannst mehrere divs verschachteln, also auch mit den positionen spielen.z.b.:

PHP-Code:


<div style="width: 90%; left: 5%; height: 90%; bottom:5%; border: 1px solid #f00">

<div style="width: 100px; left: ;10px height: auto; top:10px; border: 1px solid #00f">bla bla</div>

</div>

schau dir das mal an, dann wirst du sicher eine lösung funden (ungetestet)
peter

**asp2php** · 14.03.2005, 10:04

http://www.walterzorn.com/tooltip/tooltip_e.htm

**wahsaga** · 14.03.2005, 10:23

Re: JS Mischung aus Tooltip und Contextmenü

Original geschrieben von deklarmart
ich weiß das man div-layers nur mit statischen angaben (oben links vom monitor, oder?) positionieren kann.

das ist kein "wissen", sondern schlichtweg blödsinn.

bzw ich hab letztens gesehn, das man seit neustem divs mit prozenz-angaben versehen kann? ist das ne neuerung von html 4.0 oder was?

das hat mit HTML so gut wie gar nichts zu tun.
CSS ist das stichwort - und da möchtest du dich u.a. mit den verschiedenen möglichkeiten für position beschäftigen.

**deklarmart** · 15.03.2005, 12:36

entschuldigung! ok, das ist natürlich eine feine sache, das die positionierung
ab dem eltern-element funktioniert! hat die sache sehr vereinfacht, und ich
habs im grunde auch schon fertig.

nur eine kleinigkeit ist da noch: leider werden die eingeblendeten ebenen nicht
über die andern elemente der html seitegelegt, sondern schieben sich
irgendwie dazwischen! ich dachte erst, das hat mit dem z-index zu tun und
hab dann diverse einstellungen vorgenommen... aber das interessiert die ebene
nicht!

hier das beispiel:
http://www.zir-con.de/web-tmp/demo.html

öffnet sich die ebene, verschieben sich die anderen elemente nach unten! egal
ob ich z-index 2, 100 oder -1 angebe! woran liegt das?

html-code:

Code:

<script language="javascript">

last_id='0';

function getMenu(id) {
	if (document.getElementById('menu' + id).style.display == 'none') {
		document.getElementById('menu' + last_id).style.display = 'none';
		document.getElementById('menu' + id).style.display = '';
	} else {
		document.getElementById('menu' + id).style.display = 'none';
	}
	last_id=id;
}

</script>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<br><br><div id="menu0"></div>

<div name="menubutton">
  <img src="pfeil.jpg" width="20" height="10" border="0" onclick="getMenu(1);" style="cursor: hand;">
  <div id="menu1" style="position: relative; top: 0px; width: 200px; height: 100px; z-index: -1;
    background-color: blue; display: none;">asd</div>
</div>
<br>blablabla<br><br>
<div name="menubutton">
  <img src="pfeil.jpg" width="20" height="10" border="0" onclick="getMenu(2);" style="cursor: hand;">
  <div id="menu2" style="position: relative; top: 0px; width: 200px; height: 100px; z-index: 2;
    background-color: blue; display: none;">asd</div>
</div>
<hr>

**wahsaga** · 15.03.2005, 15:51

Original geschrieben von deklarmart
woran liegt das?

das könnte dir vielleicht jemand sagen, der weiß, was deine funktion getMenu() macht ...

**deklarmart** · 16.03.2005, 12:19

die funktion ändert eigentlich nur die "display" eigenschaft. ich dachte,
das es daran nicht liegen kann, daher hatte ich die weggelassen! aber
um den zusammen hang zu sehen ist es natürlich sinnvoller die auch zu
posten, sorry. hab es nachgeholt: oben steht nun auch die funktion!

**wahsaga** · 16.03.2005, 12:56

und was ist display ...?

laut selfhtml: "display (Anzeigeart bzw. Nichtanzeige ohne Platzhalter)"

also wird, wenn das element ausgeblendet ist, kein platz dafür reserviert - und wenn es eingeblendet wird, nimmt sich das element den notwendigen platz.

folge: nachfolgende elemente verschieben sich nach unten.

"alternative" wäre visibility statt display - das ist nichtanzeige mit platzhalter. dann würde der platz für das element immer reserviert, auch wenn es nicht angezeigt wird.
nachfolgende elemente halten dann gleich den nötigen abstand ein - allerdings gibt das leere flächen an der stelle, wo das element nicht eingeblendet ist.

die wirkliche alternative: die tooltipps per absoluter positionierung aus dem elementfluss nehmen, so dass sie beim einblenden über display dann "über" den nachfolgenden elementen erscheinen, so dass diese sich nicht mehr verschieben.
dabei berücksichtigen, dass absolute positionierung sich durchaus relativ verhält - relativ zu den koordinaten des nächsthöheren vorfahrenelementes mit einem vom default static abweichenden wert für position.

p.s.:

hab es nachgeholt: oben steht nun auch die funktion!

dann bitte jetzt noch den scrollbalken beseitigen!

**deklarmart** · 16.03.2005, 13:25

Original geschrieben von wahsaga
die wirkliche alternative: die tooltipps per absoluter positionierung aus dem elementfluss nehmen, so dass sie beim einblenden über display dann "über" den nachfolgenden elementen erscheinen, so dass diese sich nicht mehr verschieben.
dabei berücksichtigen, dass absolute positionierung sich durchaus relativ verhält - relativ zu den koordinaten des nächsthöheren vorfahrenelementes mit einem vom default static abweichenden wert für position.

hm, das versteh ich nicht ganz! also ich soll die tooltip-ebenen aus dem
"element-fluss" rausnehmen, indem ich die zB gleich ALLE hinter <body> schreibe?
(also aus dem '<div name="menubutton">' rausnehmen)?

wenn ich das so mache, stimmt die positionierung ja nicht mehr, da die
tooltip-ebenen nun den body als elternelement haben und nun von oben
links aus positioniert werden. wie soll ich an die positionsdaten vom "menubutton"
kommen? oder war dein vorschlag anders gemeint?!

(ich hoffe ich hab mein problem so halbwegs verständlich ausgedrückt^^)

**asp2php** · 16.03.2005, 13:29

http://www.css4you.de/position.html
http://www.css4you.de/example/position_relative.html

**wahsaga** · 16.03.2005, 13:32

Original geschrieben von deklarmart
oder war dein vorschlag anders gemeint?!

mein vorschlag war so gemeint, wie fast immer:

lerne mit den techniken, die du verwenden willst, halbwegs sicher umzugehen - so dass du gegebene tipps auch umsetzen kannst, ohne dass man dir alles bis ins kleinste vorkauen muss.

**deklarmart** · 16.03.2005, 14:21

danke auch! mehr als selfhtml zu studieren und versuchen zu verstehen
kann ich nicht! wozu ist denn so ein forum da? ich hab halt paar fragen
zum thema ebenen und positionierung und peil das nicht zu 100 prozent!
schuldigung!

es sind ja nur kleine fehler! ich kann mir selfhtml 1000 mal durchlesen und
finde die lösung nicht! das resultiert sicherlich nicht aus dummheit, sondern
daraus, dass ich nicht die erfahrung damit habe da ich nicht den ganzen tag mit
html/css arbeite. jeder lernt das mal (gerade aus fehlern), aber halt nur wenn man ein wenig
hilfe beim suchen seiner fehler bekommt.

[...]

aber trotzdem danke für die links, ich bin dabei zu kapieren wie das alles
so ca. funktioniert. nur das problem mit der reihenfolge mit übereinander
liegenden objekten hab ich noch! ich hab mir in selfhtml übrigens auch schon
zig-mal alles zum thema "z-index" durchgelesen und ausprobiert!
selbst wenn ich in das <img src...> tag ein 'style="z-index:1"' schreibe
und die divs mit einem z-index von 3 oder so belege, ist das bild
noch on-top! waurm?!

(kann man hier sehen --> http://www.zir-con.de/web-tmp/demo.html )

Code:

<style type="text/css"><!--
.menubar {
  position: absolute;
  top: 16px;
  width: 200px;
  height: 100px;
  background-color: #efefef;
}
// --></style>
<div name="menubutton" style="position: absolute;">
  <div id="menu1" class="menubar" style="display: none;">asd</div>
  <img src="pfeil.jpg" width="20" height="10" border="0" onclick="getMenu(1);" style="cursor: hand;">
</div>
<br>blablabla<br><br>
<div name="menubutton" style="position: absolute;">
  <div id="menu2" class="menubar" style="display: none;">asd</div>
  <img src="pfeil.jpg" width="20" height="10" border="0" onclick="getMenu(2);" style="cursor: hand;">
</div><br>
<hr>

**wahsaga** · 16.03.2005, 14:24

Original geschrieben von deklarmart
selbst wenn ich in das <img src...> tag ein 'style="z-index:1"' schreibe
und die divs mit einem z-index von 3 oder so belege, ist das bild
noch on-top! waurm?!
(kann man hier sehen --> http://www.zir-con.de/web-tmp/demo.html )

von einem z-index kann ich da weit und breit nichts entdecken.

**deklarmart** · 16.03.2005, 14:28

hatte ich auch wieder rausgenommen, da es nicht funktioniert hat.
(EGAL wo ich es hingeschrieben habe und wie ich die ebenen geordnet
habe. das bild war wie gesagt IMMER on-top)

JS Mischung aus Tooltip und Contextmenü