CodeCrumbs Team
A community repo with code crumbs to give your websites that extra bit of functionality! 😉
Smooth accordion that automatically closes an accordion item when a new one is selected. All elements are handled directly in Webflow.
</ head> Code
</ body> Code
<!-- 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>
HTML/Embed Code
Quick Grab
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.
</ head> Code
</ body> Code
<!-- 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>
HTML/Embed Code
Quick Grab
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.
</ head> Code
</ body> Code
<!-- 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>
HTML/Embed Code
Quick Grab
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.
Shape the edge of your sections, buttons or other elements to give them more character with some CSS using the clip-path property.
</ head> Code
<!-- SNIPPET NAME HERE -->
<style>
/* clip elements to specific shapes */
/* provide 4 values for each side in the order: top, right, bottom, left to create the polygon */
/* the calc() property is used to make calculations based on viewport */
.cp-1{
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%);
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%); /* webkit browsers */
}
.cp-2{
clip-path: polygon(0 calc(0% + 10vw), 100% 0, 100% 100%, 0 100%);
-webkit-clip-path: polygon(0 calc(0% + 10vw), 100% 0, 100% 100%, 0 100%); /* webkit browsers */
}
.cp-3{
clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%,0 100%);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%,0 90%); /* webkit browsers */
}
.cp-4{
clip-path: polygon(0 0, 100% 0, 100% 90%, 25% 80%, 50% 100%, 5% 80%, 0 100%);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 75% 80%, 50% 100%, 25% 80%, 0 90%); /* webkit browsers */
}
.cp-btn {
clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
-webkit-clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%); /* webkit browsers */
}
.cp-btn:hover {
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 90%);
-webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%); /* webkit browsers */
}
</style>
</ body> Code
HTML/Embed Code
Quick Grab
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.
</ head> Code
<!-- 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>
</ body> Code
<!-- 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>
HTML/Embed Code
Quick Grab
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.
</ head> Code
</ body> Code
<!-- 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>
HTML/Embed Code
Quick Grab
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.
Disable the option for any user to highlight and select an element on your web page.
</ head> Code
<!-- DISABLES TEXT SELECT -->
<style>
/* disable user selection of an element */
.noselect {
-webkit-user-select: none; /* webkit browsers */
-khtml-user-select: none; /* Konqueror browser */
-moz-user-select: none; /* firefox browser */
-ms-user-select: none; /* internet explorer & edge */
user-select: none;
}
</style>
</ body> Code
HTML/Embed Code
Quick Grab
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.
</ head> Code
<!-- 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>
</ body> Code
With Code Comments:
<!-- 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>
HTML/Embed Code
Quick Grab
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.
</ head> Code
</ body> Code
<!-- 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>
HTML/Embed Code
// this is the url format for each button link that when clicked navigates to the tabs page
/page-name?tab=tab-name-here
Quick Grab
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.
</ head> Code
<!-- Add the COOKIE CONSENT css -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />
</ body> Code
<!-- 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>
HTML/Embed Code
Quick Grab
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.
</ head> Code
</ body> Code
<!-- 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>
HTML/Embed Code
Quick Grab
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.
</ head> Code
</ body> Code
<!-- DISABLE SUBMIT WITH ENTER KEY -->
<script>
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
</script>
HTML/Embed Code
Quick Grab
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 snippet you can change the selection / highlight colors that you see when selecting a bit of text for example.
</ head> Code
<!-- CUSTOM SELECTION / HIGHLIGHT COLOR -->
<style>
:-moz-selection { color: #000; background: #90fcdc;}
::selection { color: #000; background: #90fcdc;}
</style>
</ body> Code
HTML/Embed Code
Quick Grab
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.
</ head> Code
</ body> Code
<!-- 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>
HTML/Embed Code
Quick Grab
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.
</ head> Code
</ body> Code
<!-- 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>
HTML/Embed Code
Quick Grab
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.
</ head> Code
</ body> Code
<!-- 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>
HTML/Embed Code
Quick Grab
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.
</ head> Code
</ body> Code
<!-- 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>
HTML/Embed Code
Quick Grab
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.
</ head> Code
<!-- 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>
</ body> Code
<!-- 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>
HTML/Embed Code
Quick Grab
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 small snippet allows you to animate or add a transition to your placeholder text when an input field is focused. You can expand on the transition animations to whatever you'd like.
</ head> Code
<!-- Input Field Placeholder Animation -->
<style>
::placeholder {
transition: all 350ms ease;
}
.your-input-class:focus::placeholder {
transform: translate(20px, 0);
opacity: 0.0;
}
.your-textarea-class:focus::placeholder {
transform: translate(20px, 0);
opacity: 0.0;
}
</style>
</ body> Code
HTML/Embed Code
Quick Grab
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.
Here is an HTML table you can use in your Rich Text Elements or E-Commerce websites for products or simply to show data since Webflow doesn't natively support it yet.
</ head> Code
</ body> Code
HTML/Embed Code
<!-- HTML TABLE -->
<style>
/* ----------------------------- TABLE STYLES ----------------------------- */
:root {
/* TABLE COLORS */
--table-header-font-color: #ffffff;
--table-header-bg-color: teal;
--table-header-border-color: #ffffff;
--table-cell-font-color: #777777;
--table-cell-border-color: #d2d2d2;
--table-bg-color: #ffffff;
--table-border-color: #ffffff; /* Most Likely won't be seen */
/* TABLE DIMENSIONS */
--table-header-padding-top-bottom: 12px; /* headers top & bottom padding */
--table-header-padding-left-right: 10px; /* headers left & right padding */
--table-heading-font-size: 18px;
--table-cell-padding-top-bottom: 10px; /* Cells top & bottom padding */
--table-cell-padding-left-right: 10px; /* Cells left & right padding */
--table-cell-font-size: 14px;
--table-cell-min-width: 200px;
--table-margin-bottom: 48px;
}
/* ----------------------------- END OF TABLE STYLES ----------------------------- */
/* DON'T NEED TO WORRY ABOUT THESE BELOW!!! */
.table-wrap {
overflow-x: scroll;
width: 100%;
margin-bottom: var(--table-margin-bottom);
}
table, th, td {
border-collapse: collapse;
}
table {
width: 100%;
border: 1px solid var(--table-border-color);
background-color: var(--table-bg-color);
}
th:last-child {
border-left: 1px solid var(--table-header-bg-color);
border-top: 1px solid var(--table-header-bg-color);
border-right: 1px solid var(--table-header-bg-color);
border-bottom: 1px solid var(--table-header-bg-color);
}
th {
text-align: left;
color: var(--table-header-font-color);
background-color: var(--table-header-bg-color);
padding: var(--table-header-padding-top-bottom) var(--table-header-padding-left-right);
font-size: 16px;
border-left: 1px solid var(--table-header-bg-color);
border-top: 1px solid var(--table-header-bg-color);
border-right: 1px solid var(--table-header-border-color);
border-bottom: 1px solid var(--table-header-bg-color);
font-size: var(--table-heading-font-size);
}
td {
color: var(--table-cell-font-color);
border: 1px solid var(--table-cell-border-color);
padding: var(--table-cell-padding-top-bottom) var(--table-cell-padding-left-right);
font-size: var(--table-cell-font-size);
}
th, td {
min-width: var(--table-cell-min-width);
}
</style>
<!-- ****TABLE CONTENT**** -->
<div class="table-wrap">
<table>
<!-- heading Columns -->
<tr>
<th>Shoe Type</th>
<th>Color</th>
<th>Size</th>
<th>Details</th>
</tr>
<!-- Row 1 -->
<tr>
<td>Running</td>
<td>White/Black</td>
<td>10.5, 11, 12</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
</tr>
<!-- Row 2 -->
<tr>
<td>Skateboarding</td>
<td>Black</td>
<td>6.5, 7, 8.5, 9, 9.5, 10.5, 12</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
</tr>
<!-- Row 3 -->
<tr>
<td>Hiking</td>
<td>Tan</td>
<td>7, 8.5, 9, 10.5, 11, 12</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
</tr>
</table>
</div>
Quick Grab
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.
</ head> Code
</ body> Code
<!-- 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>
HTML/Embed Code
Quick Grab
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.
</ head> Code
<!-- Closes Simple JQuery Accordion Bodies on Published Site -->
<style>
/* Hide Accordion Body */
.acc-body {
display: none;
}
</style>
</ body> Code
<!-- 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>
HTML/Embed Code
Quick Grab
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 one line of CSS code will ignore any cursor (pointer) event such as clicks or hovers etc.This can be useful if you have a video or a gif that is not necessary for your users to interact with.
</ head> Code
<!-- Ignore Cursor Events -->
<style>
/* disable any cursor events e.g. click & hover */
.your-class-name {
pointer-events: none;
}
</style>
</ body> Code
HTML/Embed Code
Quick Grab
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 small bit of CSS will remove those unwanted shadows that show up on Safari's default input field styles. This way your forms input fields can look the way you intended them to.
</ head> Code
<!--Removes iOS form styling-->
<style>
/* Set css appearance to none & border radius to 0 */
input, textarea {
-webkit-appearance: none; /* webkit browsers */
-moz-appearance: none; /* firefox browser */
appearance: none;
border-radius: 0;
}
</style>
</ body> Code
HTML/Embed Code
Quick Grab
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.