1월, 2019의 게시물 표시

Input box Label in Material Design(label animated to top of the input box when focused)

placeholder 만들기 포커스시 label 숨기기 $(document).ready(function() { var placeholderTarget = $('.textbox input[type="text"], .textbox input[type="password"]'); //포커스시 placeholderTarget.on('focus', function(){ $(this).siblings('label').fadeOut('fast'); }); //포커스아웃시 placeholderTarget.on('focusout', function(){ if($(this).val() == ''){ $(this).siblings('label').fadeIn('fast'); } }); }); value 값이 이미 설정되어 있는 경우 placeholderTarget.each(function(){ if(!($(this).val() == '')){ $(this).siblings('label').css('display','none'); } }); Material Design function materialLabel() { $('.matInputW input[type="text"]').on('focus', function(){ console.log($('.matInputW input[type="text"]').val()); var label = $(this).siblings('label'); var labelH = label.height(); label.stop().animate({ botto...

Fixed Navigation

navi 특정 위치에서 fixed 스크롤이 네비게이션 위치에 왔을 때 fixed menu01 menu02 menu03 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate veritatis sunt, commodi repellendus pariatur libero alias non suscipit. Saepe quae ab rerum inventore labore aperiam temporibus commodi dignissimos, accusantium necessitatibus. Sed non nisi amet repudiandae eaque labore sapiente dolores quisquam, neque! Nobis, adipisci ex saepe. Inventore enim architecto minima dignissimos rem ea nemo doloribus maxime, deserunt ab? At reprehenderit excepturi, magnam porro voluptates, voluptatem voluptate aliquid similique, maxime dignissimos consectetur corporis! Voluptatum, impedit, eius optio, cumque quam quaerat ducimus commodi delectus a accusamus temporibus neque eligendi! Culpa eligendi, fugiat suscipit fugit doloremque, dolores praesentium consequatur doloribus, dolorum animi velit optio? Assumenda laborum eaque nisi asperiores in recusandae sunt tenetur omnis odio dicta molli...