로마장군의 블로그

[mysql] INSERT NOT EXISTS 중복 방지 삽입

`hash` 칼럼이 중복된 경우 INSERT 하지 않는다.


INSERT INTO `data_test` (`name`, `hash`) 
SELECT * FROM (SELECT 'aaa','1') AS `TMP`
WHERE NOT EXISTS (
    SELECT `hash` FROM `data_test` WHERE `hash`='1'
) LIMIT 1

[fancybox] jquery event로 fancybox 실행하기

특정한 엘리먼트의 이벤트 발생시에 fancybox 팝업을 실행한다.


$(document).ready(function(){
    $(".list dt").on("click",function(){
        seq = $(this).data("seq");
        console.log("dt click : seq="+seq);
        if(seq=="") { alert("고유번호가 잘못되었습니다."); return false; }

        // open fancybox
        $.fancybox({
            'href': "s0104_if_view.php?seq=" + seq,
            'type': 'iframe',
            width : 600,
            helpers : {
                overlay : {
                    closeClick : false
                }
            }
        });
    });
});

[jQuery], [font-awesome] 페이지 로딩 이미지 띄우기


<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- font-awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#loading {
 width: 100%;
 height: 100%;
 top: 0px;
 left: 0px;
 position: fixed;
 display: block;
 opacity: 1;
 background-color: #fff;
 z-index: 99;
 text-align: center;
}

#loading-image {
 position: absolute;
 top: 50%;
 left: 50%;
 z-index: 100;
 font-size:4rem;
}
</style>

<div id="loading">
    <div id="loading-image" class="fa fa-spinner fa-spin"></div>
</div>


$(window).load(function() {
    //$('#loading').hide();
});

[jquery] 더블클릭시 텍스트선택 방지하기


// Disable selection on doubleClick
$(function(){
    $.extend($.fn.disableTextSelect = function() {
        return this.each(function(){
            if($.browser.mozilla){//Firefox
                $(this).css('MozUserSelect','none');
            }else if($.browser.msie){//IE
                $(this).bind('selectstart',function(){return false;});
            }else{//Opera, etc.
                $(this).mousedown(function(){return false;});
            }
        });
    });
    $('.layer').disableTextSelect();//No text selection on elements with a class of 'layer'
});

[jquery] validate 폼 경고를 alert()으로 띄우기

$.validator.setDefaults({
    onkeyup: false,
    onclick: false,
    onfocusout: false,
    showErrors: function(errorMap,errorList){
        if(this.numberOfInvalids()){ // 에러가 있으면
            alert(errorList[0].message); // 경고창으로 띄움
        }
    }
});

$("#form-write").validate({
    rules: {
        token: { required: true }
        , ev_name: { required: true }
        , ev_area: { required: true }
        , ev_type: { required: true }
        , ev_sdate: { required: true }
        , ev_edate: { required: true }
        , ev_addr: { required: true }
    },
    messages: {
        token: { required: "토큰이 누락되었습니다." }
        , ev_name: { required: "행사명을 입력하세요." }
        , ev_area: { required: "행사지역을 선택하세요." }
        , ev_type: { required: "행사유형을 선택하세요." }
        , ev_sdate: { required: "행사기간(시작일)을 입력하세요." }
        , ev_edate: { required: "행사기간(종료일)을 입력하세요." }
        , ev_addr: { required: "행사위치를 입력하세요." }
    },
    errorPlacement: function(error,element){
        //error.appendTo(element.closest("div").prev()); // 사용안함
    },
});

validate의 기본 표시방법은 해당 INPUT창의 아래에 오류메세지를 표시하는 방식인데,

전통적인 FORM 체크방식처럼 alert()창을 실행하여 오류메세지를 표시하도록 변경함

[jQuery] 일정한 시간 후에 사라지기. setTimeout + slideToggle

알림패널을 일정 시간동안 보여준 후 사라지게 만든다.

/* Result Panel */
$(document).ready(function(){
    setTimeout(hide_panel, 2000);
    function hide_panel(){
        $(".result-panel").slideUp('slow');
    }
});

[CSS] [jQuery] 화면스크롤에 따라 위치가 고정되는 스크립트

최초 position: relative;

이동 position: fixed;

/* Javascript */
jQuery(document).ready(function(){
    var wrap = jQuery(window);
    // 페이지로딩, 새로고침
    var sct = jQuery(this).scrollTop();
    console.log("scroll = " + sct);
    if(sct>140) {
        jQuery("#contents_left").addClass("fixed");
    } else {
        jQuery("#contents_left").removeClass("fixed");
    }
    // scroll 반응
    wrap.on("scroll", function(e){
        var sct = jQuery(this).scrollTop();
        console.log("scroll = " + sct);
        if(sct>140) {
            jQuery("#contents_left").addClass("fixed");
        } else {
            jQuery("#contents_left").removeClass("fixed");
        }
    });
});

/* CSS */
#contents_left.fixed { position:fixed; top:0px; }