목차 클릭해 해당 위치로 이동 관련해 고민이 생겼습니다.
본문
세크티 님께서 좋은 소스 공유 해주셔서 일단 해당 기능을 구현했어요.
https://homzzang.com/b/free-5017
그런데,
제목에 하이라이트 배경색 넣은 건 못 찾더라구요.
그래서, 이 기능을 적용해야 하나 말아야 하나 고민이 생겨버렸네요.
사실, 저 같은 경우엔 스크롤 할 때 제목이 빨리 눈에 띄는 게 중요해서
제목의 배경색 하이라이트를 포기하기엔 좀 그렇습니다.
jquery 소스와 스크립트를 좀 수정하면 어떻게 잘 될 것도 같은데,
고수님들 살펴보고 가능하면 수정 팁 좀 부탁드립니다.
[jquery.highlight-5.js 플러그인 소스]
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;
};
jQuery.fn.removeHighlight = function() {
return this.find("span.highlight").each(function() {
this.parentNode.firstChild.nodeName;
with (this.parentNode) {
replaceChild(this.firstChild, this);
normalize();
}
}).end();
};
[출력 스크립트]
<?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>
답변 2
본문 텍스트에 그냥 백그라운드 넣어서 테스트해 봤습니다. font-size:20px; 로 되어 있는 곳 옆에
background: #ffff00을 각각 넣은 것입니다.
마젠토 님 말씀대로 전체에 배경색 넣으니 잘 이동되긴 하네요.
선택지가 셋으로 늘어났군요.
관심 갖고 답변주셔서 감사합니다.
제목의 배경은 그냥 글에 넣으시면 되지 않을 까요?
위의 highlight는 위치를 찾아가기 위한 것 같은데..
위의 hightlight를 location등으로 변경해 보세요
제가 초보라 그런 걸 잘 할 줄 몰라용. ^^;
대략, 아래 라인과 관련된 부분을 수정해야 하는 건 알겠는데.
정확히 어떻게 수정해야 하는지는 잘 모르겠습니다.
$wrap.highlight(title);
var first_sch = $wrap.find('span.highlight').eq(1)
자바스크립트는 수정할 필요가 없고..
제목글에 그냥 백그라운드 컬러를 넣어보세요
목차에 배경색을 넣어보라는 말씀이신가요?
테스트 삼아 목차에 같은 위치에 넣어봤는데, 안 되네요.
위 소스 원리가..
a태그에서 텍스트 추출해서 그 텍스트와 동일한 텍스트가 있는 가장 첫 번째 span에 highlight 클래스 추가해 해당 위치로 이동시키는 것 같은데...
배경색을 넣으면 텍스트들이 하나의 span으로 묶여지지 않아서 그런 듯 싶어요.
따라서 span에 대해서 highlight 추가할 게 아니라, 그 상위 부모요소인 p를 대상으로 해서 그 안의 텍스트만 추출해 비교 가능하게 수정해야 할 것 같은데....이게 제 내공으로 해결 불가라...^^;;
<p>
<span>제목</span>
</p>
라고 하면 <span class="highlight">제목</span> 식으로 추가되었다가 빠질 것 같습니다.
<span style="background: #ffff00">제목</span> 으로 하면
sytle은 안 건드리기 때문에 아래 제목은 하이라이트로 유지 될것 같습니다.
문제는
제가 전체를 배경색으로 하는 게 아니라 중간의 중요 키워드에 대해서만 드래그 선택 후 에디터로 배경색을 넣는데,
(예) https://homzzang.com/b/css-1
이 과정에서 중요 키워드 부분이 span으로 한번 더 중첩적으로 묶이면서 배경색이 들어가다 보니 동일 문자열을 찾지 못 하고 있거든요.
그래서,
제 생각엔, span의 상위의 p에 대해서 그안의 텍스트만 추출해 값을 비교해주면 될 것 같은데.....
그게 어려운 문제라....
