Member Profile

Here are some tools, resources and recommendations you may find useful for your next or any future projects. Will continue to grow ๐Ÿ˜‰

First Last

Change Avatar

Get started with some quick tips or find your saved favorites. ๐Ÿค™

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.

  1. Simply start by searching any desired code solution here.
  2. Click the "Learn How to Use" button for detailed instructions on how to apply them.
  3. Click the โ™ฅ๏ธbutton to save your favorite crumbs for quicker access to them.

Saved Favorites

Dynamic Copyright Year
</ head> Code
</ body> Code
<!-- Dynamic Copyright Year -->
<script>
	// Dynamic Copyright Year
	var date = new Date().getFullYear();
	document.getElementById("year").innerHTML = date;
</script>
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>
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>
	$(document).ready(function() {
  	$('select').niceSelect();
	});
</script>
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
HTML/Embed Code
Learn How to Use This
Global General CSS Styles
</ head> Code
<!-- GLOBAL GENERAL CSS STYLES --> 
<style>
	* {
  	box-sizing: border-box;
  }
  
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  ::-moz-selection { /* Code for Firefox */
  	background: #ebedf0;    /* Change hex code to whatever background color you want */
    color: inherit;         /* Add hex code to whatever font color you want */
  }
  
  ::selection {
  	background: #ebedf0;    /* Change hex code to whatever background color you want */
    color: inherit;         /* Add hex code to whatever font color you want */
  }
</style>
</ body> Code
HTML/Embed Code
Learn How to Use This
HTML Tables
</ head> Code
</ body> Code
HTML/Embed Code
<!-- HTML TABLE --> 
<style>
/* ----------------------------- TABLE STYLES ----------------------------- */
:root {
  /* TABLE COLORS */
  --table-header-font-color: #ffffff;
  --table-header-bg-color: teal;
  --table-header-border-color: #ffffff;
  
  --table-cell-font-color: #777777;
  --table-cell-border-color: #d2d2d2;
  
  --table-bg-color: #ffffff;
  --table-border-color: #ffffff; /* Most Likely won't be seen */
  
  /* TABLE DIMENSIONS */
  --table-header-padding-top-bottom: 12px; /* headers top & bottom padding */
  --table-header-padding-left-right: 10px; /* headers left & right padding */
  --table-heading-font-size: 18px;
  
  --table-cell-padding-top-bottom: 10px;  /* Cells top & bottom padding */
  --table-cell-padding-left-right: 10px;  /* Cells left & right padding */
  --table-cell-font-size: 14px;
  --table-cell-min-width: 200px;
  
  --table-margin-bottom: 48px;
}
/* ----------------------------- END OF TABLE STYLES ----------------------------- */



/* DON'T NEED TO WORRY ABOUT THESE BELOW!!! */
.table-wrap {
	overflow-x: scroll;
  width: 100%;
  margin-bottom: var(--table-margin-bottom);
}

table, th, td {
  border-collapse: collapse;
}

table {
	width: 100%;
  border: 1px solid var(--table-border-color);
  background-color: var(--table-bg-color);
}

th:last-child {
  border-left: 1px solid var(--table-header-bg-color);
  border-top: 1px solid var(--table-header-bg-color);
  border-right: 1px solid var(--table-header-bg-color);
  border-bottom: 1px solid var(--table-header-bg-color);
}

th {
	text-align: left;
  color: var(--table-header-font-color);
  background-color: var(--table-header-bg-color);
  padding: var(--table-header-padding-top-bottom) var(--table-header-padding-left-right);
  font-size: 16px;
  border-left: 1px solid var(--table-header-bg-color);
  border-top: 1px solid var(--table-header-bg-color);
  border-right: 1px solid var(--table-header-border-color);
  border-bottom: 1px solid var(--table-header-bg-color);
  font-size: var(--table-heading-font-size);
}

