POPUP menü über ein anderes Frame laufen lassen

Nok · 08.02.2003, 23:32

Hallo

Ich hab folgendes Proplem: ich möchte ein Popup menü das im oberen frame ist in einem anderem frame anzeigen lassen !!
Erläuterung: Wenn ich mit der Maus über ein Wort "Hallo" darüberfahre dann fährt
das menü herunter. Diese menü soll aber nicht im selben frame herunter kommen
sondern im frame darunter.

Frage geht das ?
Wenn ja wie ?

Mfg Nok

begbie · 09.02.2003, 00:57

jo also ich hab genau das schon programmiert. ich kann dir aber leider nur ein paar kurze hinweise dazu geben...

das javascript sieht so aus:

--------parent.main.document.all.Layer1.style.visibility=" visible";------

du befindest dich also im oberen frame, das frame indem deine navigation liegt heisst in diesem falle "main". dort ist ein div mit dem namen "layer1". das ereignis liegt meinetwegen auf dem <a onMouseOver()>hello</a>. dort rufst du dann eine funktion auf in der das JS s.o. liegt....
was du dann meistens noch benötigst ist ein onScrol() event im body deines "main" frames...sieht für den einen layer so aus:

das ist die function repos() :
-----document.all.Layer1.style.top = document.body.scrollTop;-------

<body onScroll="repos();">

und wird im <body> des "main" frames, also der html seite, gesetzt z.B.:

damit bleibt dann die navigation auch beim scrollen nach unten immer am oberen ende...

hoffe das reicht dir!

begbie

Mr. Bubbles · 09.02.2003, 02:11

Moin, ich könnt' dir im Laufe der Woche einen funktionierenden Script mailen, wenn Du willst.

Hab ihn nur leider in der Firma. Aber wenn ich ihn mal posten soll, sag Bescheid.

Nok · 09.02.2003, 02:59

Kannst auf jedenfall posten
Merci im vorraus
NOK

begbie · 09.02.2003, 03:59

meine sache funzt auch...

Nok · 09.02.2003, 13:58

Hi Begbie

Also ich hab es grad versuch mit deinem Script, blick aber nicht so ganz durch.
Was meinst du mit main ist das frame in dem die Navigation ist ?
Wo wird dann das frame angeben wo in welches frame es soll ???

NOK

Rohde · 09.02.2003, 15:07

Probier das mal aus. Ich habe es gerade mal zusammengestrickt und mit dem IE, Konqueror und Phoenix ausprobiert. Hat alles geklappt. Die Funktion css(), genauso wie die beiden Aufrufe dieser Funktion sind für das Beispiel natürlich völlig irrelevant.

index.htm:

<html>
<frameset rows="30,*" framespacing=0 frameborder=0 border=0>
<frame src="oben.htm" name="oben" scrolling=no>
<frame src="about:blank" name="unten">
</frameset>
</html>

Was passiert hier also: Es wird ein Frameset aufgebaut, dessen Frames die Namen "oben" und "unten" tragen. Um nicht noch eine Datei erstellen zu müssen, wird in "unten" erst einmal gar nichts geladen (about:blank).

oben.htm:

<html>
<script>
var written=0;

function menutitle()
{
// Definition der Menütitel

menutitle = new Array("Menü 1","Menü 2","Menü 3");

// Ausgabe der Menütitel in den oberen Frame

for(i=0;i<menutitle.length;i++)
{
document.write("<div style='position:absolute;left:"+(50+i*100)+"px;top :14px;width:99px;background-color:#666666;text-align:center'><b><a href='Javascript:showmenu("+i+");'>"+menutitle[i]+"</a></b></div>");
}
}

function showmenu(id)
{
if(written==0)
{
writemenu();
}

for(i=0;i<menu.length;i++)
{
parent.frames["unten"].document.getElementById("menu"+i).style.visibilit y="hidden";
}

parent.frames["unten"].document.getElementById("menu"+id).style.visibili ty="visible";
}

