해상도별 이미지 교체 window resize

반응형 웹사이트 제작 시 해상도 처리 및 감지 방법에는 2가지가 있다. CSS의 미디어쿼리 사용 Javascript의 $(window).width();와 if문 사용 CSS로는 미디어쿼리와 background 속성을 이용해 해상도별 이미지를 수정할 수 있지만 마크업을 수정할 순 없다. 이때 Javascript로 브라우저의 가로 값을 계산하여 해상도별로 마크업을 수정해줄 수 있다. resize event // jQuery $(window).resize(function(){ // script }); // JavaScript - addEventListener window.addEventListener('resize', function(event) { // script }, true); // JavaScript..

2022.01.11

Ajax로 불러온 엘리먼트의 이벤트가 작동 하지 않을때

Ajax로 불러온 클래스에 클래스명으로 이벤트를 걸면 해당 이벤트가 작동하지 않는다. click이벤트는 이미 페이지에 있는 요소에 대해서만 작동을 하기 때문에, Ajax를 이용해 동적으로 가져온 요소에 대해서는 작동하지 않기 때문이다. $('.class').click(function(){ }); 이럴때는 위의 소스를 아래와 같이 변경해준다. $('document').on('click', '.class', function(){ }); 동적으로 가져온 요소에 대해서는 이벤트 핸들러 등록을 해야한다. 이벤트 핸들러 등록을 하기 위해 .on()메서드를 사용한다. 참고:) https://xianeml.tistory.com/71 jQuery 제이쿼리 이벤트, Ajax 비동기 처리 🎯 자바스크립트 라이브러리 jQue..

2021.12.31

jQuery scroll 스크롤 끝을 확인하는 방법

브라우저 창 끝 이벤트 $(window).scroll(function(){ if ($(window).scrollTop() == $(document).height() - $(window).height()) { alert('End of Window'); } }); DIV 끝 이벤트 $("#inside").scroll( function() { var elem = $("#inside"); if ( elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) { alert("End of Yellow"); } });

2021.12.21

JavaScript Plug-in Calendar

JavaScript Plug-in Calendar https://fullcalendar.io/ FullCalendar - JavaScript Event Calendar Open Source... With over 10 years of open source and over 120 contributors, FullCalendar will always have a free and open source core. Learn more fullcalendar.io

2021.12.20

jQuery Plug-in scroll waypoint

jQuery Plug-in scroll waypoint 스크롤에 반응하는 애니메이션 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit velit sit amet tristique tincidunt. Fusce dapibus tortor ut est ornare porttitor. Aliquam auctor bibendum posuere. Fusce laoreet tincidunt lacinia. Aliquam posuere pharetra auctor. Pellentesque et eleifend nibh, a bibendum lacus. Pellentesque sit amet dignissim mauris. Suspendiss..

2021.12.20

jQuery Plug-in responsiveGallery_sample

jQuery Plug-in responsiveGallery_sample Best 제품 벤투스 S2 AS Comfort Technology SUV타이어 다이나프로 HL3 강인함, 편안함 밸런스의 SUV타이어 키너지 AS EV 전기차 주행 balance를 완성시키는 타이어 다이나프로 올 터레인 모든 도로에 최적화된 전천후 타이어 Smart Plus2 합리적인 소비자를 위한 승용차용 사계절 타이어 Optimo H426 카 메이커가 인정한 저소음 승차감 타이어 벤투스 S1 noble2 새롭게 태어난 프리미엄 그 이상의 프리미엄 타이어

2021.12.20