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><h1id="A"style="border:1px solid green;">A</h1><script>localStorage.clear();
var _resolve, _reject;
var a = document.getElementById("A");
window.open("B.html");
functionwait() {
returnnewPromise(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><h1id="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"