Javascript

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

Quick Grab

Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.

Save to Favorites

Learn How to Use This

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

Quick Grab

Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.

Save to Favorites

Learn How to Use This

<!-- SWAP VALUES ON CLICK --> 
<script>
  function setupSwitcher({
    /* Click Trigger Class */
    swapTrigger = "switcher",

    /* Essentials */
    swapText = "swap-text",
    swapDisplay = "swap-display",
    swapClass = "swap-class",
    swapUrl = "swap-url",

    /* Toggle and Add Attributes */
    swapToggleAttribute = "swap-toggle-attribute",
    swapAddAttribute = "swap-add-attribute",
    swapAddAttributeValue = "swap-add-attribute-value",

    /* Replace Attribute Value */
    swapAttributeTarget = "swap-attribute-target",
    swapTargetValue = "swap-target-value"

  } = {}) {
    const swapAll = () => {
      // SWAP TEXT
      document.querySelectorAll(`[${swapText}]`).forEach((swapDomElement) => {
        const nextValue = swapDomElement.getAttribute(swapText);
        const currentValue = swapDomElement.innerText;

        swapDomElement.innerText = nextValue;
        swapDomElement.setAttribute(swapText, currentValue);
      });

      // SWAP DISPLAY
      document.querySelectorAll(`[${swapDisplay}]`).forEach((swapDomElement) => {
        const nextValue = swapDomElement.getAttribute(swapDisplay);
        const currentValue = swapDomElement.style.display;

        swapDomElement.style.display = nextValue;
        swapDomElement.setAttribute(swapDisplay, currentValue);
      });

      // SWAP CLASS
      document.querySelectorAll(`[${swapClass}]`).forEach((swapDomElement) => {
        const nextValue = swapDomElement.getAttribute(swapClass);
        swapDomElement.classList.toggle(nextValue);
      });

      // SWAP URL
      document.querySelectorAll(`[${swapUrl}]`).forEach((swapDomElement) => {
        const nextValue = swapDomElement.getAttribute(swapUrl);
        const currentValue = swapDomElement.href;

        swapDomElement.href = nextValue;
        swapDomElement.setAttribute(swapUrl, currentValue);
      });

      // TOGGLE ATTRIBUTE
      document.querySelectorAll(`[${swapToggleAttribute}]`).forEach((swapDomElement) => {
        const toggleAttribute = swapDomElement.getAttribute(
          swapToggleAttribute
        );
        swapDomElement.toggleAttribute(toggleAttribute);
      });

      // ADD ATTRIBUTE
      document.querySelectorAll(`[${swapAddAttribute}]`).forEach((swapDomElement) => {
        const newAttribute = swapDomElement.getAttribute(swapAddAttribute);
        const newAttributeValue = swapDomElement.getAttribute(
          swapAddAttributeValue
        );

        if (swapDomElement.hasAttribute(newAttribute)) {
          swapDomElement.removeAttribute(newAttribute);
        } else {
          swapDomElement.setAttribute(newAttribute, newAttributeValue);
        }
      });

      // REPLACE ATTRIBUTE VALUE
      document.querySelectorAll(`[${swapAttributeTarget}]`).forEach((swapDomElement) => {
        const attributeTarget = swapDomElement.getAttribute(
          swapAttributeTarget
        );
        let attributeValue = swapDomElement.getAttribute(attributeTarget);
        let newValue = swapDomElement.getAttribute(swapTargetValue);

        swapDomElement.setAttribute(attributeTarget, newValue);
        swapDomElement.setAttribute(swapTargetValue, attributeValue);
      });
    };

    document.querySelectorAll(`.${swapTrigger}`).forEach((switcherDomElement) => {
      switcherDomElement.addEventListener("click", swapAll);
    });
  }

  setupSwitcher();
</script>

Quick Grab

Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.

Save to Favorites

Learn How to Use This

