Code Snippets for
Your Webflow!

A community repo with code crumbs to give your websites that extra bit of functionality! 😉
Start Searching
/
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Recent Code Crumbs

Ticker

Create a smooth continuous slider for all kinds of content such as testimonials, logos, and more. Use simple attributes to control the settings of each ticker.

New
Updated
Deprecated

Date Picker

A beautiful themeable date picker / calendar with plenty of useful options. Supports several languages, date ranges and much more.

New
Updated
Deprecated

Swap All Values on Click

One click trigger to change & swap text, urls, attributes, display properties and more.

New
Updated
Deprecated

Find, Style & Replace Matching Strings

Find all text that matches a string value, wrap them in a span element to style and/or replace the string value.

New
Updated
Deprecated

Floating Form Labels

With this crumb we can simply create what is commonly known as floating form labels. A UI effect that allows you to display form labels as placeholders initially and animate them to typical labels.

New
Updated
Deprecated

Clip Path - Slanted Edges

Shape the edge of your sections, buttons or other elements to give them more character with some CSS using the clip-path property.

New
Updated
Deprecated
<!-- 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>
Preview Code Snippet. Get all the crumbs now!

Clip Path - Slanted Edges

Shape the edge of your sections, buttons or other elements to give them more character with some CSS using the clip-path property.

Author
N/A
Published
May 24, 2023
Demo
See Demo
No Demo
Get all the Crumbs
<!-- CODECRUMBS TICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/ticker@0.1.5/index.min.js"></script>
<script>
window.CodeCrumbs.Ticker({
	tickerSelector: ".cc-ticker"
})
</script>
Preview Code Snippet. Get all the crumbs now!

Ticker

Create a smooth continuous slider for all kinds of content such as testimonials, logos, and more. Use simple attributes to control the settings of each ticker.

Author
Noah Raskin
Published
May 23, 2023
Demo
See Demo
No Demo
Get all the Crumbs
<!-- CUSTOM QUANTITY BUTTONS -->
<style>
/* remove form styles & set margin at 0 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}
</style>
With Code Comments:
<!-- CUSTOM QUANTITY BUTTONS --> 
<script>
const quantityGroupClass = "CLASS-NAME-HERE"
const quantityIncrementButtonClass = "CLASS-NAME-HERE"
const quantityDecrementButtonClass = "CLASS-NAME-HERE"
const quantityNumberFieldClass = "CLASS-NAME-HERE"

// 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', `.${quantityIncrementButtonClass}`, function(){
  // get the input field that displays the number of items
  var $input = $(this).closest(`.${quantityGroupClass}`).find(`.${quantityNumberFieldClass}`);
  // 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', `.${quantityDecrementButtonClass}`, function(){
  // get the input field that displays the number of items
  var $input = $(this).closest(`.${quantityGroupClass}`).find(`.${quantityNumberFieldClass}`);
  // 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>
Without Code Comments:
<!-- CUSTOM QUANTITY BUTTONS --> 
<script>
const quantityGroupClass = "CLASS-NAME-HERE"
const quantityIncrementButtonClass = "CLASS-NAME-HERE"
const quantityDecrementButtonClass = "CLASS-NAME-HERE"
const quantityNumberFieldClass = "CLASS-NAME-HERE"

// Increment
$(document).on('click', `.${quantityIncrementButtonClass}`, function(){
  var $input = $(this).closest(`.${quantityGroupClass}`).find(`.${quantityNumberFieldClass}`);    
  var val = parseInt($input.val(), 10);
  $input.val(val + 1);
  $input[0].dispatchEvent(new Event('change'));
});

// Decrement
$(document).on('click', `.${quantityDecrementButtonClass}`, function(){
  var $input = $(this).closest(`.${quantityGroupClass}`).find(`.${quantityNumberFieldClass}`);    
  var val = parseInt($input.val(), 10);
  $input.val(Math.max(val - 1, 1));
  $input[0].dispatchEvent(new Event('change'));
});
</script>
Preview Code Snippet. Get all the crumbs now!

Custom Quantity Buttons

Now you can add really nice custom buttons for your products quantity field. This is great so users don't have to type the amount anymore.

Author
N/A
Published
May 22, 2023
Demo
See Demo
No Demo
Get all the Crumbs
<!-- Closes Simple JQuery Accordion Bodies on Published Site --> 
<style>
/* Hide Accordion Body */
.acc-body {
	display: none;
}
</style>
<!-- Simple JQuery Accordion --> 
<script>
(function ($) {
	'use strict'; 
  	// Targeting the head/button of the accordion item to run a function when it's clicked
		$('.acc-head').on("click", function () {
    	// Looking for the next sibling within this accordion item, which is the body (for content) of the accordion to show and slide open  
			$(this).next().slideToggle(300); // 300 is the milliseconds on open
      // Finds any body of any accordion that is NOT the one currently being clicked on to hide and slide closed
			$('.acc-body').not($(this).next()).slideUp('fast');
		});
}(jQuery));
</script>
Preview Code Snippet. Get all the crumbs now!

