A Pen by Xavier Porter

Developer
Xavier Porter
Size
3,680 Kb
Views
14,168
  1. A Pen by Xavier Porter Previews
  2. A Pen by Xavier Porter HTML Codes
  3. A Pen by Xavier Porter CSS Codes
  4. A Pen by Xavier Porter JS Codes

How do I make an a pen by xavier porter?

What is a a pen by xavier porter? How do you make a a pen by xavier porter? This script and codes were developed by Xavier Porter on 27 October 2022, Thursday.

A Pen by Xavier Porter Previews
IQ Test

A Pen by Xavier Porter - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Xavier Porter</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css"> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> <h3>Form Select Box Styling</h3>
<select> <option>Select your group...</option> <option>This is another option</option> <option>This is another option too</option> <option>Look, a third option</option> </select> <h3>List Dropdown</h3> <div class="wrapper-demo">	<div id="dd" class="wrapper-dropdown-5" tabindex="1">John Doe	<ul class="dropdown">	<li><a href="#"><i class="icon-user"></i>Profile</a></li>	<li><a href="#"><i class="icon-cog"></i>Settings</a></li>	<li><a href="#"><i class="icon-remove"></i>Log out</a></li>	</ul>	</div>	</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 Xavier Porter - Script Codes CSS Codes

body { background:#ccc; font-family:'Open Sans', Helvetica, Arial;
}
.select {	top: 0;	height: 2.3125em;	margin-bottom: 1.25em;	margin-top: 0px;	padding: 0px;	width: 200px;	line-height: 30px;	-webkit-box-shadow: none;	box-shadow: none;	font-size: 0.875em;	cursor: pointer;	display: inline-block;	position: relative;	border: 1px solid #ccc;
}
.styledSelect {	position: absolute;	top: 0;	right: 0;	bottom: 0;	left: 0;	background: white;	background: -moz-linear-gradient(top, white 0%, #f3f3f3 100%);	background: -webkit-linear-gradient(top, white 0%, #f3f3f3 100%);	background: linear-gradient(to bottom, white 0%, #f3f3f3 100%);	padding: 0 10px;	font-weight: bold;
}
.styledSelect:after {	content: "";	width: 0;	height: 0;	border: 5px solid transparent;	border-color: black transparent transparent transparent;	position: absolute;	top: 12px;	right: 8px;
}
.styledSelect:active, .styledSelect.active {	background-color: #eee;
}
.options {	display: none;	position: absolute;	top: 100%;	right: 0;	left: 0;	z-index: 999;	margin: 0 0;	padding: 0 0;	list-style: none;	border: 1px solid #ccc;	background-color: white;	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.options li {	padding: 0 6px;	margin: 0 0;	padding: 0 10px;
}
.options li:hover {	background-color: #39f;	color: white;
}
/* CSS for the List Dropdown */
.wrapper-dropdown-5 { /* Size & position */ position: relative; width: 200px; padding: 12px 15px; /* Styles */ background: #fff; border-radius: 5px; box-shadow: 0 1px 0 rgba(0,0,0,0.2); cursor: pointer; outline: none; transition: all 0.3s ease-out;
}
.wrapper-dropdown-5:after { /* Little arrow */ content: ""; width: 0; height: 0; position: absolute; top: 50%; right: 15px; margin-top: -3px; border-width: 6px 6px 0 6px; border-style: solid; border-color: #4cbeff transparent;
}
.wrapper-dropdown-5 .dropdown { /* Size & position */ position: absolute; top: 65%; left: 0; right: 0; /* Styles */ background: #fff; border-radius: 0 0 5px 5px; border: 1px solid rgba(0,0,0,0.2); border-top: none; border-bottom: none; list-style: none; transition: all 0.2s ease-out; /* Hiding */ max-height: 0; overflow: hidden;
}
.wrapper-dropdown-5 .dropdown { padding-left:0;
}
.wrapper-dropdown-5 .dropdown li { padding: 0 10px ;
}
.wrapper-dropdown-5 .dropdown li a { display: block; text-decoration: none; color: #333; padding: 10px 0; transition: all 0.3s ease-out; border-bottom: 1px solid #e6e8ea;
}
.wrapper-dropdown-5 .dropdown li:last-of-type a { border: none;
}
.wrapper-dropdown-5 .dropdown li i { margin-right: 5px; color: inherit; vertical-align: middle;
}
/* Hover state */
.wrapper-dropdown-5 .dropdown li:hover a { color: #57a9d9;
}
/* Active state */
.wrapper-dropdown-5.active { border-radius: 5px 5px 0 0; background: #4cbeff; box-shadow: none; border-bottom: none; color: white;
}
.wrapper-dropdown-5.active:after { border-color: #82d1ff transparent;
}
.wrapper-dropdown-5.active .dropdown { border-bottom: 1px solid rgba(0,0,0,0.2); max-height: 400px;
}

A Pen by Xavier Porter - Script Codes JS Codes

// Iterate over each select element
$(document).ready(function() {
$('select').each(function() { // Cache the number of options var $this = $(this), numberOfOptions = $(this).children('option').length; // Hides the select element $this.addClass('s-hidden'); // Wrap the select element in a div $this.wrap('<div class="select"></div>'); // Insert a styled div to sit over the top of the hidden select element $this.after('<div class="styledSelect"></div>'); // Cache the styled div var $styledSelect = $this.next('div.styledSelect'); // Show the first select option in the styled div $styledSelect.text($this.children('option').eq(0).text()); // Insert an unordered list after the styled div and also cache the list var $list = $('<ul />', { 'class': 'options' }).insertAfter($styledSelect); // Insert a list item into the unordered list for each select option for (var i = 0; i < numberOfOptions; i++) { $('<li />', { text: $this.children('option').eq(i).text(), rel: $this.children('option').eq(i).val() }).appendTo($list); } // Cache the list items var $listItems = $list.children('li'); // Show the unordered list when the styled div is clicked (also hides it if the div is clicked again) $styledSelect.click(function(e) { e.stopPropagation(); $('div.styledSelect.active').each(function() { $(this).removeClass('active').next('ul.options').hide(); }); $(this).toggleClass('active').next('ul.options').toggle(); }); // Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item // Updates the select element to have the value of the equivalent option $listItems.click(function(e) { e.stopPropagation(); $styledSelect.text($(this).text()).removeClass('active'); $this.val($(this).attr('rel')); $list.hide(); /* alert($this.val()); Uncomment this for demonstration! */ }); // Hides the unordered list when clicking outside of it $(document).click(function() { $styledSelect.removeClass('active'); $list.hide(); });
}); //Function for the Dropdown List Combo box #5
$(function() {	$("#dd").click(function() {	// all dropdowns	//$('.wrapper-dropdown-5').removeClass('active'); $(this).toggleClass('active');	});	});
});
A Pen by Xavier Porter - Script Codes
A Pen by Xavier Porter - Script Codes
Home Page Home
Developer Xavier Porter
Username xporter
Uploaded October 27, 2022
Rating 3
Size 3,680 Kb
Views 14,168
Do you need developer help for A Pen by Xavier Porter?

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!

Xavier Porter (xporter) Script Codes
Name
Unsplash.it image viewer
Foundation 5 Menu - Accessibility
Restarting Counter-Reset
Style tiles with SCSS
Spotlight Solution 1
Quote Styling
Transforms examples
Create amazing captions 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!