<!-- FIND, STYLE AND REPLACE MATCHING STRINGS --> 
<script>
const targetStrings = [
  {
  	selector: 'h2',
    targetString: 'String 1',
    replacementString: 'String 1 replacement',
    appendedClassName: 'class-name-here',
  },
  {
  	selector: 'p',
    targetString: 'String 2',
    replacementString: 'String 1 replacement',
    appendedClassName: 'class-name-here',
  },
]

function wrapAndReplaceMatches(selector, newClass, wordTarget, replacement) {
  const pattern = new RegExp(`\\b(${wordTarget})\\b`, 'gi');
  const hasClassAttr = newClass ? `class=${newClass}` : ''
  const wrapAndReplace = !replacement
  ? `<span ${hasClassAttr}>$1</span>`
  : `<span ${hasClassAttr}>${replacement}</span>`;
  Array.from(document.querySelectorAll(selector)).forEach((element) => {
		element.innerHTML = element.innerHTML.replace(pattern, wrapAndReplace);
	});
}

document.addEventListener('DOMContentLoaded', () => {
  targetStrings.forEach(({
  	selector,
    targetString,
    replacementString,
    appendedClassName
  }) => {
    wrapAndReplaceMatches(selector, appendedClassName, targetString, replacementString)
  })
});
</script>

Quick Grab

Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.

Save to Favorites

Learn How to Use This

<!-- DATE PICKER STYLES -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
<style>
:root {
	/* Color Settings */
  --accent-color: #7262e6;							/* Controls BG Color for Selected Date */
  --secondary-accent-color: #9287e2;		/* Controls Text Color for Current Date */
	--main-bg-color: #1f2023;							/* Controls BG Color of the Calendar */
  --secondary-bg-color: #27292d;				/* Controls BG for Calendar Dates */
  --heading-color: #ffffff;							/* Controls Main Heading Color */
  --font-color: #c1c9d2;								/* Controls Main Font Color */
  --accent-top-text-color: #ffffff;			/* Controls Font Color on top of Accent Color */
  --disabled-font-color: #999999;				/* Controls Disabled Font Color */
  --shadow-color: 0 5px 15px -5px rgba(0,0,0,.5);
  
  /* Size & Spacing Settings */
  --border-radius: 4px;									/* Controls Large Border Radius (Calendar Itself) */
  --border-radius-sm: 2px;							/* Controls Small Border Radius (Calendar Dates) */
  --font-size: 16px;										/* Controls Font Size */
  --table-gap: 2px;											/* High number is not recommended */
  
  /* Arrow Icons */
  --left-arrow: url('https://cdn.prod.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dd958382e006f4eb2033_chevron-left.svg');
  --right-arrow: url('https://cdn.prod.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dbca268421b03c01abf6_chevron-right.svg');   
  --arrow-bg-color: transparent;
}



/* Picker Element Itself */
.pika-single {
  color: var(--heading-color);
  background: var(--main-bg-color);
  border: none !important;
  border-bottom-color: none !important;
  border-radius: var(--border-radius);
  font-family: inherit !important;
}

/* Datepicker Shadow */
.pika-single.is-bound {
  box-shadow: var(--shadow-color) !important;
}

/* Month & Year Displayed in Middle */
.pika-label {
  color: var(--heading-color);
  background-color: transparent !important;
}

.pika-prev, .is-rtl .pika-next {
	background-image: var(--left-arrow);
}
.pika-next, .is-rtl .pika-prev {
  background-image: var(--right-arrow);
}

/* This is the table element which includes the days labels and the days in the month */
.pika-table {
	border-spacing: var(--table-gap) !important;
  border-collapse: separate;
  font-size: var(--font-size) !important;
}

/* Days of the Week Labels */
.pika-table th {
  color: var(--font-color);
  text-align: center;
}

/* Days of the Week Underline - Example = underline dotted */
abbr[title] {
  text-decoration: none !important;
  cursor: default !important;
}

/* Month Days on Calendar - Default State */
.pika-button {
  color: var(--font-color);
  background: var(--secondary-bg-color);
  border-radius: var(--border-radius-sm);
  text-align: center;
  font-size: 12px !important;
}

