Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „iFrame vor Laden der Seite abdunkeln, danach aufhellen“

D

Dornick

Guest

Erm.. jar...

Ich habe folgendes "Problem":
Ich würd' gern' einen iFrame, wenn man auf einen Link klickt, vor dem Laden der Seite abdunkeln, dann die Seite laden, und anschließend den iFrame wieder aufhellen. Allerdings ohne dabei den Rest der Seite irgendwie zu beeinflussen.
Zum besseren Verständnis: Eine Beispielgraphik.

Sprich: Seite A ist zu sehen, dann wird nur der iFrame(!) dunkler, und sobald er wieder hell wird, die Überraschung: Seite B ist zu sehen.

Jetzt meine Frage: Ist das so ohne weiteres Möglich?
Ich hab schon auf mehreren Seiten gelesen, dass das mit JavaScript möglich ist, hab dementsprechend versucht, das irgendwie "umzubauen", aber irgendwie scheine ich zu blöd dazu zu sein, bis jetzt hat nämlich noch keiner der Versuche geklappt :/

Wäre Klasse, wenn sich hier 'ne Anleitung findet, die ich auch verstehe ^^'

Gruß,
Dornick
 

sokie

Mod | Web

AW: iFrame vor Laden der Seite abdunkeln, danach aufhellen

poste doch mal den code der Seite und den einer Seite, die in dem Iframe aufgerufen werden soll.
 
D

Dornick

Guest

AW: iFrame vor Laden der Seite abdunkeln, danach aufhellen

Tjar, erm.. gut, danke für die Antwort, aber mein Problem hat sich soeben in Luft aufgelöst. Fast. Was ein kleiner Tipfehler nicht alles ausmacht: Ich hatte ein Script kopiert, da allerdings einen der Tags falsch geschrieben. Ist klar, dass es dann nicht funktioniert :/

Allerdings stehe ich jetzt vor einem neuen Problem:
Wie kriege ich es hin, dass die Seite erst geladen wird, wenn der iFrame schwarz ist? So wie der Code jetzt steht, wird die neue Seite geladen, sobald der iFrame dunkler wird. Ergebnis: man sieht die Seite schon vorher aufblitzen. Gibt es einen weg, das zu umgehen? Bzw.: Kann man es so einrichten, dass gewartet wird, bis der Frame dunkel ist, dann die Seite geladen wird, und erst, wenn diese voll geladen ist, der Frame wieder heller wird?

Diesmal ist sogar Code dabei:
Code:
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
 
    $("a").click(function () {
      $("iframe").fadeOut("middle");
    });
  });
 
  $(document).ready(function(){
 
    $(document.body).click(function () {
      $("iframe").fadeIn("middle");
    });
  });
  </script>
</head>
<body bgcolor="black">
<center>
<iframe src="home.html" id="iframe" height="200" name="iframe" frameborder="1" width="500" scrolling=no></iframe><br>
<a href="home2.html" target="iframe">Link </a>
</center>
</body>
</html>

Der Text der Seite, die später im iFrame auftauchen soll, dürfte relativ uninteressant sein: Die braucht nämlich keinen besonderen Code. Das gleiche gilt für die Seite, die von Anfang an im iFrame steht.

Und dann hätte ich noch die Frage: Wie bastel ich das Stückchen Code da oben so um, dass der Frame auch dunkler wird, wenn ich innerhalb des Frames einen Link klicke, der dann im Frame geöffnet wird?
 

sokie

Mod | Web

AW: iFrame vor Laden der Seite abdunkeln, danach aufhellen

gute Sache, den ode zu posten - dann soll es also mit jQuery gemacht werden:)
für meine Lösung habe ich den Iframe in einen Div container (#framebox) gesetzt, die die Abmessungen 200x500px hat. beim klicken des links wird diesem div ein overlay hinzugefügt (vorerst per display:none unsichtbar), dann eingefadet und die neue Seite in den iframe geladen, dann wird das overlay ausgeblendet und anschliessend aus dem dom entfernt:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("a").click(function(e){
      var myLink = $(this).attr("href");
      e.preventDefault();
      $("#framebox").prepend("<div id='overlay'></div>");
      $("#overlay").css("display","none").fadeIn(1000,function(){
        $("iframe").attr("src", myLink); 
      }).fadeOut(1000, function(){
        $("#overlay").remove();
      });
    });
  });
</script>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  iframe{
    border:0 none;
    width: 100%;
    height: 100%;
  }
  #framebox{
    height: 200px;
    width: 500px;
    margin: auto;
    position:relative;
  }
  #overlay{
    height: 200px;
    width: 500px;  
    background: #000000;
    position: absolute;
    top:0;left:0;
  }
</style>
<title></title>
</head>

<body>
<a href="inhalt1.htm" target="myIF">Inhalt1</a>
<a href="inhalt2.htm" target="myIF">Inhalt2</a>
<div id="framebox">
  <iframe name="myIF" src="inhalt1.htm"></iframe>
</div>

</body>
</html>

ps: wenn das laden des inhalts etwas länger dauert, musst du bei jQuery 1.3.2 mit einem timeout arbeiten, bei jQuery1.4 gibts dafür die neue function wait();
 
Zuletzt bearbeitet:
D

Dornick

Guest

AW: iFrame vor Laden der Seite abdunkeln, danach aufhellen

Okay, das funktioniert so einwandfrei. Aber die nächste Frage wäre in diesem Fall dann: Wie krieg ich das hin, dass das Abdunkeln auch beim Klicken eines Links, der sich in dem iFrame befindet, passiert? o:

Btw, schonmal ein großes "Danke" für die Hilfe bis jetzt ^-^

[Edit]
Und wie krieg ich den Rahmen um den iFrame weg? o:
 
Zuletzt bearbeitet von einem Moderator:

sokie

Mod | Web

AW: iFrame vor Laden der Seite abdunkeln, danach aufhellen

ich habe probeweise den #framebox und overlay auf 500 x 850px gesetzt - geht ohne Probleme. (keine height und widtham iframe tag beim style für iframe wie im Beispiel aus #4 height:100% width:100%.) allerdings braucht der iframe wohleine frameborder="0" am element für den IE.

fadeIn(10) heisst, dass der effekt nur 10/1000 (1/100) sec. dauert - ab >100 könnte der Wert wohl Sinn machen.
 
D

Dornick

Guest

AW: iFrame vor Laden der Seite abdunkeln, danach aufhellen

Jop, das hab ich auch schon festgestellt. Außerdem war ich so clever, die Textdatei zu ändern, statt die htm-Datei ^^'

[Edit]
Und wieder hat sich ein Problem selbst gelöst, das ich mit einem Blick in eine ältere Datei hätte lösen können xD
Hatte im iframe-tag "border" statt "frameborder" stehen :S
 
Zuletzt bearbeitet von einem Moderator:
D

Dornick

Guest

AW: iFrame vor Laden der Seite abdunkeln, danach aufhellen

Uhm.. sry für den Doppelpost, aber es ist ein neues Porblem aufgetaucht :/

Wenn ich auf der Seite, die den iFrame beinhaltet (also die mit dem Fade-Code) nu' einen Link anklicke, wird der immer im iFrame geöffnet, das soll aber nach Möglichkeit verhindert werden. Ich hab' nämlich auch ein paar Links, die zu anderen Seiten führen, und dementsprechend in 'nem neuen Fenster geöffnet werden sollten. Werden sie aber nicht, selbst mit target="_blank" funktioniert's nicht o:
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.155
Beiträge
2.581.855
Mitglieder
67.221
Neuestes Mitglied
opaklaus
Oben