function writemenu()
{
// Definition der Menüeinträge und URLs

menu = new Array();
menu[0]=new Array("M1L1","M1L2","M1L3");
menu[1]=new Array("M2L1","M2L2","M2L3","M2L4");
menu[2]=new Array("M3L1","M3L2");

url = new Array();
url[0]=new Array("m1l1.htm","m1l2.htm","m1l3.htm");
url[1]=new Array("m2l1.htm","m2l2.htm","m2l3.htm","m2l4.htm") ;
url[2]=new Array("m3l1.htm","m3l2.htm");

// Ausgabe der Menüs in den unteren Frame

for(i=0;i<menu.length;i++)
{
parent.frames["unten"].document.write("<div id='menu"+i+"' style='position:absolute;padding-left:5px;left:"+(50+i*100)+"px;top:0px;width:99px; background-color:#888888;visibility:hidden;'>");
for(t=0;t<menu[i].length;t++)
{
parent.frames["unten"].document.write("<a href='"+url[i][t]+"'>"+menu[i][t]+"</a><br>");
}
parent.frames["unten"].document.write("</div>");
}

written=1;
}

function css(frame,bgcol)
{
// Ausgabe der StyleSheets

parent.frames[frame].document.write("<style>body{background-color:#000000;font-family:Arial,Helvetica;font-size:12px;margin:0px;}a{text-decoration:none;color:#cccccc;}a:hover{color:#ffff ff;}</style>");
}

css("oben");
css("unten");
menutitle();
</script>
<body>
</body></html>

Die Datei oben.htm definiert als erstes die globale Variable "written", mit der geprüft wird, ob die Menüs im Frame "unten" bereits geschrieben worden sind. Anschließend wird die
JS-Funktion menutitle() gestartet, die im oberen Frame drei Links erzeugt. Nach einem Klick auf einen dieser Links wird die Funktion showmenu() aufgerufen, die zuerst die Variable "written"
abfragt. Da diese anfangs auf 0 (=>Menüs noch nicht geschrieben) gesetzt wurde, wird die Funktion writemenu() aufgerufen, die die Menüs in den Frame "unten" schreiben und mittels css verstecken. Anschließend wird "written" auf 1 (=>Menüs sind geschrieben) gesetzt, so daß beim nächsten Klick auf einen der Menüpunkte im Frame "oben" die Menüs nicht noch einmal geschrieben werden. Anschließend werden alle Menüs versteckt und nur das gewünschte Menü angezeigt.

Alle Links und Linkbezeichnungen stehen in den Arrays menutitle, menu und url. Wo liegen jetzt die Schwächen bei dieser Demo? Nun, wenn man einen Link in einem Menü anklickt, wird die entsprechende Seite aufgerufen. Dadurch verschwinden aber die in den Frame "unten" geschriebenen Menüs. Die Variable "written" steht aber immer noch auf 1. Demnach gibt es hinter keine Möglichkeit mehr, ein Menü aufzurufen.

Und warum habe ich das nicht gleich richtig gemacht, bevor ich das hier gepostet habe? Mal abgesehen davon, daß ich keine Lust mehr habe, mich weiter damit zu beschäftigen, liegt es doch auf der Hand, daß sich Deine Frage mit einem simplen parent.frames["unten"].document.write() hätte beantworten lassen. Außerdem würde man in der Realität ein solches Konstrukt sowieso nicht einsetzen.

Was kannst Du also tun? Die Funktion css() und deren aufrufe schmeißt Du raus und benutzt eine externe css-Datei, die man sowieso auf jeder Seite einbinden sollte. Falls Dir PHP (oder ähnliches) zur Verfügung steht, würde ich das, was die Funktion writemenu() tut einfach in eine eigene HTML-Datei schreiben und ebenfalls auf jeder Seite includieren. Dadurch kannst Du Dir den ganzen Murks mit "written" sparen, da die Menüs dann sowieso immer vorhanden sind. Sollte Dir PHP nicht zur Verfügung stehen, nimmst Du den Inhalt der writemenu()-Funktion, steckst ihn in eine externe js-Datei und fügst in jede Deiner Seiten <script src="writemenu.js"></script> ein. Dadurch erreichst Du das gleiche.

Was hast Du dann noch? Viele Seiten, die die StyleSheets anziehen und das versteckte Menü includieren (auf welche Art
auch immer) und einen oberen Frame, in dem die einzelnen Links die Funktion showmenu() aufrufen, die Du auch um die written-Abfrage kürzen kannst.

Viel Spaß damit.

08.02.2003, 23:32	#1
Nok Reg.-Benutzer Reg.-Datum: 06.02.2003	POPUP menü über ein anderes Frame laufen lassen Hallo Ich hab folgendes Proplem: ich möchte ein Popup menü das im oberen frame ist in einem anderem frame anzeigen lassen !! Erläuterung: Wenn ich mit der Maus über ein Wort "Hallo" darüberfahre dann fährt das menü herunter. Diese menü soll aber nicht im selben frame herunter kommen sondern im frame darunter. Frage geht das ? Wenn ja wie ? Mfg Nok

09.02.2003, 02:11	#3
Mr. Bubbles Reg.-Benutzer Reg.-Datum: 31.10.2001 Ort: Hoher Norden	Moin, ich könnt' dir im Laufe der Woche einen funktionierenden Script mailen, wenn Du willst. Hab ihn nur leider in der Firma. Aber wenn ich ihn mal posten soll, sag Bescheid. __________________ Yours, Mr. Bubbles (former CIA-Agent, now socialworker) I'm not scared of dying, I just don't want to If I´d stop lying I'd just disappoint you Robbie Williams - Come undone

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen Download als PDF Datei
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

09.02.2003, 00:57	#2
begbie Gesperrt Reg.-Datum: 02.10.2002	jo also ich hab genau das schon programmiert. ich kann dir aber leider nur ein paar kurze hinweise dazu geben... das javascript sieht so aus: --------parent.main.document.all.Layer1.style.visibility=" visible";------ du befindest dich also im oberen frame, das frame indem deine navigation liegt heisst in diesem falle "main". dort ist ein div mit dem namen "layer1". das ereignis liegt meinetwegen auf dem <a onMouseOver()>hello</a>. dort rufst du dann eine funktion auf in der das JS s.o. liegt.... was du dann meistens noch benötigst ist ein onScrol() event im body deines "main" frames...sieht für den einen layer so aus: das ist die function repos() : -----document.all.Layer1.style.top = document.body.scrollTop;------- <body onScroll="repos();"> und wird im <body> des "main" frames, also der html seite, gesetzt z.B.: damit bleibt dann die navigation auch beim scrollen nach unten immer am oberen ende... hoffe das reicht dir! begbie

09.02.2003, 02:59	#4
Nok Reg.-Benutzer Reg.-Datum: 06.02.2003	Kannst auf jedenfall posten Merci im vorraus NOK

09.02.2003, 03:59	#5
begbie Gesperrt Reg.-Datum: 02.10.2002	meine sache funzt auch...

09.02.2003, 13:58	#6
Nok Reg.-Benutzer Reg.-Datum: 06.02.2003	POPUp Hi Begbie Also ich hab es grad versuch mit deinem Script, blick aber nicht so ganz durch. Was meinst du mit main ist das frame in dem die Navigation ist ? Wo wird dann das frame angeben wo in welches frame es soll ??? NOK

