Publish/JavaScript 24

스크롤시 nav에 active 주기

[html] //active되는 구역/섹션 //active 될 nav NAV active 되는 구역/섹션 -> scroll_active, data-taget 값을 id에 넣기 active 될 nav -> 눌렀을때 스크롤 하고싶다면 href에 id값 넣기, data-target에 구역/섹션과 동일한 값 넣기 [javascript] // page_nav 해당 섹션에 스크롤 될 시 에 active $(window).scroll(function () { const height = $(window).scrollTop(); // 해당 스크롤 좌표값(높이) const contents = $('.scroll_active'); contents.each(function () { const a = $(this).positi..

Publish/JavaScript 2022.11.11

div 내부에 있는 스크롤 영역 계산, 스크롤시 섹션에 맞는 tab에 active ( position() )

// 스크롤시 섹션에 맞는 tab에 active 주기 $("#wrap_content").scroll(function () { const height = $("#wrap_content").scrollTop(); // 해당 스크롤 좌표값(높이) const content = $('.content_area'); content.each(function () { const a = $(this).position(); if (a.top == height || a.top < height + 200) { const thisIndex = $(this).index() const tabIndex = $('.tab').eq(thisIndex); tabIndex.addClass('active'); // $('.tab').not(t..

Publish/JavaScript 2022.10.01

체크박스 전체 선택,해제 / 라디오 전체 선택,해제 (약관)

** 체크 박스 약관 제목 약관 제목 [필수] $('#allCheck_agree').click(function () { $('.check_disagree').prop('checked', false); $('input:checkbox[name=terms_agree]').prop('checked', true); if (!$(this).prop('checked')) { $('input:checkbox[name=terms_agree]').prop('checked', false); } }); $('#allCheck_disagree').click(function () { $('input:checkbox[name=terms_agree]').prop('checked', false); $('.check_disagree'..

Publish/JavaScript 2022.09.09

select,option 사용해서 셀렉트 커스텀하기

* ul,li 로 마크업,스타일링 하는것이 아닌, select,option태그를 사용해서 데이터 연동을 용이하게 셀렉트 커스텀 가능 html 옵션명 A B C D css /** Custom Select **/ .custom_select_wrapper { position: relative; user-select: none; cursor: pointer; } .custom_select_wrapper select { display: none; } .custom_select { position: relative; display: block; } .custom_select.opened .custom_select_trigger { border-bottom-color: transparent; } .custom_sel..

Publish/JavaScript 2022.09.08

스와이퍼 다른 div와 연동시키기 (2개 사용 x)

* 장점: 여러개의 div 를 연결할 수 있음. * 문제점: 스와이퍼 뒤에 배경 개념으로 까는것에는 아무 문제 없으나, 스와이퍼 위에 버튼을 띄어야 하는 경우에는 해당 div 영역에서는 밀어서 넘기는 터치이벤트가 불가함. --동기-- 스와이퍼 작업중: - 스와이퍼 두개 겹치기 안됨 (같이 넘어가는 느낌 있음, 스와이퍼에서 제공하는 자체적인 fadeIn 효과는 오류가 있음.) - 슬릭 안됨 (두개 연동되어 있는 슬라이더 오류가 심함.) * 해결 - 스와이퍼 1개를 만들고, 다른 div 를 만들어서 , swiper 기능에 있는 on 기능을 활용해서 바뀔때마다 해당idnex의 text로 변하도록 만들었음. ** 핵심 - swiper on 이벤트 1VOLT V BASIC 하단 배너 텍스트 하단 배너 텍스트 하단..

Publish/JavaScript 2022.08.24

모바일 100vh에 꽉차게 퍼블리싱 / 모바일 100vh 스크롤 생기는 문제

* 스크롤 페이지가 아닌, 100vh의 컨텐츠만 있는 페이지 작업 js에 아래 함수 추가한다. function setScreenSize() { let vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); } setScreenSize(); 감싸는 wrap에 아래 css를 반영한다. 그러면 모바일 100vh에 스크롤이 생기지 않아서 깔끔한 화면을 만들 수 있따. .wrap_inner: height: calc(var(--vh, 1vh) * 100);

Publish/JavaScript 2022.07.06