Simple JQuery Accordion

This simple script will allow you to easily turn a simple html structure into a nice minimal accordion. This script is just for a simple FAQ accordion that you can use for product pages etc.

Author
Noah Raskin
Published
May 15, 2023
Demo
See Demo
No Demo
Get all the Crumbs

Date Picker

A beautiful themeable date picker / calendar with plenty of useful options. Supports several languages, date ranges and much more.

</ head> Code
</ body> Code
<!-- CODECRUMBS DATE PICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/index.min.js"></script>
<script>
window.CodeCrumbs.DatePicker({
  dateFieldSelector: '.date-field-class',
  format: 'M S y',
})
</script>
Author
Felice Gattuso
Published
Mar 26, 2023

How to use:

Date Picker Options:

Option Type Default Descrption
dateFieldSelector string -- class, id, or html tag
language string 'en' Read Documentation
isExpandable boolean true open/close full size picker
onlyShowAsExpanded boolean true full size picker only
format string 'd-m-y' Read Documentation
doubleView boolean false show two months at a time
disabledWeekDays string -- Read Documentation
minDate string -- Read Documentation
maxDate string -- Read Documentation
minYear string -- Read Documentation
maxYear string -- Read Documentation
startWeekOnMonday boolean false instead of Sunday
dateRange boolean false Read Documentation
minRange number -- Read Documentation
maxRange number -- Read Documentation
setDateForThisSelector string -- Read Documentation
showArrowsOnHover boolean true instead of always
overlay boolean false Show bg overlay when open
onChange callback () -- Read Documentation
onRangeSet callback () -- Read Documentation
onDatePickerOpen callback () -- Read Documentation
onDatePickerExit callback () -- Read Documentation
styles { object } -- Read Documentation


language Documentation:

Below is a list of languages. Copy the script for language you wish to use and place it underneath the Date Picker script (above the Date Picker function). Next, copy the abbreviated "value" from the second column and use that as the value for the language option in the Date Picker function.

Example:
<!-- CODECRUMBS DATE PICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-ES.min.js"></script>
<script>
window.CodeCrumbs.DatePicker({
  dateFieldSelector: '.date-field-class',
  format: 'M S y',
  language: 'es'
})
</script>
Language Value Script
Arabic 'ar'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-AR.min.js"></script>
          
Danish 'da'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-DA.min.js"></script>
          
German 'de'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-DE.min.js"></script>
          
Spanish 'es'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-ES.min.js"></script>
          
French 'fr'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-FR.min.js"></script>
          
Greek 'gr'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-GR.min.js"></script>
          
Hungarian 'hu'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-HU.min.js"></script>
          
Italian 'it'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-IT.min.js"></script>
          
Korean 'ko'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-KO.min.js"></script>
          
Dutch 'nl'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-NL.min.js"></script>
          
Polish 'pl'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-PL.min.js"></script>
          
Portuguese 'pt'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-PT.min.js"></script>
          
Russian 'ru'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-RU.min.js"></script>
          
Slovenian 'si'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-SI.min.js"></script>
          
Turkish 'tr'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-TR.min.js"></script>
          
Ukrainian 'uk'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-UK.min.js"></script>
          


format Documentation:

Below you will see values for various formatting options. The value is a string which means we can combine them any way we'd like. You can use /, - or , as an example in between the format values to display the date however you'd like.

Example: "WW the S" would display as "Monday the 5th." Play around with it!

