PopUp öffnen, fokusieren, schließen... (JS)

[Viny]

Aaalso, ich habe eine Frameseite. Auf dieser Frameseite gibt es meinen Mainframe in den ein Stichwortverzeichnis geladen werden kann.

Das Stichwortverzeichnis besteht aus Stichworten, wobei sich über onMouseover ein PopUp öffnet.

Das PopUp ist für jeden Link gleich groß und an der gleichen Stelle, das heißt bei jedem Überfahren jedes Links öffnet sich kein neues PopUp (vorausgesetzt natürlich das alte wurde nicht geschlossen), sondern es ändert sich lediglich der Inhalt.

Und das ist schön.

Weniger schön sind allerdings zwei Dinge:

1. Wenn der User nun aus irgendeinem Grund den Fokus von dem PopUp nimmt (also zum Beispiel auf meine Frameseite klickt, weil er genug vom Stichwortverzeichnis hat etc) verschwindet das PopUp im Hintergrund und tauch auch nicht mehr in den Vordergrund, wenn man über einen anderen Link fährt.

Geht das ohne eine if-Abfrage, in der ich praktisch für jeden Link überprüfen muss, ob es noch existiert und dann mit onFocus den Fokus drauflege (hab mind. 50 links)? Mit einem normalen focus() (oder on focus weiß nimmer genau) verschwindet das PopUp beim öffnen sofort im Nirvana^^

2. Wenn ich die Seite mit dem Stichwortverzeichnis verlasse (also nur diese Seite, nicht den gesamten Frame) und zum Beispiel mit der Maus auf den Frame mit dem Inhalt komme, soll das PopUp geschlossen werden. Mit onMouseout geht es zumindest nicht.

Gibts da auch wieder was einfaches?

Hat das ganze vielleicht was damit zu tun wie ich meine PopUps benenne mit dem name='', kann das sein?

Also wäre furchtbar dankbar über schnelle Hilfe

[kills]

1. dein source?

2. ne url?

3. siehe selfhtml zur behandlung von popups, z.b.

oWin = window.open(.....);

oWin.focus(); // fenster in den vordergrund holen

oWin.close(); // fenster schließen

[Viny]

ich habs geahnt das mit dem code..

mit url das wird nix, is intranet und bist du nich bosch kommst du nich rein

<b> <a name=3>3</a><br></b>

<a href="" style="cursor:help;" onMouseover=window.open('stichwort/3311.html','3311','top=300,left=500,height=470,width=450,resizable=no,scrollbars=no,menubar=no,status=no') onMouseout=window.close()>3311</a>

<p>

<b> <a name=A>A</a><br></b>

<a href="" onMouseover=window.open('stichwort/archivierung.html','3311','top=300,left=500,height=470,width=450,resizable=no,scrollbars=no,menubar=no,status=no'),onfocus()>Archivierung<p></a>

So, das is nurn Beispiel, wenn ich jez bis z durchmachen würde, würde der Beitrag aus allen Nähten platzen^^

kurze erklärung:

*cursor:help => Macht n Fragezeichen.. is ja auch egal

*onMouseover=... => Öffnet ein Fenster mit definierten Attributen (z.b. Breite/Höhe/obs verstellbar is usw)

*onMouseout=window.close() => das funktioniert nicht, is ws auch nicht an der richtigen Stelle. Das sollte eigentlich bewirken, dass mein PopUp geschlossen wird, wenn die Seite mit den Links mausmäßig verlassen wird.

Hier irgendwo soll auch (ich habs nachträglich eingefügt das on focus, weil ichs wieder rausgenommen hatte, kann sein das stimmt net ganz von der snytax her) das Fenster wieder in den Vordergrund geholt werden, falls es in den Hintergrund flutscht.

Ich hoffe es is jez verständlicher. Ich hab ja bei selfhtml und diversen anderen Seiten schon geschaut und es gibt eigentlich nur drei dinge die mir helfen könnten: onblur(), .close() und onfocus(), methodenmäßig.

