** Advanced Coding **
Most of the functions on the glossary lobby page are made with JavaScript. This fact makes this clonable a bit more complex for custom changes. Almost any structural change to the glossary CMS items must be accompanied with change in the code.
The first part of the code deals with each item on the list:
* Those items are kept hidden to only later show 1 for each group
const item_names = document.querySelectorAll('.glossary-h2');
const letters = [];
item_names.forEach((item, index)=>{
let name = item.innerHTML;
let first_char = name.charAt(0);
item.parentElement.parentElement.querySelector('.letter_anchor').setAttribute("id", first_char);
item.parentElement.parentElement.querySelector('.glossary-hidden-letter').setAttribute("data-letter", first_char);
item.parentElement.parentElement.querySelector('.glossary-hidden-letter').innerHTML = first_char;
if (letters.indexOf(first_char) === -1) {
letters.push(first_char);
}
})
Next piece of code creates an array of all the ABC letters.
Then we add href attribute to each item on this array, only if it also exists on the previous array of all glossary items.
// Letter Links
const alpha = Array.from(Array(26)).map((e, i) => i + 65);
const alphabet = alpha.map((x) => String.fromCharCode(x));
const links_wrap = document.getElementById('links_wrap');
alphabet.forEach((letter_link, index)=>{
let a = document.createElement("a");
a.innerHTML = letter_link;
a.setAttribute("class", 'term-link');
if (letters.includes(letter_link)) {
a.setAttribute("href", '#' + letter_link);
}
links_wrap.appendChild(a);
})
Last part of the code is the one that shows the relevant letters for each group and add a seperator right before each item.
* This separator display property is block, which create the seperation
// Show Letter headlines for each group
const elementArray = document.getElementsByClassName("glossary-hidden-letter");
const usedLetters = new Set([]);
for (let i = 0; i < elementArray.length; i++) {
const letter = elementArray[i].getAttribute("data-letter");
if (usedLetters.has(letter) === false) {
usedLetters.add(letter);
createLetterLink(elementArray[i]);
}
}
// Create seperation
function createLetterLink(element) {
element.classList.add('glossary-letter');
var spacer = document.createElement('div');
spacer.classList.add('spacer');
var parent = element.parentNode;
var list = element.parentNode.parentNode;
list.insertBefore(spacer, parent);
}
.png)
Whenever possible, use Class Names to target the elements in your interaction. You never know when you'll need to duplicate and use it somewhere else...
A 3d slider with video items, plays and pauses on click & slide change.
.png)
A (custom code) solution that combines CSS variables and Vanilla JavaScript for the shrinking / growing of browser top & bottom bars.
.png)
Change Webflow's Slider to act as a "regular" grid block on desktop, but go back to Slider on Tablet and smaller screens.
.png)