Breadcrumb Challenge v2

Developer
Myron Schippers
Size
4,314 Kb
Views
32,384
  1. Breadcrumb Challenge v2 Previews
  2. Breadcrumb Challenge v2 HTML Codes
  3. Breadcrumb Challenge v2 CSS Codes
  4. Breadcrumb Challenge v2 JS Codes

How do I make an breadcrumb challenge v2?

What is a breadcrumb challenge v2? How do you make a breadcrumb challenge v2? This script and codes were developed by Myron Schippers on 15 September 2022, Thursday.

Breadcrumb Challenge v2 Previews
IQ Test

Breadcrumb Challenge v2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Breadcrumb Challenge v2</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ol class="hanselGretel js-crumbs"> <li class="hanselGretel-crumb"> <a class="hanselGretel-crumb-link" href="#">Planning &amp; Calendar</a> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tip"></span> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tail"></span> </li> <li class="hanselGretel-crumb"> <a class="hanselGretel-crumb-link" href="#">Leadership</a> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tip"></span> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tail"></span> </li> <li class="hanselGretel-crumb mix-hanselGretel-crumb_divider"> <a class="hanselGretel-crumb-link" href="#">Patient Education</a> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tip"></span> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tail"></span> </li> <li class="hanselGretel-crumb"> <a class="hanselGretel-crumb-link" href="#">Co-Management</a> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tip"></span> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tail"></span> </li> <li class="hanselGretel-crumb"> <a class="hanselGretel-crumb-link" href="#">Press Kit</a> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tip"></span> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tail"></span> </li> <li class="hanselGretel-crumb mix-hanselGretel-crumb_divider"> <a class="hanselGretel-crumb-link" href="#">Advertising &amp; Promotions</a> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tip"></span> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tail"></span> </li> <li class="hanselGretel-crumb"> <a class="hanselGretel-crumb-link" href="#">Staff Training</a> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tip"></span> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tail"></span> </li> <li class="hanselGretel-crumb"> <a class="hanselGretel-crumb-link" href="#">Regulatory Pricing</a> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tip"></span> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tail"></span> </li> <li class="hanselGretel-crumb"> <a class="hanselGretel-crumb-link" href="#">Digital Media</a> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tip"></span> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tail"></span> </li> <li class="hanselGretel-crumb"> <a class="hanselGretel-crumb-link" href="#">Metrics</a> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tip"></span> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tail"></span> </li> <li class="hanselGretel-crumb"> <a class="hanselGretel-crumb-link" href="#">Financing</a> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tip"></span> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tail"></span> </li> <li class="hanselGretel-crumb"> <a class="hanselGretel-crumb-link" href="#">Industry (SM2)</a> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tip"></span> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tail"></span> </li> <li class="hanselGretel-crumb mix-hanselGretel-crumb_divider"> <a class="hanselGretel-crumb-link" href="#">Webinars</a> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tip"></span> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tail"></span> </li> <li class="hanselGretel-crumb"> <a class="hanselGretel-crumb-link" href="#">Clinical</a> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tip"></span> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tail"></span> </li> <li class="hanselGretel-crumb"> <a class="hanselGretel-crumb-link" href="#">Contact Us</a> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tip"></span> <span class="hanselGretel-crumb-flag hanselGretel-crumb-flag_tail"></span> </li>
</ol> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Breadcrumb Challenge v2 - Script Codes CSS Codes

