Tag: javascript

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