Nur wo ich das onmouseout reinpacke weiß ich net, muss schon in den link rein, oder?

[kills]

Nur wo ich das onmouseout reinpacke weiß ich net, muss schon in den link rein, oder?

im link ist richtig

<b> <a name=3>3</a><br></b>

<a href="" style="cursor:help;" onMouseover=window.open('stichwort/3311.html','3311','top=300,left=500,height=470,width=450,resizable=no,scrollbars=no,menubar=no,status=no') onMouseout=window.close()>3311</a>

<p>

<b> <a name=A>A</a><br></b>

<a href="" onMouseover=window.open('stichwort/archivierung.html','3311','top=300,left=500,height=470,width=450,resizable=no,scrollbars=no,menubar=no,status=no'),onfocus()>Archivierung<p></a>

wenn du das ganze mit layern machst, ist das meiner meinung nach besser weil:

1. du nicht dauernd ein fenster aufmachst/schließt

2. schneller ist

3. besser aussieht

4. einfacher,...

Bsp siehe:

http://www.perl-archiv.de/javascript/scripts/javascript_0107_main.shtml

oder

http://www.dyn-web.com/dhtml/tooltips/tooltip.html

[Viny]

hey, das erste sieht cool aus, ich glaube das versuche ich mal..

auf layer hät ich auch selber kommen können *lol*

jetzt muss ich nur mal schaun, ob die auch bei links funktionieren, aber im allgemeinen is das natürlich eleganter als meins, aber ich war schon fast nah dran

und dankeschön, ich schau mir das morgen mal genau an, jetzt muss ich erst mal die sonne genießen *hrhr*

[Viny]

Edit:

also, die erste Variante hat nicht funktioniert, da so wie dies gemacht ham konnte nur ein layer geöffnet werden und das war auch nicht ganz das wahre.

ich hab jetzt mal das zweite versucht, die demo funkt, meins aber nicht, obwohl ichs meiner meinung nach genaus implementiert habe wies sollte (ich verzichte auf den quellcode, weil der nämlich zu lang is)

mir is grad aufgefallen, dass das anscheinend dhtml ist, muss ich da was beachten was ich übersehen habe? ich hab schon mit viel gearbeitet, aber noch nie mit dhtml, bin darin also sehr ungeübt.

ich hab übrigens noch eine externe css, kann das daran liegen?

[kills]

<body onload="init()">


