목록프로그래밍/JQUERY (7)

ㅇㅅㅇ

[JQUERY] 스크롤바를 커스텀해주는 plugin mCustomScrollbar

스크롤바를 커스텀 할 때 주로 사용하는 플러그인 매번 찾아보게 되서 자주 사용하는 것들만 적어본다 사이트는 여기▼ jQuery custom content scroller – malihu | web design Last updated on Jul 11, 2016 Originally published on August 1, 2010 by malihu, under Plugins. Highly customizable custom scrollbar jQuery plugin. Features include vertical and/or horizontal scrollbar(s), adjustable scrolling momentum, mouse-wheel (via jQue manos.malihu.gr 기본 사용방법 ..
프로그래밍/JQUERY 2022. 4. 29. 00:15
[JQUERY] select를 예쁘게 바꿔주는 플러그인 niceSelect 사용법2

niceSelect 기본 사용법은 아래의 포스팅에 정리되어 있으니 생략한다. [JQUERY] select를 예쁘게 바꿔주는 플러그인 niceSelect 사용법1 코딩을 하다보면 select를 수정하게 될 때가 있는데 css로 수정할 수 없는 영역이 있어 플러그인 niceSelect의 힘을 빌리게 되었다. 사용법 1. 아래의 링크에서 소스파일을 다운받는다 https://jquerynicesel soa-memo.tistory.com 응용이랄까 추가작업이 필요한 경우에 사용했던 소스 2가지를 정리해 본다. 1. niceSelect 사용 후 optionbox의 스크롤을 추가할 경우 1-1. .nice-select .list에 높이 제한을 두면 스크롤이 생긴다. .nice-select .list { height:..
프로그래밍/JQUERY 2022. 4. 28. 14:51
[JQUERY] select를 예쁘게 바꿔주는 플러그인 niceSelect 사용법1

코딩을 하다보면 select를 수정하게 될 때가 있는데 css로 수정할 수 없는 영역이 있어 플러그인 niceSelect의 힘을 빌리게 되었다. 사용법 1. 아래의 링크에서 소스파일을 다운받는다 jQuery Nice Select Usage 1. Include jQuery and the plugin. 2. Include the plugin styles, either the compiled CSS... ...or, ideally, import the SASS source (if you use SASS) in your main stylesheet for easier customization. @import 'nice-select'; // Or 'nice-select-prefixed'. jquerynicesel..
프로그래밍/JQUERY 2022. 4. 26. 23:58
[JQUERY] 음원재생, 일시정지, 정지 버튼 만들기

어쩌다 음원재생 버튼을 만들 기회가 있어서 정리해봤다. 1. html 음원재생 정지 음원재생과 일시정지는 한 버튼을 사용한다. 음원재생 버튼을 누르면 음원이 재생되고 재생중에 한번더 음원재생 버튼을 누르면 일시 정지된다. 정지를 누르면 처음으로 돌아가 음원재생 버튼을 누르면 처음에서부터 재생된다. 2. js var audio = document.getElementById("video"); $(function(){ $('.play').on('click', function(e){ e = e || window.event; var btn = e.target; if (!audio.paused) { //일시정지 audio.pause(); isPlaying = false; } else { //재생 audio.play..
프로그래밍/JQUERY 2021. 4. 30. 09:00
[JQUERY] 스크롤 모션 - 가로스크롤 처음과 끝을 감지하기

웹, 모바일에서 사용 가능하다. 스크롤 처음과 끝을 감지해 모션을 만들게 되는 경우가 있어 정리하게 되었다. jquery로 처음과 끝만 감지되는지 확인 할 수 있게 만들었다. (참고로 가로스크롤이다.) 1. html 스크롤 박스 스크롤 위치 2. css .scrollwrap { position: relative; display: block; width:200px; overflow-x: auto;} .scrollcontent { width: 1000px; } 3. jquery function showGradient(){ if($(this).scrollLeft() == 0){// 스크롤이 0일 때 $('.scrolllo').text('스크롤 처음입니다.'); }else if (Math.ceil($(this)..
프로그래밍/JQUERY 2021. 1. 11. 11:59
[JQUERY] IE에서도 이미지 흑백처리하기 CSS + Grayscale.js

웹 작업 시 이미지 회색처리를 해본 사람들은 알겠지만 IE에서는 filter: grayscale(100%)가 되지 않는다.ㄱㅡ 해서 열심히 구글링해서 방법을 찾았다. 검색할때마다 앞서 나간 선조님들께 감사드린다.ㅜ 내가 사용한건 Cross-Browser Grayscale image example using CSS3 + JS 이다. * 1버전 Cross-Browser Grayscale image example using CSS3 + JS by Streamline www.majas-lapu-izstrade.lv * 2버전 Cross-Browser Grayscale image example using CSS3 + JS v2.0 with browser feature detection using Modernizr..
프로그래밍/JQUERY 2021. 1. 5. 18:18
cropper.js를 사용해 업로드한 이미지 자르기

! 티스토리 블로그가 아직 익숙하지 않은 블로거라 여러모로 어색할 수 있습니다ㅜㅅ ! 이유없는 비난외의 잘못된 부분에 대한 조언이나 후기 등의 덧글은 환영합니다.ㅎ 업무에 실제로 사용한 소스다. 업로드한 사진에서 얼굴만 잘라 쓸 수 있도록 하는 플러그인이 필요해 찾아보게 되었다. 사진업로드 -> 업로드한 사진에 cropper.js 실행 -> 업로드 버튼 클릭 시 크롭된 사진이 보이게끔 했다. 플러그인은 제목에 썼지만 cropper.js를 사용했다. Cropper.js fengyuanchen.github.io (올린 링크로)1.5.7버전으로 들어가면 몇 가지 예시를 볼 수 있고, 작성일 기준, 현재까지 4.1.0버전까지 나온거 같다. cropper.js에서 지원하는 옵션에 따라 낮은버전을 사용하면 작동이 ..
프로그래밍/JQUERY 2020. 9. 3. 00:00
Prev 1 Next