"resizable and draggable iframe in a css"
Bootstrap 3.3.0 Snippet by red1reaper

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/smoothness/jquery-ui.css" /> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> <div class="panel panel-primary draggable-panel toolbar-panel ui-draggable ui-resizable" id="toolbox-tools"> <div class="panel-heading lang-panel-header-tools">Soy un navegador retard<i class="fa fa-times pull-right close-panel" id="close-toolbox-tools"></i><i class="fa pull-right fa-chevron-down" id="toggle-toolbox-tools"></i></div> <iframe width="100%" height="100%" style="height:100%;width:100%" id="toolbox-tools" id="resizable" class="resizable" class="panel panel-primary draggable-panel toolbar-panel ui-draggable ui-resizable" src="https://www.slither.io/"></iframe> </div>
#toolbox-tools { width: 660px; height: 460px; overflow: hidden; } .group-handle { height: 34px; width: 10px; cursor: move; } .panel-heading { cursor: move; } .draggable-group { float: left; } #sortable { padding: 0px; } #sort-holder { display: none; } #toggle-toolbox-tools { cursor: pointer; } #close-toolbox-tools { cursor: pointer; } .toggle-button-group { cursor: pointer; } .draggable-group { overflow: hidden; } .minimized { width: 12px; height: 36px; }
$(document).ready(function() { // Add drag and resize option to panel $("#toolbox-tools").draggable({ handle: ".panel-heading", stop: function(evt, el) { // Save size and position in cookie /* $.cookie($(evt.target).attr("id"), JSON.stringify({ "el": $(evt.target).attr("id"), "left": el.position.left, "top": el.position.top, "width": $(evt.target).width(), "height": $(evt.target).height() })); */ } }).resizable({ handles: "e, w, s, se", stop: function(evt, el) { // Save size and position in cookie /* $.cookie($(evt.target).attr("id"), JSON.stringify({ "el": $(evt.target).attr("id"), "left": el.position.left, "top": el.position.top, "width": el.size.width, "height": el.size.height })); */ } }); // Expand and collaps the toolbar $("#toggle-toolbox-tools").on("click", function() { var panel = $("#toolbox-tools"); if ($(panel).data("org-height") == undefined) { $(panel).data("org-height", $(panel).css("height")); $(panel).css("height","41px"); } else { $(panel).css("height", $(panel).data("org-height")); $(panel).removeData("org-height"); } $(this).toggleClass('fa-chevron-down').toggleClass('fa-chevron-right'); }); // Make toolbar groups sortable $( "#sortable" ).sortable({ stop: function (event, ui) { var ids = []; $.each($(".draggable-group"), function(idx, grp) { ids.push($(grp).attr("id")); }); // Save order of groups in cookie //$.cookie("group_order", ids.join()); } }); $( "#sortable" ).disableSelection(); // Make Tools panel group minimizable $.each($(".draggable-group"), function(idx, grp) { var tb = $(grp).find(".toggle-button-group"); $(tb).on("click", function() { $(grp).toggleClass("minimized"); $(this).toggleClass("fa-caret-down").toggleClass("fa-caret-up"); // Save draggable groups to cookie (frue = Minimized, false = Not Minimized) var ids = []; $.each($(".draggable-group"), function(iidx, igrp) { var itb = $(igrp).find(".toggle-button-group"); var min = $(igrp).hasClass("minimized"); ids.push($(igrp).attr("id") + "=" + min); }); $.cookie("group_order", ids.join()); }); }); // Close thr panel $(".close-panel").on("click", function() { $(this).parent().parent().hide(); }); // Add Tooltips $('button').tooltip(); $('.toggle-button-group').tooltip(); });

Related: See More


Questions / Comments: