Created
May 18, 2018 07:24
-
-
Save ohsoren/99b547de4a97566d7d619364c08a810f to your computer and use it in GitHub Desktop.
demo: style element(s) via data attribute(s)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| The plan: click link to show an overlay (super basic version). Overlay grows from center of parent to be full width and height of parent. We'll change parent data attribute value with JavaScript to control overlay behaviour | |
| --> | |
| <!-- parent element with data attribute attached --> | |
| <div class="overlayParent" data-overlay-visibility="hidden"> | |
| <!-- overlay trigger link --> | |
| <a href="#" class="overlayLink">Show overlay</a> | |
| <!-- overlay --> | |
| <div class="overlay"></div> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * let's update data attribute value on click event | |
| */ | |
| // 1a. variable: get element with data attribute so we can update its value | |
| var dataEl = document.body.querySelector(".overlayParent"); | |
| // 1b. variable: get element that triggers overlay link event function | |
| var overlayLink = dataEl.querySelector(".overlayLink"); | |
| // 2a. function. get and set data value (by condition) | |
| function getAndSetDataValue() { | |
| // variable: get element data attribute value | |
| var parentDivDataAttribute = dataEl.getAttribute("data-overlay-visibility"); | |
| // condition: does value = A ? [true] set to B : [false] set to A | |
| dataEl.setAttribute( | |
| "data-overlay-visibility", | |
| parentDivDataAttribute === "hidden" ? "visible" : "hidden" | |
| ); | |
| } | |
| // 2b. function. update overlay link text | |
| function updateOverlayLinkText() { | |
| // variable: get overlay link text | |
| var preEventOverlayLinkText = overlayLink.innerText; | |
| // variable: get post-click overlay link text | |
| // does value = A ? [true] set to B : [false] set to A | |
| var postEventOverlayLinkText = | |
| preEventOverlayLinkText === "Show overlay" ? "Hide overlay" : "Show overlay"; | |
| // update overlay link text | |
| overlayLink.innerText = postEventOverlayLinkText; | |
| } | |
| // 3. function: overlay link event | |
| function overlayLinkEvent(event) { | |
| // stop event target default behaviour | |
| event.preventDefault(); | |
| // run 2a function. | |
| // update data attribute value | |
| getAndSetDataValue(); | |
| // run 2b function | |
| // update link text | |
| updateOverlayLinkText(); | |
| } | |
| // 4. event: run overlay link event function | |
| overlayLink.addEventListener("click", overlayLinkEvent, false); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * <div class="overlayParent" data-overlay-visibility="hidden"> | |
| * <a href="#" class="overlayLink">Show overlay</a> | |
| * <div class="overlay"></div> | |
| * </div> | |
| */ | |
| /* overlay parent element */ | |
| .overlayParent { | |
| /* overlay link positioned "absolute" inside parent, so parent needs position, too. */ | |
| position: relative; | |
| width: 300px; | |
| height: 300px; | |
| /* center overlay inside parent. overlay will grow from parent center */ | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| /* overlay element [data-overlay-visibility="hidden"] */ | |
| .overlay { | |
| /* position overlay inside parent but on a new layer */ | |
| position: absolute; | |
| /* center overlay inside parent */ | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| /* hide overlay */ | |
| width: 0; | |
| height: 0; | |
| opacity: 0; | |
| /* transition properties for nice smooth effect */ | |
| transition: all .2s; | |
| background-color: indianred; | |
| /* place overlay layer behind parent layer */ | |
| z-index: -1; | |
| } | |
| /* overlay element [data-overlay-visibility="visible"] */ | |
| [data-overlay-visibility="visible"] .overlay { | |
| /* show overlay */ | |
| width: 100%; | |
| height: 100%; | |
| opacity: .8; | |
| /* place overlay layer in front of parent layer */ | |
| z-index: 5; | |
| } | |
| /* overlay link element */ | |
| .overlayLink { | |
| color: black; | |
| /* remove default link underline */ | |
| text-decoration: none; | |
| /* place link layer in front of parent and overlay layers */ | |
| z-index: 10; | |
| } | |
| /* link element: on hover */ | |
| .overlayLink:hover { | |
| /* give link an underline */ | |
| text-decoration: underline; | |
| cursor: pointer; | |
| } | |
| /* THE END | |
| * | |
| * | |
| * | |
| * | |
| * now let's prettify shit for the fun of it | |
| */ | |
| body { | |
| -webkit-font-smoothing: antialiased; | |
| background-color: #111; | |
| /* center parent div inside viewport */ | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| /* hide x and y axis overflow */ | |
| overflow: hidden; | |
| } | |
| .overlayParent { | |
| /* fallback color in case background image doesn't show */ | |
| background-color: cornflowerblue; | |
| background-image: url('http://images.45worlds.com/f/cd/elliott-smith-from-a-basement-on-the-hill-2-cd.jpg'); | |
| /* just the one image is needed. no repeats. */ | |
| background-repeat: none; | |
| /* make image fill parent */ | |
| background-size: cover; | |
| } | |
| .overlayLink { | |
| color: #000; | |
| /* move link down off-center by 20px */ | |
| transform: translateY(20px); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment