diff --git a/4.use-case/3.show-result-texts-on-the-video.html b/4.use-case/3.show-result-texts-on-the-video.html index 2f22b219..5d6fc551 100644 --- a/4.use-case/3.show-result-texts-on-the-video.html +++ b/4.use-case/3.show-result-texts-on-the-video.html @@ -19,13 +19,14 @@ .bubble-box{ max-width: 20rem; /* You are likely to change it */ position: absolute; + right: -999px; background: white; border-radius: 4px; padding: 4px; word-break: break-all; word-wrap: break-word; box-shadow: 5px 5px 5px 3px rgba(0,0,0,0.2); - transform: translate(-50%, -4px); + transform: translate(-50%, calc(-100% - 4px)); } .bubble-box::after{ content: ''; @@ -116,15 +117,15 @@ if (bodyStyle.position === "static") { Object.assign(divInf.style, { left: `${(convertedP1.x + convertedP2.x) / 2}px`, - bottom: `${document.documentElement.clientHeight - convertedP1.y}px`, + top: `${convertedP1.y}px`, }); } else { // if you set body `position` as `relative`, `absolute`, things can get complicated const bodyRect = document.body.getBoundingClientRect(); const bodyBorderLeft = parseFloat(bodyStyle.borderLeftWidth); - const bodyBorderBottom = parseFloat(bodyStyle.borderBottomWidth); + const bodyBorderTop = parseFloat(bodyStyle.borderTopWidth); Object.assign(divInf.style, { - left: `${(convertedP1.x + convertedP2.x) / 2 - bodyRect.left - bodyBorderLeft}px`, - bottom: `${bodyRect.bottom - convertedP1.y - bodyBorderBottom}px`, + left: `${(convertedP1.x + convertedP2.x) / 2 - (bodyRect.left + document.documentElement.scrollLeft) - bodyBorderLeft}px`, + top: `${convertedP1.y - (bodyRect.top + document.documentElement.scrollTop) - bodyBorderTop}px`, }); } divInf.innerText = result.barcodeText;