A Pen by Rob

Developer
Rob
Size
3,452 Kb
Views
40,480
  1. A Pen by Rob Previews
  2. A Pen by Rob HTML Codes
  3. A Pen by Rob CSS Codes
  4. A Pen by Rob JS Codes

How do I make an a pen by rob?

What is a a pen by rob? How do you make a a pen by rob? This script and codes were developed by Rob on 18 August 2022, Thursday.

A Pen by Rob Previews
IQ Test

A Pen by Rob - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Rob</title> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <select name="CAT_Category" id="CAT_Category" class="cat_listbox" rows="4" multiple="multiple"> <option value="-1">-- All Categories --</option> <option value="78482">Categories</option> <option value="79654">---Craft</option> <option value="143758">---Eat &amp;</option> <option value="79647">----Eat &amp; Drink</option> <option value="143756">------Health &amp;</option> <option value="79508">---Health &amp; Beauty</option> <option value="143760">---Home &amp;</option> <option value="79655">---Home &amp; Living</option> <option value="143065">---Luxuries</option> <option value="79622">---EMedia</option> <option value="79626">------Books</option> <option value="79626">------Nonfiction</option> <option value="79632">---Games</option> <option value="79633">------Magazines</option> <option value="79627">------Movies</option> <option value="79628">---Music</option> <option value="142866">---Mens Style</option> <option value="142867">------Clothes</option> <option value="142870">------Eyewear</option> <option value="142869">---Gear</option> <option value="143064">------Grooming</option> <option value="143762">------Jewellery &amp;</option> <option value="142871">------Jewellery &amp; Watches</option> <option value="142868">------Shoes</option> <option value="79653">---Outdoors</option> <option value="79619">---Play</option> <option value="79648">------Collectables</option> <option value="79652">------Gaming</option> <option value="79650">------Hobbies</option> <option value="84694">------Musical Instruments</option> <option value="79649">------Sports</option> <option value="79651">------Toys</option> <option value="79618">---Tech</option> <option value="79684">------Audio Visual</option> <option value="79636">------Computers</option> <option value="79634">------Mobile Phones</option> <option value="84693">------Photography</option> <option value="78487">---Transport</option> <option value="79641">------Aircraft</option> <option value="84691">------Bicycles</option> <option value="79637">------Boats</option> <option value="79640">------Cars</option> <option value="84695">------Electric</option> <option value="79638">------Motorcycles</option> <option value="78498">---Travel</option> <option value="79617">---Womens Style</option> <option value="79629">------Accessories</option> <option value="79631">------Bags</option> <option value="79630">------Clothes</option> <option value="142865">------Eyewear</option> <option value="143754">------Jewellery &amp;</option> <option value="79643">------Jewellery &amp; Watches</option> <option value="142864">------Shoes</option> <option value="79646">---Work</option> </select>
<div id="checklist">
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Rob - Script Codes CSS Codes

ul {
}
.root {
}
.categoryList { margin-left: 0; list-style: none;
}

A Pen by Rob - Script Codes JS Codes

var categories = { parseCategories: function(){ // create an array containing all categories var catOptions = $('select#CAT_Category').children(); // the target element where we will append the list var target = $('#checklist'); // the list stack initialized with a ul element var listStack = [$('<ul class="categoryList">')]; // take the first item off the option list because it's useless Array.prototype.shift.call(catOptions); Array.prototype.shift.call(catOptions); // use the recursive method to append all items to the result var result = this.parseSubCategories(listStack, catOptions, 1); // append the result to the target element target.append(result); }, /* listStack - the stack of lists, for each level in the tree you need to push a new list onto the stack when you get to an element that is lower level than the current, pop the list off and append it to that list options is the list of option items taken from the CMS currentLevel is how deep you currently are in the tree */ parseSubCategories: function(listStack, options, currentLevel) { if(options.length == 0) { return listStack; } var itemLevel = 0; // remove and keep the first element of the option list var listItem = Array.prototype.shift.call(options); var itemName = listItem.innerHTML.replace(/^-{3,}\1*/g, function(sequence){ itemLevel = Math.floor(sequence.length/3); return ""; // return value minus the --- prefixes }); //console.log(itemName + "found at: " + itemLevel + " currentLevel: " + currentLevel); // get the current list from the stack var currentList = listStack[listStack.length-1]; //console.log('appending ' + itemName + " to " + currentList.attr('class')); if(itemLevel > currentLevel) { // item is a child of the parent so create a new list and append the item to it // then append the list to the parent list and use the new list to append items var childList = this.makeCategoryList(itemLevel); var listItem = this.makeListItem(listItem.value, itemName); childList.append(listItem); currentList.append(childList); listStack.push(childList); this.parseSubCategories(listStack, options, ++currentLevel); } else if (itemLevel == currentLevel) { // item is a sibling of the parent, so add it to the current list currentList.append(this.makeListItem(listItem.value, itemName)); this.parseSubCategories(listStack, options, currentLevel); } else { // start a new branch by popping the last list off the stack and // append the current item to the list under it var prevList = listStack.pop(); currentList = listStack[listStack.length - 1]; //console.log('new branch ' + itemName + ' - setting current level: ' + itemLevel); currentList.append(this.makeListItem(listItem.value, itemName)); this.parseSubCategories(listStack, options, itemLevel); } return listStack; }, makeListItem: function(value, itemName) { return $('<li>').html('<label class="checkbox"' + 'for="' + value + '"><input type="checkbox"' + 'name="' + value + '" id="' + value + '" value="' + value + '">' + itemName + '</input></label>'); }, makeCategoryList: function(depth) { var leftMargin = depth * 10; return $('<ul class="categoryList" style="margin-left:' + leftMargin + 'px"' + '>'); }
};
categories.parseCategories();
A Pen by Rob - Script Codes
A Pen by Rob - Script Codes
Home Page Home
Developer Rob
Username rowinf
Uploaded August 18, 2022
Rating 3
Size 3,452 Kb
Views 40,480
Do you need developer help for A Pen by Rob?

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!

Rob (rowinf) Script Codes
Name
Bootstrap test
A Pen by Rob
Responsive Calendar
Foundation Off-Canvas menu test
Table filters
Flash Cards
Nav Menu with Chevron
Html5 form validation
Get combo box item value
JQuery Animations
Create amazing sales emails 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!