<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ---------->
<div class="container">
<div class="row">
<h2>Feedback</h2>
<table width="100%" border="0">
<div class="col-md-9 col-md-offset-0">
<tr><td width="77%">
<div class="">
<form class="form-horizontal" action="send.php" method="post">
<fieldset>
<!-- Name input-->
<div class="form-group">
<label class="col-md-3 control-label" for="name">Full Name</label>
<div class="col-md-9">
<input id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
</div>
<!-- Email input-->
<div class="form-group">
<label class="col-md-3 control-label" for="email">Your E-mail</label>
<div class="col-md-9">
<input id="email" name="email" type="text" placeholder="Your email" class="form-control">
</div>
</div>
<!-- Message body -->
<div class="form-group">
<label class="col-md-3 control-label" for="message">Your message</label>
<div class="col-md-9">
<textarea class="form-control" id="message" name="message" placeholder="Please enter your feedback here..." rows="5"></textarea>
</div>
</div>
<!-- Rating -->
<div class="form-group">
<label class="col-md-3 control-label" for="message">Your rating</label>
<div class="col-md-9">
<input id="input-21e" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xs" >
</div>
</div>
</td>
<td align="center" valign="top" width="23%">
<!-- Form actions -->
<div class="form-group">
<div class="col-md-12 text-center">
<img src="http://www.gohacking.com/wp-content/uploads/2010/06/captcha-300x171.jpg" height="140px" width="270px"/><br/>
<button type="submit" class="btn btn-primary btn-md">Submit</button>
<button type="reset" class="btn btn-default btn-md">Clear</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</td>
</tr>
</table>
</div>
<div class="container">
<div class="row">
<h2>
Featured Testimonials</h2>
<div class="col-md-6">
<div class="blockquote-box clearfix">
<div class="square pull-left">
<img src="http://placehold.it/60/8e44ad/FFF&text=B" alt="" class="" />
</div>
<h4>
John Doe</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante.
</p>
</div>
<div class="blockquote-box blockquote-primary clearfix">
<div class="square pull-left">
<span class="glyphicon glyphicon-music glyphicon-lg"></span>
</div>
<h4>
John Doe</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante. <a href="http://www.jquery2dotnet.com/search/label/jquery">jquery2dotnet</a>
</p>
</div>
<div class="blockquote-box blockquote-success clearfix">
<div class="square pull-left">
<span class="glyphicon glyphicon-tree-conifer glyphicon-lg"></span>
</div>
<h4>
John Doe</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante.
</p>
</div>
</div>
<div class="col-md-6">
<div class="blockquote-box blockquote-info clearfix">
<div class="square pull-left">
<span class="glyphicon glyphicon-info-sign glyphicon-lg"></span>
</div>
<h4>
John Doe</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante.
</p>
</div>
<div class="blockquote-box blockquote-warning clearfix">
<div class="square pull-left">
<span class="glyphicon glyphicon-warning-sign glyphicon-lg"></span>
</div>
<h4>
John Doe</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante.
</p>
</div>
<div class="blockquote-box blockquote-danger clearfix">
<div class="square pull-left">
<span class="glyphicon glyphicon-record glyphicon-lg"></span>
</div>
<h4>
John Doe</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante.
</p>
</div>
</div>
</div>
</div>
body {padding-top:20px;}
.glyphicon-lg{font-size:3em}
.blockquote-box{border-right:5px solid #E6E6E6;margin-bottom:25px}
.blockquote-box .square{width:100px;min-height:50px;margin-right:22px;text-align:center!important;background-color:#E6E6E6;padding:20px 0}
.blockquote-box.blockquote-primary{border-color:#357EBD}
.blockquote-box.blockquote-primary .square{background-color:#428BCA;color:#FFF}
.blockquote-box.blockquote-success{border-color:#4CAE4C}
.blockquote-box.blockquote-success .square{background-color:#5CB85C;color:#FFF}
.blockquote-box.blockquote-info{border-color:#46B8DA}
.blockquote-box.blockquote-info .square{background-color:#5BC0DE;color:#FFF}
.blockquote-box.blockquote-warning{border-color:#EEA236}
.blockquote-box.blockquote-warning .square{background-color:#F0AD4E;color:#FFF}
.blockquote-box.blockquote-danger{border-color:#D43F3A}
.blockquote-box.blockquote-danger .square{background-color:#D9534F;color:#FFF}
/*!
* @copyright © Kartik Visweswaran, Krajee.com, 2014
* @version 2.5.0
*
* A simple yet powerful JQuery star rating plugin that allows rendering
* fractional star ratings and supports Right to Left (RTL) input.
*
* For more JQuery/Bootstrap plugins and demos visit http://plugins.krajee.com
* For more Yii related demos visit http://demos.krajee.com
*/
.rating-loading {
width: 25px;
height: 25px;
font-size: 0px;
color: #fff;
background: transparent url('../img/loading.gif') top left no-repeat;
border: none;
}
/*
* Stars
*/
.rating-gly {
font-family: 'Glyphicons Halflings';
}
.rating-gly-star {
font-family: 'Glyphicons Halflings';
padding-left: 2px;
}
.rating-gly-star .rating-stars:before {
padding-left: 2px;
}
.rating-lg .rating-gly-star, .rating-lg .rating-gly-star .rating-stars:before {
padding-left: 4px;
}
.rating-xl .rating-gly-star, .rating-xl .rating-gly-star .rating-stars:before {
padding-left: 2px;
}
.rating-active {
cursor: default;
}
.rating-disabled {
cursor: not-allowed;
}
.rating-uni {
font-size: 1.2em;
margin-top: -5px;
}
.rating-container {
position: relative;
vertical-align: middle;
display: inline-block;
color: #e3e3e3;
overflow: hidden;
}
.rating-container:before {
content: attr(data-content);
}
.rating-container .rating-stars {
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
color: #fde16d;
transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-webkit-transition: all 0.25s ease-out;
}
.rating-container .rating-stars:before {
content: attr(data-content);
text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
}
.rating-container-rtl {
position: relative;
vertical-align: middle;
display: inline-block;
overflow: hidden;
color: #fde16d;
}
.rating-container-rtl:before {
content: attr(data-content);
text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
}
.rating-container-rtl .rating-stars {
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
color: #e3e3e3;
transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-webkit-transition: all 0.25s ease-out;
}
.rating-container-rtl .rating-stars:before {
content: attr(data-content);
}
/**
* Rating sizes
*/
.rating-xl {
font-size: 4.89em;
}
.rating-lg {
font-size: 3.91em;
}
.rating-md {
font-size: 3.13em;
}
.rating-sm {
font-size: 2.5em;
}
.rating-xs {
font-size: 2em;
}
/**
* Clear rating button
*/
.star-rating .clear-rating, .star-rating-rtl .clear-rating {
color: #aaa;
cursor: not-allowed;
display: inline-block;
vertical-align: middle;
font-size: 60%;
}
.clear-rating-active {
cursor: pointer !important;
}
.clear-rating-active:hover {
color: #843534;
}
.star-rating .clear-rating {
padding-right: 5px;
}
/**
* Caption
*/
.star-rating .caption, .star-rating-rtl .caption {
color: #999;
display: inline-block;
vertical-align: middle;
font-size: 55%;
}
.star-rating .caption {
padding-left: 5px;
}
.star-rating-rtl .caption {
padding-right: 5px;
}
/*!
* @copyright © Kartik Visweswaran, Krajee.com, 2014
* @version 2.5.0
*
* A simple yet powerful JQuery star rating plugin that allows rendering
* fractional star ratings and supports Right to Left (RTL) input.
*
* For more JQuery plugins visit http://plugins.krajee.com
* For more Yii related demos visit http://demos.krajee.com
*/
(function ($) {
var DEFAULT_MIN = 0;
var DEFAULT_MAX = 5;
var DEFAULT_STEP = 0.5;
var isEmpty = function (value, trim) {
return typeof value === 'undefined' || value === null || value === undefined || value == []
|| value === '' || trim && $.trim(value) === '';
};
var validateAttr = function ($input, vattr, options) {
var chk = isEmpty($input.data(vattr)) ? $input.attr(vattr) : $input.data(vattr);
if (chk) {
return chk;
}
return options[vattr];
};
var getDecimalPlaces = function (num) {
var match = ('' + num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
if (!match) {
return 0;
}
return Math.max(0, (match[1] ? match[1].length : 0) - (match[2] ? +match[2] : 0));
};
var applyPrecision = function (val, precision) {
return parseFloat(val.toFixed(precision));
};
// Rating public class definition
var Rating = function (element, options) {
this.$element = $(element);
this.init(options);
};
Rating.prototype = {
constructor: Rating,
_parseAttr: function (vattr, options) {
var self = this, $input = self.$element;
if ($input.attr('type') === 'range' || $input.attr('type') === 'number') {
var val = validateAttr($input, vattr, options);
var chk = DEFAULT_STEP;
if (vattr === 'min') {
chk = DEFAULT_MIN;
}
else if (vattr === 'max') {
chk = DEFAULT_MAX;
}
else if (vattr === 'step') {
chk = DEFAULT_STEP;
}
var final = isEmpty(val) ? chk : val;
return parseFloat(final);
}
return parseFloat(options[vattr]);
},
/**
* Listens to events
*/
listen: function () {
var self = this;
self.$rating.on("click", function (e) {
if (!self.inactive) {
w = e.pageX - self.$rating.offset().left;
self.setStars(w);
self.$element.trigger('change');
self.$element.trigger('rating.change', [self.$element.val(), self.$caption.html()]);
}
});
self.$clear.on("click", function (e) {
if (!self.inactive) {
self.clear();
}
});
$(self.$element[0].form).on("reset", function (e) {
if (!self.inactive) {
self.reset();
}
});
},
initSlider: function (options) {
var self = this;
if (isEmpty(self.$element.val())) {
self.$element.val(0);
}
self.initialValue = self.$element.val();
self.min = (typeof options.min !== 'undefined') ? options.min : self._parseAttr('min', options);
self.max = (typeof options.max !== 'undefined') ? options.max : self._parseAttr('max', options);
self.step = (typeof options.step !== 'undefined') ? options.step : self._parseAttr('step', options);
if (isNaN(self.min) || isEmpty(self.min)) {
self.min = DEFAULT_MIN;
}
if (isNaN(self.max) || isEmpty(self.max)) {
self.max = DEFAULT_MAX;
}
if (isNaN(self.step) || isEmpty(self.step) || self.step == 0) {
self.step = DEFAULT_STEP;
}
self.diff = self.max - self.min;
},
/**
* Initializes the plugin
*/
init: function (options) {
var self = this;
self.options = options;
self.initSlider(options);
self.checkDisabled();
$element = self.$element;
self.containerClass = options.containerClass;
self.glyphicon = options.glyphicon;
var defaultStar = (self.glyphicon) ? '\ue006' : '\u2605';
self.symbol = isEmpty(options.symbol) ? defaultStar : options.symbol;
self.rtl = options.rtl || self.$element.attr('dir');
if (self.rtl) {
self.$element.attr('dir', 'rtl');
}
self.showClear = options.showClear;
self.showCaption = options.showCaption;
self.size = options.size;
self.stars = options.stars;
self.defaultCaption = options.defaultCaption;
self.starCaptions = options.starCaptions;
self.starCaptionClasses = options.starCaptionClasses;
self.clearButton = options.clearButton;
self.clearButtonTitle = options.clearButtonTitle;
self.clearButtonBaseClass = !isEmpty(options.clearButtonBaseClass) ? options.clearButtonBaseClass : 'clear-rating';
self.clearButtonActiveClass = !isEmpty(options.clearButtonActiveClass) ? options.clearButtonActiveClass : 'clear-rating-active';
self.clearCaption = options.clearCaption;
self.clearCaptionClass = options.clearCaptionClass;
self.clearValue = options.clearValue;
self.$element.removeClass('form-control').addClass('form-control');
self.$clearElement = isEmpty(options.clearElement) ? null : $(options.clearElement);
self.$captionElement = isEmpty(options.captionElement) ? null : $(options.captionElement);
if (typeof self.$rating == 'undefined' && typeof self.$container == 'undefined') {
self.$rating = $(document.createElement("div")).html('<div class="rating-stars"></div>');
self.$container = $(document.createElement("div"));
self.$container.before(self.$rating);
self.$container.append(self.$rating);
self.$element.before(self.$container).appendTo(self.$rating);
}
self.$stars = self.$rating.find('.rating-stars');
self.generateRating();
self.$clear = !isEmpty(self.$clearElement) ? self.$clearElement : self.$container.find('.' + self.clearButtonBaseClass);
self.$caption = !isEmpty(self.$captionElement) ? self.$captionElement : self.$container.find(".caption");
self.setStars();
self.$element.hide();
self.listen();
if (self.showClear) {
self.$clear.attr({"class": self.getClearClass()});
}
self.$element.removeClass('rating-loading');
},
checkDisabled: function () {
var self = this;
self.disabled = validateAttr(self.$element, 'disabled', self.options);
self.readonly = validateAttr(self.$element, 'readonly', self.options);
self.inactive = (self.disabled || self.readonly);
},
getClearClass: function () {
return this.clearButtonBaseClass + ' ' + ((this.inactive) ? '' : this.clearButtonActiveClass);
},
generateRating: function () {
var self = this, clear = self.renderClear(), caption = self.renderCaption(),
css = (self.rtl) ? 'rating-container-rtl' : 'rating-container',
stars = self.getStars();
css += (self.glyphicon) ? ((self.symbol == '\ue006') ? ' rating-gly-star' : ' rating-gly') : ' rating-uni';
self.$rating.attr('class', css);
self.$rating.attr('data-content', stars);
self.$stars.attr('data-content', stars);
var css = self.rtl ? 'star-rating-rtl' : 'star-rating';
self.$container.attr('class', css + ' rating-' + self.size);
if (self.inactive) {
self.$container.removeClass('rating-active').addClass('rating-disabled');
}
else {
self.$container.removeClass('rating-disabled').addClass('rating-active');
}
if (typeof self.$caption == 'undefined' && typeof self.$clear == 'undefined') {
if (self.rtl) {
self.$container.prepend(caption).append(clear);
}
else {
self.$container.prepend(clear).append(caption);
}
}
if (!isEmpty(self.containerClass)) {
self.$container.removeClass(self.containerClass).addClass(self.containerClass);
}
},
getStars: function () {
var self = this, numStars = self.stars, stars = '';
for (var i = 1; i <= numStars; i++) {
stars += self.symbol;
}
return stars;
},
renderClear: function () {
var self = this;
if (!self.showClear) {
return '';
}
var css = self.getClearClass();
if (!isEmpty(self.$clearElement)) {
self.$clearElement.removeClass(css).addClass(css).attr({"title": self.clearButtonTitle});
self.$clearElement.html(self.clearButton);
return '';
}
return '<div class="' + css + '" title="' + self.clearButtonTitle + '">' + self.clearButton + '</div>';
},
renderCaption: function () {
var self = this, val = self.$element.val();
if (!self.showCaption) {
return '';
}
var html = self.fetchCaption(val);
if (!isEmpty(self.$captionElement)) {
self.$captionElement.removeClass('caption').addClass('caption').attr({"title": self.clearCaption});
self.$captionElement.html(html);
return '';
}
return '<div class="caption">' + html + '</div>';
},
fetchCaption: function (rating) {
var self = this;
var val = parseFloat(rating), css, cap;
if (typeof(self.starCaptionClasses) == "function") {
css = isEmpty(self.starCaptionClasses(val)) ? self.clearCaptionClass : self.starCaptionClasses(val);
} else {
css = isEmpty(self.starCaptionClasses[val]) ? self.clearCaptionClass : self.starCaptionClasses[val];
}
if (typeof(self.starCaptions) == "function") {
var cap = isEmpty(self.starCaptions(val)) ? self.defaultCaption.replace(/\{rating\}/g, val) : self.starCaptions(val);
} else {
var cap = isEmpty(self.starCaptions[val]) ? self.defaultCaption.replace(/\{rating\}/g, val) : self.starCaptions[val];
}
var caption = (val == self.clearValue) ? self.clearCaption : cap;
return '<span class="' + css + '">' + caption + '</span>';
},
getValueFromPosition: function (pos) {
var self = this, precision = getDecimalPlaces(self.step),
percentage, val, maxWidth = self.$rating.width();
percentage = (pos / maxWidth);
if (self.rtl) {
val = (self.min + Math.floor(self.diff * percentage / self.step) * self.step);
}
else {
val = (self.min + Math.ceil(self.diff * percentage / self.step) * self.step);
}
if (val < self.min) {
val = self.min;
}
else if (val > self.max) {
val = self.max;
}
val = applyPrecision(parseFloat(val), precision);
if (self.rtl) {
val = self.max - val;
}
return val;
},
setStars: function (pos) {
var self = this, min = self.min, max = self.max, step = self.step,
val = arguments.length ? self.getValueFromPosition(pos) : (isEmpty(self.$element.val()) ? 0 : self.$element.val()),
width = 0, maxWidth = self.$rating.width(), caption = self.fetchCaption(val);
width = (val - min) / max * 100;
if (self.rtl) {
width = 100 - width;
}
self.$element.val(val);
width += '%';
self.$stars.css('width', width);
self.$caption.html(caption);
},
clear: function () {
var self = this;
var title = '<span class="' + self.clearCaptionClass + '">' + self.clearCaption + '</span>';
self.$stars.removeClass('rated');
if (!self.inactive) {
self.$caption.html(title);
}
self.$element.val(self.clearValue);
self.setStars();
self.$element.trigger('rating.clear');
},
reset: function () {
var self = this;
self.$element.val(self.initialValue);
self.setStars();
self.$element.trigger('rating.reset');
},
update: function (val) {
if (arguments.length > 0) {
var self = this;
self.$element.val(val);
self.setStars();
}
},
refresh: function (options) {
var self = this;
if (arguments.length) {
var cap = '';
self.init($.extend(self.options, options));
if (self.showClear) {
self.$clear.show();
}
else {
self.$clear.hide();
}
if (self.showCaption) {
self.$caption.show();
}
else {
self.$caption.hide();
}
}
}
};
//Star rating plugin definition
$.fn.rating = function (option) {
var args = Array.apply(null, arguments);
args.shift();
return this.each(function () {
var $this = $(this),
data = $this.data('rating'),
options = typeof option === 'object' && option;
if (!data) {
$this.data('rating', (data = new Rating(this, $.extend({}, $.fn.rating.defaults, options, $(this).data()))));
}
if (typeof option === 'string') {
data[option].apply(data, args);
}
});
};
$.fn.rating.defaults = {
stars: 5,
glyphicon: true,
symbol: null,
disabled: false,
readonly: false,
rtl: false,
size: 'md',
showClear: true,
showCaption: true,
defaultCaption: '{rating} Stars',
starCaptions: {
0.5: 'Half Star',
1: 'One Star',
1.5: 'One & Half Star',
2: 'Two Stars',
2.5: 'Two & Half Stars',
3: 'Three Stars',
3.5: 'Three & Half Stars',
4: 'Four Stars',
4.5: 'Four & Half Stars',
5: 'Five Stars'
},
starCaptionClasses: {
0.5: 'label label-danger',
1: 'label label-danger',
1.5: 'label label-warning',
2: 'label label-warning',
2.5: 'label label-info',
3: 'label label-info',
3.5: 'label label-primary',
4: 'label label-primary',
4.5: 'label label-success',
5: 'label label-success'
},
clearButton: '<i class="glyphicon glyphicon-minus-sign"></i>',
clearButtonTitle: 'Clear',
clearButtonBaseClass: 'clear-rating',
clearButtonActiveClass: 'clear-rating-active',
clearCaption: 'Not Rated',
clearCaptionClass: 'label label-default',
clearValue: 0,
captionElement: null,
clearElement: null,
containerClass: null
};
/**
* Convert automatically number inputs with class 'rating'
* into the star rating control.
*/
$('input.rating').addClass('rating-loading');
$(document).ready(function () {
var $input = $('input.rating'), count = Object.keys($input).length;
if (count > 0) {
$input.rating();
}
});
}(jQuery));