td {
  color: var(--table-cell-font-color);
  border: 1px solid var(--table-cell-border-color);
	padding: var(--table-cell-padding-top-bottom) var(--table-cell-padding-left-right);
  font-size: var(--table-cell-font-size);
}

th, td {
	min-width: var(--table-cell-min-width);
}
</style>



<!-- ****TABLE CONTENT**** -->
<div class="table-wrap">
  <table>
    <!-- heading Columns -->
    <tr>
      <th>Shoe Type</th>
      <th>Color</th>
      <th>Size</th>
      <th>Details</th>
    </tr>

    <!-- Row 1 -->
    <tr>
      <td>Running</td>
      <td>White/Black</td>
      <td>10.5, 11, 12</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
    </tr>

    <!-- Row 2 -->
    <tr>
      <td>Skateboarding</td>
      <td>Black</td>
      <td>6.5, 7, 8.5, 9, 9.5, 10.5, 12</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
    </tr>

    <!-- Row 3 -->
    <tr>
      <td>Hiking</td>
      <td>Tan</td>
      <td>7, 8.5, 9, 10.5, 11, 12</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
    </tr>
  </table>
</div>
Learn How to Use This
Coupon Copy-to-Clipboard
</ head> Code
</ body> Code
<!-- COUPON COPY TO CLIPBOARD --> 
<script type="text/javascript" src="https://milankyncl.github.io/jquery-copy-to-clipboard/jquery.copy-to-clipboard.js">

<script>
//Change SAVE20NOW to whatever coupon or text you want to be copied
$('input#coup-field').val('SAVE20NOW');
$("input#coup-field").prop('readOnly', true);
$('input#coup-field').css( 'cursor', 'text' );

$(document).ready(function() {
  $('#copy-btn').CopyToClipboard();
  $('.copy-btn').click(function(){
  	//The values "Copied!" and #9ccd65 below are what the button will change to for 2 seconds
    $('.copy-btn').html('Copied!');
    $('.copy-btn').css('background-color', '#9ccd65');
    //The values "Copy" and #ec4609 below are what it will change back to
    setTimeout(function() { 
      $('.copy-btn').html('Copy')
      $('.copy-btn').css('background-color', '#ec4609')
    }, 2000);
  });
});
</script>
HTML/Embed Code
Learn How to Use This
Simple JQuery Accordion
</ head> Code
<!-- Closes Simple JQuery Accordion Bodies on Published Site --> 
<style>
.acc-body {
	display: none;
}
</style>
</ body> Code
<!-- Simple JQuery Accordion --> 
<script>
(function ($) {
	'use strict';
		$('.acc-head').on("click", function () {
			$(this).next().slideToggle(300);											// 300 is the milliseconds on open
			$('.acc-body').not($(this).next()).slideUp('fast');
		});
}(jQuery));
</script>
HTML/Embed Code
Learn How to Use This
Ignore Pointer (Cursor) Events
</ head> Code
<!-- Ignore Cursor Events --> 
<style>
.your-class-name {
	pointer-events: none;
}
</style>
</ body> Code
HTML/Embed Code
Learn How to Use This
Remove iOS Form Styles
</ head> Code
<!--Removes iOS form styling--> 
<style>
input, textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;ย ย 
}
</style>
</ body> Code
HTML/Embed Code
Learn How to Use This
Reset Webflow Form
</ head> Code
</ body> Code
<!-- RESET WEBFLOW FORM AFTER SUBMIT --> 
<script>
$(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 ***/

  var resetCustomElement = function(customElement) {
    var inputElement = customElement.nextSibling;
    if (inputElement.checked) {
      customElement.classList.add("w--redirected-checked");
    } else {
      customElement.classList.remove("w--redirected-checked");
    }
  };

  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";
    }
  };

  var form = document.querySelector(FORM_SELECTOR);
  var successDiv = form.nextSibling;
  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 (form.style.display === "none") {
      resetForm(form, successDiv);
    }
  });

  // Listen for when the style attribute of our form changes
  observer.observe(form, { attributes: true, attributeFilter: ["style"] });
});
</script>
HTML/Embed Code
Learn How to Use This