/* ------------------------------------------------------- Resets
---------------------------------------------------------- */
ol,
ul { margin: 0; padding: 0; list-style: none;
}
a { color: inherit; text-decoration: none;
}
/* ------------------------------------------------------- global variables
---------------------------------------------------------- */
/* ------------------------------------------------------- Gloabal Mixins
---------------------------------------------------------- */
/* ------------------------------------------------------- Hansel & Gretel
---------------------------------------------------------- */
.hanselGretel { min-width: 701px;
}
.hanselGretel:before, .hanselGretel:after { content: ""; display: table;
}
.hanselGretel:after { clear: both;
}
.hanselGretel-crumb { float: left; display: block; padding: 0; margin: 0 15px 22px 15px; position: relative; z-index: 10;
}
.hanselGretel-crumb-link { display: table-cell; width: 106px; height: 64px; padding: 0; margin: 0; box-shadow: 0px 2px 1px #818285; background: #e1de13; position: relative; z-index: 20; vertical-align: middle; text-align: center;
}
.hanselGretel-crumb-link:before, .hanselGretel-crumb-link:after { content: ""; display: block; width: 0; height: 0; position: absolute; top: 0;
}
/* arrow/flag shadows */
.hanselGretel-crumb-link:before { width: 19px; height: 3px; box-shadow: 0px 2px 1px #818285; top: auto; bottom: 0; left: -18px;
}
.hanselGretel-crumb-link:after { border-top: 32px solid transparent; border-bottom: 32px solid transparent; border-left: 18px solid #818285; right: 0; top: 2px; right: -18px;
}
.hanselGretel-crumb-flag { width: 0; height: 0; position: absolute; z-index: 30; top: 0;
}
.hanselGretel-crumb-flag_tip { border-top: 32px solid transparent; border-bottom: 32px solid transparent; border-left: 18px solid #e1de13; right: 0; right: -18px;
}
.hanselGretel-crumb-flag_tail { border-top: 32px solid #e1de13; border-bottom: 32px solid #e1de13; border-left: 18px solid transparent; left: 0; left: -18px;
}
/* first item in row */
.hanselGretel-crumb:nth-child(5n+1) { clear: left;
}
/* mixins for .hanselGretel */
.mix-hanselGretel-crumb_divider { margin-right: 28px;
}
.mix-hanselGretel-crumb_divider:before, .mix-hanselGretel-crumb_divider:after { content: ""; display: block; width: 0; height: 0; position: absolute; top: 0;
}
.mix-hanselGretel-crumb_divider:before { border-top: 32px solid transparent; border-bottom: 32px solid transparent; border-left: 18px solid #a5b3bf; right: -30px;
}
.mix-hanselGretel-crumb_divider:after { border-top: 32px solid transparent; border-bottom: 32px solid transparent; border-left: 18px solid #ffffff; right: -28px;
}

Breadcrumb Challenge v2 - Script Codes JS Codes

/* ---------------------------------------------------------------------Crumbs
Target Browsers: IE8, IE9, IE10, Chrome, Firefox, Safari
Authors: Myron Schippers
@count - must be entered in as an integer
@color - must be entered as a hexidecimal value
------------------------------------------------------------------------ */
// Namespace Object
var crumbs = function ($elm, count, color) { if (!$elm) { console.log('no crumbs have been selected'); return false; } if (!count) { count = 5; } if (!color) { color = '#e2df15'; } else if (color.search('#') === -1) { console.log('Crumb color must be set to a hex value.'); color = '#e2df15'; } //$elm.css('border', '1px solid red'); this.init($elm, count, color);
};
crumbs.prototype.init = function ($elm, count, color) { this.$elm = $elm; this.$items = this.$elm.children(); this.count = count; this.color = color; this.grouped = []; // only for testing purposes // remove for final itteration this.$tester = $('<div class="tester"></div>').insertAfter(this.$elm); /*this.$tester.css('padding', '10px').css('border', '1px solid blue');*/ //this.$elm.css('border', '1px solid red'); if (this.$items.length > this.count) { this.grouping(); } else { this.grouped.push(this.$items); }
};
crumbs.prototype.grouping = function () { var i = 0; var crumbSet = []; //this.$elm.css('border', '1px solid red'); //this.testthis('crumb total = ' + this.$items.length); for (i; i < this.$items.length; i++) { if (crumbSet.length < this.count) { crumbSet.push(this.$items[i]); } else { this.grouped.push(crumbSet); crumbSet.splice(0, crumbSet.length); //this.testthis('array', 'this.grouped'); } this.grouped = this.grouped || this.grouped.push(crumbSet); /*this.testthis('this.grouped has ' + this.grouped.length + ' items in it');*/ } /*if (this.grouped.length > 0) { this.coloring(); }*/
};
crumbs.prototype.coloring = function () { var colorOne = '#e2df15'; var colorTwo = '#e2df15'; var colorThree = '#e2df15'; this.$elm.css('border', '1px solid red');
};
crumbs.prototype.testthis = function (content) { this.$tester.append('<p>' + content + '</p>');
}
$.each($('.js-crumbs'), function () { var $thisElm = $(this); var breadcrumbs = new crumbs($thisElm, 5, '#e2df15');
});
Breadcrumb Challenge v2 - Script Codes
Breadcrumb Challenge v2 - Script Codes
Home Page Home
Developer Myron Schippers
Username chbymnky
Uploaded September 15, 2022
Rating 3
Size 4,314 Kb
Views 32,384
Do you need developer help for Breadcrumb Challenge v2?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Myron Schippers (chbymnky) Script Codes
Name
Parallax Ribbon
Buttons with style
Vertical List CSS Module
Sliding with CSS
JQuery UI Tab Face Lift
Custom Form Fields
Loading Dots
Bicycle
Collapsible plugin
Breadcrumb Challenge v1
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!