끄적끄적: 2020

20. 9. 9.

Jquery Layer Popup(Drag & Drop)

은근히 쓰게되는 제이쿼리 레이어팝업...

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <title>레이어 팝업</title>
    <style>
        /* Layer 팝업 css */
        .LayerPopupTbl {position: absolute;border: 1px solid #2d2d2d;display: table;background-color: #ffffff;border-collapse: collapse;}
        .LayerPopupTbl > thead > tr > td {width: 100%;padding-top: 3px;padding-bottom: 3px;background-color: #00CCFF;text-align: right;}
        .LayerPopupTbl > tbody > tr > td {background-color: #FFF;display: table-cell;}
        .LayerPopupTbl > tbody > tr > td img {margin:-1px;float:left;}
        .LayerPopupTbl > tfoot > tr > td {background-color: #c9c9c9;padding: 3px;}
    </style>
    <script>
        /* Popup */
        var PopupmoveX = 0;
        var PopupmoveY = 0;
        var topPopup = 0;
        var leftPopup = 0;
        function zIndexReload(ele) {
            $(ele).css("z-index", 1000).siblings().css("z-index", 999);
        }
        function Popupdrag(ev) {
            if ($(ev.target).offset() != undefined) {
                topPopup = ev.clientY - $(ev.target).offset().top;
                leftPopup = ev.clientX - $(ev.target).offset().left;
            }
            PopupmoveX = ev.clientX;
            PopupmoveY = ev.clientY;
        }
        function Popupdrop(ev) {
            PopupmoveX = ev.clientX;
            PopupmoveY = ev.clientY;
            $(ev.target).css("top", (PopupmoveY - topPopup)).css("left", (PopupmoveX - leftPopup));
        }
        function setCookie(name, value, expiredays) {
            var todayDate = new Date();
            todayDate.setDate(todayDate.getDate() + expiredays);
            //todayDate.getDate()- localtime의 달의 날짜를 반환(1~31).  setDate의경우 달의 날짜를 설정
            document.cookie = name + '=' + escape(value) + '; path=/; expires=' + todayDate.toGMTString() + ';';
        }
        function getCookie(name) {
            var nameOfCookie = name + '=';
            var x = 0;
            while (x <= document.cookie.length) {
                var y = (x + nameOfCookie.length);
                if (document.cookie.substring(x, y) == nameOfCookie) {
                    if ((endOfCookie = document.cookie.indexOf(';', y)) == -1)
                        endOfCookie = document.cookie.length;
                    return unescape(document.cookie.substring(y, endOfCookie));
                }
                x = document.cookie.indexOf(' ', x) + 1;
                if (x == 0)
                    break;
            }
            return '';
        }
        // 오늘 하루 이창을 열지 않음
        function PopupClose(elem) {
            var elemName = $(elem).parents("table:first").attr("id");
            setCookie(elemName, 'done', 1);  // 오른쪽 숫자는 쿠키를 유지할 기간을 설정합니다
            $(elem).parents("table:first").remove();
        }

        $(function () {
            /* 목록만큼 돌린다 */
            for (var i in popupArray) {
                var mypopupName = popupArray[i].name;
                var mypopupTop = popupArray[i].top;
                var mypopupLeft = popupArray[i].left;
                var mypopuphtml = popupArray[i].html;
                /* 오늘 하루 이창 열지 않음을 누른상태가 아니라면 보여준다. */
                if (getCookie(mypopupName) != "done") {
                    var popuptbl = document.createElement("table");
                    popuptbl.setAttribute("class", "LayerPopupTbl");
                    popuptbl.setAttribute("id", mypopupName);
                    popuptbl.setAttribute("draggable", true);
                    popuptbl.setAttribute("ondragstart", "Popupdrag(event)");
                    popuptbl.setAttribute("ondragend", "Popupdrop(event)");
                    popuptbl.setAttribute("onmouseover", "zIndexReload(this)");
                    popuptbl.style.top = mypopupTop;
                    popuptbl.style.left = mypopupLeft;
                    var formhtml = [];
                    formhtml.push("<thead><tr><td><a onclick=\"$(this).parents('table:first').remove();\">[닫기]</a></td></tr></thead>");
                    formhtml.push("<tbody><tr><td>" + mypopuphtml + "</td></tr></tbody>");
                    formhtml.push("<tfoot><tr><td><label><input type=\"checkbox\" onClick=\"PopupClose(this);\" /> 오늘 하루 이창을 열지 않음</label></td></tr></tfoot>");
                    popuptbl.innerHTML = formhtml.join("");
                    document.body.appendChild(popuptbl);
                }
            }
        });

        /* 팝업목록 name=팝업이름(id), top:팝업위치, left: 팝업위치, html : 팝업내용 - 만질경우 이부분만 고쳐서 사용하려고 구성...  */
        var popupArray = [
            /* 팝업1 */
            { "name": "POPUP_ex_1", "top": "8px", "left": "20px", "html": "<a href='http://www.naver.com'><img alt='' src='https://ssl.pstatic.net/static/kin/09renewal/banner_roulette.png'/></a>" },
            /* 팝업2 */
            { "name": "POPUP_ex_2", "top": "8px", "left": "300px", "html": "<div style=\"background-color:yellow\"><h4 style=\"margin:0;padding:0;line-height:1.6;\">공지사항</h4><p style=\"margin:0;padding:0;line-height:1.6;\">안녕하세요</p></div>" },
            /* 팝업3 */
            { "name": "POPUP_ex_3", "top": "176px", "left": "20px", "html": "<img alt='' src='https://ssl.pstatic.net/static/kin/09renewal/bingo_banner.png'>" },
        ]
    </script>
</head>
<body>
</body>
</html>

20. 8. 10.

Javascript 링크이동없이 URL 바꾸기

참고 : https://developer.mozilla.org/ko/docs/Web/API/History/pushState

p.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <style>
        a {
            background-color: #000;
            color: #fff;
            margin: 2px;
            cursor: pointer;
        }
    </style>
    <script>
        window.onload = function () {
            document.getElementById("btn1").addEventListener("click", function () {
                var page = 1;
                var state = { 'page_id': page, 'user_id': "" }
                var title = ''
                var url = 'page.html?page=' + page;
                history.pushState(state, title, url);
                // Javascript
                httpRequest = new XMLHttpRequest();
                if (!httpRequest) {
                    alert('XMLHTTP Fail');
                    return false;
                }
                httpRequest.onreadystatechange = function () {
                    if (this.readyState === XMLHttpRequest.DONE) {
                        if (this.status === 200) {
                            document.getElementById("view").innerHTML = this.responseText;
                        } else {
                            alert('Error');
                        }
                    }
                };
                httpRequest.open('GET', url);
                httpRequest.send();
            });

            document.getElementById("btn2").addEventListener("click", function () {
                var page = 2;
                var state = { 'page_id': page, 'user_id': "" }
                var title = ''
                var url = 'page.html?page=' + page;
                history.pushState(state, title, url);
                // JQuery
                $.ajax({
                    type: "GET",
                    url: url,
                    success: function (res) {
                        $("#view").html(res);
                    }
                });          
            });
        }
    </script>
</head>
<body>
    <a id="btn1">Page 1</a>
    <a id="btn2">Page 2</a>
    <div id="view"></div>
</body>
</html>

page.html

Page 입니다

20. 6. 9.

Javascript & JQuery Rainbow Text Effect

Rainbow Text Animation

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <title>JQuery Rainbow Animation</title>
    <style>
        .RainbowText{ text-align:center;}
        .RainbowText > span{ font-size:30px; font-weight:900; animation-duration:1s; animation-iteration-count:infinite;}
    </style>
<script>
    // 색상목록
    var rainbowArr = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
    // 클래스명
    var className = "RainbowText";
    $(function () {
        var html = [];
        html.push("<style>");
        // rainbowArr에 넣은 수만큼 클래스를 만든다.
        for (var i = 0; i < rainbowArr.length; i++) {
            // 클래스 선언
            html.push(".rainbow" + i + "{color:" + rainbowArr[i] + ";animation-name:rainbow" + i + "Ani;}");
            // 애니메이션 키프레임 선언
            html.push("@keyframes rainbow" + i + "Ani{");
            for (var j = i; j < i + rainbowArr.length + 1; j++) {
                // 0% ~ 100% 가 등록한 배열순서대로 색상이 되도록 처리
                html.push(((100 / rainbowArr.length) * (j - i)) + "%{color:" + rainbowArr[((j) % rainbowArr.length)] + "}");
            }
            html.push("}");
        }
        html.push("</style>");
        // body 에 추가
        $("body").append(html.join("\n"))
        // 선언한 클래스에 html 을 치환
        $("." + className).each(function () {
            var str = $(this).text();
            var html = [];
            // text 수 만큼
            for (var i = 0; i < str.length; i++) {
                // span 으로 잘개쪼개고 클래스명을 지정
                html.push("<span class=\"rainbow" + (i % rainbowArr.length) + "\">" + str.substring(i, i + 1) + "</span>");
            }
            // 클래스의 html태그를 변경
            $(this).html(html.join(""));
        });
    });
</script>
</head>
<body>
    <div class="RainbowText">Rainbow</div>
    <div class="RainbowText">■■■■■■■</div>
</body>
</html>

끄적끄적

20. 9. 9.

Jquery Layer Popup(Drag & Drop)

20. 8. 10.

Javascript 링크이동없이 URL 바꾸기

20. 6. 9.

Javascript & JQuery Rainbow Text Effect

프로필

태그

블로그 보관함