Aw, looks like you haven't saved any to your favorites yet.

Start Searching

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
Dynamic Copyright Year
</ head> Code
</ body> Code
<!-- Dynamic Copyright Year -->
<script>
	// Dynamic Copyright Year
	var date = new Date().getFullYear();
	document.getElementById("year").innerHTML = date;
</script>
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>
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>
	$(document).ready(function() {
  	$('select').niceSelect();
	});
</script>
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
Learn How to Use This
Global General CSS Styles
</ head> Code
<!-- GLOBAL GENERAL CSS STYLES --> 
<style>
	* {
  	box-sizing: border-box;
  }
  
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  ::-moz-selection { /* Code for Firefox */
  	background: #ebedf0;    /* Change hex code to whatever background color you want */
    color: inherit;         /* Add hex code to whatever font color you want */
  }
  
  ::selection {
  	background: #ebedf0;    /* Change hex code to whatever background color you want */
    color: inherit;         /* Add hex code to whatever font color you want */
  }
</style>
</ body> Code
Learn How to Use This
HTML Tables
</ head> Code
</ body> Code
Learn How to Use This
Coupon Copy-to-Clipboard
</ head> Code
</ body> Code
<!-- COUPON COPY TO CLIPBOARD --> 
<script type="text/javascript" src="https://milankyncl.github.io/jquery-copy-to-clipboard/jquery.copy-to-clipboard.js">

<script>
//Change SAVE20NOW to whatever coupon or text you want to be copied
$('input#coup-field').val('SAVE20NOW');
$("input#coup-field").prop('readOnly', true);
$('input#coup-field').css( 'cursor', 'text' );

$(document).ready(function() {
  $('#copy-btn').CopyToClipboard();
  $('.copy-btn').click(function(){
  	//The values "Copied!" and #9ccd65 below are what the button will change to for 2 seconds
    $('.copy-btn').html('Copied!');
    $('.copy-btn').css('background-color', '#9ccd65');
    //The values "Copy" and #ec4609 below are what it will change back to
    setTimeout(function() { 
      $('.copy-btn').html('Copy')
      $('.copy-btn').css('background-color', '#ec4609')
    }, 2000);
  });
});
</script>
Learn How to Use This
Simple JQuery Accordion
</ head> Code
<!-- Closes Simple JQuery Accordion Bodies on Published Site --> 
<style>
.acc-body {
	display: none;
}
</style>
</ body> Code
<!-- Simple JQuery Accordion --> 
<script>
(function ($) {
	'use strict';
		$('.acc-head').on("click", function () {
			$(this).next().slideToggle(300);											// 300 is the milliseconds on open
			$('.acc-body').not($(this).next()).slideUp('fast');
		});
}(jQuery));
</script>
Learn How to Use This
Ignore Pointer (Cursor) Events
</ head> Code
<!-- Ignore Cursor Events --> 
<style>
.your-class-name {
	pointer-events: none;
}
</style>
</ body> Code
Learn How to Use This
Remove iOS Form Styles
</ head> Code
<!--Removes iOS form styling--> 
<style>
input, textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;ย ย 
}
</style>
</ body> Code
Learn How to Use This
Reset Webflow Form
</ head> Code
</ body> Code
<!-- RESET WEBFLOW FORM AFTER SUBMIT --> 
<script>
$(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 ***/

  var resetCustomElement = function(customElement) {
    var inputElement = customElement.nextSibling;
    if (inputElement.checked) {
      customElement.classList.add("w--redirected-checked");
    } else {
      customElement.classList.remove("w--redirected-checked");
    }
  };

  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";
    }
  };

  var form = document.querySelector(FORM_SELECTOR);
  var successDiv = form.nextSibling;
  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 (form.style.display === "none") {
      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
Reset Webflow Form
</ head> Code
</ body> Code
<!-- RESET WEBFLOW FORM AFTER SUBMIT --> 
<script>
$(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 ***/

  var resetCustomElement = function(customElement) {
    var inputElement = customElement.nextSibling;
    if (inputElement.checked) {
      customElement.classList.add("w--redirected-checked");
    } else {
      customElement.classList.remove("w--redirected-checked");
    }
  };

  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";
    }
  };

  var form = document.querySelector(FORM_SELECTOR);
  var successDiv = form.nextSibling;
  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 (form.style.display === "none") {
      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 iOS Form Styles
</ head> Code
<!--Removes iOS form styling--> 
<style>
input, textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;ย ย 
}
</style>
</ body> Code
Learn How to Use This
Ignore Pointer (Cursor) Events
</ head> Code
<!-- Ignore Cursor Events --> 
<style>
.your-class-name {
	pointer-events: none;
}
</style>
</ body> Code
Learn How to Use This
Simple JQuery Accordion
</ head> Code
<!-- Closes Simple JQuery Accordion Bodies on Published Site --> 
<style>
.acc-body {
	display: none;
}
</style>
</ body> Code
<!-- Simple JQuery Accordion --> 
<script>
(function ($) {
	'use strict';
		$('.acc-head').on("click", function () {
			$(this).next().slideToggle(300);											// 300 is the milliseconds on open
			$('.acc-body').not($(this).next()).slideUp('fast');
		});
}(jQuery));
</script>
Learn How to Use This
Coupon Copy-to-Clipboard
</ head> Code
</ body> Code
<!-- COUPON COPY TO CLIPBOARD --> 
<script type="text/javascript" src="https://milankyncl.github.io/jquery-copy-to-clipboard/jquery.copy-to-clipboard.js">

