-
Notifications
You must be signed in to change notification settings - Fork 0
Functions
Vanilla Javascript functions that you can call from your own scripts, to do the most common dynamic tasks such as getting a cookie, check if an element is in view, make the page scroll to an element, parallax effect, switch color scheme body classes, copy to clipboard and more.
If you are looking to use functions from HTML, check the respective utility classes instead.
Use your favorite method to run the functions below.
If you don't have a favorite method, you can get inspired by the examples below.
| name | description |
|---|---|
| mrGetCookie('cookieName') | Get value from cookieName. |
| mrIsInView(element,offsetTop,offsetBottom) | Returns true if element is in view. Offsets are optional, the offsetTop default is the window's height while the offsetBottom default is 0, always in relation to the element. |
| mrActiveInView(element,offsetTop,offsetBottom) | Uses the function mrIsInView to detect when the element is in view and then adds the class mr-active. Offsets work the same way as they do in the function mrIsInView. |
| mrScrollTo(windowPosition,scrollSpeed) | Scroll to windowPosition (numeric value) in a specific speed (The default speed is 750ms) |
| mrBefore(element,content) | Adds content before an element. |
| mrAfter(element,content) | Adds content after an element. |
| mrWrap(element,before,after) | Adds content before and after an element (HTML allowed). |
| mrParallax('element') | Add parallax to an element with background-image. |
| mrCopy(element) | Run this function to copy the value of a text input element into the clipboard. |
| mrThemeColors() | Removes the classes "mr-darkcolors" and "mr-lightcolors" from "body". Also removes the "mrColors" cookie. |
| mrDarkColors() | Adds the class "mr-darkcolors" to "body". Also adds the value to the "mrColors" cookie (1 year). |
| mrLightColors() | Adds the class "mr-lightcolors" to "body". Also adds the value to the "mrColors" cookie (1 year). |
| mrToggleColors() | Toggles between the classes "mr-darkcolors", "mr-lightcolors" and no colors class. Also toggles the values of the "mrColors" cookie. |
| This list is a work in progress... |
| name | description |
|---|---|
| mrSwipe(element) | Transforms the element into a swipe component, organizing the content for horizontal scrolling. |
| mrScrollLeft(element) | Scrolls the element content to the left according to the element width. |
| mrScrollBottom(element) | Scrolls the element content to the top according to the element height. |
| mrSearch(element,searchValue,minChars,similarResults) | Hides the children of the element that do not contain the searchValue on their content or attributes. minChars per keyword defaults to 0. similarResults defaults to true and checks for each keyword, when no exact match is found. |
| This list is a work in progress... |
| name | description |
|---|---|
| This list is a work in progress... |
- Adding a class to the body, if the main title of the page is in view:
if(mrIsInView(document.querySelector('h1'))) {
document.querySelector('body').classList.add('title-is-in-view');
} else {
document.querySelector('body').classList.remove('title-is-in-view');
}
- Add a class to anchor links when the respective H2 is in view:
window.addEventListener("scroll", function (event) {
const pageAnchors = document.querySelectorAll('h2[id]');
for (let id = 0; id < pageAnchors.length; id++) {
let pageAnchor = pageAnchors[id];
let pageAnchorLinks = document.querySelectorAll('a[href="#'+pageAnchor.id+'"]');
if(mrIsInView(pageAnchor)) {
for (let id = 0; id < pageAnchorLinks.length; id++) {
let pageAnchorLink = pageAnchorLinks[id];
pageAnchorLink.classList.add('anchor-active');
}} else {
for (let id = 0; id < pageAnchorLinks.length; id++) {
let pageAnchorLink = pageAnchorLinks[id];
pageAnchorLink.classList.remove('anchor-active');
}
}
}});