[JQUERY] show iframe

**skatedan** · 17-02-2016, 08:35

ciao ragazzi, avrei un piccolo problema con jquery, ho un iframe che visualizzo in una semplice pagina.
io questo iframe vorrei visualizzarlo al click con un effetto jquery.
ho provato a prendere spunto dal sito ufficiale di jquery UI e quello che mi è venuto fuori è questo...

codice:

<html>
  <head>
    <title>RaspiCam</title>
      rel="stylesheet" href="css/style.css"/>
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <script>
  $(function() {
    // run the currently selected effect
    function runEffect() {
      // get effect type from
      var selectedEffect = $( "#effectTypes" ).val();

      // most effect types need no options passed by default
      var options = {};
      // some effects have required parameters
      if ( selectedEffect === "scale" ) {
        options = { percent: 100 };
      } else if ( selectedEffect === "size" ) {
        options = { to: { width: 280, height: 185 } };
      }

      // run the effect
      $( "#effect" ).show( "blind", options, 500, callback );
    };

    //callback function to bring a hidden box back
    function callback() {
      setTimeout(function() {
        $( "#effect:visible" ).removeAttr( "style" ).fadeOut();
      }, 1000 );
    };

    // set effect from select menu value
    $( "#button" ).click(function() {
      runEffect();
    });
  </script>             

    </head>
  <body>
        <div align="center"><b>Sorveglianza RaspiCam</b></div>
        
        <div id="effect" class="sorv">
           <iframe src='http://www.sito.it' width='1024' height='640'></iframe>
        </div>

        <button id="button" class="ui-state-default ui-corner-all">Run Effect</button>
  </body>
</html>

ma purtroppo visualizzo subito l'iframe e il bottone, e se premo il bottone non succede nulla,
dove sbaglio?
è una pagina php che gira sul mio web server.
grazie in anticipo

**MItaly** · 17-02-2016, 08:47

Sposto in JavaScript.

**skatedan** · 17-02-2016, 11:51

Va bene grazie mille

**MAeSI** · 17-02-2016, 15:21

Ciao, nello script postato mancano due parentesi di chiusura e ci sono variabili non definite.

Ho sostituito l'effetto blind con slide, vedi se è quello che cerchi:

codice HTML:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>RaspiCam</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <style>
      #effect {
        display: none;
      }
    </style>
    <script>
      $(function() {
        function runEffect() { 
          $("#effect").show("slide", 1000 );
        };
        $("#button").click(function() {
          runEffect();
        });
      });
    </script>
  </head>
  <body>
    <div style="text-align:center;"><b>Sorveglianza RaspiCam</b></div>
    <div id="effect" class="sorv">
      <iframe src='http://example.com' width='1024' height='640'></iframe>
    </div>
    <button id="button" class="ui-state-default ui-corner-all">Run Effect</button>
  </body>
</html>

**skatedan** · 17-02-2016, 15:29

perfetto, è esattamente quello che cercavo, grazie mille!!!
se volessi aprirlo e chiuderlo al prendere del bottone invece?

**MAeSI** · 17-02-2016, 15:41

Prego, potresti semplicemente sostituire .show() con .toggle()

Discussione: [JQUERY] show iframe

Strumenti discussione

Ricerca discussione

Visualizza

[JQUERY] show iframe

Permessi di invio