<script>
//Change SAVE20NOW to whatever coupon or text you want to be copied
$('input#coup-field').val('SAVE20NOW');
$("input#coup-field").prop('readOnly', true);
$('input#coup-field').css( 'cursor', 'text' );

$(document).ready(function() {
  $('#copy-btn').CopyToClipboard();
  $('.copy-btn').click(function(){
  	//The values "Copied!" and #9ccd65 below are what the button will change to for 2 seconds
    $('.copy-btn').html('Copied!');
    $('.copy-btn').css('background-color', '#9ccd65');
    //The values "Copy" and #ec4609 below are what it will change back to
    setTimeout(function() { 
      $('.copy-btn').html('Copy')
      $('.copy-btn').css('background-color', '#ec4609')
    }, 2000);
  });
});
</script>
Learn How to Use This
HTML Tables
</ head> Code
</ body> Code
Learn How to Use This
Global General CSS Styles
</ head> Code
<!-- GLOBAL GENERAL CSS STYLES --> 
<style>
	* {
  	box-sizing: border-box;
  }
  
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  ::-moz-selection { /* Code for Firefox */
  	background: #ebedf0;    /* Change hex code to whatever background color you want */
    color: inherit;         /* Add hex code to whatever font color you want */
  }
  
  ::selection {
  	background: #ebedf0;    /* Change hex code to whatever background color you want */
    color: inherit;         /* Add hex code to whatever font color you want */
  }
</style>
</ body> 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
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>
	$(document).ready(function() {
  	$('select').niceSelect();
	});
</script>
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>
Learn How to Use This
Dynamic Copyright Year
</ head> Code
</ body> Code
<!-- Dynamic Copyright Year -->
<script>
	// Dynamic Copyright Year
	var date = new Date().getFullYear();
	document.getElementById("year").innerHTML = date;
</script>
Learn How to Use This
No Saved Favorites Yet ๐Ÿ’”
No Saved Favorites Yet ๐Ÿ’”
Built by
Built with