테스트 사이트 - 개발 중인 베타 버전입니다

목차 클릭해 해당 위치로 이동 관련해 고민이 생겼습니다. 채택완료

sinbi 4년 전 조회 1,912

https://sir.kr/qa/415016

세크티 님께서 좋은 소스 공유 해주셔서 일단 해당 기능을 구현했어요.

https://homzzang.com/b/free-5017

 

그런데,

제목에 하이라이트 배경색 넣은 건 못 찾더라구요.

https://homzzang.com/b/css-1

 

그래서, 이 기능을 적용해야 하나 말아야 하나 고민이 생겨버렸네요.

사실, 저 같은 경우엔 스크롤 할 때 제목이 빨리 눈에 띄는 게 중요해서

제목의 배경색 하이라이트를 포기하기엔 좀 그렇습니다. 

 

jquery 소스와 스크립트를 좀 수정하면 어떻게 잘 될 것도 같은데,

고수님들 살펴보고 가능하면 수정 팁 좀 부탁드립니다. 

 

[jquery.highlight-5.js 플러그인 소스]

</p>

<p>jQuery.fn.highlight = function(pat) {

    function innerHighlight(node, pat) {

        var skip = 0;

        if (node.nodeType == 3) {

            var pos = node.data.toUpperCase().indexOf(pat);

            pos -= (node.data.substr(0, pos).toUpperCase().length - node.data.substr(0, pos).length);

            if (pos >= 0) {

                var spannode = document.createElement('span');

                spannode.className = 'highlight';

                var middlebit = node.splitText(pos);

                var endbit = middlebit.splitText(pat.length);

                var middleclone = middlebit.cloneNode(true);

                spannode.appendChild(middleclone);

                middlebit.parentNode.replaceChild(spannode, middlebit);

                skip = 1;

            }

        }

        else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {

            for (var i = 0; i < node.childNodes.length; ++i) {

                i += innerHighlight(node.childNodes[i], pat);

            }

        }

        return skip;

    }

    return this.length && pat && pat.length ? this.each(function() {

        innerHighlight(this, pat.toUpperCase());

    }) : this;

};</p>

<p>jQuery.fn.removeHighlight = function() {

    return this.find("span.highlight").each(function() {

        this.parentNode.firstChild.nodeName;

        with (this.parentNode) {

            replaceChild(this.firstChild, this);

            normalize();

        }

    }).end();

};</p>

<p>

 

[출력 스크립트]

</p>

<p><?php

add_javascript('<script src="'.G5_JS_URL.'/jquery.highlight-5.js"></script>', 0);

?>

<script>

    $(document).ready(function () {

        $("#view_content a").click(function (e) {

            // e.preventDefault();

            var href = $(this).attr('href');

            if(href!='#'){

                return true;

            }

            var $wrap = $("#view_content");

            var title = $(this).text();

            $wrap.highlight(title);

            var first_sch = $wrap.find('span.highlight').eq(1)

            if(first_sch){

                $("body,html").animate(

                    {scrollTop: first_sch.offset().top - (window.screen.height/2-100)},

                    1200 //speed

                );

                $("span.highlight").removeClass('highlight');

                return false;

            }

        })

    })

</script></p>

<p>

 

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
4년 전

본문 텍스트에 그냥 백그라운드 넣어서 테스트해 봤습니다. font-size:20px; 로 되어 있는 곳 옆에

 

background: #ffff00을 각각 넣은 것입니다.

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

s
sinbi
4년 전
마젠토 님 말씀대로 전체에 배경색 넣으니 잘 이동되긴 하네요.
선택지가 셋으로 늘어났군요.

관심 갖고 답변주셔서 감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

4년 전

제목의 배경은 그냥 글에 넣으시면 되지 않을 까요?

 

위의 highlight는 위치를 찾아가기 위한 것 같은데..  

위의 hightlight를 location등으로 변경해 보세요

로그인 후 평가할 수 있습니다

답변에 대한 댓글 5개

s
sinbi
4년 전
제가 초보라 그런 걸 잘 할 줄 몰라용. ^^;
대략, 아래 라인과 관련된 부분을 수정해야 하는 건 알겠는데.
정확히 어떻게 수정해야 하는지는 잘 모르겠습니다.

$wrap.highlight(title);
var first_sch = $wrap.find('span.highlight').eq(1)
마젠토
4년 전
자바스크립트는 수정할 필요가 없고..

제목글에 그냥 백그라운드 컬러를 넣어보세요
s
sinbi
4년 전
목차에 배경색을 넣어보라는 말씀이신가요?
테스트 삼아 목차에 같은 위치에 넣어봤는데, 안 되네요.

위 소스 원리가..
a태그에서 텍스트 추출해서 그 텍스트와 동일한 텍스트가 있는 가장 첫 번째 span에 highlight 클래스 추가해 해당 위치로 이동시키는 것 같은데...
배경색을 넣으면 텍스트들이 하나의 span으로 묶여지지 않아서 그런 듯 싶어요.

따라서 span에 대해서 highlight 추가할 게 아니라, 그 상위 부모요소인 p를 대상으로 해서 그 안의 텍스트만 추출해 비교 가능하게 수정해야 할 것 같은데....이게 제 내공으로 해결 불가라...^^;;
마젠토
4년 전
<p>
<span>제목</span>
</p>
라고 하면 <span class="highlight">제목</span> 식으로 추가되었다가 빠질 것 같습니다.

<span style="background: #ffff00">제목</span> 으로 하면
sytle은 안 건드리기 때문에 아래 제목은 하이라이트로 유지 될것 같습니다.
s
sinbi
4년 전
문제는
제가 전체를 배경색으로 하는 게 아니라 중간의 중요 키워드에 대해서만 드래그 선택 후 에디터로 배경색을 넣는데,
(예) https://homzzang.com/b/css-1

이 과정에서 중요 키워드 부분이 span으로 한번 더 중첩적으로 묶이면서 배경색이 들어가다 보니 동일 문자열을 찾지 못 하고 있거든요.
그래서,
제 생각엔, span의 상위의 p에 대해서 그안의 텍스트만 추출해 값을 비교해주면 될 것 같은데.....
그게 어려운 문제라....

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인