iframe & bootstrap
Is het mogelijk om waar standaard een plaatje met een bootstrap-button dropdown staat, die te laten verdwijnen als er een winkelnaam word aangeklikt, en op de plek van het plaatje en de bootstrap dropdown, de winkelsite te laten verschijnen?
Je kunt dit het beste oplossen doormiddel van een klein javascriptje.
Zou je misschien wat code kunnen laten zien zodat we meer het idee hebben wat je precies bedoeld?
Wanneer ik de code zie zou ik misschien een klein stukje voor je uit kunnen schrijven om je de goede kant op te helpen :) Vanavond ben ik niet online dus wellicht geef ik je morgen antwoord (of een ander lid moet mij voor zijn).
Code (php)
1
$('#elementID').html('http://hierkomtjeurl.nl');
Gewijzigd op 25/03/2015 09:46:29 door Eschwin Moerkerken
Code (php)
1
2
3
4
5
2
3
4
5
<style type="text/css">
html, body, div, iframe {margin: 0px; padding: 0px; border: none;}
iframe {display: block; border: none; height:750px; width:920px;}
</style>
<iframe id="iFrame1" src="MiniMail.png" name="b"></iframe>
html, body, div, iframe {margin: 0px; padding: 0px; border: none;}
iframe {display: block; border: none; height:750px; width:920px;}
</style>
<iframe id="iFrame1" src="MiniMail.png" name="b"></iframe>
Waar zou het moeten plaatsen volgens jou?
Wanneer jij op een
Code (php)
1
<a href="http://source.com" title="klik hier" class="anchor-iframe">Klik hier om in iframe in te laden</a>
klikt, dan moet de source van je anchor naar je iframe geëxporteerd worden middels javascript (jQuery).
dat komt er ongeveer zoiets uit te zien (ik heb dit niet getest en type dit uit de losse hand)
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
$( document ).ready(function() {
$('a.anchor-iframe').on('click', function(e) {
e.preventDefault();
var source = $(this).attr('src');
$('#iframe').attr('src', source);
$('#elementID').html(source);
})
})
$('a.anchor-iframe').on('click', function(e) {
e.preventDefault();
var source = $(this).attr('src');
$('#iframe').attr('src', source);
$('#elementID').html(source);
})
})
Ik ga er van uit dat je weet waar je dit blok code moet plaatsen en dat je de jQuery library gebruikt omdat ik aan je beginpost kan afleiden dat je met bootstrap werkt.
Je zou in principe dus 1 iframe op je pagina hebben met de id='iframe' (in mijn voorbeeld), en meerdere anchor linkjes met een href="source.com" en een class='anchor-iframe' in mijn voorbeeld.
Indien je nog meer vragen hebt of als je vind dat mijn antwoord onduidelijk is hoor ik het graag van je. :)
Veel succes!
edit:
Ik heb het even voor je uitgetypt aangezien ik zulke dingen altijd wel interessant vind.
Je totale plaatje zou er dan zo uit moeten komen te zien:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<head>
<style type="text/css">
html, body, div, iframe {margin: 0px; padding: 0px; border: none;}
iframe {display: block; border: none; height:750px; width:920px;}
</style>
</head>
<!-- Verzameling linkjes -->
<a class="anchor-iframe" title="phphulp" href="http://www.phphulp.nl/">phphulp</a><br />
<a class="anchor-iframe" title="Wat is mijn ip?" href="http://www.watismijnip.nl/">Wat is mijn ip?</a><br />
<a class="anchor-iframe" title="What is my ip?" href="http://www.whatismyip.com/">What is my ip?</a>
<!-- Iframe inclusief title -->
<div id="elementID">http://www.phphulp.nl/</div>
<iframe id="iframe" src="http://www.phphulp.nl/"></iframe>
<!-- Include jQuery via hun CDN -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Voer script uit om iframe source te veranderen. -->
<!-- Hier hoef je in principe niks meer te veranderen, behalve misschien de selector ID's en classes zoals op jouw website. -->
<script>
$( document ).ready(function() {
$('a.anchor-iframe').on('click', function(e) {
e.preventDefault();
var source = $(this).attr('href');
console.log(source);
$('#iframe').attr('src', source);
$('#elementID').html(source);
})
})
</script>
<style type="text/css">
html, body, div, iframe {margin: 0px; padding: 0px; border: none;}
iframe {display: block; border: none; height:750px; width:920px;}
</style>
</head>
<!-- Verzameling linkjes -->
<a class="anchor-iframe" title="phphulp" href="http://www.phphulp.nl/">phphulp</a><br />
<a class="anchor-iframe" title="Wat is mijn ip?" href="http://www.watismijnip.nl/">Wat is mijn ip?</a><br />
<a class="anchor-iframe" title="What is my ip?" href="http://www.whatismyip.com/">What is my ip?</a>
<!-- Iframe inclusief title -->
<div id="elementID">http://www.phphulp.nl/</div>
<iframe id="iframe" src="http://www.phphulp.nl/"></iframe>
<!-- Include jQuery via hun CDN -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Voer script uit om iframe source te veranderen. -->
<!-- Hier hoef je in principe niks meer te veranderen, behalve misschien de selector ID's en classes zoals op jouw website. -->
<script>
$( document ).ready(function() {
$('a.anchor-iframe').on('click', function(e) {
e.preventDefault();
var source = $(this).attr('href');
console.log(source);
$('#iframe').attr('src', source);
$('#elementID').html(source);
})
})
</script>
Codepen
Gewijzigd op 25/03/2015 13:09:59 door Eschwin Moerkerken
Iframe, vanaf begin:
Code (php)
1
<iframe name="iframeempje" scr="plaatje.jpg">
Je iframe toont dus standaard het plaatje.
En elke 'link' naar een winkel ziet er zo uit:
Code (php)
1
<a href="www.c1000.nl" target="iframeempje">
Heb je geen Javascript nodig, werkt het ook in browsers uit 1990 én blijft het simpel.
Toevoeging op 25/03/2015 21:26:51:
En de huidige pagina in het iframe uitlezen moet met Javascript (dat dan weer wel), ook mogelijk zijn.