Skip to content

Commit c8ed01e

Browse files
winar-jinwinar-jin
committed
bug method tried
1 parent b620a4f commit c8ed01e

File tree

1 file changed

+76
-50
lines changed

1 file changed

+76
-50
lines changed

‎22 - Follow Along Link Highlighter/index.html‎

Lines changed: 76 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,87 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<title>👀👀👀Follow Along Nav</title>
67
<link rel="stylesheet" href="style.css">
78
</head>
9+
810
<body>
911

10-
<nav>
11-
<ul class="menu">
12-
<li><a href="">Home</a></li>
13-
<li><a href="">Order Status</a></li>
14-
<li><a href="">Tweets</a></li>
15-
<li><a href="">Read Our History</a></li>
16-
<li><a href="">Contact Us</a></li>
17-
</ul>
18-
</nav>
19-
20-
<div class="wrapper">
21-
<p>Lorem ipsum dolor sit amet, <a href="">consectetur</a> adipisicing elit. Est <a href="">explicabo</a> unde natus
22-
necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!</p>
23-
<p>Aspernatur sapiente quae sint <a href="">soluta</a> modi, atque praesentium laborum pariatur earum <a href="">quaerat</a>
24-
cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam.</p>
25-
<p>Cum ipsam quod, incidunt sit ex <a href="">tempore</a> placeat maxime <a href="">corrupti</a> possimus <a
26-
href="">veritatis</a> ipsum fugit recusandae est doloremque? Hic, <a href="">quibusdam</a>, nulla.</p>
27-
<p>Esse quibusdam, ad, ducimus cupiditate <a href="">nulla</a>, quae magni odit <a href="">totam</a> ut consequatur
28-
eveniet sunt quam provident sapiente dicta neque quod.</p>
29-
<p>Aliquam <a href="">dicta</a> sequi culpa fugiat <a href="">consequuntur</a> pariatur optio ad minima, maxime <a
30-
href="">odio</a>, distinctio magni impedit tempore enim repellendus <a href="">repudiandae</a> quas!</p>
31-
</div>
32-
33-
<script>
34-
35-
const triggers = document.querySelectorAll('a');
36-
const highlight = document.createElement('span');
37-
highlight.classList.add('highlight');
38-
document.body.appendChild(highlight);
39-
40-
function highlightLink() {
41-
const linkCoords = this.getBoundingClientRect();
42-
console.log(linkCoords);
43-
const coords = {
44-
width: linkCoords.width,
45-
height: linkCoords.height,
46-
top: linkCoords.top + window.scrollY,
47-
left: linkCoords.left + window.scrollX
48-
};
49-
50-
highlight.style.width = `${coords.width}px`;
51-
highlight.style.height = `${coords.height}px`;
52-
highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
53-
54-
}
55-
56-
triggers.forEach(a => a.addEventListener('mouseenter', highlightLink));
57-
58-
</script>
12+
<nav>
13+
<ul class="menu">
14+
<li><a href="">Home</a></li>
15+
<li><a href="">Order Status</a></li>
16+
<li><a href="">Tweets</a></li>
17+
<li><a href="">Read Our History</a></li>
18+
<li><a href="">Contact Us</a></li>
19+
</ul>
20+
</nav>
21+
22+
<div class="wrapper">
23+
<p>Lorem ipsum dolor sit amet, <a href="">consectetur</a> adipisicing elit. Est <a href="">explicabo</a> unde natus
24+
necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!</p>
25+
<p>Aspernatur sapiente quae sint <a href="">soluta</a> modi, atque praesentium laborum pariatur earum <a href="">quaerat</a> cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam.</p>
26+
<p>Cum ipsam quod, incidunt sit ex <a href="">tempore</a> placeat maxime <a href="">corrupti</a> possimus <a href="">veritatis</a> ipsum fugit recusandae est doloremque? Hic, <a href="">quibusdam</a>, nulla.</p>
27+
<p>Esse quibusdam, ad, ducimus cupiditate <a href="">nulla</a>, quae magni odit <a href="">totam</a> ut consequatur
28+
eveniet sunt quam provident sapiente dicta neque quod.</p>
29+
<p>Aliquam <a href="">dicta</a> sequi culpa fugiat <a href="">consequuntur</a> pariatur optio ad minima, maxime <a href="">odio</a>,
30+
distinctio magni impedit tempore enim repellendus <a href="">repudiandae</a> quas!</p>
31+
</div>
32+
33+
<script>
34+
const triggers = document.querySelectorAll('a');
35+
const highlight = document.createElement('span');
36+
highlight.classList.add('highlight');
37+
document.body.appendChild(highlight);
38+
39+
function highlightLink() {
40+
const linkCoords = this.getBoundingClientRect();
41+
// console.log(linkCoords);
42+
const coords = {
43+
width: linkCoords.width,
44+
height: linkCoords.height,
45+
top: linkCoords.top + window.scrollY,
46+
left: linkCoords.left + window.scrollX
47+
};
48+
49+
highlight.style.width = `${coords.width}px`;
50+
highlight.style.height = `${coords.height}px`;
51+
highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
52+
53+
}
54+
55+
triggers.forEach(a => a.addEventListener('mouseenter', highlightLink));
56+
57+
// want to fix the resize bug, but didn't work.
58+
// ~ function () {
59+
// const originWidth = document.body.clientWidth;
60+
// const originHeight = document.body.clientHeight;
61+
// window.addEventListener('resize', (e) => {
62+
// const currentWidth = e.target.document.body.clientWidth;
63+
// const currentHeight = e.target.document.body.clientHeight;
64+
// const heightGap = parseInt(currentHeight - originHeight);
65+
// console.log('heightGap: ', heightGap);
66+
// const widthGap = parseInt(currentWidth - originWidth);
67+
// console.log('widthGap: ', widthGap);
68+
// const reg = /\(([-0-9.]+)px, ([-0-9.]+)px\)/g;
69+
// if (highlight.style.transform) {
70+
// const result = reg.exec((highlight.style.transform.split('translate')[1]).toString());
71+
// const originTranslateX = result[1];
72+
// console.log('originTranslateX: ', originTranslateX);
73+
// const originTranslateY = result[2];
74+
// console.log('originTranslateY: ', originTranslateY);
75+
// const finalWidth = parseInt(widthGap,10)+parseInt(originTranslateX,10);
76+
// console.log('finalWidth: ', finalWidth);
77+
// const finalHeight = parseInt(heightGap,10)+parseInt(originTranslateY,10);
78+
// console.log('finalHeight: ', finalHeight);
79+
// highlight.style.transform =
80+
// `translate(${finalWidth}px, ${finalHeight}px)`;
81+
// }
82+
// });
83+
// }();
84+
</script>
5985
</body>
60-
</html>
6186

87+
</html>

0 commit comments

Comments
 (0)