Iframe avec jquery

Bonjour à tous,

Je cale sur une fonction qui me permettrais d'afficher un iframe avec un effet "slide" jquery.

Pouvez-vous m'aider sur ce coup ?

Code:

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
<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 === "slide" ) {
        options = { percent: 0 };
      } else if ( selectedEffect === "size" ) {
        options = { to: { width: 200, height: 60 } };
      }
 
      // run the effect
      $( "#effect" ).toggle( selectedEffect, options, 500 );
    };
 
    // set effect from select menu value
    $( "#button" ).click(function() {
      runEffect();
    });
  });
  </script>
 
<style>
.toggler {
    width: 500px;
    height: 135px;
  }
  #button {
    padding: .5em 1em;
    text-decoration: none;
  }
  #effect {
    position: relative;
    width: 240px;
    height: 135px;
    padding: 0.4em;
  }
</style>
 
 
 
<div class="toggler">
  <div id="effect">
 
    <p>
   <iframe src="https://calendar.google.com/calendar/embed?title=Bikers%20Events&amp;showTabs=0&amp;showCalendars=0&amp;showTz=0&amp;height=200&amp;wkst=2&amp;bgcolor=%23FFFFFF&amp;src=gghfcalendar%40gmail.com&amp;color=%231B887A&amp;ctz=Europe%2FBrussels" style="border-width:0" width="600" height="500" frameborder="0" scrolling="no"></iframe>
    </p>
  </div>
</div>
 
 
<select name="effects" id="effectTypes" style="visibility:hidden">
  <option value="slide">Slide</option>
</select>
 
<button id="button" >Run Effect</button>

<!DOCTYPE html> <html lang="fr" dir="ltr"> <head> <meta http-equiv="cache-control" content="public, max-age=60"> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0"> <meta name="author" content="Daniel Hagnoul"> <title>Test</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css"> <style> </style> </head> <body> <div id="effect"> <iframe src="https://calendar.google.com/calendar/embed?title=Bikers%20Events&showTabs=0&showCalendars=0&showTz=0&height=200&wkst=2&bgcolor=%23FFFFFF&src=gghfcalendar%40gmail.com&color=%231B887A&ctz=Europe%2FBrussels" style="border-width:0" width="600" height="500" frameborder="0" scrolling="no"></iframe> </div> <div> <select name="effects" id="effectTypes"> <option value="slide">Slide</option> </select> <button id="button" >Run Effect</button> </div> <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script> "use strict"; $( function(){ function runEffect( ){ var selectedEffect = $( '#effectTypes' ).val(), options = {}; if ( selectedEffect === 'slide' ){ options = { 'percent' : 0 }; } else if ( selectedEffect === 'size' ) { options = { 'to' : { 'width' : 200, 'height' : 60 } }; } $( '#effect' ).toggle( selectedEffect, options, 500 ); } $( '#button' ).on( 'click', function() { runEffect(); }); }); </script> </body> </html>