"Test Code"
Bootstrap 3.0.0 Snippet by sunset

Post to Facebook Tweet this

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<!--
All Credit goes to http://fengyuanchen.github.io/cropper
-->
<!-- Content -->
<div class="container">
<div class="row">
<div class="col-md-9">
<!-- <h3 class="page-header">Demo:</h3> -->
<div class="img-container">
<img src="https://scontent-sit4-1.xx.fbcdn.net/v/t31.0-8/12378068_956604124393018_3478395616489283440_o.jpg?oh=bde402674827a312ebc5ae48afc81923&oe=59D0AC64&dl=1" alt="Picture">
</div>
</div>
<div class="col-md-3">
<!-- <h3 class="page-header">Data:</h3> -->
<div class="docs-data">
<div class="input-group">
<label class="input-group-addon" for="dataX">X</label>
<input class="form-control" id="dataX" type="text" placeholder="x">
<span class="input-group-addon">px</span>
</div>
<div class="input-group">
<label class="input-group-addon" for="dataY">Y</label>
<input class="form-control" id="dataY" type="text" placeholder="y">
<span class="input-group-addon">px</span>
</div>
<div class="input-group">
<label class="input-group-addon" for="dataWidth">Width</label>
<input class="form-control" id="dataWidth" type="text" placeholder="width">
<span class="input-group-addon">px</span>
</div>
<div class="input-group">
<label class="input-group-addon" for="dataHeight">Height</label>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
/*
All Credit goes to http://fengyuanchen.github.io/cropper
*/
.cropper-container {
position: relative;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
.cropper-container img {
display: block;
width: 100%;
min-width: 0 !important;
max-width: none !important;
height: 100%;
min-height: 0 !important;
max-height: none !important;
image-orientation: 0deg !important;
}
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.cropper-drag-box {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
/*
All Credit goes to http://fengyuanchen.github.io/cropper
*/
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as anonymous module.
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node / CommonJS
factory(require('jquery'));
} else {
// Browser globals.
factory(jQuery);
}
})(function ($) {
'use strict';
var $window = $(window),
$document = $(document),
location = window.location,
// Constants
CROPPER_NAMESPACE = '.cropper',
CROPPER_PREVIEW = 'preview' + CROPPER_NAMESPACE,
// RegExps
REGEXP_DRAG_TYPES = /^(e|n|w|s|ne|nw|sw|se|all|crop|move|zoom)$/,
// Classes
CLASS_MODAL = 'cropper-modal',
CLASS_HIDE = 'cropper-hide',
CLASS_HIDDEN = 'cropper-hidden',
CLASS_INVISIBLE = 'cropper-invisible',
CLASS_MOVE = 'cropper-move',
CLASS_CROP = 'cropper-crop',
CLASS_DISABLED = 'cropper-disabled',
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard

Questions / Comments: