Iframe durch Button wechseln?

Dieses Thema im Forum "Webentwicklung" wurde erstellt von raidhumanguy, 25. Mai 2012 .

  1. 25. Mai 2012
    Hi,

    ich erstelle derzeit eine Website für ein Event, dass man auf dieser Website live (mithilfe eines Tickers) mitverfolgen kann. Es soll aber auch einen Stream geben. Man soll nun einfach zwischen dem Live-Ticker-Iframe und dem Live-Stream-Iframe wechseln können und zwar nur durch einen Button "Zum Live Ticker wechseln" bzw. "Zum Live Stream" wechseln.

    Weiß jemand wie das geht? Wenn ja danke für die Hilfe LG
     
  2. 25. Mai 2012
    AW: Iframe durch Button wechseln?

    benutzt du ein framework wie mooTools oder jQuery?
     
  3. 25. Mai 2012
    Zuletzt bearbeitet: 25. Mai 2012
    AW: Iframe durch Button wechseln?

    bei onclick auf den button die css display-eigenschaft der iframes auf block bzw. none setzen.

    Code:
    document.getElementById("id-des-buttons").onclick = ->
     ticker = document.getElementById "id-des-tickers"
     stream = document.getElementById "id-des-streams"
    
     ticker.style.display = if ticker.style.display is "block" then "none" else "block"
     stream.style.display = if ticker.style.display is "block" then "none" else "block"
    
     # padding
     # padding
    
     
  4. 25. Mai 2012
    Zuletzt bearbeitet: 25. Mai 2012
    AW: Iframe durch Button wechseln?

    hier mal ohne framework, design bleibt dir überlassen

    HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
     <title>Unbenannt</title>
    </head>
    
    <body>
    
    <iframe id="iframe" src=""></iframe>
    <p id="btn"></p>
    <script type="text/javascript">
    (function (start) {
     var btn = document.getElementById('btn');
     var iframe = document.getElementById('iframe');
     var txtAr = [
     {txt: 'Zum Live Ticker wechseln', src: 'stream.html'},
     {txt: 'Zum Live Stream wechseln', src: 'ticker.html'}
     ];
     var idx = start;
     
     function setIframeSrc (){
     btn.innerHTML = txtAr[idx].txt;
     iframe.src = txtAr[idx].src;
     idx = (idx+1) > txtAr.length-1 ? 0 : (idx+1);
     
     }
     btn.onclick = function(){
     setIframeSrc ();
     };
     btn.onclick();
    }
    )(0);
    </script>
    
    </body>
    </html>
    
     
  5. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.