2016의 게시물 표시

[jQuery] bxslider 멈춤현상

1번과 2번을 같이 처리 지금은 업데이트된 버전이 나온걸로 알고 있음 1. bxslider 는 슬라이드 애니메이션 동작할때 css translate3d 와 jquery animate를 사용한다. ios webview 에서는 translate3d 를 지원하므로 css 로 애니메이션이 동작을 하는데, 애니메이션이 끝나면 transitionend 이벤트가 실행이 되고 slider.working = false; 가 되면서 애니메이션이 끝난다. 그런데 스크롤을 함과 동시에 이미지를 넘기면 transitionend 가 실행이 안되고 slider.working 은 계속 ture상태로 남게되면서 bxslider는 더이상 동작하지 않는다. 이 문제를 해결하기 위해서 transitionend 가 발생하지 않으면 slider.working = false; 를 실행시키기 위해 소스를 수정해보았다. jquery.bxslider.js 를 열어서 var setPositionProperty = function(value, type, duration, params){ 이 부분을 찾은다음 // set the property value el.css(slider.animProp, propValue); css 속성을 세팅하는 부분 아래에다가 // ios에서 스크롤하면서 작동하면 transitionend 이벤트가 안먹혀서 추가함 by starkey var dummy = setTimeout(function(){     slider.working = false; }, duration+1); // --> 를 추가하고, 정상적으로 transitionend 가 발생했을대 clearTimeout 을 해준다. el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){    clearTimeout(dummy); // transitionend

[CSS3] 말줄임

- 한줄 text-overflow:ellipsis; white-space:nowrap; word-wrap:normal - 두줄 overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;word-wrap:break-word; line-height: 1.2em; height: 3.6em;

[Study] 2016

https://drive.google.com/file/d/0B2c8pftYgcM3RUNkS2Jrem1YYTA/view?usp=sharing 악악 https://bsk824.github.io/shin_test/sample/index.html#menu3_1

[유틸] 화면 캡쳐 프로그램

http://ngwin.com/kr https://drive.google.com/file/d/0B2c8pftYgcM3VWR3T1Q5dmVNbXc/view?usp=sharing

[jQuery] 흐르는 배너 만들기2

<style type="text/css"> *{margin:0;padding:0;} ul, li{list-style:none;} #recomPro{margin-bottom:40px;} #recomPro > div.inner{width:1400px;margin:0 auto;} #recomPro .slideWrap{position:relative;overflow:hidden;height:337px;margin-bottom:28px;} #recomPro .slideWrap p.bg{position:absolute;top:33px;width:179px;height:324px;background:url("./images/bg_tic_01.png") no-repeat 0 0;} #recomPro .slideWrap p.bg.side01{left:0px;} #recomPro .slideWrap p.bg.side02{right:-3px;background:url("./images/bg_tic_02.png") no-repeat 0 0;} #recomPro .slideWrap a.bxBtn{position:absolute;z-index:10;top:117px;margin:0;width:21px;height:39px;background:url("./images/btn_prev_01.png") no-repeat 0 0;text-indent:-9999px;} #recomPro .slideWrap a.bxBtn.bx-prev{left:179px;} #recomPro .slideWrap a.bxBtn.bx-next{left:auto;right:179px;background:url("./images/btn_next_01.png") no-repeat 0 0;} #recomPro .tickerSlide{position:absolute;top:0px;left:0px;o

[jQuery] 디자인 셀렉트 박스 & CSS

<style type="text/css"> .eventWrap div.inNumber{margin-bottom:30px;} .eventWrap div.inNumber:after{content:'';display:block;clear:both;} .eventWrap div.inNumber input{float:left;width:616px;height:73px;line-height:73px;margin-right:20px;padding:0;border:1px solid #cfcfcf;background:#f2f2f2;text-align:center;color:#444343;font-size:24px;} .eventWrap div.inNumber div.selectbox {float:left;position: relative;width: 277px;height:73px;line-height:73px;border: 1px solid #cfcfcf;background:#fbfbfb url('./images/sel_off.gif') no-repeat 219px 50%;;z-index: 1;font-size:24px;} .eventWrap div.inNumber div.selectbox label{position: absolute; top: 1px;left: 30px;width:243px;height:73px;line-height:73px; color: #999;z-index: -1;} .eventWrap div.inNumber div.selectbox select {width: 100%;height:73px;line-height:73px;font-family: inherit;border: 0;opacity: 0;filter:alpha(opacity=0);-webkit-appearance: none;-moz-appearance: none;appearance: none;} .eventWrap

[jQuery] 시간 카운트

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script language="javascript"> $(document).ready(function(){ //초기값 var hour = 12; var minute = 00; var second = 2; // 초기화 $(".countTimeHour").html(hour); $(".countTimeMinute").html(minute); $(".countTimeSecond").html(second); var timer = setInterval(function () { // 설정 $(".countTimeHour").html(hour); $(".countTimeMinute").html(minute); $(".countTimeSecond").html(second); if(second == 0 && minute == 0 && hour == 0){ alert('타이머 종료.'); clearInterval(timer); /* 타이머 종료 */ }else{ second--; if(second<10){ $(".countTimeSecond").html('0' + second); } // 분처리 if(second == 0){ minute--; second = 59; } if(minute<10){ $(".countTimeMinute").html('0

유튜브 반응형 동영상 삽입

< script type = "text/javascript" > resizeYoutube();    $(window).resize(function(){resizeYoutube();});    $(function(){resizeYoutube();});    function resizeYoutube(){ $("iframe").each(function(){ if( /^https?:\/\/www.youtube.com\/embed\//g.test($(this).attr("src")) ){ $(this).css("width","100%"); $(this).css("height",Math.ceil( parseInt($(this).css("width")) * 480 / 854 ) + "px");} }); } </ script > < iframe width = "854" height = "480" src = "https://www.youtube.com/embed/a4IosLAbLXY" frameborder = "0" allowfullscreen = "" ></ iframe > 출처 http://sometimes-n.tistory.com/42 다 필요 없다... < div class = "videoArea" > < iframe ></ iframe > </ div > .videoArea { position : relative ; width : 100% ; height : 0 ; padding-bottom : 56.25% ;} .videoArea ifram