[jQuery][CSS] 간단한 모달Modal 열기

<div id="js-intro">
    <div class="inner">모달창</div>
</div>

#js-intro { display:none; position:absolute; z-index:99998; top:0; left:0; background:rgba(0,0,0,0.5); text-align:center; }
#js-intro .inner { display:none; position:relative; z-index:99999; width:400px; height:200px; margin:0 auto; text-align:center; }

$(document).ready(function(){
    $("#js-intro").appendTo("body");
    //화면의 높이와 너비를 구한다.
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();
    var winHeight = $(window).height(); // inner 위치설정용

    //마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채운다.
    $('#js-intro').css({'width':maskWidth, 'height':maskHeight});

    //애니메이션 효과 - 천천히 나타남
    $('#js-intro').fadeIn(800, function(){
        $('#js-intro .inner').fadeIn(1000).css({'top':(winHeight/2)+'px', 'transform':'translateY(-50%)'});
    });

    // 닫기
    $("#js-intro .inner").click(function(){
        $('#js-intro').hide();
    });
});

모달창 : 클릭하면 닫힙니다.

[CSS] 세로 가운데 정렬 Vertical-align:center

<div id="box">
    <div id="text">가운데 정렬</div>
</div>

#box { width:400px; height:300px; background:#f0e0e0; }
#text { position:relative; top:50%; transform:translateY(-50%); text-align:center; }

가운데 정렬

[jQuery] [swiper] 스와이프 이미지 슬라이드

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>

    <div class="swiper-container">

        <ul class="swiper-wrapper">

            <li class="swiper-slide" style="background:url(/images/main/visual01.jpg) center center / cover no-repeat;" data-left="0"></li>
            <li class="swiper-slide" style="background:url(/images/main/visual03.jpg) center center / cover no-repeat;" data-left="1"></li>
            <li class="swiper-slide" style="background:url(/images/main/visual02.jpg) center center / cover no-repeat;" data-left="0"></li>
            <li class="swiper-slide" style="background:url(/images/main/visual04.jpg) center center / cover no-repeat;" data-left="1"></li>
            <li class="swiper-slide" style="background:url(/images/main/visual05.jpg) center center / cover no-repeat;" data-left="1"></li>
        </ul>

        <div class="swiper-pagination"></div>
        <!-- navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

    </div>

    $(document).ready(function(){
        //initialize swiper when document ready
        var mySwiper = new Swiper ('.swiper-container', {
            // Optional parameters
            //direction: 'vertical',
            effect: 'fade',
            speed: 2500,
            crossEffect: { crossFade: true },
            autoplay: true,
            loop: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-container .swiper-pagination',
                clickable: true,
            },
            on: {
                init: function(){
                    //console.log("slide init");
                    //console.log(this.$wrapperEl[0]);
                    var slide = $(this.$wrapperEl[0]).find(".swiper-slide-active");
                    var bg = slide.data("left");
                    if(bg=="1") {
                        $("header").addClass("bg-white");
                    } else {
                        $("header").removeClass("bg-white");
                    }
                },
            },
        });

        mySwiper.on('slideChange', function(){
            //console.log("slide change");
            //console.log(mySwiper.realIndex);
            var r_idx = mySwiper.activeIndex;
            var slide = mySwiper.slides[r_idx];
            //console.log(mySwiper.$wrapperEl);
            //console.log($(slide));
            var bg = $(slide).data("left");
            //console.log("r_idx=" + r_idx + ", bg=" + bg + ", src=" + $(slide).css("background"));
            if(bg=="1") {
                $("header").addClass("bg-white");
            } else {
                $("header").removeClass("bg-white");
            }
        });
    });

단순히 슬라이드를 동작시키려면 아래와 같이 하면 된다.

    $(document).ready(function(){
        var mySwiper = new Swiper ('.swiper-container', {
            // Optional parameters
            //direction: 'vertical',
            effect: 'fade',
            speed: 2500,
            crossEffect: { crossFade: true },
            autoplay: true,
            loop: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-container .swiper-pagination',
                clickable: true,
            },
        });

    });

[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'
});