팝업띄웠을때 스크롤 막기, 해제(var 이용 유무에 따른 변수 scope/함수호출로 정리) var scrollHeight = 0;//전역변수 초기화 //팝업띄울시 스크롤 고정 function popupOpen() { scrollHeight = $("body").scrollTop(); // [var사용하지 않았으므로 전역스코프로 정의됨]열렸을떄 scrollTop 체크 $("body").addClass('layer-open'); //overflow:hidden 추가 $('.wrap').css('position', 'fixed'); //최상위 div 고정 $('.wrap').css('top', - scrollHeight);// 최상위 div에 현재 스크롤된값 = 보이는화면만큼 top값 추가 } //팝업닫을때 스크롤 해제 function popupClose() { $("body").removeClas.. WEB/jQuery 2017. 10. 10. 15:10
placeholder 효과 ie9이하에서 사용 - placeholder 속성 : 텍스트 필드에 힌트를 제공하는 역할. IE9 이하 버전 지원하지 않는 대체법 필요휴대전화번호를 입력해주세요.input-store{position:relative;z-index:10;}.input-tel-placeholder{position:absolute;left:15px;top:15px;color:#000;font-size:20px;z-index:9;}.input-tel input{position: relative;z-index: 99;padding: 15px;background:none;border: none;font-size:20px;color:#000;border-bottom: solid 2px #000;-webkit-transition: border 0.3s;-.. WEB/jQuery 2017. 9. 26. 15:49
tweenmax.js 예제 트윈맥스이 필요한 작업이 생겨서 ~원래 별이 떨어져야되는데 디자인이 나오기전이라 임시로 작업 참고 http://www.2in1mascara.co.kr/ WEB/jQuery 2017. 6. 19. 16:05
wordbreak.js (단어마다 끊어주는 플러그인) jQuery word-break: keep-all 플러그인 ver 1.3.0 Demo아래 버튼을 이용해 가로를 50px씩 늘리고 줄이면서 단어별로 끊어지는지 테스트해 보세요. 플러그인 적용 (applied)다양한 태그에 테스트해 본 것입니다. Test target isvary tags.이것은 span tag로 둘러싼 것입니다. 이것은 span tag로둘러싼 것입니다.이것은 div tag로 둘러싼 것입니다. 이것은 div tag로둘러싼 것입니다. (자식 HTML이 있어도 작동하는 것을 보여줍니다.)이것은 h3 tag로 둘러싸고 중간에 줄바꿈이있는 것입니다. 이것은 h3 tag로 둘러싼것입니다.이것은 p tag로 둘러싼 것입니다. 이것은 p tag로둘러싼 것입니다.이것은 a tag로 둘러싼 것입니다. 이것은.. WEB/jQuery 2017. 6. 12. 17:55
$(window).load, $(document).ready 로드 후 실행되는 시간 $(document).ready(function(){ // code }); 브라우저에서 DOM 트리를 생성하고난 후에 실행(DOM is ready) $(window).load(function(){ // code }); 모든 include 되는 프레임들과 object들, 이미지까지 로드된 이후에 실행 출처: http://creator1022.tistory.com/156 [무한도전]document가 ready된 시점에는 DOM에 대한 접근만이 자유롭겠지만 아직 브라우저에서 다른 객체들이나 이미지들을 로드하지 않은 상황이므로 어떤 페이지를 사용자가 접근할 때 이미지에 대한 가공을 하려한다면 실패하게 되겠죠. 하지만, window를 로드하고난 이후에 실행되는 코드들은 모든 객체나 프레임들(외부 contents를.. WEB/jQuery 2017. 6. 7. 20:35
레이어 팝업 뒤에 스크롤 막는 방법 1234//소스를 상황에 맞게 추가해주면, 레이어팝업이 뜬 화면과 스크롤이 함께 움직이지 않습니다. $(window).bind('touchmove', handler); // 레이어팝업 열린 상태$(window).unbind('touchmove', handler); // 레이어팝업 닫힌 상태cs var handler = function(e) { e.preventDefault();} WEB/jQuery 2017. 5. 9. 14:52
다른영역 클릭시 팝업 닫기 //공유하기 클릭 $(".share").click(function(){ $(".share-pop").stop().fadeToggle(500); return false; //중요 }); //공유하기 팝업 외에 영역 클릭 $(document).click(function(e){ //문서 body를 클릭했을때 if(e.target.className =="share-pop"){return false} //내가 클릭한 요소(target)를 기준으로 상위요소에 .share-pop이 없으면 (갯수가 0이라면) $(".share-pop").stop().fadeOut(500); }); WEB/jQuery 2017. 3. 30. 12:03
플로팅 배너 응용 var h = parseInt($('.quick').css('top'));$(window).scroll(function(){$('.quick').stop().animate({'top' : $(window).scrollTop() + h}, 2000, 'easeOutBounce');}).scroll(); https://jsfiddle.net/webweb/5r5ufdca/ WEB/jQuery 2017. 3. 22. 14:41
checkbox 전체 선택 1234567891011121314$(function(){ //전체선택 체크박스 클릭 $("#allCheck").click(function(){ //만약 전체 선택 체크박스가 체크된상태일경우 if($("#allCheck").prop("checked")) { //해당화면에 전체 checkbox들을 체크해준다 $("input[type=checkbox]").prop("checked",true); // 전체선택 체크박스가 해제된 경우 } else { //해당화면에 모든 checkbox들의 체크를해제시킨다. $("input[type=checkbox]").prop("checked",false); } })})Colored by Color Scriptercs 1. checked 여부 확인12$("input:checkb.. WEB/jQuery 2017. 3. 15. 14:46
Top Button $('.goTop').click(function () { $("html, body").animate({ scrollTop : '0' }, "100"); }); $(window).scroll(function() { var position = $(window).scrollTop(); if(position >= 500) { $('.go_btnArea .goTop').show(); } else { $('.go_btnArea .goTop').hide(); } }); WEB/jQuery 2017. 2. 27. 15:53
