Here are some tools, resources and recommendations you may find useful for your next or any future projects. Will continue to grow 😉
Smooth accordion that automatically closes an accordion item when a new one is selected. All elements are handled directly in Webflow.
<!-- SCROLL TO TOP ON CLICK -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/accordion@latest/index.min.js"></script>
<script>
window.CodeCrumbs.ScrollTopOnClick({
scrollTriggerSelectors: [".TRIGGER-BUTTON-CLASS"],
windowScroll: true, // If false, will only scroll the scroll areas to top
windowScrollToSelector: ".SCROLL-ANCHOR-CLASS", // Scroll to specific element rather than top of the page
windowScrollOffset: 60, // Offset distance in pixels from element or window
windowScrollDelay: 500, // Delay in milliseconds before starting scroll
scrollAreas: [
{
selector: ".SCROLL-AREA-CLASS", // Class of element with "overflow: scroll"
offset: 0, // Distance in pixels from the top of the scroll area
},
],
scrollAreaScrollDelay: 500, // Delay in milliseconds before starting scroll
});
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
Create a smooth continuous slider for all kinds of content such as testimonials, logos, and more. Use simple attributes to control the settings of each ticker.
<!-- CODECRUMBS TICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/ticker@0.1.5/index.min.js"></script>
<script>
window.CodeCrumbs.Ticker({
tickerSelector: ".cc-ticker"
})
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
A beautiful themeable date picker / calendar with plenty of useful options. Supports several languages, date ranges and much more.
<!-- CODECRUMBS DATE PICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@latest/index.min.js"></script>
<script>
window.CodeCrumbs.DatePicker({
dateFieldSelector: '.date-field-class',
format: 'M S y',
})
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
One click trigger to change & swap text, urls, attributes, display properties and more.
<!-- SWAP VALUES ON CLICK -->
<script>
function setupSwitcher({
/* Click Trigger Class */
swapTrigger = "switcher",
/* Essentials */
swapText = "swap-text",
swapDisplay = "swap-display",
swapClass = "swap-class",
swapUrl = "swap-url",
/* Toggle and Add Attributes */
swapToggleAttribute = "swap-toggle-attribute",
swapAddAttribute = "swap-add-attribute",
swapAddAttributeValue = "swap-add-attribute-value",
/* Replace Attribute Value */
swapAttributeTarget = "swap-attribute-target",
swapTargetValue = "swap-target-value"
} = {}) {
const swapAll = () => {
// SWAP TEXT
document.querySelectorAll(`[${swapText}]`).forEach((swapDomElement) => {
const nextValue = swapDomElement.getAttribute(swapText);
const currentValue = swapDomElement.innerText;
swapDomElement.innerText = nextValue;
swapDomElement.setAttribute(swapText, currentValue);
});
// SWAP DISPLAY
document.querySelectorAll(`[${swapDisplay}]`).forEach((swapDomElement) => {
const nextValue = swapDomElement.getAttribute(swapDisplay);
const currentValue = swapDomElement.style.display;
swapDomElement.style.display = nextValue;
swapDomElement.setAttribute(swapDisplay, currentValue);
});
// SWAP CLASS
document.querySelectorAll(`[${swapClass}]`).forEach((swapDomElement) => {
const nextValue = swapDomElement.getAttribute(swapClass);
swapDomElement.classList.toggle(nextValue);
});
// SWAP URL
document.querySelectorAll(`[${swapUrl}]`).forEach((swapDomElement) => {
const nextValue = swapDomElement.getAttribute(swapUrl);
const currentValue = swapDomElement.href;
swapDomElement.href = nextValue;
swapDomElement.setAttribute(swapUrl, currentValue);
});
// TOGGLE ATTRIBUTE
document.querySelectorAll(`[${swapToggleAttribute}]`).forEach((swapDomElement) => {
const toggleAttribute = swapDomElement.getAttribute(
swapToggleAttribute
);
swapDomElement.toggleAttribute(toggleAttribute);
});
// ADD ATTRIBUTE
document.querySelectorAll(`[${swapAddAttribute}]`).forEach((swapDomElement) => {
const newAttribute = swapDomElement.getAttribute(swapAddAttribute);
const newAttributeValue = swapDomElement.getAttribute(
swapAddAttributeValue
);
if (swapDomElement.hasAttribute(newAttribute)) {
swapDomElement.removeAttribute(newAttribute);
} else {
swapDomElement.setAttribute(newAttribute, newAttributeValue);
}
});
// REPLACE ATTRIBUTE VALUE
document.querySelectorAll(`[${swapAttributeTarget}]`).forEach((swapDomElement) => {
const attributeTarget = swapDomElement.getAttribute(
swapAttributeTarget
);
let attributeValue = swapDomElement.getAttribute(attributeTarget);
let newValue = swapDomElement.getAttribute(swapTargetValue);
swapDomElement.setAttribute(attributeTarget, newValue);
swapDomElement.setAttribute(swapTargetValue, attributeValue);
});
};
document.querySelectorAll(`.${swapTrigger}`).forEach((switcherDomElement) => {
switcherDomElement.addEventListener("click", swapAll);
});
}
setupSwitcher();
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
Find all text that matches a string value, wrap them in a span element to style and/or replace the string value.
<!-- FIND, STYLE AND REPLACE MATCHING STRINGS -->
<script>
const targetStrings = [
{
selector: 'h2',
targetString: 'String 1',
replacementString: 'String 1 replacement',
appendedClassName: 'class-name-here',
},
{
selector: 'p',
targetString: 'String 2',
replacementString: 'String 1 replacement',
appendedClassName: 'class-name-here',
},
]
function wrapAndReplaceMatches(selector, newClass, wordTarget, replacement) {
const pattern = new RegExp(`\\b(${wordTarget})\\b`, 'gi');
const hasClassAttr = newClass ? `class=${newClass}` : ''
const wrapAndReplace = !replacement
? `<span ${hasClassAttr}>$1</span>`
: `<span ${hasClassAttr}>${replacement}</span>`;
Array.from(document.querySelectorAll(selector)).forEach((element) => {
element.innerHTML = element.innerHTML.replace(pattern, wrapAndReplace);
});
}
document.addEventListener('DOMContentLoaded', () => {
targetStrings.forEach(({
selector,
targetString,
replacementString,
appendedClassName
}) => {
wrapAndReplaceMatches(selector, appendedClassName, targetString, replacementString)
})
});
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
With this crumb we can simply create what is commonly known as floating form labels. A UI effect that allows you to display form labels as placeholders initially and animate them to typical labels.
<!-- FLOATING FORM LABEL STYLES -->
<style>
.input-label {
pointer-events: none;
}
.input::placeholder {
opacity: 0;
transition: opacity .2s ease-out;
}
.input:focus::placeholder {
opacity: 1;
}
</style>
<!-- FLOATING FORM LABELS -->
<script defer src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/floating-form-labels@0.1.1/index.min.js"></script>
<script>
window.CodeCrumbs.FloatLabels({
inputSelector: ".input",
labelActiveClass: "float",
})
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
Add a custom date picker to your form for consistent date input. No more manually typing it in for your visitors. Customize the look to match your design.
<!-- DATE PICKER STYLES -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
<style>
:root {
/* Color Settings */
--accent-color: #7262e6; /* Controls BG Color for Selected Date */
--secondary-accent-color: #9287e2; /* Controls Text Color for Current Date */
--main-bg-color: #1f2023; /* Controls BG Color of the Calendar */
--secondary-bg-color: #27292d; /* Controls BG for Calendar Dates */
--heading-color: #ffffff; /* Controls Main Heading Color */
--font-color: #c1c9d2; /* Controls Main Font Color */
--accent-top-text-color: #ffffff; /* Controls Font Color on top of Accent Color */
--disabled-font-color: #999999; /* Controls Disabled Font Color */
--shadow-color: 0 5px 15px -5px rgba(0,0,0,.5);
/* Size & Spacing Settings */
--border-radius: 4px; /* Controls Large Border Radius (Calendar Itself) */
--border-radius-sm: 2px; /* Controls Small Border Radius (Calendar Dates) */
--font-size: 16px; /* Controls Font Size */
--table-gap: 2px; /* High number is not recommended */
/* Arrow Icons */
--left-arrow: url('https://cdn.prod.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dd958382e006f4eb2033_chevron-left.svg');
--right-arrow: url('https://cdn.prod.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dbca268421b03c01abf6_chevron-right.svg');
--arrow-bg-color: transparent;
}
/* Picker Element Itself */
.pika-single {
color: var(--heading-color);
background: var(--main-bg-color);
border: none !important;
border-bottom-color: none !important;
border-radius: var(--border-radius);
font-family: inherit !important;
}
/* Datepicker Shadow */
.pika-single.is-bound {
box-shadow: var(--shadow-color) !important;
}
/* Month & Year Displayed in Middle */
.pika-label {
color: var(--heading-color);
background-color: transparent !important;
}
.pika-prev, .is-rtl .pika-next {
background-image: var(--left-arrow);
}
.pika-next, .is-rtl .pika-prev {
background-image: var(--right-arrow);
}
/* This is the table element which includes the days labels and the days in the month */
.pika-table {
border-spacing: var(--table-gap) !important;
border-collapse: separate;
font-size: var(--font-size) !important;
}
/* Days of the Week Labels */
.pika-table th {
color: var(--font-color);
text-align: center;
}
/* Days of the Week Underline - Example = underline dotted */
abbr[title] {
text-decoration: none !important;
cursor: default !important;
}
/* Month Days on Calendar - Default State */
.pika-button {
color: var(--font-color);
background: var(--secondary-bg-color);
border-radius: var(--border-radius-sm);
text-align: center;
font-size: 12px !important;
}
/* Week Label */
.pika-week {
color: var(--font-color);
}
/* Current Day Text/Number Color */
.is-today .pika-button {
color: var(--secondary-accent-color) !important;
}
/* The Selected Date/Day */
.is-selected .pika-button {
color: var(--accent-top-text-color) !Important;
background: var(--accent-color);
box-shadow: none !important;
}
/* Styles for any Disabled Dates/Days */
.is-disabled .pika-button {
color: var(--disabled-font-color);
opacity: .3;
background: transparent !important;
}
/* Styles for Date/Day Hover (can be same styles as "selected" styles) */
.pika-button:hover {
color: var(--accent-top-text-color) !important;
background: var(--accent-color) !important;
border-radius: var(--border-radius-sm) !important;
}
/* Next & Prev Arrow Buttons */
.pika-prev, .pika-next {
display: block;
cursor: pointer;
position: relative;
outline: none;
border: 0;
padding: 0;
width: 20px;
height: 30px;
text-indent: 20px;
white-space: nowrap;
overflow: hidden;
background-color: var(--arrow-bg-color) !important;
opacity: .5;
}
</style>
<!-- DATE PICKER JS -->
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<!-- FOR 'SINGLE' DATE PICKER ON ONE FORM/PAGE. REMOVE CODE BELOW IF NOT NEEDED! -->
<script>
var picker = new Pikaday({
field: document.getElementById('datepicker'),
disableWeekends: true, // Disables option to select weekend days
firstDay: 0, // First day of the week - 0 for Sunday & 1 for Monday
minDate: new Date(), // Disables option to select days prior to current day
//yearRange: [1968, new Date().getFullYear().toString()], //Here you can choose the earliest year option to the current date or change "new Date().getFullYear().toString()" to 2008 for example.
});
//Sets Default Date to Current Date
picker.gotoToday()
</script>
<!-- FOR 'MULTIPLE' DATE PICKERS ON ONE FORM/PAGE. REMOVE CODE BELOW IF NOT NEEDED! -->
<script>
$('.date-picker').each(function() { // ".date-picker" is the class name you would set on each field that needs a date picker.
$(this).data('pikaday', new Pikaday({
field: $(this)[0],
disableWeekends: true, // Disables option to select weekend days
firstDay: 0, // First day of the week - 0 for Sunday & 1 for Monday
minDate: new Date(), // Disables option to select days prior to current day
//yearRange: [1968, new Date().getFullYear().toString()], //Here you can choose the earliest year option to the current date or change "new Date().getFullYear().toString()" to 2008 for example.
}));
});
//Sets Default Date to Current Date
picker.gotoToday()
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
Smooth accordion that automatically closes an accordion item when a new one is selected. All elements are handled directly in Webflow.
<!-- CODECRUMBS ACCORDION -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/accordion@latest/index.min.js"></script>
<script>
window.CodeCrumbs.Accordion({
oneOpen: true,
speed: 600,
easing: 'cubic-bezier(0.55, 0, 0.1, 1)',
repositionOpenItem: false,
repositionDistance: 300,
repositionDelay: 300,
classNames: {
accordion: 'cc-accordion',
item: 'cc-accordion-item',
head: 'cc-accordion-header',
body: 'cc-accordion-body',
icon: 'cc-accordion-icon',
},
})
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
Now you can add really nice custom buttons for your products quantity field. This is great so users don't have to type the amount anymore.
<!-- CUSTOM QUANTITY BUTTONS -->
<style>
/* remove form styles & set margin at 0 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input[type="number"] {
-moz-appearance: textfield;
}
</style>
<!-- CUSTOM QUANTITY BUTTONS -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/quantity-buttons@v0.1.4/index.min.js"></script>
<script>
window.CodeCrumbs.QuantityButtons({
quantityGroupClass: 'q-group',
quantityIncrementButtonClass: 'q-inc',
quantityDecrementButtonClass: 'q-dec',
quantityNumberFieldClass: 'q-num',
disableDecrementAtOne: true,
})
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
Link to and open a specific tab from any other page on your website with Webflow's native tabs element.
<!-- OPEN SPECIFIC TABS -->
<script>
// get the webflow array or define a new one if none exists
var Webflow = Webflow || [];
// push the click tabs handler function into the webflow array
Webflow.push(function () {
// get the respective tab name using the getParam function and store it in a tabName variable
var tabName = getParam('tab');
// terminate the function if no tab name was found
if (!tabName) return;
// click on the tab
$('.' + tabName).triggerHandler('click');
// define the getParam function
function getParam(name) {
// replace any '[' in the tab name with '\['
// & also replace any ']' in the tab name with '\]'
// this escapes the symbols '[' & ']' so they can be used in regex
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
// define a regex to search for the tab name
var regex = new RegExp("[\\?&]" + name + "=([^]*)"),
// search for the tab name in the query string part of the page's url
results = regex.exec(location.search);
// return the tab name OR "" if no tab name found
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
});
</script>
// this is the url format for each button link that when clicked navigates to the tabs page
/page-name?tab=tab-name-here
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
Cookie consent notice for your website visitors by Osano. Super easy to use & looks nice too.
<!-- Add the COOKIE CONSENT css -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />
<!-- Add the COOKIE CONSENT dependency script file -->
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>
<script>
// initialize cookieconsent & define options
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#ebe5ca", // Background color for popup card
"text": "#000000" // Main text color for message
},
"button": {
"background": "#a09e91", // Background color for button (use "transparent" if you use the "wire" theme below. "
"text": "#fcf8f2", // Button text color
//border: "#a09e91" // Remove the first "//" if you plan on using the wire theme below
}
},
"theme": "block", // Theme options: "edgeless", "block", "classic", "wire"
"position": "bottom-right", // Positions options: "bottom-right", "bottom-left", "top", "bottom"
"static": false, // Set to "true" only if you choose "top" for the position which will push your content down instead of covering it.
"content": {
// Main message text on the cookie popup
"message": "This website uses cookies to ensure you get the best experience on our website.",
// Button text to accept
"dismiss": "Got it!",
// Button Link to your cookie policy or remove this line if you want it to go to: https://www.cookiesandyou.com/ (info site about cookies for your visitors)
"href": "https://yoursite.com/cookie-policy"
}
});
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
Prevent spam with this awesome code snippet that validates the submission by answering a simple math problem.
<!-- MATH CAPTCHA -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/math-captcha@0.1.7/index.min.js"></script>
<script>
window.CodeCrumbs.MathCaptcha({
formClassSelector: ".contact-form",
captchaLabelSelector: ".math-label",
captchaInputSelector: ".math-field",
validTargetAttribute: "valid-captcha-class",
invalidTargetAttribute: "invalid-captcha-class",
removeClassesOnEmptyInput: true
})
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
Simple code to stop or prevent the enter or return key from submitting a form.
<!-- DISABLE SUBMIT WITH ENTER KEY -->
<script>
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
This awesome code crumb will hide the submit button on any form until the email is validated in the email input field. Adds a really nice visual experience.
<!-- REVEAL SUBMIT BUTTON WHEN EMAIL IS VALIDATED -->
<script>
$(function(){
// Only show submit button on proper email
;( function( $, window, document, undefined ) {
'use strict';
var form = '.email-form',
className = 'email-active',
submit = 'input[type="submit"]',
email = 'input[type="email"]';
$( form ).each( function(){
var $form = $( this ),
$email = $form.find( email ),
$submit = $form.find( submit ),
val = '';
$email.on( 'keyup.addClassWhenEmail', function(){
val = $email.val();
$submit.toggleClass( className, val != '' && /^([\w-\.]+@([\w-]+\.)+[\w-]{2,12})?$/.test( val ) );
});
});
})( jQuery, window, document );
})
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
This snippet will generate the text dynamically for the correct weekday where ever you want in your project.
<!-- DYNAMIC WEEKDAY -->
<script>
// for each .weekday element
document.querySelectorAll('.weekday').forEach(weekday => {
// get today's day
const today = new Intl.DateTimeFormat('en', {weekday:'long'}).format(new Date());
// set it as the current text
weekday.textContent = today;
});
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
This short Javascript code crumb will allow you to dynamically set the current year for your © copyright year in your footer automatically.
<!-- Dynamic Copyright Year -->
<script>
// For using a class to select multiple elements
const yearElems = document.querySelectorAll(".year")
yearElems.forEach((yearElem) => {
yearElem.innerText = new Date().getFullYear()
})
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
This short JQuery code crumb will allow you to add make any button (your dedicated back button) return the user to the previous page using the browser history.
<!-- Browser Back Button -->
<script>
$( document ).ready(function() {
$( ".back-button__class-name" ).click(function() { // Create any class name between the " ". Then add this class name to any back button on that page.
window.history.back();
});
});
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
This snippet allows you to customize the select field for your forms replacing the default select UI and UX for an arguably nicer one.
<!-- Custom Select Field Styles -->
<style>
/************ ADD YOUR VALUES BELOW ************/
:root {
/* ----------- Colors ----------- */
--list-bg-color: white;
--list-text-color: inherit; /* Use "inherit" to take on parent text color */
--select-field-arrow-color: black; /* This is the select field arrow color */
--border-color-active: black; /* Active State */
--border-color-hover: #dcdcdd; /* Select Field could be the same as your form field border color */
--list-item-bg-color: #ededed; /* Select Field Hover/Focus State */
/* ----------- Spacing ----------- */
--select-field-padding-left: 12px; /* Match the padding values for your form fields */
--select-field-padding-right: 12px; /* Match the padding values for your form fields */
--list-padding-top-bottom: 10px; /* This is the top and bottom padding for the dropdown list */
--list-max-height: 150px; /* You can set this to "Auto" as well */
--list-item-padding-left: 18px;
--list-item-padding-right: 18px;
--list-item-min-height: 40px; /* This is the height of each list item in the dropdown */
--list-item-line-height: 40px; /* This is the height of each list item in the dropdown */
/* ^^^ Make sure both "line-height" and "min-height" are the same! ^^^ */
}
/************ END OF CUSTOM VALUES ************/
.nice-select {
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
clear: both;
padding-left: var(--select-field-padding-left);
padding-right: var(--select-field-padding-right);
position: relative;
text-align: left !important;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: nowrap;
}
.nice-select:hover {
border-color: var(--border-color-hover);
}
.nice-select:active, .nice-select.open, .nice-select:focus {
border-color: var(--border-color-active);
}
.nice-select:after {
border-bottom: 2px solid var(--select-field-arrow-color);
border-right: 2px solid var(--select-field-arrow-color);
content: '';
display: block;
height: 5px;
margin-top: -4px;
pointer-events: none;
position: absolute;
right: 12px;
top: 50%;
-webkit-transform-origin: 66% 66%;
-ms-transform-origin: 66% 66%;
transform-origin: 66% 66%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
width: 5px;
}
.nice-select.open:after {
-webkit-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.nice-select.open .list {
opacity: 1;
pointer-events: auto;
-webkit-transform: scale(1) translateY(0);
-ms-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
}
.nice-select.disabled {
border-color: #ededed;
color: #999;
pointer-events: none;
}
.nice-select.disabled:after {
border-color: #cccccc;
}
.nice-select.wide {
width: 100%;
}
.nice-select.wide .list {
left: 0 !important;
right: 0 !important;
}
.nice-select.right {
float: right;
}
.nice-select.right .list {
left: auto;
right: 0;
}
.nice-select.small {
font-size: 12px;
height: 36px;
line-height: 34px;
}
.nice-select.small:after {
height: 4px;
width: 4px;
}
.nice-select.small .option {
line-height: 34px;
min-height: 34px;
}
.nice-select .list {
background-color: var(--list-bg-color);
color: var(--list-text-color);
border-radius: 5px;
box-shadow: 0 7px 20px 0px rgba(68, 68, 68, 0.11);
border-color: 3px solid #ededed;
box-sizing: border-box;
margin-top: 4px;
opacity: 0;
overflow: hidden;
padding: var(--list-padding-top-bottom) 0px;
pointer-events: none;
position: absolute;
top: 100%;
left: 0;
overflow-y: scroll;
overflow-x: hidden;
max-height: var(--list-max-height);
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform: scale(0.75) translateY(-21px);
-ms-transform: scale(0.75) translateY(-21px);
transform: scale(0.75) translateY(-21px);
-webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
z-index: 9;
}
.nice-select .list:hover .option:not(:hover) {
background-color: transparent !important;
}
.nice-select .option {
cursor: pointer;
font-weight: 400;
line-height: var(--list-item-line-height);
list-style: none;
min-height: var(--list-item-min-height);
outline: none;
padding-left: var(--list-item-padding-left);
padding-right: var(--list-item-padding-right);
text-align: left;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.nice-select .option:first-child {
display: none;
}
span.current {
color: var(--list-text-color);
}
.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
background-color: var(--list-item-bg-color);
}
.nice-select .option.selected {
font-weight: bold;
}
.nice-select .option.disabled {
background-color: transparent;
color: #999;
cursor: default;
}
.no-csspointerevents .nice-select .list {
display: none;
}
.no-csspointerevents .nice-select.open .list {
display: block;
}
</style>
<!-- CUSTOM SELECT FIELD -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>
<script>
$(document).ready(function() {
$('select').niceSelect();
});
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
This simple yet awesome jquery plugin will allow us to copy a coupon code (or any content you want) to our clipboard to use later somewhere else.
<!-- COUPON COPY TO CLIPBOARD -->
<script>
// change SAVE20NOW to whatever coupon or text you want to be copied
$('.coupon-field').val('SAVE20NOW')
.prop('readOnly', true)
.css( 'cursor', 'text' );
// on .copy-btn click
$('.copy-btn').click(function(){
// copy the .coupon-field's value
copyToClipboard($('.coupon-field').val());
// save the .copy-btn's original text
const origText = $(this).text();
// save the .copy-btn's original font color
const origColor = $(this).css('color');
// change the .copy-btn's text
$(this).text('Copied! 🤙');
// change the .copy-btn's font color
$(this).css('color', '#1fbd41');
setTimeout(()=>{ // after a 2 sec setTimeout
$(this).text(origText); // reset text back to original
$(this).css('color', origColor); // reset font color back to original
}, 2000);
});
// define copyToClipboard function
function copyToClipboard(str){
// Create new element
const el = document.createElement('textarea');
// Set value (string to be copied)
el.value = str;
// Set non-editable to avoid focus and move outside of view
el.setAttribute('readonly', '');
el.style = {position: 'absolute', left: '-9999px'};
document.body.appendChild(el);
// Select text inside element
el.select();
// Copy text to clipboard
document.execCommand('copy');
// Remove temporary element
document.body.removeChild(el);
}
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
This simple script will allow you to easily turn a simple html structure into a nice minimal accordion. This script is just for a simple FAQ accordion that you can use for product pages etc.
<!-- Closes Simple JQuery Accordion Bodies on Published Site -->
<style>
/* Hide Accordion Body */
.acc-body {
display: none;
}
</style>
<!-- Simple JQuery Accordion -->
<script>
(function ($) {
'use strict';
// Targeting the head/button of the accordion item to run a function when it's clicked
$('.acc-head').on("click", function () {
// Looking for the next sibling within this accordion item, which is the body (for content) of the accordion to show and slide open
$(this).next().slideToggle(300); // 300 is the milliseconds on open
// Finds any body of any accordion that is NOT the one currently being clicked on to hide and slide closed
$('.acc-body').not($(this).next()).slideUp('fast');
});
}(jQuery));
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
This code will reset your Webflow form after submit without hiding the form and still showing your success message. This is great for multiple submissions for different use cases.
<!-- RESET WEBFLOW FORM AFTER SUBMIT -->
<script>
// when the DOM is ready
$(function() {
/*** START SCRIPT CONFIG ***/
// Replace with value for your form. ie. "#your-form-id" or ".your-form-class"
var FORM_SELECTOR = ".your-class";
// Do you want to hide the success message after the form is submitted?
var HIDE_SUCCESS_MESSAGE = false;
// Do you want the success message to show above the form?
var SUCCESS_MESSAGE_ABOVE_FORM = true;
/*** END SCRIPT CONFIG ***/
// define the resetCustomElement function
var resetCustomElement = function(customElement) {
// get the input element
var inputElement = customElement.nextSibling;
// if it's checked
if (inputElement.checked) {
// add the class "w--redirected-checked"
customElement.classList.add("w--redirected-checked");
} else { // if not checked
// remove the class "w--redirected-checked"
customElement.classList.remove("w--redirected-checked");
}
};
// define the resetForm function
var resetForm = function(form, successDiv) {
// Reset the inputs in the form
form.reset();
// Reset custom checkboxes
document.querySelectorAll(".w-checkbox-input--inputType-custom").forEach(resetCustomElement);
// Reset custom radio buttons
document.querySelectorAll(".w-form-formradioinput--inputType-custom").forEach(resetCustomElement);
// Show the form
form.style.display = "block";
// Hide Success Message
if (HIDE_SUCCESS_MESSAGE) {
successDiv.style.display = "none";
}
};
// get the form
var form = document.querySelector(FORM_SELECTOR);
// get the successdiv
var successDiv = form.nextSibling;
// If we are not hiding the success message AND we want the message above the form
if (!HIDE_SUCCESS_MESSAGE && SUCCESS_MESSAGE_ABOVE_FORM) {
// Move the form last so that the success message appears before it
form.parentElement.appendChild(form);
}
// Create an observer to run our resetForm function when Webflow hides our form after submission
var observer = new MutationObserver(function(mutations) {
// if the form's display is set to none
if (form.style.display === "none") {
// call the resetForm function
resetForm(form, successDiv);
}
});
// Listen for when the style attribute of our form changes
observer.observe(form, { attributes: true, attributeFilter: ["style"] });
});
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
Never spam. Just honest updates about new snippets!