Menü mit Iframe + JS (Bitte um dringende Hilfe !)

C

Callboy

Mitglied
Hallo!

brauche eure Hilfe... !
Habe JS Funktionen die ich gar nicht verstehe bzw. nicht funktionieren so wie ich es möchte...

Möchte eine Menü haben, die z.b. so funktioniert, wenn man auf ein Bild klickt, so öffnet sich das <iframe> tag direkt unter dem Bild.
Der iframe ladet somit in das iframe-kasten den inhalt eines anderen Datei...

So soll es ungefähr aussehen... :

+--------------------------------------------+
| hier ist ein Bild zum anklicken |
+-------------------------------------------+

+------------------------------------------------------+
| hier erscheind nach dem klicken |
| diese unter-menue (aus iframe) |
| oder aus irgendetwas die eine datei |
| hier öffnet |
+------------------------------------------------------+


HTML: 
<img alt='Horizontal Rule' class='butClass' src='image/toolbar/post_button_html.gif' onMouseOver='ItemOn(this, "post_button_html")' onMouseOut='ItemOff(this, "post_button_html")' onMouseDown='ItemDown(this, "post_button_html")' onMouseUp='ItemUp(this, "post_button_html")' onClick='test()' id='forecolor' name='forecolor'>
<iframe width="260" height="165" id="colourPalette" name="colourPalette" src="color-test.htm" style="visibility:hidden; position:absolute; left:0px; top:0px;" frameborder="0" scrolling="no"></iframe>

Und hier dazu die JS Funktionenen

PHP: 
function test(){
         iframeWin = 'colourPalette';
         buttonElement = 'forecolor'
	document.getElementById(iframeWin).style.visibility='visible';
         document.getElementById(buttonElement).contentWindow.focus();
         alert(document.getElementById(buttonElement) + "asdasd");
         document.getElementById(iframeWin).style.left = getOffsetLeft(buttonElement) + 'px';
         document.getElementById(iframeWin).style.top = (getOffsetTop(buttonElement) + buttonElement.offsetHeight) + 'px';
         var fuck = document.getElementById(iframeWin).style.top;


         if (document.getElementById(iframeWin).style.visibility=='visible'){
			hideIframes();
		}else{
			hideIframes();
			document.getElementById(iframeWin).style.visibility='visible';
		}
	//colourPalette.style.visibility = 'test';
         //colourPalette.style.position = 'absolute';

}

//Iframe top offset
function getOffsetTop(elm){
	var mOffsetTop = elm.offsetTop;
	var mOffsetParent = elm.offsetParent;
	while(mOffsetParent){
		mOffsetTop += mOffsetParent.offsetTop;
		mOffsetParent = mOffsetParent.offsetParent;
	}
	return mOffsetTop;
}

//Iframe left offset   elm
function getOffsetLeft(){
	var mOffsetLeft = forecolor.offsetLeft;
	var mOffsetParent = forecolor.offsetParent;
	while(mOffsetParent){
		mOffsetLeft += mOffsetParent.offsetLeft;
		mOffsetParent = mOffsetParent.offsetParent;
	}
	return mOffsetLeft;
}

function hideIframes(){
	if(document.getElementById('colourPalette').style.visibility=='visible'){
         	document.getElementById('colourPalette').style.visibility='hidden';
         }
}


Bitte bitte so Helft mir !

MfG
Callboy
 
Das, was du da beschreibst, bekommst du auch mit weniger Aufwand zustande:
Code: 
<a href="pfad/zur/seite.htm"onclick="document.getElementsByName('deinFrame')[0].style.display='block'"target="deinFrame">
 <img src='bild.gif'>
</a>
<iframe width="260" height="165" name="deinFrame" style="display:none"></iframe>
 
Hi,

wow, cool es klappt *freu...
Aber habe eine kleine Problemchen...
Und zwar das Bild ist in eine Tabelle drin und wenn ich drauf klicke verschiebt sich die Zelle gewaltig, was eigentlich nicht darf.

