그누보드 QA - 사이트 왼쪽에 하단에 리모콘이 나오네요... 무척 좋은 기능인 듯하네요

사이트 왼쪽에 하단에 리모콘이 나오네요... 무척 좋은 기능인 듯하네요

더블피디 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2018.08.21 14:15:54 조회 2255 (122.♡.♡.19)

본문

http://www.dealbada.com/bbs/board.php?bo_table=gal_free&wr_id=50006&page=1

홈에서는 왼쪽하단에 리모콘이 나오지 않다가..

게시글 view화면

스크롤을 하면 아래와 같이 화면 왼쪽 하단에...

리모콘이 나오네요~~

정말 제대로된 리모콘 기능이네요

위로, 댓글, 목록, 페이지 넘김...

이런건 어떻게 구할까요??

2049185043_1534828362.6871.png

#그누보드5

답변 1

로토루아 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2018-08-21 14:25:56 125.♡.♡.221

해당부분 소스보기로 가져오셔서 tail.php 파일에 넣으시고 링크부분 수정하시면 될꺼에요...

게시판 뷰페이지에서만 나오게 처리하시고요.

[ex]


<?php if($wr_id){?>
<style>
#remotecon {
    position: fixed;
    margin-left: -605px;
    width: 80px;
    z-index: 10;
    border: 1px solid #c8d0d7;
    background: #fff;
}
#remotecon h3 {
    padding: 4px 6px;
    text-align: center;
    border-bottom: 1px solid #c8d0d7;
    background: #f2f5f9;
}
#remotecon .row {
    padding: 4px 0;
    text-align: center;
    line-height: 13px;
    border-bottom: 1px solid #c8d0d7;
}
#remotecon .row a {
    color: inherit;
    outline: none;
    text-decoration: none !important;
}
#remotecon img.norm {
    height: 25px;
}
#remotecon img.small {
    height: 20px;
}
#remotecon .btn_b01 {
    padding: 0px;
}
</style>
<div id="remotecon">
<h3 class="">리모컨</h3>
<div class="row">
<span><a href="<?php echo $prev_href ?>" class="btn_b01">
<img class="norm" src="http://cdn.dealbada.com/data/img/prev.png" />
</a></span>
<span><a href="<?php echo $next_href ?>" class="btn_b01">
<img class="norm" src="http://cdn.dealbada.com/data/img/next.png" />
</a></span>
</div>
<div class="row">
<a href="#hd"><img class="small" src="http://cdn.dealbada.com/data/img/top.png" /><span>맨위로</span></a>
</div>
<div class="row">
<a href="#bo_vc"><img class="small" src="http://cdn.dealbada.com/data/img/comment.png" /><span> 댓 글 </span></a>
</div>
<div class="row">
<a href="<?php echo $list_href ?>">
<img class="small" src="http://cdn.dealbada.com/data/img/list.png" /><span> 목 록 </span>
</a>
</div>
</div>
<script>
    (function($) {
        // https://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/#article-header-id-1
        $.fn.drags = function(opt) {
            opt = $.extend({handle:"",cursor:"move"}, opt);
            if(opt.handle === "") {
                var $el = this;
            } else {
                var $el = this.find(opt.handle);
            }
            return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
                $(this).css('bottom', "");
                if(opt.handle === "") {
                    var $drag = $(this).addClass('draggable');
                } else {
                    var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
                }
                var z_idx = $drag.css('z-index'),
                    drg_h = $drag.outerHeight(),
                    drg_w = $drag.outerWidth(),
                    pos_y = $drag.offset().top + drg_h - e.pageY,
                    pos_x = $drag.offset().left + drg_w - e.pageX;
                $drag.css('z-index', 1000).parents().on("mousemove", function(e) {
                    $('.draggable').offset({
                        top:e.pageY + pos_y - drg_h,
                        left:e.pageX + pos_x - drg_w
                    }).on("mouseup", function() {
                        $(this).removeClass('draggable').css('z-index', z_idx);
                    });
                });
                e.preventDefault(); // disable selection
            }).on("mouseup", function() {
                if(opt.handle === "") {
                    var top = $(this).css("top");
                    var left = $(this).css("left");
                    localStorage.setItem("remotecon", top + ":" + left);
                    $(this).removeClass('draggable');
                } else {
                    $(this).removeClass('active-handle').parent().removeClass('draggable');
                }
            });
        }
    })(jQuery);
    $(function() {
        var remotecon = $("#remotecon");
        var loc = localStorage.getItem("remotecon");
        var top, left;
        if(loc) {
            var locs = loc.split(":");
            top = locs[0];
            left = locs[1];
        } else {
            var browserHeight = window.innerHeight || document.body.clientHeight;
            top = (browserHeight - remotecon.height() - 40) + "px";
            left = "50%";
        }
        
        remotecon.css("top", top);
        remotecon.css("left", left);
        remotecon.drags();
    });
</script>
<?php }?>