API tools faq
paste
Advertisement
Guest User

fitVids bug TestCase - bootstrap collapsed div

a guest
Mar 13th, 2014
301
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 10.49 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>fitVids bug on Bootstrap collapsed div</title>
  6.       <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
  7.       <style type="text/css" rel="stylesheet">
  8.   body,html {       margin:0; padding:0; height:100%; width:100%;}
  9.  
  10. #wrapper {
  11.   position: fixed; top:50px; left:0; right:0; bottom:0;
  12.   transition: all 0.4s ease 0s;
  13.   background-color: #8AB746;
  14.   display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex;  display: flex;
  15.   flex-direction: row;
  16. }
  17.  
  18. #sidebar-wrapper {
  19.   min-width: 300px;
  20.   background: #000;
  21.   overflow: hidden;
  22.   z-index: 1000;
  23.   transition: all 0.4s ease 0s;
  24.   position:relative;
  25.   resize:horizontal;
  26. }
  27.  
  28. #page-content-wrapper {
  29.   min-width:640px;
  30.   display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex;  display: flex;
  31.   flex:  1; -webkit-box-flex: 1;  -moz-box-flex:  1;  -webkit-flex:  1;  -ms-flex:  1;
  32.   flex-direction: column;
  33.   position:relative;
  34. }
  35.  
  36. .sidebar-nav {
  37.   position: absolute;
  38.   top: 0;
  39.   width: 100%;
  40.   list-style: none;
  41.   margin: 0;
  42.   padding: 0;
  43. }
  44.  
  45.  
  46. .content-header {
  47.   height: 65px;
  48.   line-height: 65px;
  49. }
  50.  
  51. #menu-toggle {
  52. display: none;
  53. }
  54.  
  55. .inset {
  56.   padding: 20px;
  57. }
  58.  
  59. @media (max-width:900px) {
  60. /*767*/
  61.  
  62. #wrapper {
  63.   padding-left: 0;
  64. }
  65.  
  66. #sidebar-wrapper {
  67.   display: none;
  68. }
  69.  
  70. #wrapper.active {
  71.   position: relative;
  72.   left: 250px;
  73. }
  74.  
  75. #wrapper.active #sidebar-wrapper {
  76.   left: 250px;
  77.   width: 250px;
  78.   transition: all 0.4s ease 0s;
  79. }
  80.  
  81. #menu-toggle {
  82.   display: inline-block;
  83. }
  84.  
  85. .inset {
  86.   padding: 15px;
  87. }
  88.  
  89. }
  90.  
  91.  
  92.  
  93. #collapsePodcasts { width:100%; position:relative; margin-bottom:12px; min-height:250px; }
  94. #youtube_frame { position:absolute; top:0; left:0; width:100%; height:100%; border:0; }
  95.  
  96. .navbar {
  97. background-color: #e5f7c3;
  98. color: #ffffff;
  99. font-family: arial,sans-serif;
  100. margin:0;
  101. height:50px;
  102. }
  103.  
  104. .navbar li>a:hover, .navbar li>a:focus, .navbar .open, .navbar .open>a, .navbar .open>a:hover, .navbar .open>a:focus {
  105. background-color: #f15a25;
  106. color: #fff;
  107. }
  108.  
  109. .navbar li > a, .navbar {
  110. color: #f15a25;
  111. }
  112.  
  113. .navbar-brand {
  114. padding: 7px 10px;
  115. }
  116.  
  117.  
  118. .navbar-brand  .logo{
  119.     margin: 0 15px;
  120. }
  121.  
  122. a:hover, a:focus {
  123. color: #f15a25;
  124. text-decoration: underline;
  125. }
  126.  
  127. a {
  128. color: #f15a25;
  129. text-decoration: none;
  130. }
  131.  
  132. .navbar-toggle {
  133. border: 1px solid rgba(241,90,37, 0.50);
  134. }
  135.  
  136. .navbar-toggle .icon-bar {
  137. background-color: #f15a25;
  138. }
  139.  
  140. #rrPlayer { padding: 10px;}
  141. #subnavbar { background-color: #8bb746; padding: 5px 10px; }
  142. #subnavbar  .snb{ color: #000000; font-weight: bold; }
  143. #subnavbar  a { color: #ffffff; }
  144.  
  145. .subnavbar {
  146. background-color: #8bb746;
  147. color: #ffffff;
  148. margin-bottom: 0px;
  149. width: 100%;
  150. }
  151.  
  152. .subnavbar li>a:hover, .navbar li>a:focus, .navbar .open, .navbar .open>a, .navbar .open>a:hover, .navbar .open>a:focus {
  153. background-color: #f15a25;
  154. color: #ffffff;
  155. }
  156.  
  157. .subnavbar li > a, .subnavbar {
  158. color: #f15a25;
  159. }
  160.  
  161. .subnavbar li>a:hover, .navbar li>a:focus, .navbar .open, .navbar .open>a, .navbar .open>a:hover, .navbar .open>a:focus {
  162. background-color: #f15a25;
  163. color: #ffffff;
  164. }
  165.  
  166. .ytvideoList a { margin: 5px; display: inline-block; }
  167.       </style>
  168.  
  169.  
  170. <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  171. <script type='text/javascript' src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
  172. <script type="text/javascript">
  173. /************************  jquery.fitvids.js  ************************/
  174.  
  175. /*global jQuery */
  176. /*jshint browser:true */
  177. /*!
  178. * FitVids 1.1
  179. *
  180. * Copyright 2013, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com
  181. * Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
  182. * Released under the WTFPL license - http://sam.zoy.org/wtfpl/
  183. *
  184. */
  185.  
  186. (function( $ ){
  187.  
  188.   "use strict";
  189.  
  190.   $.fn.fitVids = function( options ) {
  191.     var settings = {
  192.       customSelector: null
  193.     };
  194.  
  195.     if(!document.getElementById('fit-vids-style')) {
  196.       // appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js
  197.       var head = document.head || document.getElementsByTagName('head')[0];
  198.       var css = '.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}';
  199.       var div = document.createElement('div');
  200.       div.innerHTML = '<p>x</p><style id="fit-vids-style">' + css + '</style>';
  201.       head.appendChild(div.childNodes[1]);
  202.     }
  203.  
  204.     if ( options ) {
  205.       $.extend( settings, options );
  206.     }
  207.  
  208.     return this.each(function(){
  209.       var selectors = [
  210.         /*"iframe[src*='player.vimeo.com']",
  211.         "iframe[src*='youtube.com']",
  212.         "iframe[src*='youtube-nocookie.com']",*/
  213.         // Tried to comment the above lines and add a selector for my div, with no success
  214.         "#youtube_frame",        
  215.         "iframe[src*='kickstarter.com'][src*='video.html']",
  216.         "object",
  217.         "embed"
  218.       ];
  219.  
  220.       if (settings.customSelector) {
  221.         selectors.push(settings.customSelector);
  222.       }
  223.  
  224.       var $allVideos = $(this).find(selectors.join(','));
  225.       $allVideos = $allVideos.not("object object"); // SwfObj conflict patch
  226.  
  227.       $allVideos.each(function(){
  228.         var $this = $(this);
  229.         if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; }
  230.         var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(),
  231.            width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(),
  232.            aspectRatio = height / width;
  233.         if(!$this.attr('id')){
  234.           var videoID = 'fitvid' + Math.floor(Math.random()*999999);
  235.           $this.attr('id', videoID);
  236.         }
  237.         $this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%");
  238.         $this.removeAttr('height').removeAttr('width');
  239.       });
  240.     });
  241.   };
  242. // Works with either jQuery or Zepto
  243. })( window.jQuery || window.Zepto );
  244. </script>
  245.  
  246. </head>
  247.  
  248. <body>
  249.     <!-- top nav -->
  250.     <div class="navbar navbar-fixed-top">
  251.         <div class="navbar-header">
  252.           <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
  253.             <span class="sr-only">Toggle</span>
  254.             <span class="icon-bar"></span>
  255.             <span class="icon-bar"></span>
  256.             <span class="icon-bar"></span>
  257.           </button>
  258.  
  259.  
  260.          
  261.         </div>                 
  262.         <nav class="collapse navbar-collapse" role="navigation">
  263.             <ul class="nav navbar-nav">
  264.                 <li><a href="#podcastModal" role="button" data-toggle="modal"><i class="glyphicon glyphicon-facetime-video"></i> Video</a></li>
  265.              
  266.             </ul>
  267.  
  268.         </nav>
  269.     </div>
  270.     <!-- /top nav -->
  271.     <div id="wrapper">
  272.         <!-- Sidebar -->
  273.         <div id="sidebar-wrapper">
  274.             <div class="sidebar-nav">  
  275.  
  276.             <div id="collapsePodcasts" class="collapse">
  277.                                <iframe id="youtube_frame" name="youtube_frame" src="https://www.youtube.com/embed/Q_tAyUrfKsk?autoplay=1&autohide=2&color=white&version=3&rel=0" width="300px" height="250px" allowfullscreen></iframe>
  278.             </div>
  279.               <p style="color:orange; font-weight:bold; font-size:16px;margin:20px;">Fix.This.Bug</p>
  280.             </div>
  281.  
  282.         </div> 
  283.  
  284.         <!-- Page content -->
  285.         <div id="page-content-wrapper">
  286.          
  287.         </div>
  288.  
  289.     </div>
  290.  
  291.  
  292.  
  293.     <div id="podcastModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  294.         <div class="modal-dialog">
  295.             <div class="modal-content">
  296.                 <div class="modal-header">
  297.                   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
  298.                     Last Videos
  299.                 </div>
  300.                 <div class="modal-body">
  301.                     <div id="videos"> <!--  here will be loaded your videos --> </div>
  302.                 </div>
  303.                 <div class="modal-footer">
  304.                 </div>
  305.             </div>
  306.         </div>
  307.     </div>
  308.    
  309.         <!-- /Page content/ -->
  310.  
  311. <script type='text/javascript'>
  312.     // START of youtube rss fetch //
  313.  
  314. function youtube_embedder(urlnormale){    //  Embedder - Trasforma classici url youtube  in  embedded links...
  315.          var regEx = /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/;
  316.          var match = urlnormale.match(regEx);
  317.          if (match&&match[1].length==11){  
  318.                    var nuovo = 'https://www.youtube.com/embed/'+match[1]+'?autoplay=1&autohide=2&color=white&version=3&rel=0';
  319.                     return nuovo;
  320.          }else{     console.log("Url Youtube errato");
  321.                     }
  322. }//  Fine emb.
  323.  
  324. function show_my_videos(data){
  325.     html = ['<div class="ytvideoList">'];
  326.     $(data.feed.entry).each(function(entry){
  327.         url = this.link[0].href;
  328.         url_thumbnail = this.media$group.media$thumbnail[3].url;
  329.         title = this.media$group.media$title.$t;
  330.         description = this.media$group.media$description.$t;
  331.  
  332.         html.push('<a href="'+youtube_embedder(url)+'" title="'+ title +'"  alt="'+ title +'" target="youtube_frame" class="chiudbox_dopoilclick"><img class="ytThumbnail" src="'+url_thumbnail+'" alt="'+description+'" /></a>');
  333.  
  334.     });
  335.     html.push('</div>');
  336.     $("#videos").html(html.join(''));
  337. }
  338.  
  339. $.ajax({
  340.     type: "GET",
  341.     url: "http://gdata.youtube.com/feeds/users/realcsstricks/uploads?alt=json-in-script&format=5&max-results=16",
  342.     cache: false,
  343.     dataType:'jsonp',
  344.     success: function(data){
  345.         show_my_videos(data);
  346.   }
  347. });
  348.  
  349. // END of youtube rss fetch //
  350.  
  351.  
  352.  
  353.  
  354. /************            CLICKS  HANDLING             ************/
  355.  
  356.         $('#videos').on('click', '.chiudbox_dopoilclick', function() {
  357.  
  358.                $('#podcastModal').modal('hide');
  359.              $('#collapsePodcasts').collapse('show');
  360.  
  361.              /* The following two lines are MY FIX to the bug...
  362.                $('#youtube_frame').attr('src', $(this).attr('href'));
  363.              setTimeout(function() {  $('#collapsePodcasts').fitVids();  },50);
  364.            
  365.            
  366.            
  367.             The next line is, instead, what would have been done in a normal situation, where fitVids didn't have this bug */
  368.           $('#collapsePodcasts').fitVids();            
  369.          
  370.          });
  371. </script>
  372.  
  373.  
  374. </body>
  375. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!