iframe positionierung

  • Hallo Allerseits.

    Wie kann man zwei "iframe's" über einander fix Positionieren.

    Wenn ich das wie folgt mache verrutscht der zweite kleinere Iframe stetts mit dem rechten Scrollbalken sobald ich nach unten scrolle.

    Er bleibt nicht an der Position fixiert sondern klebt regelrecht an der position des Scrollbalken.

    PHP
    <body style="padding:0px;margin:0px;">
      <iframe src="./index.php" frameborder=0 framespacing=0 border=0 style="width:100%; height:100%; overflow:visible;">
      </iframe>
    
    
      <iframe src="./mp3player/mp3player.swf" frameborder=0 framespacing=0 border=0 style="width:195px; height:105px; position:absolute; top:200px; left:50px; z-index:10;">
      </iframe>
    </body>


    Danke für die Hilfe

  • Hallo synaptic.

    Vielen Dank für deine Hilfe !

    Wenn ich das ganze wie folgt realisiere sieht alles recht gut aus.
    Das einzig wirklich grosse Problem an der Sache ist das die Links vom unteren Iframe zwar sichtbar sind jedoch sie sind nicht Aufrufbar.
    Es ist so als würde eine Glasscheibe über die Links liegen und diese Schicht versperrt einem den Zugriff auf die darunter liegende Links.

    Das gleiche gilt für den Scrollbalken für das untere Iframe(Webpage).
    Der Scrollbalken (50% des Fenster Höhe bei meiner Bildschirmauflösung) wird einwandfrei dargestellt man kann ihn jedoch nicht bewegen.
    Der Browser nimmt anscheinend nur die Events des darüber liegenden Fenster und der hat irrgendwie kein Scrollbalken.

    Ein fixe high angabe die der unteren Fensterhöhe entspricht würde wohl das Problem lösen es würde jedoch immernoch das Problem mit den Links geben.

    PHP
    <body style="padding:0px;margin:0px;">
      <iframe src="./index.php" frameborder=0 framespacing=0 border=0 style="width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:1; overflow:visible;">
      </iframe>
    
    
      <iframe src="./mp3player/mp3player.swf" frameborder=0 framespacing=0 border=0 style="width:100%; height:100%; position:absolute; top:200px; left:50px; z-index:2; overflow:visible;">
      </iframe>
    </body>

    Es ist wirklich äusserst schade das der Inhalt eines iframe innerhalb eines Bodyelement beim reload mit neugeladen wird.

    Es sollte die Möglichkeit geben den Inhalt eines Iframe vom reload der Webseite unabhängig zu steuern.

    Mit dieser Möglichkeit hätte ich nur ein Iframe in meiner Webseite einbauen müssen welches wiederum ein MP3-Radio-Player einbindet und die Probleme mit dem Sound unterbruch/reload gebe es nicht mehr.

    Derzeit wird bei einem Reload des Webseiteninhalts auch der Inhalt des Iframe erneuert.

  • also hättest du von anfang an geschildert was du vorhast, hätte man dir helfen können :)
    ich hab bisher immer nur zu nem pop-up geraten um musik permanent halten zu können :)
    aaber jetzt gibt es ja ajax, das is die modernste variante inhalte nachzuladen ohne die page komplett neu zu laden...
    haste plan von javascript?
    es geht nämlich auch, dass man aus dem iframe(höhe und breite je 1 px) heraus in die umliegende seite operiert.
    da fragste in der seite , die im iframe liegt einfach ab, ob nen frame vorhanden ist und wenn ja, dann guckste nach dem elternelement, suchst dort nach dem content-div und kloppst nen vorgefertigten inhalt, der im iframe ja nicht sichtbar ist (wegen der geringen und "unsichtbaren" grösse) eben in des content-div..
    diese technik müsste in jeder datei, die im iframe geladen wird zugrundeliegen...
    dann rufste aus dem elternelement die links auf, mit target="name des 1px-frames" und so lädste seiten nur in den frame, der inhalt ändert sich im eltern-dokument und du kannst dort im eltern-dokument noch immer den player eingebunden lassen :)

  • Hallo synaptic.

    Vielen dank nocheinmal für die Hilfe.

    Es gibt da noch eine Sache die ich nicht ganz 100% verstehe.
    Wie genau sollte noch einmal die Realisation funktioniern ?

    Ist es folgender massen ?

    Man hat eine Webseite welche man mittels "index.php" im Browser aufruft.
    In dieser Webseite gibts einen leeren Div Container mit der Bezeichnung "mp3player".
    Ebenfalls in dieser Webseite ist ein iframe mit der Grösse 1px mal 1px vorhanden welcher die Webseite "mp3player.htm" einbindet beim laden der "index.php" Datei.
    In der Datei "mp3player.htm" gibt es eine Javascript Funktion die überprüft ob sie inerhalb einem Frame läuft und falls ja ersetzt sie mittels DHTML den leeren Div Container wie folgt.

    PHP
    <div id="mp3player">
    <object width="195" height="105">
    <param name="movie" value="mp3player.swf">
    <param name="quality" value="high">
    <embed src="mp3player.swf" quality="high" width="195" height="105"></embed>
    </object>
    </div>

    Sind das alle Schritte die Nötig sind ?
    Würde das wirklich so funktionieren ?
    Wenn man das so Realisiert gibt es doch immernoch ein reload/refresh des Mp3Player nach jedem linkaufruf oder etwa nicht ?
    Was passiert eigentlich mit der visuellen Ausgabe des SWF-Objects ?
    Ist sie wirklich auf der Webseite sichtbar ?

    Einmal editiert, zuletzt von Soft-ICE-Crack (30. März 2009 um 11:02)

  • http://site.kkw-forum.de/frame-action

    fast so wie du es sagst...
    die playerfaxe bleibt statisch in der index.html und der inhalt kommt von anderen seiten...
    du kannst dem iframe auch einfach nen visibility:hidden geben, so is er da und funzt, aber keiner sieht ihn... (is sogar besser als 1px mal 1px)

    der link oben zeigt dir, wie es geht
    das script muss auf jeden fall als letztes im body stehen, bzw eben hinter dem kram, der angeizgt werden soll...

  • Hallo Synaptic.

    Vielen Dank nocheinmal für das Beispiel.

    Das ganz sollte bezogen einmal auf die Webseite
    "http://www.forum-hlife.de" als Beispiel so aussehen.

    http://mitglied.lycos.de/softicecrack/index0.html

    Oben rechts spielt der Player ununterbrochen die Musik ab. Der Seitenbesucher kann problemlos durch die Webseite surfen.
    Haupt Problem an dieser Version ist das der zweite iframe mit dem Balken mitscrollt, das heisst er ist eigenartigerweise nicht fixiert!

    Diese Version hier hat den iframe direkt in der Webseite drin.
    Hauptproblem an dieser Version ist dass nach jedem Linkaufruf bzw. Bodytag refresh, der mp3player wieder von neuem an anfängt zu spielen.

    http://mitglied.lycos.de/softicecrack/index1.html

    PHP
    <td id="header_right_cell" align="right" bgcolor="#ffffff">
            <ifram src="http://mitglied.lycos.de/softicecrack/mp3player/mp3player.html" frameborder=0 framespacing=0 border=0 style="width:195px; height:105px; overflow:visible;"
        </td>

    Den MP3-Player kann man mit folgendem Link einzeln aufrufen.
    http://mitglied.lycos.de/softicecrack/m…/mp3player.html

    Einmal editiert, zuletzt von Soft-ICE-Crack (31. März 2009 um 13:39)

  • Es reicht mir wenn der mp3player auf meiner eigener Seite wie beim ersten Beispiel funktioniert nur mit dem Unterschied das er auch auf der position fixiert bleibt.

    Wenn man das auch modular fuer andere Web Seiten haben kann ist es schoen aber nicht wirklich notwendig.

    (Man sollte schon innerhalb der eigenen Webseite Linksaufruefen koennen ohne das der MP3Player abbricht !
    Solange der Besucher auf der Webseite verweilt welche den mp3player einbindet solange soll die Musik und die Visuelle ausgabe ununterbrochen laufen und dargestellt werden. )

    Ich habe die Beispiele nur hier reingepostet um besser ueber das web nachzuvollziehen welche aenderungen wirklich gemacht werden muessen und ob die wirklich richtig sind.

    Es sollte ein Proof of Concept darstellen.
    Ein Prototyp.
    Deine beispiele sind gut jedoch zu abstrakt da sie den Mp3player nicht einbinden.
    Das macht das ganze ein bisschen schwieriger zum Verstehen

    Einmal editiert, zuletzt von Soft-ICE-Crack (31. März 2009 um 13:52)

  • Das zweite Beispiel
    http://mitglied.lycos.de/softicecrack/index1.html
    sollte als weiteres Beispiel dienen um diverse andere Implementationen zu testen.

    Ich habe mal die startseite von "forum-hilfe.de" auf mein Webspace temporär geladen und dort innerhalb der Webseite den mp3player in ein Iframe
    eingebunden.

    Ebenfalls habe ich die linkadresse des Logo oben links geändert.
    Sobald jemand jetztauf der Webseite das Logo anclickt darf der MP3Player nicht unterbrochen werden.
    ( Die Linkadresse des Logo oben links ist die einzige die funktioniert. Bitte nur diesen Link verwenden.)

    Wie du siehst wird der MP3Player hier unterbrochen.
    Soviel ich weiss liegt das am <body> Tag refresh.

  • Hallo synaptic.

    Würde es dir was ausmachen einmal zu Zeigen wie man das Ganze mit einer Seite wie "forum-hilfe.de" oder einer anderen Webseite realisieren kann ?

    Ich habe probiert dein Ansatz zu übernehmen leider schafe ich es jedoch nicht.

    Etwas was es sicher noch zusätzlich braucht ist die onload event funktion im "body" Tag.
    Ebenfalls braucht es eine Möglichkeit die Webseite neben dem MP3-Player separat zu laden.

    Genau diese Sachen wollen mir leider nicht gelingen.

    Vielen dank für die Hilfe.
    Gruss Soft-ICE-Crack

  • ich kann es dir an einer fremden site nicht vorführen, da ich da nicht auf den quellcode zugreifen kann.. und mit php kann ich dir auch kein beispiel stricken, weil mein xampp nich 24/7 on is und mein webspace verträgt das pecl_http net (müsste dafür umziehen auf nen anderen server..!)
    und nen onload-event haste da auch nicht.

    du hast deine contentseiten, mit nem div "innercontent" das brauchste bei jeder seite und nen div "content" in deiner index-seite

    das javascript kommt in jede contentseite und macht nix anderes als prüfen ob die seite in nem iframe geladen wird, wenn ja wird im elterndokument nach dem objekt "content" gesucht und dort alles an html reingeschrieben, was in der contentseite im objekt "innercontent" drinsteht....
    dadurch, dass das javascript nach dem div "innercontent" steht wird die seite aufgebaut und dabei das script direkt ausgeführt.
    wie du siehst ist in den content-seiten nichma ne funktion, sondern stumpfweg das script hingepflastert.

    dadurch dass nämlich die beiden links als target den unsichtbaren iframe haben, wird die seite darin aufgerufen und dadurch die bedingung die wichtig für das script ist erfüllt und danach wird des script eben ganz gewöhnlich ausgeführt.

    mit dieser technik kannste nur arbeiten, wenn die inhalte dir gehören oder dein "partner" eben dieses script eingebunden hat und auch das div "innercontent" implementiert.

    natürlich sind die namen der divs austauschbar, nur musste dich halt an deine eigenen konventionen dann auch halten und entsprechend das script abändern!

    und separat laden... kein plan was du damit genau meinst.. klar ist, dass separat geladen wird.. einmal die index.html mit dem player und dann nach nem linkklick eben die inhaltsseiten.
    gib mir mal links zu zwei contenseiten von dir, dann kann ich dir zeigen wie des geht...
    oder poste hier den quelltext, bitte mit absoluten URLs, damit das auch von fremden webspace funktioniert

  • nen onload-event haste da auch nicht.

    Mit dem "onload" event meinte ich das javascript dom event.
    http://www.w3schools.com/jsref/jsref_onload.asp
    Das musste jeder haben.

    und separat laden... kein plan was du damit genau meinst.. klar ist, dass separat geladen wird.. einmal die index.html mit dem player und dann nach nem linkklick eben die inhaltsseiten.

    gib mir mal links zu zwei contenseiten von dir, dann kann ich dir zeigen wie des geht...
    oder poste hier den quelltext, bitte mit absoluten URLs, damit das auch von fremden webspace funktioniert

    Vielen dank fuer die Hilfe.
    Ich habe es in der zwischen Zeit wieder versucht es selbst zu machen.
    Ich scheitere leider wieder einmal an das Laden des Mp3 Players im Iframe.

    Ich will jedoch hervorheben das mein Ziel war den MP3player automatisch mit dem Abspielen zu starten und nicht erst nach einem Linkclick.

    Ich habe nun alles wieder neu auf dem Webspace geladen und gebe dir
    zwischenzeitlich ftp zugang zum webspace per Privat Nachricht.

    Eigentlich ist das etwas einfaches. Es will mir jedoch nicht gelingen.
    Bin mal gespant wie das Resultat am Ende aussehen wird.

  • Mit dem "onload" event meinte ich das javascript dom event.
    http://www.w3schools.com/jsref/jsref_onload.asp
    Das musste jeder haben.


    häh? also dann guck mal bitte in meinem code.. wennste nen onload-event findest, dann kannste es behalten :) aber zeig mir dann vorher wo es ist.
    ich weiß nicht wann ich dir da direkt helfen kann, weil ich derzeit ausgebucht bin. evtl klappts nächste woche, da hab ich urlaub!

  • Ich bin dir für jede Hilfe sehr dankbar.
    Das du wenig Zeit hast habe ich mir fast gedacht da du bis jetzt der einzige im Netz bist der überhaupt geantwortet hat das dies machbar ist.
    Alle anderen waren der Meinung das ein implementieren eines Flashobjects in einer fertig entwickelten Webseite ohne ein Refresh/reload des SWF Object nicht möglich ist.

    Ich werde gemäss deinen Angaben noch einmal probieren deinen Ansatz auf der Seite zu implementieren und schritt für schritt hier schrieben wie ich vorgegangen bin.

    Beim durchlesen der Beiträge kannst du oder die anderen sommit einfacher feststellen wo genau der Fehler passiert ist.

    Bis später.
    Gruss Soft-ICE-Crack

  • häh? also dann guck mal bitte in meinem code.. wennste nen onload-event findest, dann kannste es behalten :) aber zeig mir dann vorher wo es ist.

    Ich bin mir nicht 100% sicher ob dein Code per se auch so geeignet ist um ein
    SWF Object in einer fertigentwickelten Webseite die bereits funktioniert einwand frei wie gewünscht zu betreiben.

    Ich habe so meine Zweifel.
    Bei deinem Code entlädt sich der Inhalt des Link im Iframe.
    Bei den meisten Webseiten inklusive meiner entlädt sich der Linkinhalt auf der gleichen Seite und nicht in einem iframe.