09.02.2003, 15:07	#7
Rohde Reg.-Benutzer Reg.-Datum: 07.06.2000 Ort: Hannover	Probier das mal aus. Ich habe es gerade mal zusammengestrickt und mit dem IE, Konqueror und Phoenix ausprobiert. Hat alles geklappt. Die Funktion css(), genauso wie die beiden Aufrufe dieser Funktion sind für das Beispiel natürlich völlig irrelevant. index.htm: <html> <frameset rows="30," framespacing=0 frameborder=0 border=0> <frame src="oben.htm" name="oben" scrolling=no> <frame src="about:blank" name="unten"> </frameset> </html> Was passiert hier also: Es wird ein Frameset aufgebaut, dessen Frames die Namen "oben" und "unten" tragen. Um nicht noch eine Datei erstellen zu müssen, wird in "unten" erst einmal gar nichts geladen (about:blank). oben.htm: <html> <script> var written=0; function menutitle() { // Definition der Menütitel menutitle = new Array("Menü 1","Menü 2","Menü 3"); // Ausgabe der Menütitel in den oberen Frame for(i=0;i<menutitle.length;i++) { document.write("<div style='position:absolute;left:"+(50+i100)+"px;top :14px;width:99px;background-color:#666666;text-align:center'><b><a href='Javascript:showmenu("+i+");'>"+menutitle[i]+"</a></b></div>"); } } function showmenu(id) { if(written==0) { writemenu(); } for(i=0;i<menu.length;i++) { parent.frames["unten"].document.getElementById("menu"+i).style.visibilit y="hidden"; } parent.frames["unten"].document.getElementById("menu"+id).style.visibili ty="visible"; } function writemenu() { // Definition der Menüeinträge und URLs menu = new Array(); menu[0]=new Array("M1L1","M1L2","M1L3"); menu[1]=new Array("M2L1","M2L2","M2L3","M2L4"); menu[2]=new Array("M3L1","M3L2"); url = new Array(); url[0]=new Array("m1l1.htm","m1l2.htm","m1l3.htm"); url[1]=new Array("m2l1.htm","m2l2.htm","m2l3.htm","m2l4.htm") ; url[2]=new Array("m3l1.htm","m3l2.htm"); // Ausgabe der Menüs in den unteren Frame for(i=0;i<menu.length;i++) { parent.frames["unten"].document.write("<div id='menu"+i+"' style='position:absolute;padding-left:5px;left:"+(50+i*100)+"px;top:0px;width:99px; background-color:#888888;visibility:hidden;'>"); for(t=0;t<menu[i].length;t++) { parent.frames["unten"].document.write("<a href='"+url[i][t]+"'>"+menu[i][t]+"</a><br>"); } parent.frames["unten"].document.write("</div>"); } written=1; } function css(frame,bgcol) { // Ausgabe der StyleSheets parent.frames[frame].document.write("<style>body{background-color:#000000;font-family:Arial,Helvetica;font-size:12px;margin:0px;}a{text-decoration:none;color:#cccccc;}a:hover{color:#ffff ff;}</style>"); } css("oben"); css("unten"); menutitle(); </script> <body> </body></html> Die Datei oben.htm definiert als erstes die globale Variable "written", mit der geprüft wird, ob die Menüs im Frame "unten" bereits geschrieben worden sind. Anschließend wird die JS-Funktion menutitle() gestartet, die im oberen Frame drei Links erzeugt. Nach einem Klick auf einen dieser Links wird die Funktion showmenu() aufgerufen, die zuerst die Variable "written" abfragt. Da diese anfangs auf 0 (=>Menüs noch nicht geschrieben) gesetzt wurde, wird die Funktion writemenu() aufgerufen, die die Menüs in den Frame "unten" schreiben und mittels css verstecken. Anschließend wird "written" auf 1 (=>Menüs sind geschrieben) gesetzt, so daß beim nächsten Klick auf einen der Menüpunkte im Frame "oben" die Menüs nicht noch einmal geschrieben werden. Anschließend werden alle Menüs versteckt und nur das gewünschte Menü angezeigt. Alle Links und Linkbezeichnungen stehen in den Arrays menutitle, menu und url. Wo liegen jetzt die Schwächen bei dieser Demo? Nun, wenn man einen Link in einem Menü anklickt, wird die entsprechende Seite aufgerufen. Dadurch verschwinden aber die in den Frame "unten" geschriebenen Menüs. Die Variable "written" steht aber immer noch auf 1. Demnach gibt es hinter keine Möglichkeit mehr, ein Menü aufzurufen. Und warum habe ich das nicht gleich richtig gemacht, bevor ich das hier gepostet habe? Mal abgesehen davon, daß ich keine Lust mehr habe, mich weiter damit zu beschäftigen, liegt es doch auf der Hand, daß sich Deine Frage mit einem simplen parent.frames["unten"].document.write() hätte beantworten lassen. Außerdem würde man in der Realität ein solches Konstrukt sowieso nicht einsetzen. Was kannst Du also tun? Die Funktion css() und deren aufrufe schmeißt Du raus und benutzt eine externe css-Datei, die man sowieso auf jeder Seite einbinden sollte. Falls Dir PHP (oder ähnliches) zur Verfügung steht, würde ich das, was die Funktion writemenu() tut einfach in eine eigene HTML-Datei schreiben und ebenfalls auf jeder Seite includieren. Dadurch kannst Du Dir den ganzen Murks mit "written" sparen, da die Menüs dann sowieso immer vorhanden sind. Sollte Dir PHP nicht zur Verfügung stehen, nimmst Du den Inhalt der writemenu()-Funktion, steckst ihn in eine externe js-Datei und fügst in jede Deiner Seiten <script src="writemenu.js"></script> ein. Dadurch erreichst Du das gleiche. Was hast Du dann noch? Viele Seiten, die die StyleSheets anziehen und das versteckte Menü includieren (auf welche Art auch immer) und einen oberen Frame, in dem die einzelnen Links die Funktion showmenu() aufrufen, die Du auch um die written-Abfrage kürzen kannst. Viel Spaß damit.