Step1:
Welcome to designer blog, We have added necessary JQuery functionalities, which is require to develop the web applications.
Step2:
We have developed all the scripts under one roof called
myScript.js
myScript.js:
var contractManagement = (function () {
function MaxHeights() {
if ($(window).width() <= 767) {
$("#left").css('height', 'auto');
$("#right").css('height', 'auto');
} else {
$("#left").height("");
$("#right").height("");
var MaxHeight = Math.max($("#left").height(), $("#right").height());
$("#left").height(MaxHeight);
$("#right").height(MaxHeight);
}
}
$(window).resize(function () {
MaxHeights();
});
function fileinput() {
$('#filecount').filestyle({
input: false,
buttonName: 'btn-add btn-sm',
iconName: 'glyphicon glyphicon-plus'
});
$("#filecount").change(function () {
MaxHeights();
});
}
function datetimepickers() {
$('.datetimepicker').datetimepicker({
format: 'DD/MM/YYYY'
});
}
function icheck() {
$('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
checkboxClass: 'icheckbox_minimal-blue',
radioClass: 'iradio_minimal-blue'
});
//Red color scheme for iCheck
$('input[type="checkbox"].minimal-red, input[type="radio"].minimal-red').iCheck({
checkboxClass: 'icheckbox_minimal-red',
radioClass: 'iradio_minimal-red'
});
//Flat red color scheme for iCheck
$('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
checkboxClass: 'icheckbox_flat-green',
radioClass: 'iradio_flat-green'
});
}
// Setup form validation on the #register-form element
function formValidation() {
$("#register-form").validate({
// Specify the validation rules
rules: {
customername: "required",
nextaction: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
'test[]': {
required: true,
maxlength: 2
},
agree: "required",
duration: "required",
expanded: "required",
projecttype: "required"
},
// Specify the validation error messages
messages: {
customername: "Please enter your customer name",
nextaction: "Please enter next action ",
lastname: "Please enter your last name",
password: {
required: "Please provide your feedback",
minlength: "Your feedback must be at least 60 characters long"
},
contentarea: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
'test[]': {
required: "You must check at least 1 box",
maxlength: "Check no more than {0} boxes"
},
email: "Please enter a valid email address",
expanded: "Please enter expanded character attributes",
selected: "Select anyone field",
projecttype: "Please select the project type",
dates: "myselect",
duration: "Please enter your duration"
},
highlight: function (element) {
$(element).closest('.form-group').addClass('has-error');
$(element).closest('.datetimepicker').addClass('has-error');
},
unhighlight: function (element) {
$(element).closest('.form-group').removeClass('has-error');
$(element).closest('.datetimepicker').removeClass('has-error');
},
submitHandler: function (form) {
form.submit();
}
});
$('#register-form').on('submit', function () {
MaxHeights();
});
$('.clear').on('click', function () {
return false;
});
}
function datatables() {
$('#meeting-list').DataTable({
responsive: true,
"bLengthChange": false,
autoWidth: false,
"fnDrawCallback": function () {
$('th').each(function () {
if (($(this).hasClass('sorting')) || ($(this).hasClass('sorting_desc'))) {
$(this).attr({
title: 'Sort Ascending'
});
} else {
$(this).attr({
title: 'Sort Descending'
});
}
});
},
initComplete: function () {
this.api().columns().every(function () {
var column = this;
if (column[0] != 5) {
var optionValues = [];
var list = $("").text();
var select = $('<select onclick="event.stopPropagation()"><option value="">Choose</option></select>')
.appendTo($(column.header()).empty())
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function (d, j) {
var divEle = $('<div />');
var objs = $(d).selector;
divEle.html(d);
divEle.find('i').remove();
optionValue = divEle.text().trim();
optionValues.push(optionValue);
});
optionValues.filter(function (item, pos) {
if (optionValues.indexOf(item) == pos) {
select.append($('<option>', {
value: item
}).text(item));
}
});
}
});
}
});
$('#meeting-list').on('responsive-resize', function (e, datatable, columns) {
var count = columns.reduce(function (a, b) {
return b === false ? a + 1 : a;
}, 0);
});
MaxHeights();
}
function selectcontrols() {
$("select option[value='']").each(function (index, item) {
if (index == 0) {
$(this).empty();
key = "Contract ID";
$(this).append($("<option></option>")
.attr("value", key)
.text(key));
}
if (index == 1) {
$(this).empty();
key = "Contract Type";
$(this).append($("<option></option>")
.attr("value", key)
.text(key));
}
if (index == 2) {
$(this).empty();
key = "Customer Name";
$(this).append($("<option></option>")
.attr("value", key)
.text(key));
}
if (index == 3) {
$(this).empty();
key = "Valid until";
$(this).append($("<option></option>")
.attr("value", key)
.text(key));
}
if (index == 4) {
$(this).empty();
key = "Signed On";
$(this).append($("<option></option>")
.attr("value", key)
.text(key));
}
if (index == 5) {
$(this).empty();
key = "View";
$(this).append($("<option></option>")
.attr("value", key)
.text(key));
}
});
}
function scrollbars() {
$('.content-scroll').mouseover(function () {
$('.content-scroll').removeAttr("style");
if ($('.content-scroll').height() > 609) {
$('.content-scroll').css({
"overflow-y": "scroll",
"height": "608px"
});
}
})
$('.content-scroll').mouseout(function () {
$('.content-scroll').removeAttr("style");
$('.content-scroll').css({
"overflow": "hidden",
"height": "608px"
});
})
}
function menuNavigation() {
$('.sidebar-menu li').on('click', function () {
$('.sidebar-menu li.active').removeClass('active');
$(this).first().addClass('active');
});
}
function ScrolltoTop() {
$('a[href^="#"]').not('[href=#]').click(function(e){
var anchorTag=$(this).attr('href').replace('.','\\.');
$('html, body').animate({scrollTop: $(anchorTag).offset().top - ($('.searchbar').outerHeight()+5) }, 1000);
return false;
});
}
function ScrolltoBottom()
{
var heights = $('#heightdiv').height();
$('#heightdiv').bind("click", function () {
$('html, body').animate({ scrollTop:heights },"fast");
return false;
});
}
return {
MaxHeights: MaxHeights,
datetimepickers: datetimepickers,
icheck: icheck,
formValidation: formValidation,
fileinput: fileinput,
datatables: datatables,
selectcontrols: selectcontrols,
scrollbars: scrollbars,
menuNavigation: menuNavigation,
ScrolltoTop :ScrollTop,
ScrolltoBottom : ScrollBottom
};
})();
Step3:
To invoke the declare function in script.js. We have to call the script.js and also make sure Html Dom is loaded.
<script>
$(window).on("load", function ()
{
contractManagement.MaxHeights();
contractManagement.scrollbars();
});
</script>
Step4:
Thanks for reading my article.Stay Tune on www.webdesignersdairy.com for more updates on Jquery.
