WinFuture-Forum.de: Iframe Per Hyperlink Einblenden - WinFuture-Forum.de

Nachrichten zum Thema: Entwicklung

Seite 1 von 1

Iframe Per Hyperlink Einblenden

#1 oehi86

Auskenner

Gruppe: aktive Mitglieder
Beiträge: 55
Beigetreten: 27. März 07
Reputation: 0
Wohnort:Duderstadt

geschrieben 07. Oktober 2009 - 10:23

Hallo zusammen,

gibt es eine Möglichkeit, das ich einen iframe (oder ähnliches) auf "klick" ein und ausblenden kann?
Ich möchte quasi einen "Veranstaltungskalender" auf klick ein und ausblenden lassen, damit ich es dem "User" überlasse, ob er den Kalender sehen möchte oder nicht.
Vielleicht kann man das auch mit einem cookie irgendwie "speichern"?

Schöne Grüße und vielen Dank!
Philipp

Nach oben
Nach oben of the page up there ^

#2 slurp

Freak

Gruppe: aktive Mitglieder
Beiträge: 1.409
Beigetreten: 25. September 08
Reputation: 133
Geschlecht:Männlich

geschrieben 07. Oktober 2009 - 10:39

Einfach um das iFrame ein div legen und das dann per onClick ein- und ausblenden lassen.

So in etwa sollte das funzen:

<p style="cursor: pointer;" onclick='document.getElementById("div1").style.display = (document.getElementById("div1").style.display == "none")?"block":"none";'>Klick mich</p>



<div id="div1" style="display: none;">

<iframe name="iframe1">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>

</div>

Nach oben
Nach oben of the page up there ^

#3 Witi

Supermond

Gruppe: aktive Mitglieder
Beiträge: 5.947
Beigetreten: 13. Dezember 04
Reputation: 43
Geschlecht:Männlich
Wohnort:Kingsvillage
Interessen:Frickeln

geschrieben 07. Oktober 2009 - 10:47

Wenn du ein Framework wie jQuery verwenden möchtet (zugegeben für eine simple Funktion etwas oversized), könntest du Einblendungen mit schönen Animationen verfeinern.

...
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("div1").hide();
$("klick").click(function() {
	$("div1").fadeIn();
});
</script>
</head>
...
<a id="klick">IFrame einblenden</a>
<div id="div1">
<iframe ...
</div>

[email protected] 0xAAE321A2

50226 - Witis Blog