/* Week Label */
.pika-week {
  color: var(--font-color);
}

/* Current Day Text/Number Color */
.is-today .pika-button {
  color: var(--secondary-accent-color) !important;
}

/* The Selected Date/Day */
.is-selected .pika-button {
  color: var(--accent-top-text-color) !Important;
  background: var(--accent-color);
  box-shadow: none !important;
}

/* Styles for any Disabled Dates/Days  */
.is-disabled .pika-button {
  color: var(--disabled-font-color);
  opacity: .3;
  background: transparent !important;
}

/* Styles for Date/Day Hover (can be same styles as "selected" styles) */
.pika-button:hover {
  color: var(--accent-top-text-color) !important;
  background: var(--accent-color) !important;
  border-radius: var(--border-radius-sm) !important;
}

/* Next & Prev Arrow Buttons */
.pika-prev, .pika-next {
	display: block;
	cursor: pointer;
	position: relative;
	outline: none;
	border: 0;
	padding: 0;
	width: 20px;
	height: 30px;
	text-indent: 20px;
	white-space: nowrap;
	overflow: hidden;
	background-color: var(--arrow-bg-color) !important;
	opacity: .5;
}
</style>

<!-- DATE PICKER JS --> 
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<!-- FOR 'SINGLE' DATE PICKER ON ONE FORM/PAGE. REMOVE CODE BELOW IF NOT NEEDED! -->
<script>
var picker = new Pikaday({ 
	field: document.getElementById('datepicker'),
	disableWeekends: true, // Disables option to select weekend days
	firstDay: 0, // First day of the week - 0 for Sunday & 1 for Monday
	minDate: new Date(), // Disables option to select days prior to current day
  //yearRange: [1968, new Date().getFullYear().toString()], //Here you can choose the earliest year option to the current date or change "new Date().getFullYear().toString()" to 2008 for example.  
});

//Sets Default Date to Current Date
picker.gotoToday()
</script>





<!-- FOR 'MULTIPLE' DATE PICKERS ON ONE FORM/PAGE. REMOVE CODE BELOW IF NOT NEEDED! -->
<script>
$('.date-picker').each(function() {  // ".date-picker" is the class name you would set on each field that needs a date picker.
    $(this).data('pikaday', new Pikaday({ 
      field: $(this)[0],
      disableWeekends: true, // Disables option to select weekend days
      firstDay: 0, // First day of the week - 0 for Sunday & 1 for Monday
      minDate: new Date(), // Disables option to select days prior to current day
      //yearRange: [1968, new Date().getFullYear().toString()], //Here you can choose the earliest year option to the current date or change "new Date().getFullYear().toString()" to 2008 for example.  
    }));
});

//Sets Default Date to Current Date
picker.gotoToday()
</script>

Quick Grab

Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.

Save to Favorites

Learn How to Use This

<!-- CODECRUMBS ACCORDION -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/accordion@latest/index.min.js"></script>
<script>
  window.CodeCrumbs.Accordion({
    oneOpen: true,
    speed: 600,
    easing: 'cubic-bezier(0.55, 0, 0.1, 1)',
    repositionOpenItem: false,
    repositionDistance: 300,
    repositionDelay: 300,
    classNames: {
      accordion: 'cc-accordion',
      item: 'cc-accordion-item',
      head: 'cc-accordion-header',
      body: 'cc-accordion-body',
      icon: 'cc-accordion-icon',
    },
  })
</script>

Quick Grab

Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.

Save to Favorites

Learn How to Use This

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

Quick Grab

Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.

Save to Favorites

Learn How to Use This

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

Quick Grab

Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.

Save to Favorites

Learn How to Use This

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

Quick Grab

Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.

Save to Favorites

Learn How to Use This

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

Quick Grab

Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.

Save to Favorites

Learn How to Use This

Javascript

Know when new crumbs drop!

Want to contribute to the community?