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
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.

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
Cookie Notice

Cookie consent notice for your website visitors by Osano. Super easy to use & looks nice too.

New
Updated
Deprecated
Scroll to Top

Smooth accordion that automatically closes an accordion item when a new one is selected. All elements are handled directly in Webflow.

New
Updated
Deprecated
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
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
<!-- 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 src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/quantity-buttons@v0.1.4/index.min.js"></script>  

<script>
  window.CodeCrumbs.QuantityButtons({
    quantityGroupClass: 'q-group',
    quantityIncrementButtonClass: 'q-inc',
    quantityDecrementButtonClass: 'q-dec',
    quantityNumberFieldClass: 'q-num',
    disableDecrementAtOne: true,
  })
</script>
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
CodeCrumbs
Published
Nov 14, 2024
Demo
See Demo
No Demo
Get all the Crumbs
<!-- CODECRUMBS DATE PICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@latest/index.min.js"></script>
<script>
  window.CodeCrumbs.DatePicker({
    dateFieldSelector: '.date-field-class',
    format: 'M S y',
  })
</script>
Preview Code Snippet. Get all the crumbs now!

Date Picker

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

Author
Felice Gattuso
Published
Sep 29, 2024
Demo
See Demo
No Demo
Get all the Crumbs
<!-- Add the COOKIE CONSENT css -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />
<!-- Add the COOKIE CONSENT dependency script file --> 
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>

<script>
  // initialize cookieconsent & define options
  window.cookieconsent.initialise({
    "palette": {
      "popup": {
        "background": "#ebe5ca",       // Background color for popup card
        "text": "#000000"              // Main text color for message
      },
      "button": {
        "background": "#a09e91",       // Background color for button (use "transparent" if you use the "wire" theme below.     "
        "text": "#fcf8f2",             // Button text color
        //border: "#a09e91"            // Remove the first "//" if you plan on using the wire theme below
      }
    },
    "theme": "block",               // Theme options: "edgeless", "block", "classic", "wire"  
    "position": "bottom-right",        // Positions options: "bottom-right", "bottom-left", "top", "bottom" 
    "static": false,                  // Set to "true" only if you choose "top" for the position which will push your content down instead of covering it.
    "content": {
      // Main message text on the cookie popup
      "message": "This website uses cookies to ensure you get the best experience on our website.",

      // Button text to accept
      "dismiss": "Got it!",

      // Button Link to your cookie policy or remove this line if you want it to go to: https://www.cookiesandyou.com/ (info site about cookies for your visitors)
      "href": "https://yoursite.com/cookie-policy"        
    }
  });
</script>
Preview Code Snippet. Get all the crumbs now!

Cookie Notice

Cookie consent notice for your website visitors by Osano. Super easy to use & looks nice too.

Author
Osano
Published
Sep 2, 2024
Demo
See Demo
No Demo
Get all the Crumbs
<!-- SCROLL TO TOP ON CLICK -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/accordion@latest/index.min.js"></script>
<script>
  window.CodeCrumbs.ScrollTopOnClick({
    scrollTriggerSelectors: [".TRIGGER-BUTTON-CLASS"],
    windowScroll: true, // If false, will only scroll the scroll areas to top
    windowScrollToSelector: ".SCROLL-ANCHOR-CLASS", // Scroll to specific element rather than top of the page
    windowScrollOffset: 60, // Offset distance in pixels from element or window
    windowScrollDelay: 500, // Delay in milliseconds before starting scroll
    scrollAreas: [
		  {
			  selector: ".SCROLL-AREA-CLASS", // Class of element with "overflow: scroll"
			  offset: 0, // Distance in pixels from the top of the scroll area
		  },
	  ],
	  scrollAreaScrollDelay: 500, // Delay in milliseconds before starting scroll
  });
</script>
Preview Code Snippet. Get all the crumbs now!

Scroll to Top

Smooth accordion that automatically closes an accordion item when a new one is selected. All elements are handled directly in Webflow.

Author
CodeCrumbs
Published
Jul 3, 2024
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@latest/index.min.js"></script>
<script>
  window.CodeCrumbs.DatePicker({
    dateFieldSelector: '.date-field-class',
    format: 'M S y',
  })
</script>
Author
Felice Gattuso
Published
Sep 29, 2024

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
disabledDays 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'

disabledDays Documentation:

If you'd like specific days to not be selectable, then you can use the disabledDays option. This option takes a 'string' of dates as a value. You can combine these date values in a string by using a comma to separate the values. For example: '2019/12/30, 2019/12/31'.


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