placeholder 셋팅

css 2018. 3. 22. 11:36

/* -placeholder */

input::-webkit-input-placeholder { /* WebKit, Blink, Edge */color:#6d6d6d;}

input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color:#6d6d6d; opacity:1;}

input::-moz-placeholder { /* Mozilla Firefox 19+ */color:#6d6d6d; opacity:1;}

input::-ms-input-placeholder { /* Internet Explorer 10-11 */color:#6d6d6d;}


textarea::-webkit-input-placeholder { /* WebKit, Blink, Edge */color:#6d6d6d;}

textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color:#6d6d6d; opacity:1;}

textarea::-moz-placeholder { /* Mozilla Firefox 19+ */color:#6d6d6d; opacity:1;}

textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */color:#6d6d6d;}

textarea::-ms-input-placeholder { /* Internet Explorer Edge  */color:#6d6d6d;}

input[readonly]{background-color:#6d6d6d;}


WRITTEN BY
로드파이

,

<meta property="og:title"           content=""/>
<meta property="og:site_name"       content=""/>
<meta property="og:type"            content="website"/>
<meta property="og:url"             content="http://"/>
<meta property="og:image"           content="images/img/kakako.jpg"/>
<meta property="og:description"     content="vprove"/>

<meta name="twitter:og:image" content="../images/img/sns.jpg" />





WRITTEN BY
로드파이

,

<!DOCTYPE html> 

<html> 

<head> 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 

 

<style type="text/css"> 

img{width:100px;height:50px}

ul.tab{height:200px;}

ul.tab li{float:left;}

div{display:none}

</style>

 

<script type="text/javascript"> 

$(function(){

 

var tabs = $("ul.tab li img");

tabs.live("click focusin",function(){

 

$("div").css("display","none");

var className = $(this).attr("class");

$("div." + className).css("display","block");

 

for(var i=0; i<$("ul.tab li img").length; i++){

$("ul.tab li img").eq(i).attr('src', $("ul.tab li img").eq(i).attr('src').replace('_on.gif','_off.gif'));

 

};

$(this).attr('src', $(this).attr('src').replace('_off.gif','_on.gif'));  

 });

 

$(tabs[0]).click();

 

  });

</script>

 

</head> 

<body> 

 

<ul class="tab">

<li><a href="#"><img src="1_off.gif" alt="" class="A" /></a></li>

<li><a href="#"><img src="2_off.gif" alt="" class="B" /></a></li>

<li><a href="#"><img src="3_off.gif" alt="" class="C" /></a></li>

</ul>

 

<div class="A">div1</div>

<div class="B">div2</div>

<div class="C">div3</div>

 

 

</body> 

</html>

 

 

 

이미지의 온오프를 시키고 해당 버튼을 누를시만 display:block이 됨


'jquery' 카테고리의 다른 글

숫자만 입력받기  (0) 2016.05.02
페이지 이동후 특정위치로 animate 이동  (0) 2016.05.02
프린트 출력하기  (0) 2016.05.02
동의하기 내용 펼쳐보기  (0) 2016.05.02
top버튼 누르면 상위로 슬라이딩 하기  (0) 2016.05.02

WRITTEN BY
로드파이

,

숫자만 입력받기

jquery 2016. 5. 2. 15:05

<script type="text/javascript"> 

function numbersonly(e, decimal) {
    var key;
    var keychar;

    if (window.event) {
       // IE에서 이벤트를 확인하기 위한 설정
        key = window.event.keyCode;
    } else if (e) {
      // FireFox에서 이벤트를 확인하기 위한 설정
        key = e.which;
    } else {
        return true;
    }

    keychar = String.fromCharCode(key);
    if ((key == null) || (key == 0) || (key == 8) || (key == 9) || (key == 13)
            || (key == 27)) {
        return true;
    } else if ((("0123456789").indexOf(keychar) > -1)) {
        return true;
    } else if (decimal && (keychar == ".")) {
        return true;
    } else
        return false;
}

</script>

 

 

<input type="text" onKeyPress="return numbersonly(event, false)" style="ime-mode: disabled;"/> 



WRITTEN BY
로드파이

,

- 현재페이지

<a href="#" onclick="move(1)"> 이동하시오 </a>

 

<script type="text/javascript">

var move = function(number) {

    location.href = "URL&q_link=" + number;

};

</script>

 

 

 

 

 

- 넘길페이지

<script type="text/javascript">

$(document).ready(function() {

    var address = unescape(location.href);

    var param = "";

 

    if(address.indexOf("q_link", 0) != -1) {

        param = address.substring(address.indexOf("q_link", 0) + 7);

        if (param == 1)

        {

            $('body,html').animate({scrollTop: 710 }, 900);

        }

    } else {}

});

</script>

 


'jquery' 카테고리의 다른 글

제이쿼리로 탭기능하기  (0) 2016.05.03
숫자만 입력받기  (0) 2016.05.02
프린트 출력하기  (0) 2016.05.02
동의하기 내용 펼쳐보기  (0) 2016.05.02
top버튼 누르면 상위로 슬라이딩 하기  (0) 2016.05.02

WRITTEN BY
로드파이

,

프린트 출력하기

jquery 2016. 5. 2. 14:56

<script type="text/javascript">
function divPrint(divID){

    var initBody = document.body.innerHTML; //원래 있는 내용을 임시 저장
    window.onbeforeprint = function(){ //onbeforeprint는 프린트 하기전 발생하는 이벤트
     document.body.innerHTML = document.getElementById(divID).innerHTML; //프린트할 원하는 영역(div)을 본문에 넣고
    }
   
    window.onafterprint = function(){ //프린트가 끝나고 발생하는 이벤트
        document.body.innerHTML = initBody; //원래 내용으로 본문을 채운다.
    }
    
    window.print();    
}
</script>

<div id="print" class="landScape">
    프린트 영역
</div>

<a href="#" onclick="divPrint('print'); return false;" >
    <span>인쇄하기</span>
</a>


WRITTEN BY
로드파이

,

<style> 

.agreeBox{width:100%; height:160px; overflow-y:auto; overflow-x:hidden;}

</style> 

 

<script type="text/javascript"> 

$(function(){

    $(".agreeWrap ul li.btn a").bind("click focusin",function(){
        $(".agreeBox").css("height","160px"); // 모든 .agreeBox는 기본값 160으로
        $(this).parent().parent().siblings(".agreeBox").css("height","auto");  // 누른 버튼의 ​agreeBox만 전체 펼쳐보이기
        return false; 

    });
});

</script>

 

 

<div class="agreeWrap">

    <h3>개인정보 취급방침</h3> 

    <div class="agreeBox">

        동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용

        동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용

        ..........이하내용 생략

    </div>

    <ul>

        <li class="chk">

             <input type="checkbox" id="agree1" name="agree1" value="Y" /><label for="agree1">이용약관에 동의합니다.</label>
        </li> 

        <li class="btn"><a href="#">펼쳐보기</a></li>

    </ul> 

</div>

 

 

<div class="agreeWrap">

    <h3>이메일 무단수집거부</h3> 

    <div class="agreeBox">

        동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용

        동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용

        ..........이하내용 생략

    </div>

    <ul>

        <li class="chk">

             <input type="checkbox" id="agree2" name="agree2" value="Y" /><label for="agree2">이용약관에 동의합니다.</label>
        </li> 

        <li class="btn"><a href="#">펼쳐보기</a></li>

    </ul> 

</div> 

 


'jquery' 카테고리의 다른 글

제이쿼리로 탭기능하기  (0) 2016.05.03
숫자만 입력받기  (0) 2016.05.02
페이지 이동후 특정위치로 animate 이동  (0) 2016.05.02
프린트 출력하기  (0) 2016.05.02
top버튼 누르면 상위로 슬라이딩 하기  (0) 2016.05.02

WRITTEN BY
로드파이

,

$('#quick .top a').click(function(){
    $('html').animate({scrollTop: 0}, 500);
    $('body').animate({scrollTop: 0}, 500);
}); 

'jquery' 카테고리의 다른 글

제이쿼리로 탭기능하기  (0) 2016.05.03
숫자만 입력받기  (0) 2016.05.02
페이지 이동후 특정위치로 animate 이동  (0) 2016.05.02
프린트 출력하기  (0) 2016.05.02
동의하기 내용 펼쳐보기  (0) 2016.05.02

WRITTEN BY
로드파이

,