끄적대기

https://www.jqueryscript.net/tags.php?/Range%20Slider/ 재미있는거 많네...

옛날에 접근성 레이어 팝업에 관한 고민을 한적이 있는데 그 이후로 많은 시간이 흘렀다. 그때 해당 코드는 shift에 관한 고민이 없었던 부분들이 있어서 조금 정리한 내용을 남겨 보려 한다. 써놓고 또 많이 안쓸수도 있지만... 언젠가 다시 또 개선할 날이 오겠지.... HTML : <a class="layerOpen" data-layer-open="layer1" href="javascript:layerOpen('layer1');">열기1</a> <a class="layerOpen" data-layer-open="layer2" href="javascript:layerOpen('layer2');">열기2</a> <div class="layerWrap" id="layer1"> <h2>1</h2> 123123123<br /> <a class="" href="https://www.blogger.com/blogger.g?blogID=1953128756353565733#">123123</a><br /> 123123123<br /> 123123123<br /> <a class="" href="https://www.blogger.com/blogger.g?blogID=1953128756353565733#">123123</a><br /> 123123123<br /> 123123123<br /> 123123123<br /> <a class="btn-layer-close...

1. 게임 횟수 추가 2. 본인 게임 회차 추가 3. 고정 번호 추가

<style type="text/css"> *{padding:0;margin:0;list-style:none;} /*body{height:14000px;}*/ #wrap{overflow:hidden;overflow-y:scroll;} .menu{position:fixed;top:30px;left:30px;z-index:100;} .menu ul li.on a{font-size:20px;color:#000;font-weight:bold;} .container{position:fixed;width:100%;height:100%;left:0;top:0;z-index:1;} .scrollBox{width:100%; height:100%; position:absolute; top:0px; left:0px; opacity:0.3; z-index:1;font-size:100px; color:#fff;text-align:center;} /*.scrollBox:nth-child(1){transform: translateZ(0px)} .scrollBox:nth-child(2){transform: translateZ(-1069px)} .scrollBox:nth-child(3){transform: translateZ(-6000px)} .scrollBox:nth-child(4){transform: translateZ(-9000px)}*/ .scrollBox.on{z-index:10;opacity:0.8;} .bgColor01{background:#ff9900;} .bgColor02{background:#0000ff} .bgColor03{background:#cc0033} .bgColor04{background:#808080} </style> <div id="wrap"> <div class="menu"> <ul> <li ...

<style type="text/css"> *{margin:0;padding:0;list-style:none;} html,body{height:100%;font-size:14px/1.5} .wrap{height:100%;} .menu{position:fixed;top:30px;left:30px;} .menu li.on a{font-weight:bold;color:#fff;} .btmLine{position:fixed;left:0;top:0;width:100%;height:10px;background:#999;} .btmLine span{display:block;width:0%;height:10px;background:#000;} .wrap div:nth-child(1){background:#ffcc00} .wrap div:nth-child(2){background:#0066cc} .wrap div:nth-child(3){background:#cc3366} .wrap div:nth-child(4){background:#66cc66} .scrollBox{font-size:50px;color:#fff;text-align:center;} .scrollBox.on{font-size:100px;color:#000;} </style> <div class="wrap"> <div class="scrollBox on" id="scrollBox01">1</div> <div class="scrollBox" id="scrollBox02">2</div> <div class="scrollBox" id="scrollBox03">3</div> <div class="scrollBox" i...

$(document).ready(function(){ $("#check-all").on("click", function(){         if($("#check-all").prop("checked")){             $("input[name=check-type]").prop("checked",true);         }else{             $("input[name=check-type]").prop("checked",false);         }     }); $("input[name=check-type]").on("click", function(){ if($(this).is(":checked") == false){ $("#check-all").prop("checked",false) } }); });

1. 너비를 체크해서 이동하지 않고 좌우 100%값으로 이동 2. 무한롤링을 위해서 on/ff로 작업 - animate https://jsfiddle.net/aoiyuki4u/bdxu6fbL/4/ - transform https://jsfiddle.net/aoiyuki4u/mqu758m6/1/

<style type="text/css"> a.btnPageTop{position:fixed;z-index:8000;bottom:15px;right:15px;display:block;width:45px;height:45px;background:#fff;border:1px solid #d6d6d6;text-indent:-9999px;opacity:0;transition:all 0.5s linear;-webkit-transition:all 0.5s linear;} a.btnPageTop.on{opacity:1;} a.btnPageTop:before, a.btnPageTop:after{content:'';display:block;position:absolute;top:20px;right:11px;width:15px;height:3px;background:#005295;transition: all .2s;} a.btnPageTop:before{right:20px;-webkit-transform:rotate (-45deg);transform:rotate(-45deg);} a.btnPageTop:after{-webkit-transform:rotate (45deg);transform:rotate(45deg);} </style> <a href="#container" class="btnPageTop">맨위로</a> <script type="text/javascript"> $(document).ready(function(){ $(window).scroll(function(){ if($(window).scrollTop() > $(window).height() / 8){ $('.btnPageTop').addClass('on'); }else{ $('.bt...

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(){    clearTimeou...

<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...

<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 ...

<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...

<style> *{margin:0;padding:0;} #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("http://image.ssgdfs.com/images/newshin/bg_tic_01.png") no-repeat 0 0;} #recomPro .slideWrap p.bg.side01{left:0px;} #recomPro .slideWrap p.bg.side02{right:-3px;background:url("http://image.ssgdfs.com/images/newshin/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("http://image.ssgdfs.com/images/newshin/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("http://image.ssgdfs.com/images/newshin/btn_next_01.png") no-repea...

이벤트 페이지를 많이 치다보니 좀 쓰게 되네... 정리정리... <style type="text/css"> .eventWrap .choice{} .eventWrap .choice .radioBox_list{overflow:hidden;width:100%;} .eventWrap .choice .radioBox_list li{float:left;position:relative;padding:0 0 0 0;width:110px;text-align:left;} .eventWrap .choice .radioBox_list li label{overflow:hidden;cursor:pointer;line-height:20px;font-size:18px;color:#333;letter-spacing:-1px;} .eventWrap .choice .radioBox_list li label span{float:left;height:20px;margin-top:0;padding:0 0 0 20px;background:url("./images/radio.png") no-repeat 0 center;} .eventWrap .choice .radioBox_list li label.on span{background:url("./images/radio_on.png") no-repeat 0 center;} .eventWrap .choice .radioBox_list li label input{position:absolute;top:0px;left:0px;visibility:hidden;} </style> <script type="text/javascript"> $(document).ready(function() { $(".radioBox_list > li > label").prepend("<span...

접근성 관련해서 레이어를 여러 방법을 생각해보다. 닫기 버튼 위치에 관한 고민으로 예전에 작업을 해두었던 코드입니다. 그때 그때 상황마다 커스텀해서 사용하고 있긴한데...언제 개선시키지__)a; 아래와 같은 내용을 기준으로 작업되었습니다. 1. 사용자가 레이어 제목을 읽고 원치 않을 경우 내용을 다 읽지 않아도 닫을 수 있어야 한다. - 닫기 버튼 제목뒤에 한번 제공 2. 사용자가 문서를 다 읽은 후에 닫을 수 있어야 한다. - 컨텐츠 하단에 닫기 제공 - 보통 확인 취소 같은 용도로도 사용 3. 사용자가 다시 레이어 안의 내용을 읽기 위해 텝을 하였을때 레이어 밖으로 나가지 않고 레이어 안에서 돌아야 한다. - 그리 베스트의 방법이라곤 생각하지 않지만 임시로 하단에 a 태그를 생성해서 다시 처음으로 돌아 올수 있는 여건을 만들어 놓음. :Html <a href="#" class="openLayer">레이어 열기</a> <div class="layerWrap"> <div class="layerContainer"> <div class="layerHead">레이어 제목</div> <a href="#" class="firstClose layerClose">닫기</a> <div class="layerCon"><a href="#">1</a><br /><a href="#">1</a><br /><a href="#">1</a><br /><a href="#">1</a></div> ...

라디오 박스 선택과 관련되서 텝 형식의 js가 필요할때 잘 써보지 않았는데 모바일 관련 작업을 할때 은근 쓸기회가 많아 지는 것 같더군요. .change() PC에서 작업할때는 왜 생각이 안날까... https://api.jquery.com/change/ <div class="specs"> <ul> <li> <input type="radio" id="specs_01" name="specs" checked /><a href="#"><label for="specs_01">specs_01</label></a> </li> <li>           <input type="radio" id="specs_02" name="specs" /><a href="#"><label for="specs_02">specs_02</label></a> </li> <li> <input type="radio" id="specs_03" name="specs" /><a href="#"><label for="specs_03">specs_03</label></a> </li> <div class="specs_01 specsBox">1</div> <div class="specs_02 specsBox...