MaxZieb
January 24, 2021, 9:56pm
5
You can also look into (Hype) Mutation Observer to move the contained image or container on opposite amounts of the axis values of your mouse coordinates.
Mutation Observer:
Hype Mutation observer (cleans up after itself):
[HypeDocumentLoader]
This extension called Hype MutationObserver, is a wrapper to MutationObserver . It allows to observer elements and act upon changes on their attributes, childlist and subtree. This Hype specific wrapper takes care to register and unregister the observer. It also helps in keeping the callback mutation events scene specific and offers an update rate feature.
Basic usage:
hypeDocument.startMutationObserver(element, function(mutation){
// your code goes here and executes …
Example using native mutation observer
I was trying to solve this and made an example with a inner and outer container.
The idea is sound but there seams to be a drawing/timing issue. This concept work pretty good under Flash but is having issues here. Maybe RelayoutIfNecessary is not working properly? Anybody?
Keyhole.hype.zip (569,7 KB)
Update: Fixed using mutation observer (but omitting IE 9-10):
Keyhole_MutationObserver.hype.zip (570,6 KB) (Thanks for the hint jonathan)
But there is a polyfill https://github.com/webmodules/m…
There is also a magnifier template that uses this but with a scale factor.
2 Likes