<style = "Text/css">

	.BubbleClass { text-color: #000000; background-color: #FFFACD; }

	#bubble { position: absolute; height:10px; visiblity: hidden; z-index:10; }

</style>

<script language="JavaScript">

<!--

var mx=0;

var my=0;

isNetscape = false;

function watch_mouse(e)

{

if (isNetscape)

{

mx = e.x;

my = e.y;

}

else

{

mx = window.event.x;

my = window.event.y;

}

}

function ShowBubble(text)

{

if (isNetscape)

{

with (document.bubble.document)

{

open();

write("<span class='BubbleClass'>" + text +"</span>");

close();

}

document.bubble.left = mx;

document.bubble.top  = my +10;

document.bubble.visibility = "SHOW";

}

else

{

bubble.style.left = mx;

bubble.style.top  = my +10;

document.all.bubble.innerHTML = "<span class='BubbleClass'>" + text +"</span>";


bubble.style.visibility = "visible";

}

}

function HideBubble()

{

if (isNetscape)

{

document.bubble.visibility = "HIDE";

}

else

{

bubble.style.visibility = "hidden";

}

}

function init()

{

if (navigator.appName =="Netscape") {

isNetscape = true;

}

BrowserVar = parseFloat(navigator.appVersion);

if (BrowserVar < 4)

{

return;

}

if (isNetscape)

{

document.captureEvents(Event.MOUSEMOVE);

}

document.onmousemove = watch_mouse;

HideBubble();

}

function dummy()

{

}

//--->

</script>


<div id="bubble" ></div>

hier ist eine PopUP-Hilfe,

<a href="http://delicom.de" onmouseover="ShowBubble('hier meine Hilfe !?')" 

onmouseout ="HideBubble()">delicom.de</a>


<br>


hier ist die 2. PopUP-Hilfe,

<a href="http://dpd.de" onmouseover="ShowBubble('hier meine 2. Hilfe !?')" 

onmouseout ="HideBubble()">dpd.de</a>


<br>


hier ist die 3. PopUP-Hilfe,

<a href="http://forum.fachinformatiker.de" onmouseover="ShowBubble('hier meine 3. Hilfe !?')" 

onmouseout ="HideBubble()">forum.fachinformatiker.de</a>

[Viny]

dummes ding, ich werd ständnig rausgehauen *nerv*

na jedenfalls danke noch mal, ich versuch trotzdem noch mal das zweite, ich hab beim ersten das div andauernd gemacht *hust* und mit ner for liefs au net richtig

wenns net klappt nehm ich doch das, wohl oder übel, wobei das zweite besser für mich zugeschnitten is (wegen links und so)

[kills]

dummes ding, ich werd ständnig rausgehauen *nerv*

na jedenfalls danke noch mal, ich versuch trotzdem noch mal das zweite, ich hab beim ersten das div andauernd gemacht *hust* und mit ner for liefs au net richtig

wenns net klappt nehm ich doch das, wohl oder übel, wobei das zweite besser für mich zugeschnitten is (wegen links und so)

das erste ist in meinen augen besser, da

schneller

höhere browserkompatibilität

einfacher zu implementieren

beispiel: siehe mein post oben

[Viny]

ja einfacher und schneller ohne frage, ich hab wie gesagt normalerweise noch links da drin, es sei denn ich ändere die taktik und lass im stichwortverzeichnis wirklich nur ein zwei sätzchen einblenden *überleg*

ja ich glaub so mach ichs, sonst komm ich heute zu gar nichts mehr *g

[kills]

ja einfacher und schneller ohne frage, ich hab wie gesagt normalerweise noch links da drin, es sei denn ich ändere die taktik und lass im stichwortverzeichnis wirklich nur ein zwei sätzchen einblenden *überleg*

ja ich glaub so mach ichs, sonst komm ich heute zu gar nichts mehr *g

in einem layer kannst du genauso links reinmachen, wie in jedem anderen html element

[Viny]

na ja, er verschwindet ja gleich, wenn ich meinen "link" verlasse mit der maus.

aber ich hab grad was anderes gefunden: entweder ich bin jetzt total bescheuert oder ich kann nur zwei von den dingern anzeigen..

muss ich das div nach jedem <p> neu machen? (ne kann nich sein)

sin da irgendwelche variablen drin, die dann nur für die zwei ausgerichtet sin? ich bin verwirrt^^

[Viny]

aber ich hab grad was anderes gefunden: entweder ich bin jetzt total bescheuert oder ich kann nur zwei von den dingern anzeigen..

muss ich das div nach jedem <p> neu machen? (ne kann nich sein)

sin da irgendwelche variablen drin, die dann nur für die zwei ausgerichtet sin? ich bin verwirrt^^

Bin ich blind oder is das eins der Foren, in denen man nur innerhalb einer viertel Std editieren kann? *confused*

na jedenfalls hab ich den Fehler gefunden, hatte onmouserover statt onmouseover geschrieben :floet:

jetzt muss ich nur noch beim style die einstellung finden, dass er, wenn ich runterscrolle net wieder oben anfängt und mein kommentar dann quasi in der luft hängt^^

ich nehme an das geht über position:absolute, dass ich was anderes da einstellen muss *zu selfhtml flitz*

und dann hab ichs auch schon und danke für die hilfe.. mal wieder, ich hoffe diesmal zum letzten mal