On Hover Show Element From Different Page
What would be the most efficient way to display a single element from another page upon hovering on the current page? To clarify: Say I have an Element A on a page A. Element B is
Solution 1:
You can use localStorage, storage event, Promise, setTimeout
A.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="A" style="border:1px solid green;">A</h1>
<script>
localStorage.clear();
var _resolve, _reject;
var a = document.getElementById("A");
window.open("B.html");
function wait() {
return new Promise(function(resolve, reject) {
_resolve = resolve; _reject = reject;
setTimeout(function() {
resolve()
}, 3000)
})
}
a.onmouseover = function(e) {
wait()
.then(function() {
localStorage.setItem("timeout", "complete");
})
.catch(function(err) {
alert(err)
})
a.onmouseover = null;
}
a.onmouseleave = function(e) {
if (localStorage.getItem("timeout") === null) {
_reject("less than three seconds of hovering at #A element")
} else {
localStorage.clear();
document.body.removeChild(document.querySelector("dialog"));
a.onmouseleave = null;
}
}
window.onstorage = function(e) {
console.log(e);
var dialog = document.createElement("dialog");
dialog.open = true;
dialog.innerHTML = e.newValue;
document.body.appendChild(dialog);
window.onstorage = null;
}
</script>
</body>
</html>
B.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="B">B</h1>
<script>
var b = document.getElementById("B");
window.onstorage = function(event) {
console.log(event);
localStorage.setItem("message", b.innerHTML)
}
</script>
</body>
</html>
Post a Comment for "On Hover Show Element From Different Page"