연습장

부트스트랩 기반의 홈페이지 제작 중 모달 내 dataTable의 정렬이 안맞는 문제를 찾아보다가 해결함 html 구조는 아래와 같음 모달 컨텐츠 스크립트 코드는 아래와 같음 $(document).ready(function(){ $("#example").DataTable({ 데이터테이블 속성 }); // 모달 내 datatable th와 td 정렬 안맞는 문제 대응 $('#modal-이름').on('shown.bs.modal', function () { var table = $('#example').DataTable(); table.columns.adjust(); }); })

body에 scroll touchmove mousewheel를 했을 때 e.preventDefault() 하는 방법을 사용하면 스크롤탑이 맨 위로 이동된 모습이 보이기 때문에, 풀팝업으로 화면이 바로 가려지는 게 아니라면 position fixed 를 사용하는 방법이 좋을 듯 하다. (우측에서 좌측으로 오는 햄버거 메뉴나 딤드처리된 레이어팝업 등) // 팝업을 열 때 function openPopup() { // 스크롤 위치 저장 var scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; // body 스크롤 막기 document.body.classList.add('noscr..

사건의 발달... pagination fraction, progress 두개를 사용하기 위해 swiper 두개를 선언하여 컨트롤을 묶어줬었다 스와이퍼A(fraction).controller.control = 스와이퍼B(progress); 이런식으로. swiper 페이지네이션 두개 사용하는 방법으로 구글링하면 나옴 autoplay와 touchRatio:0 을 적용해서 마우스로 엄청 드래그하면 화면이 이상해지는 이슈발생 아래 참고 https://codepen.io/parkjubal/pen/jOvMgxG 이상태로 멈춤 같은 클래스로 둘다 스와이퍼 선언하는 것이 이상하기도 하고 옵션을 A에 넣어서 안먹히면 B에 넣어보고 하는게 이상해서 다른 방법을 찾음 https://codepen.io/parkjubal/pen..

https://parkjubal.github.io/horizontal_scrolling/ 횡스크롤 테스트 parkjubal.github.io 리사이즈했을 때 가로스크롤 영역의 높이값이 매끄럽게 바뀌지않아서 리사이징시 화면 리로드되게했음 => 리로드말고 다른 방식으로 보완 필요 위 스크립트 말고 gsap 로 구현 가능함 // 2023.02.20 추가 리사이즈 될때마다 이벤트리스너가 실행되어 중첩됨 => 가끔 함수가 안먹는 문제 발생 이벤트리스너 삭제가 필요함.. 어디에...?

https://codepen.io/parkjubal/pen/GRBbPwW iOS에서 background-attachment:fixed 를 사용해야 할 때 ... codepen.io (뿌듯)

탭1 탭2 탭3

$(document).ready(function(){ var ani = document.querySelectorAll(".ani"); var aniArry = new Array(); Array.prototype.forEach.call(ani, function (ele) { aniArry.push(ele); }); $(window).on('scroll', function () { var scrollTop = $(window).scrollTop(), windowH = $(window).height() / 3 * 2; for (var i = 0; i < aniArry.length; i++) { if ($(aniArry[i]).offset().top < scrollTop + windowH) { $(aniArry..

https://codesandbox.io/

햄버거메뉴나 레이어팝업이 활성화되면 body에 특정클래스(overflow:hidden을 넣은)를 추가하거나 body에 자체적으로 overflow:hidden을 넣으면 된다 이는 컨텐츠 외 영역을 클릭했을 때 팝업이 닫히거나 햄버거 메뉴가 닫히는 스크립트와 함께 쓰면 좋을듯 하다

얌전한 홈페이지를 만들면 안될까요