티스토리

Code Box [ Baby JH ]

검색하기

블로그 홈

Code Box [ Baby JH ]

babyjh.tistory.com/m

coding , front-end , html , css , javascript , 일상

구독자: 0

방명록 방문하기

주요 글 목록

재생/정지 버튼이 있는 slick slider ( auto play, pause ) 제품페이지 이동 블라인드 마크업 이전 다음 재생/일시정지 공감수 0 댓글수 0 2021. 1. 12.
(13) 주요 스크립트 및 jquery 플러그인 기본 틀 /*---------------------------------------------------- // Global ----------------------------------------------------*/ var console = window.console || {log:function(){}}; vard = $(document); var loadingBar = true;//로딩바 제어 /*---------------------------------------------------- // ajax ----------------------------------------------------*/ function ajaxCall(settings) { var options = { async : tru.. 공감수 0 댓글수 0 2019. 8. 22.
스크롤 플러그인 사용시 슬라이드 생성될 시 클론 함께 생성됨슬라이드 생성 전 스크롤 플로그인으로 스크롤 생성 시클론에는 적용이 되지 않음. 슬라이드 생성 후 스크롤 생성 - 클론까지 모두 스크롤 생성. 닫을 때는 스크롤 제거 후 슬라이드 제거. 분해는 조립의 역순 공감수 0 댓글수 0 2018. 7. 12.
(12) 날짜 비교하여 기능 적용하기 현재 날짜, 시간과 적용이 되야할 날짜, 시간을 비교하여 함수호출하기 예 ) 5월 29일 00시 00분부터 5월 29일 20시 00분 사이에 화면 보이게 하기 공감수 0 댓글수 0 2018. 5. 28.
(11) 남은 날짜, 시간, 분, 초 계산하기 - 날짜 타이머, 카운팅 // html 0 0 0 0 0 0 // javascript CountDownTimer('04/30/2018 00:00 AM'); function CountDownTimer(dt){ var end = new Date(dt); var _second = 1000; var _minute = _second * 60; var _hour = _minute * 60; var _day = _hour * 24; var timer; function showRemaining() { var now = new Date(); var distance = end - now; if (distance < 0) { clearInterval(timer); ret.. 공감수 2 댓글수 0 2018. 4. 9.
(10) URL 파라미터 값 받아오기 데이터 전송 방식 중 get 방식은 URL에서 '?' 뒤에 파라미터 정보를 가지고 전송한다. 오늘은 '?' 뒤에 있는 파라미터 정보를 읽어오는 방법을 알아보자. ex) www.profile.com?name=joohee&age=87 function getQuerystring(paramName){ var _tempUrl = window.location.search.substring(1); //url에서 처음부터 '?'까지 삭제 var _tempArray = _tempUrl.split('&'); // '&'을 기준으로 분리하기 for(var i = 0; _tempArray.length; i++) { var _keyValuePair = _tempArray[i].s.. 공감수 2 댓글수 0 2018. 4. 5.
(9) 스크롤로 각 섹션에 진입 시 gnb 메뉴 온/오프 기능 $window.on('scroll', scrollEvent ); var $scollTop = $window.scrollTop(); var $headerHeight = $('.header').height(); if( $scollTop >= $('.section5').offset().top - $('.section4').height()/2 ) { $('.gnb li').removeClass('on'); $('.gnb li:eq(3)').addClass('on'); } else if( $scollTop >= $('.section4').offset().top - $headerHeight-100 ) { $('.gnb li').removeClas.. 공감수 1 댓글수 0 2018. 3. 29.
(8) 화살표 슬라이드 Next prev Next prev Next prev Next prev //추가 화살표 슬라이드 function aroowSlide(){ // 초기 상태 설정 : 첫 번째 슬라이드를 제외하고 모두 숨기기 $('.slider_wrap').find('> div:eq(0)').nextAll().css({'opacity':'0','display':'none'}); // 컨트롤러 링크 클릭시 $('.controls > a').click(function(event) { event.preventDefault(); var currentslide = $(this).parents('div:first'); // 클릭 된 링크가 포함 된 div 가져 오기 var currentposition = .. 공감수 1 댓글수 0 2018. 3. 26.
(7) 쿠키 설정하기 ( 오늘하루 열지않기, 다시보지않기 ) 팝업 설정시 [ 오늘하루열지않기 / 오늘하루 다시보지않기 ] 스크립트 // 팝업 열때 쿠키 확인 하고 없으면 팝업 열기 function Init( $class ){ if(getCookie($class) != 'done') { OpenPopup($class); } } // 오늘하루 열지않기 버튼 눌렀을 때 쿠키 설정하고 닫기 function ClosePopup( $idName ){ setCookie($idName, 'done', 1); popup.hide(); } // 쿠키 확인 function getCookie(name) { var nameOfCookie=name+"="; var a=0; while(a 공감수 4 댓글수 0 2018. 3. 19.
(6) 선택,해제 했을 때 이전에 선택한 순서대로 순번 정렬하기 (ex. 카카오톡 사진 선택) 오늘 만들었던 것은 - 예를 들면 카카오톡에서 친구에게 사진을 보낼 때, 1) 사진을 보내려고하는 순서대로 클릭한다. 2) 클릭을 하면 체크박스에 클릭한 순서대로 순번이 표기되고 그 사진이 선택된다. 1.2.3.4.5 순으로 체크를 하다가 3) 세번째에 체크한 사진을 보내고 싶지 않으면 3번을 다시 클릭하면 3번사진이 클릭해제가 된다. 4) 그 상태에서 체크박스에 표시된 순번은 1.2.(3이 제외되고).3.4 로 다시금 정렬되야 한다. 이것을 만들고자................. ( 정말 생활에서는 생각도못한 간단한 것이었는데 ㅜㅜ 코드짜기 어렵네요.. ) 해서 만든!! 스크립트!!!!!!! 하.... 공감수 3 댓글수 1 2018. 3. 14.
(5) 특정 글자수 만큼만 입력하기 - 글자수 제한 // html 0/100 // css $(".textarea_title");.on('keydown', checkTextareaNum100); $(".textarea_title");.on('keyup', checkTextareaNum100); function checkTextareaNum100(){ var _msgContent = $(this).val(); if ( _msgContent.length > 101 ){ $textAreaTitle.val(_msgContent.substring(0,100)); }else if( _msgContent.length 공감수 0 댓글수 0 2018. 3. 5.
(4) window postmessage - iframe 과 부모의 통신 // iframe 파일 안에서 부모document로 메세지 보내기 $(window).load(function() { var body = document.body, html = document.documentElement, height = Math.max( body.scrollHeight, body.offsetHeight ); if (parent.postMessage){ parent.postMessage({ "oT" : 0, "height" : height, "isScroll" : false }, "*"); } } // iframe을 품고있는 부모document에서 iframe의 메세지 받기 // data.oT , data.. 공감수 0 댓글수 0 2018. 2. 19.
(3) 검색어 입력하고 검색어를 다른 페이지 파라미터로 넘기기 html : javascript : var $searchInputClick = _$('.search_input').find('a'); $searchInputClick.on('click', searchText ); var _$searchInput = _$('.search_input').find('input'); _$searchInput.keyup(function(e){if(e.keyCode == 13) { // 웹에서 엔터쳤을때 searchText( ); }}); function searchText( $e ){ var thisText = $('aside .menu_box .search .search_input input').val().. 공감수 2 댓글수 0 2018. 1. 26.
(2) 이미지 로드 시점 잡기 ( img load ) (2) 이미지 로드 시점 잡기 ( img load ) 1. 이미지 태그를 마크업한다. ( src는 비우고 data-src에 src값을 넣어놓는다, 로드 후 바꾸기 위함 ) 2. 온로드 이벤트를 건다. 3. attr로 src값을 data-src값에서 받아와서 넣는다. 4. 그럼 src값이 변경 된 후 이벤트가 발생 ( 데이터를 뿌려주는데 이미지 넓이값을 가져와야할때 쓰임, 첨부터 이미지 넓이를 잡아버리면 로드 전에 넓이가 0이어서 안잡힐 때가 있음 ) _listContainer.append( tag ); _listItems = _list.find( "li" ); _listItems.on( "click", listItemClick ); var thumb; _listItems.each( function( i .. 공감수 0 댓글수 0 2018. 1. 24.
(1) 특정 영역을 제외한 나머지 클릭 했을 때 특정 영역 닫히기 1) $("body").click(function(e){if(!$(".sub_bar").has(e.target).length){ mainMenuHide();} }); 첫번째 has(e.target).length 로 구분하여 닫히는 함수 호출 ( pc는 작동 )( 모바일에서 sub_bar 이 영역이 블럭처리 되어있으면 작동하지 않음. ) 2) $('#wrap').addClass('clickable'); // 아이폰 safari 에서 작동하게 하기위한 커서포인트 속성 클래스 추가 $(document).on('click', '#wrap', function(e){ if($('.main_menu_list').height() > 0){ mainMenuHide(); } }); 닫히는 함수 안에$('#wrap').re.. 공감수 0 댓글수 2 2018. 1. 19.
이 글은 어디로 올라가있는거니 비디오팝업 열기/닫기 공감수 0 댓글수 0 2018. 1. 11.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.