-
Javascript, jQuery 2017‧01‧11
크롬 브라우저 http 웹사이트에서 위치(지오로케이션) 가져오기 중단
크롬 브라우저에서 갑자기 위치 정보가 안들어오길래 찾아보니 이제부터 https의 사이트에서만 위치 정보 가져올 수 있게 업데이트 되었다고 합니다. 개인 위치 정보에 대한 보안 강화 취지인데요. 웹앱 만드시거나 모바일웹 만드실 때 지오로케이션 (geolocation) 쓰시는 개발 작업에 위 내용 유념하시면 좋을 듯합니다. 아래는 관련 구글의 공식 정보 입니다. https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only
-
Javascript, jQuery 2016‧12‧16
JS - textarea의 글자들에 엔터값을 br태그로 변환
DB 데이터를 불러와서 노출하거나 textarea로 부터 입력받은 데이터를 DB에 저장하려 할 때 종종 쓰인다. str = str.replace(/(?:\r\n|\r|\n)/g, '<br />'); str이라는 변수에 textarea에서 입력받은 데이터가 있다면 엔터는 br 태그로 변환된다. 아래는 예제 미리보기이다.
-
Javascript, jQuery 2016‧12‧12
JS - datepicker(jQueryUI,달력) 이용시 두개 날짜 범위 설정
jquery UI 의 datepicker를 이용해서 input 칸에 포커스 했을 때 달력이 나오고 날짜를 선택하면 input 칸에 값이 들어가는 기본 베이스를 사용하면서 아래와 조건이 있는 경우가 있어서 예제를 만들어 보았다. 특정 기간 범위 설정 특정 기간 범위만 활성화 시작 달력과 끝 달력에 오늘 이전 날짜들은 기본 비활성화 한다. 시작 달력과 끝 달력을 수차례 수정해도 특정 기간 범위를 […]
-
Javascript, jQuery 2016‧11‧22
JS - 필수 입력칸에 미입력시 안내글 수정
필수 입력해야할 입력칸에 아무것도 입력하지 않고 submit 버튼을 눌렀을 때 나오는 안내글을 수정하자. <input type="text" placeholder="아이디 입력" required autofocus oninvalid="this.setCustomValidity('필수 입력 정보입니다.')" oninput="setCustomValidity('')"> 이렇게 아이디를 입력 받기 위한 입력칸이 있을 때 oninvalid 속성에 값을 해당 함수로 안내글을 넣어두면 된다.
-
Javascript, jQuery 2016‧10‧26
JS - 유튜브 영상 (음소거,자동재생 상태로) 다중 삽입하기
웹사이트에 유튜브 영상을 여러개 삽입하여 자동 재생시키되 음소거를 시키고 싶을 경우가 있다. 어떻게 보면 간단할 듯 한데 실제로 적용되기 까다롭다. 이유는 음소거 때문이다. 그냥 html 문서에 iframe으로 <iframe src="http://www.youtube.com/embed/영상ID"> 이런식으로 여러개 놓고 자동재생을 시키고 싶을 때는 영상ID 뒤에 ?autoplay=1 파라미터를 추가하고 반복이면 다시 뒤에&loop=1&playlist=영상ID를 추가해주면 여러 개의 영상이 자동 재생되어 반복 재생된다. 이러한 방식을 <iframe> 태그를 사용하여 IFrame […]
-
Javascript, jQuery 2016‧07‧18
JS-아이폰 사파리 앞으로,뒤로 버튼에 대한 캐시 삭제
아이폰의 앞으로 또는 뒤로가기 버튼을 이용해서 페이지를 이동하게되면 캐시를 가지고 있어서 자바스크립트가 새로이 계산되어야할 것이 계산되지 않는 경우가 있다. 캐시와 무관하게 페이지가 열릴 경우 리로딩 되게 하는 스크립트를 넣으니 해결 되었다. $(window).bind("pageshow", function(event) { if (event.originalEvent.persisted) { window.location.reload() } });
-
Javascript, jQuery 2016‧06‧29
JS - 브라우저 체크(ie 11 포함)
windows 10에 있는 ie 11은 navigator.userAgent 로 체크할 경우 msie로 더이상 체크할 수 없게 되었다. 자세한 이유는 'User Agent 파헤치기 (navigator.userAgent)' 여기에 자세한 설명이 있다. 어찌되었던 아래는 모든 ie일 경우 체크하게 하는 조건문이다. var agent = navigator.userAgent.toLowerCase(); if ( (navigator.appName == 'Netscape' && agent.indexOf('trident') != -1) || (agent.indexOf("msie") != -1)) { // ie일 경우 }else{ // […]
-
Javascript, jQuery 2016‧05‧03
jQuery - input과 textarea 글자 입력수 제한
해외에서 공유된 코드이다. 원문 : http://www.scriptiny.com/2012/09/jquery-input-textarea-limiter/ (function($) { $.fn.extend( { limiter: function(limit, elem) { $(this).on("keyup focus", function() { setCount(this, elem); }); function setCount(src, elem) { var chars = src.value.length; if (chars > limit) { src.value = src.value.substr(0, limit); chars = limit; } elem.html( limit - chars ); } setCount($(this)[0], elem); } }); })(jQuery); 이렇게 플러그인으로 […]
-
Javascript, jQuery 2016‧03‧24
JS - youtube 재생 완료 이벤트 받기
유튜브 영상을 가져와서 사이트를 제작할 경우가 발생할 때 여러가지 인터렉션을 구현하게 된다. 그 중 영상의 재생이 끝났다는 이벤트를 받아와서 다른 행동이나 스크립트가 실행되도록 하고자 할 때 아래와 같이 스크립트를 작성한다. 시작 전 ie8 이하는 해당 기능이 되지 않는다. 이유는 html5를 지원하는 브라우저에서만 가능하기 때문이다. <div id="player"></div> html에 유튜브 영상을 넣을 div를 만들어 놓는다. 스크립트가 실행되면 […]
-
Javascript, jQuery 2016‧03‧10
JS - 이미지 로드 완료된 후 스크립트
img = new Image(); img.onload = function(){ //여기에 이미지 로드 된 후 행동 }; img.src = 이미지 경로;