Validate Form Fields using jQuery
function validateField(element, e){ var restriction = element.attr(‘data-restriction’); var errorText = element.attr(‘data-error-text’); var required = element.attr(‘data-required’); var name = element.attr(‘name’); var label = element.siblings(‘label’).html(); var tagName = element.prop(‘tagName’).toLowerCase(); var value = element.val(); if (typeof restriction !== ‘undefined’){ if (restriction == ‘numeric’){ if (typeof e !== ‘undefined’){ // Allow: backspace, delete, tab, escape, enter and . if […]
Read more
jQuery Scroll To Top
Dependencies(s) jQuery HTML ⇧ CSS #scroll-to-top:hover { background: #9e0a1c; } #scroll-to-top { width: 30px; position: fixed; bottom: 20px; right: 20px; background: #d6283d; color: white; text-shadow: 1px 1px 1px #010101; padding: 0px 5px 5px 5px; font-size: 30px; cursor: pointer; transition: .5s all; display: none; } JS jQuery(document).ready(function(){ var scrollToTop = $(‘#scroll-to-top’); var bottomCointainer = $(‘#main-footer’); var […]
Read more
Automatic adjust element height based on the tallest element
It will loop all elements based on class and adjust the height based on the tallest element. HTML Code jQuery Code $(window).resize(function(){ initArticleBox(“.box”); }); $(window).load(function(){ initArticleBox(“.box”); }); function initArticleBox(selector){ var box = $(selector) box.height(“auto”); if ($(window).width() > 768){ var maxHeight = 0; var article = box.each(function(){ maxHeight = Math.max(maxHeight, jQuery(this).height()); }).height(maxHeight);; }else{ box.height(“auto”); } }
Read more
Add password show and hide toggle using jQuery
Add view toggle for all password fields using jQuery $(‘input[type=password’).each(function(index){ $(this).addClass(‘password-‘ + index); $(this).wrap(function() { return “”; }); $(‘.password-container’).css(‘position’,’relative’); var style = { “position” : “absolute”, “right” : “7px”, “top” : “5px”, “background-color” : “#3fa457”, “color” : “white”, “font-size” : “10px”, “padding” : “5px 10px”, “border-radius” : “5px”, “cursor” : “pointer”, “text-transform” : “uppercase”, “width” […]
Read more