Value Description
'y' four digit year value, e.g. 2019
'MM' full name of the month, e.g. January
'M' short name of the month, e.g. Jan
'WW' full name of the weekday, e.g. Monday
'W' short name of the weekday, e.g. Mon
'w' weekday number, as per getDay() javascript function, e.g. 1
'mm' month in numbers with leading zero, e.g. 01
'm' month in numbers without leading zero, e.g. 1
'dd' weekday in numbers with leading zero, e.g. 01
'd' weekday in numbers without leading zero, e.g. 1
'S' weekday in numbers with a suffix ending, e.g. 1st


disabledWeekDays Documentation:

If you'd like certain days of the week to not be selectable, then you can use the disabledWeekDays option. This option takes a 'string' as a value with the options listen below. You can combine these values in a string by using a comma to separate the values. For example: '0, 6' would disable Saturdays and Sundays from being selected.

Day Value
Sunday '0'
Monday '1'
Tuesday '2'
Wednesday '3'
Thursday '4'
Friday '5'
Saturday '6'


minDate and maxDate Documentation:

Use the minDate and the maxDate options if you want to make the dates selectable from or until the defined date. Dates must be provided in the standard format yyyy/mm/dd (e.g. '2019/03/28').

Example:
<!-- CODECRUMBS DATE PICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/index.min.js"></script>
<script>
window.CodeCrumbs.DatePicker({
  dateFieldSelector: '.date-field-class',
  format: 'M S y',
  minDate: '2019/01/01',
  maxDate: '2024/01/01',
})
</script>
Option Type
minDate string
maxDate string


minYear and maxYear Documentation:

Use the minYear and the maxYear options to set the maximum and minimum selectable year. The selected year must be provided in the format yyyy (e.g. '2019').

Example:
<!-- CODECRUMBS DATE PICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/index.min.js"></script>
<script>
window.CodeCrumbs.DatePicker({
  dateFieldSelector: '.date-field-class',
  format: 'M S y',
  minYear: '2019',
  maxYear: '2024',
})
</script>
Option Type Default
minYear number currentYear - 50
maxYear number currentYear + 50


dateRange Documentation:

The range option can be set up on one or two elements. When enabled, this option allows the user to select a start and an end date from the same date picker. In case of two inputs, it will automatically fill the start date on the first input and the end date on the last.

Option Type Default
dateRange boolean false


minRange and maxRange Documentation:

If set, these limit the range selection based on the value given when user starts selecting a range date. The value indicates the number of days selectable. Of course, it works only when the range option has been set as true.

Option Type
minRange number
maxRange number


setDateForThisSelector Documentation:

You can use setDateForThisSelector to set the selected date value as another input fields value. This might be useful if you want to trigger the Date Picker with a button instead of an input field for example. Then you can set a hidden input fields value with the date that has been selected. This option takes a string with the value being a class, id, attribute or html tag.

Option Type
setDateForThisSelector string


Event Callback Documentation:

We have 4 events we can listen for, which are the parameters listed below. They each take a callback function as their value. You can use the res argument to access the selected date output.

In the example below, you can see we are using the date output to show the user a message with the date that they have selected. You will also notice that we are using the format we want after res.output to display the date how we'd like.

Example:
<!-- CODECRUMBS DATE PICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/index.min.js"></script>
<script>
window.CodeCrumbs.DatePicker({
  dateFieldSelector: '.date-field-class',
  format: 'M S y',
  onChange: (res) => {
  	console.log(`You have selected ${res.output.mm} / ${res.output.dd} / ${res.output.y}`);
  }
})
</script>
Option Type arguments
onChange callback () res
onRangeSet callback () res
onDatePickerOpen callback () res
onDatePickerExit callback () res


styles Documentation:

The styles option takes an object as its value. Inside that object we have several style options we can use as shown in the table below, and you can choose to use only the ones you want. The style options take a 'string' as a value. That string can be any CSS value. For example, you can see that the default accentBackgroundColor is a gradient.