Wollte oder möchte es so haben, dass es über die Zelle, also das es trotzdem aufklappt ohne das die Zelle sich ändert also einfach drüber sich klappen lässt...

Wie kann ich das denn bewerkstelligen ?
Und mit welchem befehl kann ich den iframe wieder verschwinden lassen, also zuklappen ?

Bitte bitte um dringende Hilfe !

MfG
Callboy

PS: Wo kann ich denn informationen her holen, wo ich sowas einfach ablesen kann, was für befehle für js so alles gibt ?
z.b. bei php.net ist es perfekt sowas aufgeschlagen, aber für js gibt es nichts, wo man sich schlau machen kann :(
 
Hallo!

Bekomme ich keine Hilfe hier ?
Bitte bitte, so Hilft mir, ich weiß nicht wie ich dies lösen soll !

Habe noch eine weitere Frage und zwar, wie kann ich die Rückgabe eines Funktions die in einem Datei liegt und mit iframe auf die andere geholt wird ansprechen ?

Also, es ist so ungefähr:

Datei 1) test.htm
Datei 2) hallo.htm

Inhalt des test.htm:

function aaa(){
return "hallo";
}

.....

usw.

Inhalt des hallo.htm:

function bbb(){
var jjj = function aaa();
}

....
...
...

<iframe src='test.htm'></iframe>


Versteht Ihr wie ich das meine ?
So wie ich dies dort oben gemacht habe, funktioniert nicht, weiß aber auch nicht wie ich dies bewerkstelligen kann...

Bitte bitte um dringende Hilfe !

MfG
Callboy
 
zum 1.

Code: 
<script type="text/javascript">
<!--
function tester(objObj)
{
objTarget=objObj.nextSibling;
objTarget.style.left=objObj.offsetLeft;
objTarget.style.top=objObj.offsetTop+objObj.offsetHeight;
objTarget.style.display=(objTarget.style.display=='none')?'block':'none';
}
//-->
</script>

aufgerufen wird es per tester(this) im <img> .
Wichtig dabei.... die display-Eigenschaft des iFrames muss 'none' sein.

Das iFrame muss direkt hinter dem Bild stehen.... es darf nicht mal ein Leerzeichen zwischen den Tags stehen.


Was die 2.Frage angeht....
Code: 
function bbb(){
var jjj = window.nameDesIframes.aaa();
}
 
Hi Sven,

dankeschön für deine Hilfe, werde es sofort testen *freu...
Sorry, dass ich so spät antworte aber hatte bisschen Rechner probleme !

MfG
Callboy
 
Hi Sven,

dies hier funktioniert nicht richtig !
Die Tabellen verschieben sich, das iframe klappt nicht drüber :(

Sven Mintel hat gesagt.:
zum 1.

Code: 
<script type="text/javascript">
<!--
function tester(objObj)
{
objTarget=objObj.nextSibling;
objTarget.style.left=objObj.offsetLeft;
objTarget.style.top=objObj.offsetTop+objObj.offsetHeight;
objTarget.style.display=(objTarget.style.display=='none')?'block':'none';
}
//-->
</script>
Zum Vergrößern anklicken....

Und dieses klappt auch nicht, verstehe das nicht *heul

Was die 2.Frage angeht....
Code: 
function bbb(){
var jjj = window.nameDesIframes.aaa();
}
Zum Vergrößern anklicken....

Bitte bitte so Hilft mir, ich raff das ganze nicht...

MfG
Callboy
 
Sven Mintel hat gesagt.:
:-( Ich vergass zu erwähnen, dass das iFrame auch das CSS-Format position:absolute besitzen muss
Zum Vergrößern anklicken....

Hi Sven,

okay habe es, aber der iframe ist nicht an der position des Bildes (img) !
Was fehlt denn da noch ?

Die funktion übergaben funktionieren auch nicht, wie mache ich das ?

Bitte um Hilfe !

MfG
Callboy
 
Zuletzt bearbeitet:
Hier ist alles so, wie ich es gepostet habe... geht das bei dir auch nicht?

Welchen DOCTYPE hast du in der betreffenden Seite notiert(falls vorhanden)?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück