잘 쓰고 있던 swiper 스크립트에서 어느날 갑자기 이런 오류가 떴다. Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. 구글링해봤더니 Window에 파라미터를 지정해야 해결이 가능한것 같은데, 그동안 잘 작동하던게 갑자기 오류가 뜬 경우라 스크립트를 수정하고싶지는 않았다. 혹시나하고 swiper-bundle.min.js 경로를 다른 것으로 변경해보았더니 해결되었다. 기존에 swiper-bundle.min.js 을 외부링크로 불러와서 사용했는데 업데이트가 되면서 일부 코드와 맞지 않았던게 있던 것 같다. 이럴 땐 다른 파일로 변경해보면 해결이 될 수 있겠다. 기..

상품이 품절되면 상품 목록에 보통 이런 품절 아이콘이 뜨는데, 이런 아이콘 말고 그냥 텍스트를 보여주고 싶은 경우 수정하는 방법이다. 텍스트로 보여주면 홈페이지 디자인에 맞추어 폰트를 동일한 스타일로 지정할 수 있고, 혹시나 홈페이지가 반응형인 경우 깨져보이지 않는다는 장점이 있다. 참고로, 단순히 아이콘을 다른 아이콘으로 변경하고 싶은 경우에는 카페24 관리자페이지에서 쇼핑몰설정 > 사이트설정 > 아이콘설정에 접속해서 이미지를 교체하면 된다. 품절대신 Out of stock이나 Sold Out 등 텍스트로 표현하고 싶은 경우 아래와 같이 코드를 추가해주면 된다. 상품분류(product/list.html) 파일에서 상품목록 와사이에 원하는 위치에 {$soldout_icon}를 추가한다. 품절 텍스트의 위..

디바이스 화면 크기에 따라 스크립트를 다르게 적용(반응형)하는 방법은 아래 글 참고! (화면 크기만으로 구분하므로, PC이더라도 화면 크기가 작아지면 모바일 버전으로 나오게 된다.) https://hongpage.kr/20 [jQuery] 디바이스 크기별로 jquery 스크립트 다르게 불러오기 (반응형) 홈페이지가 반응형인 경우, 디바이스 크기별 jQuery 스크립트를 다르게 불러와야하는 경우가 종종있다. 같은 슬라이더를 쓰더라도 PC버전과 Mobile 버전의 속성을 다르게 할 수도 있는데 아래와 같 hongpage.kr 아래의 방법은 디바이스 크기가 아니라 디바이스 기종에 따라서 모바일과 모바일이 아닌 경우를 구분하는 제이쿼리 스크립트이다. 따라서 PC에서 화면을 작게한다해도 모바일 스크립트가 적용되지..

다양한 옵션과 효과를 제공하여 홈페이지에서 많이 사용하고 있는 Swiper 슬라이더. 작업을 다 하고 브라우저별로 확인하는데 익스플로러에서는 Swiper 작동이 안되는 불상사가. 여기저기 헤매던 중 해결 방법을 찾게 되었다. 바로 Swiper버전을 낮추는 것! https://cdnjs.com/libraries/Swiper/ Swiper - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers Most modern mobile touch slider and framework with hardware accelerated transitions - Simple. Fast. Reliable. Cont..

.not() jquery 선택자 중에 특정 요소(특정 클래스, 특정 아이디)만 제외하고 싶은 경우 아래와 같이 사용하면 된다. .not(selector) 사용 예시 1) 클래스명이 link인 것만 제외한 a 태그 $('a').not('.link').css(); 2) 링크 주소가 #인 것만 제외한 a태그 $('a').not('[href^=#]').css(); 3) 클래스명이 content 가 아닌 #section $('#section').not('.content').css(); .not() 여러개 지정하기 아래와 같이 두가지 방법으로 사용 가능하다. [방법1] 선택자(여기서는 a태그) 밖에 .not()을 사용하여 '제외할 선택자1, 제외할선택자2' 로 표기한다. ※ 주의 ※ 작은 따옴표 안에 제외할 선택자..

Owl Carousel는 jquery 기반으로 반응형, 터치 기능을 제공하는 이미지 슬라이더이다. https://owlcarousel2.github.io/OwlCarousel2/ Home | Owl Carousel | 2.3.4 Modules and Plugins Owl Carousel supports plugin modular structure. Therefore, you can detach plugins that you won't use on your project or create new ones that fit your needs owlcarousel2.github.io 그런데 Owl Carousel 옵션에 margin:0, items:1 을 넣어 이미지 하나씩 나오도록 설정하여 사용하였는데, 오..

bxSlider 다양한 옵션을 제공해주어 사용하기가 편해 웹에서 많이 사용되는 이미지슬라이더 bxslider https://bxslider.com/ jQuery Content Slider | Responsive jQuery Slider | bxSlider Coded with ♥ by bxslider.com bxSlider 깃허브를 확인해보니 responsive jQuery content slider 라고 써있다. 어느 기기에서나 조정이 되는 Fully responsive 라고... 기존 bxSlider bxSlider는 기본적으로 반응형을 제공하기는 하지만 화면을 줄이면 전체적으로 사이즈가 작아지는 것일 뿐, 보여지는 슬라이드 갯수를 반응형으로 조절해주지는 않는다. 화면이 작아지는데 슬라이드 갯수를 그대..

회원가입이나 폼 입력시에 해당 항목에 대한 상세한 설명이 필요한 경우, 상세하게 설명을 넣을수도 있지만 필요에 따라 볼 수 있게 툴팁으로 안내가 가능하다. 생일 옆에 느낌표 아이콘에 마우스를 대보면 해당 항목에 대한 상세 설명을 툴팁으로 띄워준다. 툴팁의 배경색상이나 폰트 컬러도 변경가능하다. jquery ui 파일 로드 일단 관련된 jquery ui파일을 로드한다. html 툴팁이 나오게할 아이콘 또는 요소를 넣는다. 툴팁 설명은 title=""안에 넣으면 된다. 여기서는 Font Awesome 을 활용하였는데, 꼭 Font Awesome이 아니더라도 input, img 등 다양하게 활용이 가능하다. 스크립트 삽입 위에 넣은 툴팁 아이콘 클래스명을 알맞게 넣어주고 tooltip() 스크립트를 넣어주면 ..

예전에 한 때 홈페이지에 항상 퀵메뉴가 있던 시절이 있었는데, 없어지는 듯 하다가 요새 다시 보이는 듯 하다. 아무래도 쇼핑몰이나 고객의 요구에 빨리 응해야하는 사이트에서는 퀵메뉴가 필수불가결한 요소인 것 같다. 보통 오른쪽에 완전히 고정해두는 형태(position:absolute)로 넣을 수도 있지만 완전 고정해두면 좀 유연성이 없어보이고(?) 너무 큰 사이즈로 넣는다면 사이트의 다른 구성요소보다 더 이목이 집중되는 느낌... 요새는 아래처럼 작은메뉴를 만들어 스크롤 내릴때 마다 부드럽게 따라오는 형태로 많이 사용하는 것 같다. jquery를 활용하면 부드럽게 따라오는 메뉴를 만들 수 있다. 일단 결과물은 아래 HTML 퀵메뉴를 구성하고 클래스값(quickmenu)이나 아이디를 지정한다. 등급별혜택 1..

