본문 바로가기

전체 글18

input[type="file] custom 파일선택 .filebox input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .filebox label { display: inline-block; text-align: center; width: 90px; height: 30px; line-height: 30px; background-color: #777; border: none; font-size: 12px; color: #fff; } .filebox .upload-name { display: inline-block; padding: .5em .. 2020. 9. 25.
input[type="text"] 숫자만 입력 $("input[type='text']").on("keyup", function() { $(this).val($(this).val().replace(/[^0-9]/g,"")); //다음 input 이동 if (this.value.length == this.maxLength) { $(this).next('input[type="text"]').focus(); } }); 2020. 4. 6.
attr과 mouseenter/mouseleave/click 같이 쓰기 attr을 mouseenter/mouseleave/click으로 변경하기 var tabIdx = ''; $('.tab_wrap li').on({ mouseenter:function(){ $(this).children('img').attr('src', $(this).children('img').attr('src').replace('_off', '_on')) }, mouseleave:function(){ $('.tab_wrap li').each(function(){ $(this).children('img').attr('src', $(this).children('img').attr('src').replace('_on', '_off')); }); $('.tab_wrap li:eq('+tabIdx+')').chi.. 2019. 12. 12.
animate 다중클릭/중복클릭/다클릭 방지 animate 동작하는 동안 클릭 방지 if($this.is(':animated') == false){ //animate() } 2019. 11. 14.
<a href="#id">로 이동 부드럽게 하기 $('a').on('click', function(e){ e.preventDefault(); $('html, body').animate({scrollTop:$(this.hash).offset().top}, 500) }) 도움이 되셨다면 ❤ 한번만 부탁드립니다. 요즘 도통 일에 보람이 없어서요 주륵 누군가에게 도움이 되었다는 것을 확인받고 싶네요 🙏 2019. 11. 12.
:empty 사용하기 DB로 내용을 뿌리다보면 동일한 위치에 내용이 들어가는 것과 들어가지 않는 것이 발생. 대상(#on)이 빈 것이 있다면(:empty) 보이지 않게(display:none) if ($('#on:empty')) { $('#on:empty').css({ display: 'none' }); } 2019. 10. 22.
scroll bottom 구하는 법 scrollTop은 있지만 scrollBottom은 없음(왜ㅠ?) 아래와 같은 코드로 scrollBottom 효과를... var scrollBottom = $('body').height() - $(window).height() - $(window).scrollTop(); 2019. 10. 4.
mouseenter / mouseleave / click 함께 사용하기 mouseenter / mouseleave / click을 함께 사용해야 하는 경우, click에 .off('mouseleave')를 적용해 click에 적용한 mouseenter와 동일한 효과 줄 수 있도록 $('.on').on({ mouseover: function(){ //effect_01; }, mouseleave: function(){ //effect_01_out; }, click: function(){ $(this).off('mouseleave'); //effect_01; } }); 2019. 9. 27.
mouseenter/mouseleave 적용 mouseenter/mouseleave를 'on'으로 묶어서 적용 stop(true, true)로 불필요하게 반복되는 슬라이드 작업 잡아주기 $('#on').on({ mouseenter: function() { $('.option').stop(true, true).slideDown(); }, mouseleave: function() { $('.option').stop(true, true).slideUp(); } }); 2019. 9. 25.