Member Profile
Here are some tools, resources and recommendations you may find useful for your next or any future projects. Will continue to grow 😉
Profile Menu
Get started with some quick tips or find your saved favorites. 🤙
Want to suggest a snippet?
Got your suggestion!
Thanks, Name!
Thanks, Name!
Oops! Something went wrong while submitting the form.
Logout
Copy
Getting Started
Why CodeCrumbs?
We made CodeCrumbs to offer a solution to Webflow designers/devs who often rely on small snippets of code for that extra functionality to benefit personal or client projects.
How to use CodeCrumbs?
You can use CodeCrumbs as a tool. A repository of your favorite and most used code snippets whenever you are working in Webflow. You'll have access to quickly copy and paste them where ever they are needed.
- Simply start by searching any desired code solution here.
- Click the "Learn How to Use" button for detailed instructions on how to apply them.
- Click the ♥️button to save your favorite crumbs for quicker access to them.
Saved Favorites
Clip Path - Slanted Edges
</ 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
Save to Favorites
HTML/Embed Code
Learn How to Use This
Datepicker
</ 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://assets.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dd958382e006f4eb2033_chevron-left.svg');
--right-arrow: url('https://assets.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>
Save to Favorites
HTML/Embed Code
Learn How to Use This
Custom Javascript Accordion
</ head> Code
<!-- Javascript Accordion Styles -->
<style>
/* Style the According Arrow */
.accordion__item > .accordion-header > .chev-icon {
/* set transition and transform */
transition: .4s all;
transform: rotate(0deg);
}
/* set the transform of the active accordion's arrow */
.accordion__item.active > .accordion-header > .chev-icon {
transform: rotate(-180deg);
}
/* accordion item image fill color */
.accordion_item-image {
fill: #FF8E63;
}
</style>
</ body> Code
<!-- Javascript Accordion -->
<script>
// define the accordion function
var accordion = (function(){
// get the accordion class
var $accordion = $('.js-accordion');
// get the accordion header class
var $accordion_header = $accordion.find('.js-accordion-header');
// get the accordion item class
var $accordion_item = $('.js-accordion-item');
// define default settings
var settings = {
// animation speed
speed: 400,
// close all other accordion items if true
oneOpen: false
};
// set the accordion function return
return {
// pass configurable object literal
init: function($settings) { // the init function
// on accordion header click
$accordion_header.on('click', function() {
// toggle accordion
accordion.toggle($(this));
});
// update default settings with the initialization defined settings
$.extend(settings, $settings);
// ensure only one accordion is active if oneOpen is true
// if one accordion is open & accordions with the class active are more than one
if(settings.oneOpen && $('.js-accordion-item.active').length > 1) {
// remove the active class from all other accordion items except the first
$('.js-accordion-item.active:not(:first)').removeClass('active');
}
// reveal the active accordion bodies
$('.js-accordion-item.active').find('> .js-accordion-body').show();
},
toggle: function($this) { // the toggle function
// if one accordion is open & it's not the first active accordion
if(settings.oneOpen && $this[0] != $this.closest('.js-accordion').find('> .js-accordion-item.active > .js-accordion-header')[0]) {
// remove the active class & close it
$this.closest('.js-accordion')
.find('> .js-accordion-item')
.removeClass('active')
.find('.js-accordion-body')
.slideUp()
}
// show/hide the clicked accordion item by adding/removing active class & toggling slideUp/slideDown
$this.closest('.js-accordion-item').toggleClass('active');
$this.next().stop().slideToggle(settings.speed);
}
}
})();
// when the DOM is ready
$(document).ready(function(){
// initialize the accordion its respective settings
accordion.init({ speed: 300, oneOpen: true });
});
</script>
Save to Favorites
HTML/Embed Code
Learn How to Use This
Disable User Select
</ 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
Save to Favorites
HTML/Embed Code
Learn How to Use This
Custom Quantity Buttons
</ 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;
margin: 0;
}
</style>
</ body> Code
<!-- CUSTOM QUANTITY BUTTONS -->
<script>
// attach click event to document that then delegates to the '+' increase button
// this ensures the click event works on dynamically added '+' buttons
$(document).on('click', '.q-inc', function(){
// get the input field that displays the number of items
var $input = $(this).closest('.QUANTITY-GROUP-CLASS').find('.QUANTITY-NUMBER-FIELD-CLASS');
// get its current value
var val = parseInt($input.val(), 10);
// add one to the current value
$input.val(val + 1);
// dispatch the 'change' event on the input field to update the cart's total items value
$input[0].dispatchEvent(new Event('change'));
});
// attach click event to document that then delegates to the '-' decrease button
// this ensures the click event works on dynamically added '-' buttons
$(document).on('click', '.q-dec', function(){
// get the input field that displays the number of items
var $input = $(this).closest('.QUANTITY-GROUP-CLASS').find('.QUANTITY-NUMBER-FIELD-CLASS');
// get its current value
var val = parseInt($input.val(), 10);
// minus one from the current value while it's more than one
// the value never goes below 1
$input.val(Math.max(val - 1, 1));
// dispatch the 'change' event on the input field to update the cart's total items value
$input[0].dispatchEvent(new Event('change'));
});
</script>
Save to Favorites
HTML/Embed Code
Learn How to Use This
Open Specific Tabs from other Pages
</ 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>
Save to Favorites
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
Learn How to Use This
Cookie Notice
</ 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>
Save to Favorites
HTML/Embed Code
Learn How to Use This
Math Captcha for Forms
</ head> Code
</ body> Code
<!-- MATH CAPTCHA -->
<script>
// Contact Form Captcha
(function($) {
"use strict";
$.fn.captcha = function(param) {
// DEFAULT VARIABLES
var params = $.extend({
idCaptchaText: 'captchaText', // The ID for the captcha text which is the label as the math question. Default is 'captchaText'.
idCaptchaInput: 'captchaField', // The ID for the captcha input. Default is 'captchaInput'.
class: '' // Class name for the submit button toggle. Default is ''.
}, param);
// Find and disable the submit button
var submit = $(this).find('input[type=submit]');
submit.attr('disabled', 'disabled');
// Insert captcha text and input before the submit button with the given ID's
$('');
$('');
// Select text and input elements to fill
var label = this.find('#' + params.idCaptchaText);
var input = this.find('#' + params.idCaptchaInput);
// Generate random numbers and the sum of them
var rndmNr1 = Math.floor(Math.random() * 10),
rndmNr2 = Math.floor(Math.random() * 10),
totalNr = rndmNr1 + rndmNr2;
// Print the numbers to screen
//$(label).text(rndmNr1 + ' + ' + rndmNr2 + ' =');
$(input).attr("placeholder", rndmNr1 + ' + ' + rndmNr2 + ' =');
// Check the input value, enable it if the sum is correct
$(input).keyup(function () {
if ($(this).val() == totalNr)
submit.removeAttr('disabled').addClass(params.class);
else
submit.attr('disabled', 'disabled').removeClass(params.class);
});
// Don't breake jQuery chain!
return this;
}
})(jQuery);
//Run the Code
$(document).ready(function () {
$('.form-class-name').captcha();
});
</script>
Save to Favorites
HTML/Embed Code
Learn How to Use This
Apple Frost Blur
</ head> Code
<!-- APPLE FROST BLUR -->
<style>
.frost-blur {
-webkit-backdrop-filter: blur(40px);
backdrop-filter: blur(40px);
}
</style>
</ body> Code
Save to Favorites
HTML/Embed Code
Learn How to Use This
Disable Form Submit with the "Enter" Key
</ 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>
Save to Favorites
HTML/Embed Code
Learn How to Use This
Custom Selection & Highlight Color
</ head> Code
<!-- CUSTOM SELECTION / HIGHLIGHT COLOR -->
<style>
:-moz-selection { color: #000; background: #90fcdc;}
::selection { color: #000; background: #90fcdc;}
</style>
</ body> Code
Save to Favorites
HTML/Embed Code
Learn How to Use This
Reveal Submit Button When Email is Validated
</ 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>
Save to Favorites
HTML/Embed Code
Learn How to Use This
Dynamic Weekday
</ 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>
Save to Favorites
HTML/Embed Code
Learn How to Use This
Dynamic Copyright Year
</ head> Code
</ body> Code
<!-- Dynamic Copyright Year -->
<script>
// get current year
const year = new Date().getFullYear();
// set .year's text to current year
$('.year').text(year);
</script>
Save to Favorites
HTML/Embed Code
Learn How to Use This
Browser Back Button
</ 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>
Save to Favorites
HTML/Embed Code
Learn How to Use This
Custom Select Field
</ 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>
Save to Favorites
HTML/Embed Code
Learn How to Use This
Custom Placeholder Animation
</ 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
Save to Favorites
HTML/Embed Code
Learn How to Use This
HTML Tables
</ head> Code
</ body> Code
Save to Favorites
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>
Learn How to Use This
Coupon Copy-to-Clipboard
</ 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>
Save to Favorites
HTML/Embed Code
Learn How to Use This
Simple JQuery Accordion
</ 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>
Save to Favorites
HTML/Embed Code
Learn How to Use This
Ignore Pointer (Cursor) Events
</ head> Code
<!-- Ignore Cursor Events -->
<style>
/* disable any cursor events e.g. click & hover */
.your-class-name {
pointer-events: none;
}
</style>
</ body> Code
Save to Favorites
HTML/Embed Code
Learn How to Use This
Remove iOS Form Styles
</ 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
Save to Favorites
HTML/Embed Code
Learn How to Use This
Reset Webflow Form
</ head> Code
</ body> Code
<!-- 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>
Save to Favorites
HTML/Embed Code
Learn How to Use This
Account Details
Click the button below to view details about your account such as membership type etc. If you have any questions about your membership please contact us via Slack.
View Account Details
Clip Path - Slanted Edges
</ 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
Learn How to Use This
Remove from Favorites
Datepicker
</ 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://assets.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dd958382e006f4eb2033_chevron-left.svg');
--right-arrow: url('https://assets.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>
Learn How to Use This
Remove from Favorites
Custom Javascript Accordion
</ head> Code
<!-- Javascript Accordion Styles -->
<style>
/* Style the According Arrow */
.accordion__item > .accordion-header > .chev-icon {
/* set transition and transform */
transition: .4s all;
transform: rotate(0deg);
}
/* set the transform of the active accordion's arrow */
.accordion__item.active > .accordion-header > .chev-icon {
transform: rotate(-180deg);
}
/* accordion item image fill color */
.accordion_item-image {
fill: #FF8E63;
}
</style>
</ body> Code
<!-- Javascript Accordion -->
<script>
// define the accordion function
var accordion = (function(){
// get the accordion class
var $accordion = $('.js-accordion');
// get the accordion header class
var $accordion_header = $accordion.find('.js-accordion-header');
// get the accordion item class
var $accordion_item = $('.js-accordion-item');
// define default settings
var settings = {
// animation speed
speed: 400,
// close all other accordion items if true
oneOpen: false
};
// set the accordion function return
return {
// pass configurable object literal
init: function($settings) { // the init function
// on accordion header click
$accordion_header.on('click', function() {
// toggle accordion
accordion.toggle($(this));
});
// update default settings with the initialization defined settings
$.extend(settings, $settings);
// ensure only one accordion is active if oneOpen is true
// if one accordion is open & accordions with the class active are more than one
if(settings.oneOpen && $('.js-accordion-item.active').length > 1) {
// remove the active class from all other accordion items except the first
$('.js-accordion-item.active:not(:first)').removeClass('active');
}
// reveal the active accordion bodies
$('.js-accordion-item.active').find('> .js-accordion-body').show();
},
toggle: function($this) { // the toggle function
// if one accordion is open & it's not the first active accordion
if(settings.oneOpen && $this[0] != $this.closest('.js-accordion').find('> .js-accordion-item.active > .js-accordion-header')[0]) {
// remove the active class & close it
$this.closest('.js-accordion')
.find('> .js-accordion-item')
.removeClass('active')
.find('.js-accordion-body')
.slideUp()
}
// show/hide the clicked accordion item by adding/removing active class & toggling slideUp/slideDown
$this.closest('.js-accordion-item').toggleClass('active');
$this.next().stop().slideToggle(settings.speed);
}
}
})();
// when the DOM is ready
$(document).ready(function(){
// initialize the accordion its respective settings
accordion.init({ speed: 300, oneOpen: true });
});
</script>
Learn How to Use This
Remove from Favorites
Disable User Select
</ 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
Learn How to Use This
Remove from Favorites
Custom Quantity Buttons
</ 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;
margin: 0;
}
</style>
</ body> Code
<!-- CUSTOM QUANTITY BUTTONS -->
<script>
// attach click event to document that then delegates to the '+' increase button
// this ensures the click event works on dynamically added '+' buttons
$(document).on('click', '.q-inc', function(){
// get the input field that displays the number of items
var $input = $(this).closest('.QUANTITY-GROUP-CLASS').find('.QUANTITY-NUMBER-FIELD-CLASS');
// get its current value
var val = parseInt($input.val(), 10);
// add one to the current value
$input.val(val + 1);
// dispatch the 'change' event on the input field to update the cart's total items value
$input[0].dispatchEvent(new Event('change'));
});
// attach click event to document that then delegates to the '-' decrease button
// this ensures the click event works on dynamically added '-' buttons
$(document).on('click', '.q-dec', function(){
// get the input field that displays the number of items
var $input = $(this).closest('.QUANTITY-GROUP-CLASS').find('.QUANTITY-NUMBER-FIELD-CLASS');
// get its current value
var val = parseInt($input.val(), 10);
// minus one from the current value while it's more than one
// the value never goes below 1
$input.val(Math.max(val - 1, 1));
// dispatch the 'change' event on the input field to update the cart's total items value
$input[0].dispatchEvent(new Event('change'));
});
</script>
Learn How to Use This
Remove from Favorites
Open Specific Tabs from other Pages
</ 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>
Learn How to Use This
Remove from Favorites
Cookie Notice
</ 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>
Learn How to Use This
Remove from Favorites
Math Captcha for Forms
</ head> Code
</ body> Code
<!-- MATH CAPTCHA -->
<script>
// Contact Form Captcha
(function($) {
"use strict";
$.fn.captcha = function(param) {
// DEFAULT VARIABLES
var params = $.extend({
idCaptchaText: 'captchaText', // The ID for the captcha text which is the label as the math question. Default is 'captchaText'.
idCaptchaInput: 'captchaField', // The ID for the captcha input. Default is 'captchaInput'.
class: '' // Class name for the submit button toggle. Default is ''.
}, param);
// Find and disable the submit button
var submit = $(this).find('input[type=submit]');
submit.attr('disabled', 'disabled');
// Insert captcha text and input before the submit button with the given ID's
$('');
$('');
// Select text and input elements to fill
var label = this.find('#' + params.idCaptchaText);
var input = this.find('#' + params.idCaptchaInput);
// Generate random numbers and the sum of them
var rndmNr1 = Math.floor(Math.random() * 10),
rndmNr2 = Math.floor(Math.random() * 10),
totalNr = rndmNr1 + rndmNr2;
// Print the numbers to screen
//$(label).text(rndmNr1 + ' + ' + rndmNr2 + ' =');
$(input).attr("placeholder", rndmNr1 + ' + ' + rndmNr2 + ' =');
// Check the input value, enable it if the sum is correct
$(input).keyup(function () {
if ($(this).val() == totalNr)
submit.removeAttr('disabled').addClass(params.class);
else
submit.attr('disabled', 'disabled').removeClass(params.class);
});
// Don't breake jQuery chain!
return this;
}
})(jQuery);
//Run the Code
$(document).ready(function () {
$('.form-class-name').captcha();
});
</script>
Learn How to Use This
Remove from Favorites
Apple Frost Blur
</ head> Code
<!-- APPLE FROST BLUR -->
<style>
.frost-blur {
-webkit-backdrop-filter: blur(40px);
backdrop-filter: blur(40px);
}
</style>
</ body> Code
Learn How to Use This
Remove from Favorites
Disable Form Submit with the "Enter" Key
</ 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>
Learn How to Use This
Remove from Favorites
Custom Selection & Highlight Color
</ head> Code
<!-- CUSTOM SELECTION / HIGHLIGHT COLOR -->
<style>
:-moz-selection { color: #000; background: #90fcdc;}
::selection { color: #000; background: #90fcdc;}
</style>
</ body> Code
Learn How to Use This
Remove from Favorites
Reveal Submit Button When Email is Validated
</ 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>
Learn How to Use This
Remove from Favorites
Dynamic Weekday
</ 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>
Learn How to Use This
Remove from Favorites
Dynamic Copyright Year
</ head> Code
</ body> Code
<!-- Dynamic Copyright Year -->
<script>
// get current year
const year = new Date().getFullYear();
// set .year's text to current year
$('.year').text(year);
</script>
Learn How to Use This
Remove from Favorites
Browser Back Button
</ 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>
Learn How to Use This
Remove from Favorites
Custom Select Field
</ 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>
Learn How to Use This
Remove from Favorites
Custom Placeholder Animation
</ 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
Learn How to Use This
Remove from Favorites
HTML Tables
Coupon Copy-to-Clipboard
</ 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>
Learn How to Use This
Remove from Favorites
Simple JQuery Accordion
</ 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>
Learn How to Use This
Remove from Favorites
Ignore Pointer (Cursor) Events
</ head> Code
<!-- Ignore Cursor Events -->
<style>
/* disable any cursor events e.g. click & hover */
.your-class-name {
pointer-events: none;
}
</style>
</ body> Code
Learn How to Use This
Remove from Favorites
Remove iOS Form Styles
</ 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
Learn How to Use This
Remove from Favorites
Reset Webflow Form
</ head> Code
</ body> Code
<!-- 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>
Learn How to Use This
Remove from Favorites
Reset Webflow Form
</ head> Code
</ body> Code
<!-- 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>
Learn How to Use This
Remove from Favorites
Simple JQuery Accordion
</ 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>
Learn How to Use This
Remove from Favorites
Coupon Copy-to-Clipboard
</ 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>
Learn How to Use This
Remove from Favorites
Custom Select Field
</ 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>
Learn How to Use This
Remove from Favorites
Browser Back Button
</ 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>
Learn How to Use This
Remove from Favorites
Dynamic Copyright Year
</ head> Code
</ body> Code
<!-- Dynamic Copyright Year -->
<script>
// get current year
const year = new Date().getFullYear();
// set .year's text to current year
$('.year').text(year);
</script>
Learn How to Use This
Remove from Favorites
Dynamic Weekday
</ 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>
Learn How to Use This
Remove from Favorites
Reveal Submit Button When Email is Validated
</ 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>
Learn How to Use This
Remove from Favorites
Disable Form Submit with the "Enter" Key
</ 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>
Learn How to Use This
Remove from Favorites
Math Captcha for Forms
</ head> Code
</ body> Code
<!-- MATH CAPTCHA -->
<script>
// Contact Form Captcha
(function($) {
"use strict";
$.fn.captcha = function(param) {
// DEFAULT VARIABLES
var params = $.extend({
idCaptchaText: 'captchaText', // The ID for the captcha text which is the label as the math question. Default is 'captchaText'.
idCaptchaInput: 'captchaField', // The ID for the captcha input. Default is 'captchaInput'.
class: '' // Class name for the submit button toggle. Default is ''.
}, param);
// Find and disable the submit button
var submit = $(this).find('input[type=submit]');
submit.attr('disabled', 'disabled');
// Insert captcha text and input before the submit button with the given ID's
$('');
$('');
// Select text and input elements to fill
var label = this.find('#' + params.idCaptchaText);
var input = this.find('#' + params.idCaptchaInput);
// Generate random numbers and the sum of them
var rndmNr1 = Math.floor(Math.random() * 10),
rndmNr2 = Math.floor(Math.random() * 10),
totalNr = rndmNr1 + rndmNr2;
// Print the numbers to screen
//$(label).text(rndmNr1 + ' + ' + rndmNr2 + ' =');
$(input).attr("placeholder", rndmNr1 + ' + ' + rndmNr2 + ' =');
// Check the input value, enable it if the sum is correct
$(input).keyup(function () {
if ($(this).val() == totalNr)
submit.removeAttr('disabled').addClass(params.class);
else
submit.attr('disabled', 'disabled').removeClass(params.class);
});
// Don't breake jQuery chain!
return this;
}
})(jQuery);
//Run the Code
$(document).ready(function () {
$('.form-class-name').captcha();
});
</script>
Learn How to Use This
Remove from Favorites
Cookie Notice
</ 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>
Learn How to Use This
Remove from Favorites
Open Specific Tabs from other Pages
</ 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>
Learn How to Use This
Remove from Favorites
Custom Quantity Buttons
</ 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;
margin: 0;
}
</style>
</ body> Code
<!-- CUSTOM QUANTITY BUTTONS -->
<script>
// attach click event to document that then delegates to the '+' increase button
// this ensures the click event works on dynamically added '+' buttons
$(document).on('click', '.q-inc', function(){
// get the input field that displays the number of items
var $input = $(this).closest('.QUANTITY-GROUP-CLASS').find('.QUANTITY-NUMBER-FIELD-CLASS');
// get its current value
var val = parseInt($input.val(), 10);
// add one to the current value
$input.val(val + 1);
// dispatch the 'change' event on the input field to update the cart's total items value
$input[0].dispatchEvent(new Event('change'));
});
// attach click event to document that then delegates to the '-' decrease button
// this ensures the click event works on dynamically added '-' buttons
$(document).on('click', '.q-dec', function(){
// get the input field that displays the number of items
var $input = $(this).closest('.QUANTITY-GROUP-CLASS').find('.QUANTITY-NUMBER-FIELD-CLASS');
// get its current value
var val = parseInt($input.val(), 10);
// minus one from the current value while it's more than one
// the value never goes below 1
$input.val(Math.max(val - 1, 1));
// dispatch the 'change' event on the input field to update the cart's total items value
$input[0].dispatchEvent(new Event('change'));
});
</script>
Learn How to Use This
Remove from Favorites
Custom Javascript Accordion
</ head> Code
<!-- Javascript Accordion Styles -->
<style>
/* Style the According Arrow */
.accordion__item > .accordion-header > .chev-icon {
/* set transition and transform */
transition: .4s all;
transform: rotate(0deg);
}
/* set the transform of the active accordion's arrow */
.accordion__item.active > .accordion-header > .chev-icon {
transform: rotate(-180deg);
}
/* accordion item image fill color */
.accordion_item-image {
fill: #FF8E63;
}
</style>
</ body> Code
<!-- Javascript Accordion -->
<script>
// define the accordion function
var accordion = (function(){
// get the accordion class
var $accordion = $('.js-accordion');
// get the accordion header class
var $accordion_header = $accordion.find('.js-accordion-header');
// get the accordion item class
var $accordion_item = $('.js-accordion-item');
// define default settings
var settings = {
// animation speed
speed: 400,
// close all other accordion items if true
oneOpen: false
};
// set the accordion function return
return {
// pass configurable object literal
init: function($settings) { // the init function
// on accordion header click
$accordion_header.on('click', function() {
// toggle accordion
accordion.toggle($(this));
});
// update default settings with the initialization defined settings
$.extend(settings, $settings);
// ensure only one accordion is active if oneOpen is true
// if one accordion is open & accordions with the class active are more than one
if(settings.oneOpen && $('.js-accordion-item.active').length > 1) {
// remove the active class from all other accordion items except the first
$('.js-accordion-item.active:not(:first)').removeClass('active');
}
// reveal the active accordion bodies
$('.js-accordion-item.active').find('> .js-accordion-body').show();
},
toggle: function($this) { // the toggle function
// if one accordion is open & it's not the first active accordion
if(settings.oneOpen && $this[0] != $this.closest('.js-accordion').find('> .js-accordion-item.active > .js-accordion-header')[0]) {
// remove the active class & close it
$this.closest('.js-accordion')
.find('> .js-accordion-item')
.removeClass('active')
.find('.js-accordion-body')
.slideUp()
}
// show/hide the clicked accordion item by adding/removing active class & toggling slideUp/slideDown
$this.closest('.js-accordion-item').toggleClass('active');
$this.next().stop().slideToggle(settings.speed);
}
}
})();
// when the DOM is ready
$(document).ready(function(){
// initialize the accordion its respective settings
accordion.init({ speed: 300, oneOpen: true });
});
</script>
Learn How to Use This
Remove from Favorites
Datepicker
</ 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://assets.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dd958382e006f4eb2033_chevron-left.svg');
--right-arrow: url('https://assets.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>
Learn How to Use This
Remove from Favorites
Custom Quantity Buttons
</ 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;
margin: 0;
}
</style>
</ body> Code
<!-- CUSTOM QUANTITY BUTTONS -->
<script>
// attach click event to document that then delegates to the '+' increase button
// this ensures the click event works on dynamically added '+' buttons
$(document).on('click', '.q-inc', function(){
// get the input field that displays the number of items
var $input = $(this).closest('.QUANTITY-GROUP-CLASS').find('.QUANTITY-NUMBER-FIELD-CLASS');
// get its current value
var val = parseInt($input.val(), 10);
// add one to the current value
$input.val(val + 1);
// dispatch the 'change' event on the input field to update the cart's total items value
$input[0].dispatchEvent(new Event('change'));
});
// attach click event to document that then delegates to the '-' decrease button
// this ensures the click event works on dynamically added '-' buttons
$(document).on('click', '.q-dec', function(){
// get the input field that displays the number of items
var $input = $(this).closest('.QUANTITY-GROUP-CLASS').find('.QUANTITY-NUMBER-FIELD-CLASS');
// get its current value
var val = parseInt($input.val(), 10);
// minus one from the current value while it's more than one
// the value never goes below 1
$input.val(Math.max(val - 1, 1));
// dispatch the 'change' event on the input field to update the cart's total items value
$input[0].dispatchEvent(new Event('change'));
});
</script>
Learn How to Use This
Remove from Favorites
Remove iOS Form Styles
</ 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
Learn How to Use This
Remove from Favorites
Ignore Pointer (Cursor) Events
</ head> Code
<!-- Ignore Cursor Events -->
<style>
/* disable any cursor events e.g. click & hover */
.your-class-name {
pointer-events: none;
}
</style>
</ body> Code
Learn How to Use This
Remove from Favorites
HTML Tables
Custom Placeholder Animation
</ 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
Learn How to Use This
Remove from Favorites
Custom Select Field
</ 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>
Learn How to Use This
Remove from Favorites
Dynamic Copyright Year
</ head> Code
</ body> Code
<!-- Dynamic Copyright Year -->
<script>
// get current year
const year = new Date().getFullYear();
// set .year's text to current year
$('.year').text(year);
</script>
Learn How to Use This
Remove from Favorites
Dynamic Weekday
</ 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>
Learn How to Use This
Remove from Favorites
Reveal Submit Button When Email is Validated
</ 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>
Learn How to Use This
Remove from Favorites
Custom Selection & Highlight Color
</ head> Code
<!-- CUSTOM SELECTION / HIGHLIGHT COLOR -->
<style>
:-moz-selection { color: #000; background: #90fcdc;}
::selection { color: #000; background: #90fcdc;}
</style>
</ body> Code
Learn How to Use This
Remove from Favorites
Apple Frost Blur
</ head> Code
<!-- APPLE FROST BLUR -->
<style>
.frost-blur {
-webkit-backdrop-filter: blur(40px);
backdrop-filter: blur(40px);
}
</style>
</ body> Code
Learn How to Use This
Remove from Favorites
Disable User Select
</ 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
Learn How to Use This
Remove from Favorites
Custom Javascript Accordion
</ head> Code
<!-- Javascript Accordion Styles -->
<style>
/* Style the According Arrow */
.accordion__item > .accordion-header > .chev-icon {
/* set transition and transform */
transition: .4s all;
transform: rotate(0deg);
}
/* set the transform of the active accordion's arrow */
.accordion__item.active > .accordion-header > .chev-icon {
transform: rotate(-180deg);
}
/* accordion item image fill color */
.accordion_item-image {
fill: #FF8E63;
}
</style>
</ body> Code
<!-- Javascript Accordion -->
<script>
// define the accordion function
var accordion = (function(){
// get the accordion class
var $accordion = $('.js-accordion');
// get the accordion header class
var $accordion_header = $accordion.find('.js-accordion-header');
// get the accordion item class
var $accordion_item = $('.js-accordion-item');
// define default settings
var settings = {
// animation speed
speed: 400,
// close all other accordion items if true
oneOpen: false
};
// set the accordion function return
return {
// pass configurable object literal
init: function($settings) { // the init function
// on accordion header click
$accordion_header.on('click', function() {
// toggle accordion
accordion.toggle($(this));
});
// update default settings with the initialization defined settings
$.extend(settings, $settings);
// ensure only one accordion is active if oneOpen is true
// if one accordion is open & accordions with the class active are more than one
if(settings.oneOpen && $('.js-accordion-item.active').length > 1) {
// remove the active class from all other accordion items except the first
$('.js-accordion-item.active:not(:first)').removeClass('active');
}
// reveal the active accordion bodies
$('.js-accordion-item.active').find('> .js-accordion-body').show();
},
toggle: function($this) { // the toggle function
// if one accordion is open & it's not the first active accordion
if(settings.oneOpen && $this[0] != $this.closest('.js-accordion').find('> .js-accordion-item.active > .js-accordion-header')[0]) {
// remove the active class & close it
$this.closest('.js-accordion')
.find('> .js-accordion-item')
.removeClass('active')
.find('.js-accordion-body')
.slideUp()
}
// show/hide the clicked accordion item by adding/removing active class & toggling slideUp/slideDown
$this.closest('.js-accordion-item').toggleClass('active');
$this.next().stop().slideToggle(settings.speed);
}
}
})();
// when the DOM is ready
$(document).ready(function(){
// initialize the accordion its respective settings
accordion.init({ speed: 300, oneOpen: true });
});
</script>
Learn How to Use This
Remove from Favorites
Datepicker
</ 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://assets.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dd958382e006f4eb2033_chevron-left.svg');
--right-arrow: url('https://assets.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>
Learn How to Use This
Remove from Favorites
Clip Path - Slanted Edges
</ 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
Learn How to Use This
Remove from Favorites
Want to contribute to the community?
Tell us what code you're working with. We would love to see it and possibly add it to the library.