<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 ----------> <h1>BootStrap, jQuery, HTML2Canvas Bug Reporter</h1> As seen on <a href="https://asked.io/jquery-bootstrap-html2canvas-bug-feedback-reporter" target="_blank">asked.io</a> and <a href="https://github.com/Askedio/jquery-bootstrap-feedback" target="_blank">github</a> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"> <div class="feedback left"> <div class="tooltips"> <div class="btn-group dropup"> <button type="button" class="btn btn-primary dropdown-toggle btn-circle btn-lg" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-bug fa-2x" title="Report Bug"></i> </button> <ul class="dropdown-menu dropdown-menu-right dropdown-menu-form"> <li> <div class="report"> <h2 class="text-center">Report Bug</h2> <form class="doo" method="post" action="report.php"> <div class="col-sm-12"> <textarea required name="comment" class="form-control" placeholder="Please tell us what bug or issue you've found, provide as much detail as possible."></textarea> <input name="screenshot" type="hidden" class="screen-uri"> <span class="screenshot pull-right"><i class="fa fa-camera cam" title="Take Screenshot"></i></span> </div> <div class="col-sm-12 clearfix"> <button class="btn btn-primary btn-block">Submit Report</button> </div> </form> </div> <div class="loading text-center hideme"> <h2>Please wait...</h2> <h2><i class="fa fa-refresh fa-spin"></i></h2> </div> <div class="reported text-center hideme"> <h2>Thank you!</h2> <p>Your submission has been received, we will review it shortly.</p> <div class="col-sm-12 clearfix"> <button class="btn btn-success btn-block do-close">Close</button> </div> </div> <div class="failed text-center hideme"> <h2>Oh no!</h2> <p>It looks like your submission was not sent.<br><br><a href="mailto:">Try contacting us by the old method.</a></p> <div class="col-sm-12 clearfix"> <button class="btn btn-danger btn-block do-close">Close</button> </div> </div> </li> </ul> </div> </div> </div> <script src="//cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

.btn-circle.btn-lg { width: 40px; height: 40px; padding: 5px 8px; font-size: 12px; line-height: 1.33; border-radius: 25px; } .feedback{position: fixed;} .feedback textarea{height: 180px; } .feedback .screenshot{ position: relative; top: -24px; right: 10px; opacity: .6} .feedback .screenshot:hover{ opacity: 1} .feedback .reported p, .feedback .failed p { height: 190px} .feedback.left{left:5px; bottom:15px} .feedback.right{right:5px; bottom:15px} .feedback .dropdown-menu{width: 290px;height: 320px;bottom: 50px;} .feedback.left .dropdown-menu{ left: 0px} .feedback.right .dropdown-menu{ right: 0px} .feedback .hideme{ display: none}

(function ( $ ) { $.fn.feedback = function(success, fail) { self=$(this); self.find('.dropdown-menu-form').on('click', function(e){e.stopPropagation()}) self.find('.screenshot').on('click', function(){ self.find('.cam').removeClass('fa-camera fa-check').addClass('fa-refresh fa-spin'); html2canvas($(document.body), { onrendered: function(canvas) { self.find('.screen-uri').val(canvas.toDataURL("image/png")); self.find('.cam').removeClass('fa-refresh fa-spin').addClass('fa-check'); } }); }); self.find('.do-close').on('click', function(){ self.find('.dropdown-toggle').dropdown('toggle'); self.find('.reported, .failed').hide(); self.find('.report').show(); self.find('.cam').removeClass('fa-check').addClass('fa-camera'); self.find('.screen-uri').val(''); self.find('textarea').val(''); }); failed = function(){ self.find('.loading').hide(); self.find('.failed').show(); if(fail) fail(); } self.find('form').on('submit', function(){ self.find('.report').hide(); self.find('.loading').show(); $.post( $(this).attr('action'), $(this).serialize(), null, 'json').done(function(res){ if(res.result == 'success'){ self.find('.loading').hide(); self.find('.reported').show(); if(success) success(); } else failed(); }).fail(function(){ failed(); }); return false; }); }; }( jQuery )); $(document).ready(function () { $('.feedback').feedback(); });