JavaScript
An overview of helper functions and plugins created by me
On this page I will continuously add JavaScript plugins and helper functions created by me, with instruction manuals and download links.
Project Description
Created explicitly to work with Daniel Eden's excellent CSS library "Animate.css", but it also supports custom animations, provided they were defined in the same way as "Animate.css" defines its own animations.
This plugin handles the correct application of an animation to a DOM element, including customizable settings for animation duration, delay and amount of loops. While doing so it takes care of inline-styles potentially being present on the element to be animated and restores those when the animation is completed. It also provides the option of define a callback function that will be executed when the animation has ended.
This plugin handles the correct application of an animation to a DOM element, including customizable settings for animation duration, delay and amount of loops. While doing so it takes care of inline-styles potentially being present on the element to be animated and restores those when the animation is completed. It also provides the option of define a callback function that will be executed when the animation has ended.
Information regarding implementation and usage (which also includes explanatory code snippets) can be found on the details page for this project
Project Description
Scroll-blocking is a behavior that can occur when scrollable sub-components are used on a website. Common examples would be an iframe, a block element made scrollable via CSS (overflow: scroll / auto) or a JavaScript plugin that generates custom scroll bars.
Scrolling the page gets interrupted as soon as this sub-component lands under the mouse cursor or a mobile device user swipes over it, at which point the scrolling wheel or swipe gesture will no longer continue scrolling the page but starts interacting with that scrollable sub-component instead. In the case of an embedded Google Map, that used to result in an involuntary zoom-in action on the map (which was actually the main reason behind the development of this plugin), up until mid-2017 when Google began to implement overlays that give users the hint to either pinch to zoom or hold down Ctrl while using the mouse wheel.
If an affected sub-component stretches across the entire width of the page, the only way to scroll past it would be to use the scroll bar handles, which is extremely annoying for most users. And mobile devices don't even have those, so there the problem is even more severe, as all parts below the sub-component could become completely inaccessible, because the user can never scroll past the element that absorbs all swipe gestures that were actually intended to continue scrolling the page.
That's where this plugin comes to the rescue by hiding the sub-component behind a protective layer that can be toggled on and off, either via button, a hover-timeout or both. As long as it is active, a mouse wheel action or swipe gesture above the protected element will never be interpreted to have occurred inside the sub-component, but above it, so the page continues to scroll without any interruptions.
Scrolling the page gets interrupted as soon as this sub-component lands under the mouse cursor or a mobile device user swipes over it, at which point the scrolling wheel or swipe gesture will no longer continue scrolling the page but starts interacting with that scrollable sub-component instead. In the case of an embedded Google Map, that used to result in an involuntary zoom-in action on the map (which was actually the main reason behind the development of this plugin), up until mid-2017 when Google began to implement overlays that give users the hint to either pinch to zoom or hold down Ctrl while using the mouse wheel.
If an affected sub-component stretches across the entire width of the page, the only way to scroll past it would be to use the scroll bar handles, which is extremely annoying for most users. And mobile devices don't even have those, so there the problem is even more severe, as all parts below the sub-component could become completely inaccessible, because the user can never scroll past the element that absorbs all swipe gestures that were actually intended to continue scrolling the page.
That's where this plugin comes to the rescue by hiding the sub-component behind a protective layer that can be toggled on and off, either via button, a hover-timeout or both. As long as it is active, a mouse wheel action or swipe gesture above the protected element will never be interpreted to have occurred inside the sub-component, but above it, so the page continues to scroll without any interruptions.
Information regarding implementation and usage (which also includes explanatory code snippets) can be found on the details page for this project