Iframe d.m.v knopje laten verschijnen en laten zien.

[Verwijderd]

Hey Mensen,

Ik heb hard gezocht naar het volgende. Ik heb gewoon een normale html pagina met daarin een kleine iframe die verwijst naar een andere pagina. Nu zou ik graag doormiddel van een knopje of link de iframe laten zien en weer laten verdwijnen. Is dit mogelijk ? Zo ja hoe? Ik ben geen expert op gebied van javascript of wat dan ook. Ben blij dat ik wat html kennis heb

Dank je wel alvast

[disjfa]

Jep. Met javascript kan je bijvoorbeeld een element mbv het css element display aan en uitzetten.

[Snake]

HTML:

<iframe id="frame" src="iets.html" style="display:none;"></iframe><br />
<a href="#" onclick="if(frame.style.display == 'none') { frame.style.display=block; } else { frame.style.display=none; }">Klik</a>

[ Voor 5% gewijzigd door Snake op 25-10-2007 16:43 ]

[Verwijderd]

wow ik ga dit eerst ff uitproberen. jullie zijn echt snel ff testen..

[TERW_DAN]

Ja, dit kun je doen dmv Javascript waarmee je de display attribute op none zet (en weer op block om terug te doen). Of de visibility op hidden/visible.

even uit de losse hand de functie die je daarvoor nodig hebt:

code:

function hideframe (){
var frame = getElementById('iframeid');
frame.style.visibility = "hidden";
}

function showframe (){
var frame = getElementById('iframeid');
frame.style.visibility = "visible";
}

Iets in die richting (weet zo niet of het syntaxerror vrij is, heb het niet getest).

[André]

Maar kon je nou zelf helemaal niets vinden?

[Snake]

Terw_Dan schreef op donderdag 25 oktober 2007 @ 16:46:
Ja, dit kun je doen dmv Javascript waarmee je de display attribute op none zet (en weer op block om terug te doen). Of de visibility op hidden/visible.

even uit de losse hand de functie die je daarvoor nodig hebt:

code:

function hideframe (){
var frame = getElementById('iframeid');
frame.style.visibility = "hidden";
}

function showframe (){
var frame = getElementById('iframeid');
frame.style.visibility = "visible";
}

Iets in die richting (weet zo niet of het syntaxerror vrij is, heb het niet getest).

Ge spreekt over display, en toch gebruikt ge visibility. Dat is een verschil, aangezien visibilty = "hidden"; de grootte en breedte van het object behoud in de pagina, terwijl het bij display="none"; het echt wordt verborgen, en de content wordt gerenderd naar die plaats.

[Daywalk3r]

als je beginner bent is www.leejoo.nl ofzo mischien wel wat voor jou
dat is zo'n website waaar geloof ik van alles opstaat

[Verwijderd]

lejoo had ik idd geprobeerd. ik zie dat mensen mij voorzijn ik ga nog wat stoeien tnx people :d

ik heb idd gezocht, maar weet totaal niet waar ik op moet zoeken al die benamingen.. kom der nie wijs uit haha. netzoals hier boven staat..

[ Voor 115% gewijzigd door Verwijderd op 25-10-2007 16:55 ]

[Verwijderd]

Als ik erop klik krijg ik error in page..

Snake schreef op donderdag 25 oktober 2007 @ 16:42:

HTML:

<iframe id="frame" src="iets.html" style="display:none;"></iframe><br />
<a href="#" onclick="if(frame.style.display == 'none') { frame.style.display=block; } else { frame.style.display=none; }">Klik</a>

[disjfa]

Verwijderd schreef op donderdag 25 oktober 2007 @ 16:53:
ik heb idd gezocht, maar weet totaal niet waar ik op moet zoeken al die benamingen.. kom der nie wijs uit haha. netzoals hier boven staat..

Je wilt 12 stappen overslaan. Je moet eerst inleven in html. Dan kom je dit soort gekke dingen vanzelf een keer tegen. Nu wil je gewoon even snel wat maken zonder dat je daar wat van weet. Dat is gewoon onhandig

[Verwijderd]

begrijp ik. waar ik alleen goed in ben is op die site van leejoo een paar dingen aan te passen. maar ja dat kan iedereen. ik ben niet zo into the webdesign. tis maar dat ik gewoon dit heb zodat ik verder kan met mijn html startpagina op het werk voor tussen de e-mails en chats door

[TERW_DAN]

Snake schreef op donderdag 25 oktober 2007 @ 16:51:
[...]

Ge spreekt over display, en toch gebruikt ge visibility. Dat is een verschil, aangezien visibilty = "hidden"; de grootte en breedte van het object behoud in de pagina, terwijl het bij display="none"; het echt wordt verborgen, en de content wordt gerenderd naar die plaats.

Ik geef ook aan, je pakt de display attribute of de visibility. Hier gebruik ik visibility, maar display kan ook, net waar je voorkeur ligt (meer afhankelijk of je dingen dus wel of niet gerenderd wil worden).

[Snake]

Terw_Dan schreef op donderdag 25 oktober 2007 @ 17:11:
[...]

Ik geef ook aan, je pakt de display attribute of de visibility. Hier gebruik ik visibility, maar display kan ook, net waar je voorkeur ligt (meer afhankelijk of je dingen dus wel of niet gerenderd wil worden).

Yup, maar ik zeg het maar voor de TS

@TS: getest, en werkend

HTML:

<iframe id="frame" src="iets.html" style="display:none;"></iframe>
<br />
<a href="#" onclick="var _frame = document.getElementById('frame'); if(_frame.style.display == 'none') { _frame.style.display='block'; } else { _frame.style.display='none'; }">Klik</a>

[Verwijderd]

Moet ik dan via de iframe die script aanspreken zoals snake weergeeft?

Terw_Dan schreef op donderdag 25 oktober 2007 @ 17:11:
[...]

Ik geef ook aan, je pakt de display attribute of de visibility. Hier gebruik ik visibility, maar display kan ook, net waar je voorkeur ligt (meer afhankelijk of je dingen dus wel of niet gerenderd wil worden).

[Snake]

Verwijderd schreef op donderdag 25 oktober 2007 @ 17:14:
Moet ik dan via de iframe die script aanspreken zoals snake weergeeft?


[...]

Kijk even hier: Snake in "Iframe d.m.v knopje laten verschijnen en..."

[Verwijderd]

Dit werkt inderdaad. ik ga het nu toepassen op me pagina je bent goed bezig!

Snake schreef op donderdag 25 oktober 2007 @ 17:13:
[...]

Yup, maar ik zeg het maar voor de TS

@TS: getest, en werkend

HTML:

<iframe id="frame" src="iets.html" style="display:none;"></iframe>
<br />
<a href="#" onclick="var _frame = document.getElementById('frame'); if(_frame.style.display == 'none') { _frame.style.display='block'; } else { _frame.style.display='none'; }">Klik</a>

[Snake]

Verwijderd schreef op donderdag 25 oktober 2007 @ 17:16:
Dit werkt inderdaad. ik ga het nu toepassen op me pagina je bent goed bezig!


[...]

Nu gij nog

[Verwijderd]

Dit werkt dus perfect hoehoe.. ik ben echt blij hiermee. many thanks.. nu is mijn startpagina bijna compleet. bedankt voor jullie tijd..