Elements

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

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

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

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

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

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

Elements

Know when new crumbs drop!

Want to contribute to the community?