Example:
<!-- CODECRUMBS DATE PICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/index.min.js"></script>
<script>
window.CodeCrumbs.DatePicker({
  dateFieldSelector: '.date-field-class',
  format: 'M S y',
  styles: {
  	backgroundColor: '#FFFFFF',
		backgroundOverlay: 'rgba(0, 0, 0, .2)',
		primaryTextColor: '#333333',
		secondaryTextColor: '#FFFFFF',
		tertiaryTextColor: '#FD4741',
		accentBackgroundColor: 'linear-gradient(45deg, #e61e68 0%, #FD4741 100%)',
		borderRadius: '.35em',
		dropShadow: '0 0 2.5em rgba(0, 0, 0, 0.1)',
		dateRangeBackgroundColor: 'rgba(0, 0, 0, 0.05)',
  }
})
</script>
Option Type default description
backgroundColor string '#ffffff' general background color
backgroundOverlay string 'rgba(0, 0, 0, .2)' bacground overlay color
primaryTextColor string '#333333' main text color on background
secondaryTextColor string '#ffffff' text color on top of accent
tertiaryTextColor string '#fd4741' accent text color
accentBackgroundColor string 'linear-gradient(45deg, #e61e68 0%, #FD4741 100%)' accent background color
borderRadius string '.35em' the border radius size
dropShadow string '0 0 2.5em rgba(0, 0, 0, 0.1)' Date Picker drop shadow
dateRangeBackgroundColor string 'rgba(0, 0, 0, 0.05)' background color between date ranges

Scroll To Top

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

<!--Delay Page Transition-->
<script>
 $('classOrIdNameHere').click(function (e){
   e.preventDefault(); var goTo = this.getAttribute("href");
     setTimeout(function() {
       window.location = goTo;
     }, 1000);
 });
</script>

Author
Unknown
Published
Oct 13 2019

How to use:

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Things to keep in mind:

  1. This is a numbered list item.
  2. This is a numbered list item.
  3. This is a numbered list item.
  4. This is a numbered list item.

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

<!--Delay Page Transition-->
<script>
 $('classOrIdNameHere').click(function (e){
   e.preventDefault(); var goTo = this.getAttribute("href");
     setTimeout(function() {
       window.location = goTo;
     }, 1000);
 });
</script>

Author
Unknown
Published
Oct 13 2019
Text Link

<!--Delay Page Transition-->
<script>
 $('classOrIdNameHere').click(function (e){
   e.preventDefault(); var goTo = this.getAttribute("href");
     setTimeout(function() {
       window.location = goTo;
     }, 1000);
 });
</script>

Author
Unknown
Published
Oct 13 2019

<!--Delay Page Transition-->
<script>
 $('classOrIdNameHere').click(function (e){
   e.preventDefault(); var goTo = this.getAttribute("href");
     setTimeout(function() {
       window.location = goTo;
     }, 1000);
 });
</script>

Author
Unknown
Published
Oct 13 2019
Text Link

<!--Delay Page Transition-->
<script>
 $('classOrIdNameHere').click(function (e){
   e.preventDefault(); var goTo = this.getAttribute("href");
     setTimeout(function() {
       window.location = goTo;
     }, 1000);
 });
</script>

Author
Unknown
Published
Oct 13 2019

<!--Delay Page Transition-->
<script>
 $('classOrIdNameHere').click(function (e){
   e.preventDefault(); var goTo = this.getAttribute("href");
     setTimeout(function() {
       window.location = goTo;
     }, 1000);
 });
</script>

Author
Unknown
Published
Oct 13 2019

Written Code for your Projects!

Pre-written snippets of code for you to quickly copy & paste into your projects. Tutorials for each snippet are also available to make things easier and understandable.

Javascript
CSS 3
HTML 5
<!-- Ready to use Code Crumbs! --> 
<script>
	window.CodeCrumbs.CoolSnippet({
    selector: ".selector-name",
    activeClass: "active",
    callback: (res) => {
    	console.log(`Cool new snippets for ${res.output.type}!`)
    }
	})
</script>
Preview Code Block

Awesome Contributors

CodeCrumbs would not exist without these awesome contributions from some amazing people. They too believe in helping others achieve more with their designs and projects in Webflow.

Meet the Contributors

Helpful Resources

Diamond Tee

Now you can rep & show your support for the CodeCrumbs family & team with our new merch.

Now Available!
Order Today
Text Link
Built by
Built with
Note: Currently updating the library & tutorials for official launch.
CodeCrumbs - Code snippets for your Webflow! | Product Hunt Embed