placeholder="아이디를 입력하세요">이런식으로 태그에 직접 속성을 지정해주면 간단하지만 간혹 직접 지정이 어려운 경우가 있다. ex) 카페24에서는 자체 모듈(변수)로 회원가입 인풋항목을 생성하기 때문에 인풋 태그 안에 placeholder를 직접 지정해줄수가 없다.또는 제이쿼리 스크립트에 따라 속성이 추가되거나 삭제되어야하는 경우 등  이런 경우 아래의 스크립트를 넣어 해결이 가능하다.$( document ).ready( function() { $("input#member_id").attr("placeholder", "아이디를 입력하세요");}); 그러면 직접 placeholder="아이디를 입력하세요"를 넣지 않고도 동일한 결과를 얻을 수 있다.  attr()의 다양한 활용 방법제이쿼리의..

https://hongpage.kr/16 [jQuery] 기본 탭 소스 유용하게 많이 사용하는 기본 jquery 탭 html부분 탭1 탭2 탭3 탭1내용 탭1내용 탭3 탭을 추가하는 경우 1) 사이에 를 추가하고 탭4 탭5 2) 클릭시 나올 컨텐츠 부분도 추가하면된다. 탭4 내용 hongpage.kr 지난번 올린 기본 탭 소스 포스팅은 탭 메뉴를 클릭 했을 때 내용이 바뀌는 방식이었다. 이 코드는 기본 탭 코드와 동일하게 탭 메뉴를 클릭했을 때 내용이 바뀌는 방식 뿐만아니라 auto switch 를 활용해서 탭 메뉴를 클릭하지 않아도 일정시간이 지나면 다음 탭으로 넘어가는 코드이다. 다른 것은 동일하고 스크립트만 변경하면 된다. 탭 넘어가는 속도는 3000 숫자를 조정하면 된다.

홈페이지가 반응형인 경우, 디바이스 크기별 jQuery 스크립트를 다르게 불러와야하는 경우가 종종있다. 같은 슬라이더를 쓰더라도 PC버전과 Mobile 버전의 속성을 다르게 할 수도 있는데 아래와 같이 윈도우 가로 사이즈에 따라서 스크립트를 다르게 불러 올 수 있다. 예시코드 $(window).resize(function(){ if (window.innerWidth > 480) { // 다바이스 크기가 480이상일때 /* 스크립트내용*/ } else { /* 스크립트내용*/ } }).resize(); 화면이 리사이즈 될 때마다 조건에 맞는 스크립트를 불러 오게 된다.

유용하게 많이 사용하는 기본 jquery 탭 html부분 탭1 탭2 탭3 탭1내용 탭1내용 탭3 탭을 추가하는 경우 1) 사이에 를 추가하고 탭4 탭5 2) 클릭시 나올 컨텐츠 부분도 추가하면된다. 탭4 내용 탭5 내용 rel값고, id만 동일하게 넣어주면 된다. 스크립트 $(function () { $(".tab_content").hide(); $(".tab_content:first").show(); $("ul.tabs li").click(function () { $("ul.tabs li").removeClass("active").css("color", "#555"); $(this).addClass("active").css("color", "#fff"); $(".tab_content").hide() v..

매번 jQuery 최신 버전에 맞추어서 다운받고 관리하기가 어렵다면 아래 한줄이면 끝! 이 한줄만 추가하면 jquery를 항상 최신 버전으로 이용할 수 있다.

Datepicker 기본 코드 결과 이 영문으로 표기된 datepicker를 한글로 바꿔보자! 한글로 변경 (모든 input에 적용) 스크립트 부분을 아래와 같이 적용하면 웹사이트 내에 사용되는 모든 datepicker에 한글이 적용된다. 특정 인풋 클릭시에만 datepicker를 한글로 변경하고 싶다면 아래와 같이 인풋 아이디( #datepicker )를 지정하는 방식으로 하면 되지만, 굳이 그럴 이유가 있을까 싶다. 선택 날짜 범위 지정하기 option value 설명 minDate -1D : 하루전 -1M : 한달전 -1Y : 일년전 0 : 오늘부터 최소로 가능한 선택 일자를 지정 max Date 0 : 오늘까지 +1D : 하루후 -1M : 한달후 -1Y : 일년후 최대로 가능한 선택 일자를 지정 ..