Bootstrap Tabs

Bootstrap Tabs

by vijayweb

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.css"  crossorigin="anonymous">

<div id="exTab2" class="container">	
<ul class="nav nav-tabs">
			<li class="active">
        <a  href="#1" data-toggle="tab">Overview</a>
			</li>
			<li><a href="#2" data-toggle="tab">Without clearfix</a>
			</li>
			<li><a href="#3" data-toggle="tab">Solution</a>
			</li>
		</ul>

			<div class="tab-content ">
			  <div class="tab-pane active" id="1">
          <h3>Get Screenshot of </h3>
          
          
  <div id="theater">
    <video width="200"  height="60" id="video" src="https://rr2---sn-a5msen7l.googlevideo.com/videoplayback?expire=1641433607&ei=p_XVYdG0Dsj0yQXBkKigDw&ip=138.199.59.42&id=o-APtaxSm9aVf-a8ktsGhYEcmTsn4Vk4HD45pXP_ve0bld&itag=22&source=youtube&requiressl=yes&vprv=1&mime=video%2Fmp4&cnr=14&ratebypass=yes&dur=933.535&lmt=1641394024893077&fexp=24001373,24007246&c=ANDROID&txp=4432434&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cvprv%2Cmime%2Ccnr%2Cratebypass%2Cdur%2Clmt&sig=AOq0QJ8wRAIgeCCUexUn549ouvJ2Mg2Q1N4Z7VLIr8TYb50jIDIxf6YCIFn50A9cVQf6vcY7otc2Rh4HH-rGx2ndEwTME_iLuO8w&rm=sn-5uh5o-f5f67l&req_id=135d76de178ea3ee&redirect_counter=2&cm2rm=sn-f5fk7l&cms_redirect=yes&mh=eu&mip=174.26.13.154&mm=34&mn=sn-a5msen7l&ms=ltu&mt=1641411634&mv=m&mvi=2&pl=16&lsparams=mh,mip,mm,mn,ms,mv,mvi,pl&lsig=AG3C_xAwRQIhAPchkpyjul9MQVK-HN_vFJh-35KYl1sYqvj1toV_YLxdAiAboJ4VoA4Iy8eW4Oh3dA1CNO5BA1CPc7-9waehGT-Ieg%3D%3D" controls="false"></video>
    <canvas id="canvas"></canvas>
    <label>
    <br />
  </div>
  
  
				</div>
				<div class="tab-pane" id="2">
          <h3>Notice the gap...

CSS

body {
  padding : 10px ;
  
}



#exTab2 h3 {
  color : white;
  background-color: #428bca;
  padding : 5px 15px;
}

JavaScript

$(function() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var video = document.getElementById('video');
  
  		// Add a listener to wait for the 'loadedmetadata' state so the video's dimensions can be read
		video.addEventListener('loadedmetadata', function() {
			// Calculate the ratio of the video's width to height
			ratio = video.videoWidth / video.videoHeight;
			// Define the required width as 100 pixels smaller than the actual video's width
			w = video.videoWidth - 100;
			// Calculate the height based on the video's width and the ratio
			h = parseInt(w / ratio, 10);
			// Set the canvas width and height to the values just calculated
			canvas.width = w;
			canvas.height = h;			
		}, false);

  video.addEventListener('play', function() {
    var $this = this; //cache
    (function loop() {
      if (!$this.paused && !$this.ended) {
        ctx.drawImage($this, 0, 0);
        setTimeout(loop, 1000 / 30); // drawing at 30fps
      }
    })();
  }, 0);
});




var CLIPBOARD = new CLIPBOARD_CLASS("my_canvas", true);

/**
 * image pasting into canvas
 * 
 * @param {string} canvas_id - canvas id
 * @param {boolean} autoresize - if canvas will be resized
 */
function CLIPBOARD_CLASS(canvas_id, autoresize) {
  var _self = this;
  var canvas = document.getElementById(canvas_id);
  var ctx = document.getElementById(canvas_id).getContext("2d");

  //handlers
  document.addEventListener('paste', function(e) {
    _self.paste_auto(e);
  }, false);

  /* events fired on the drop targets */
  document.addEventListener("dragover", function(e) {
    // prevent default to allow drop
    e.preventDefault();
  }, false);
  document.addEventListener('drop', function(e) {
    // prevent default action (open as link for some elements)
    // add event handler to canvas if desired instead of document
    //debugger;
    e.preventDefault();
    var items = e.dataTransfer.items;
    for (var i = 0; i < items.length; i++) {
      if...