Fancyselect Sample

Developer
UX Snippets
Size
5,197 Kb
Views
28,336
  1. Fancyselect Sample Previews
  2. Fancyselect Sample HTML Codes
  3. Fancyselect Sample CSS Codes
  4. Fancyselect Sample JS Codes

How do I make an fancyselect sample?

What is a fancyselect sample? How do you make a fancyselect sample? This script and codes were developed by UX Snippets on 27 October 2022, Thursday.

Fancyselect Sample Previews
IQ Test

Fancyselect Sample - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fancyselect Sample</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <select class="fancyselect" multiple>	<option>Blank</option>	<option value="two">Two</option>	<option value="three">Three</option>	<option value="four">Four</option>
</select> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Fancyselect Sample - Script Codes CSS Codes

div.fancy-select { position: relative; font-weight: bold; text-transform: uppercase; font-size: 13px; color: #46565D;
}
div.fancy-select.disabled { opacity: 0.5;
}
div.fancy-select select:focus + div.trigger { box-shadow: 0 0 0 2px #4B5468;
}
div.fancy-select select:focus + div.trigger.open { box-shadow: none;
}
div.fancy-select div.trigger { border-radius: 4px; cursor: pointer; padding: 10px 24px 9px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; background: #99A5BE; border: 1px solid #99A5BE; border-top-color: #A5B2CB; color: #4B5468; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); width: 200px; transition: all 240ms ease-out; -webkit-transition: all 240ms ease-out; -moz-transition: all 240ms ease-out; -ms-transition: all 240ms ease-out; -o-transition: all 240ms ease-out;
}
div.fancy-select div.trigger:after { content: ""; display: block; position: absolute; width: 0; height: 0; border: 5px solid transparent; border-top-color: #4B5468; top: 20px; right: 9px;
}
div.fancy-select div.trigger.open { background: #4A5368; border: 1px solid #475062; color: #7A8498; box-shadow: none;
}
div.fancy-select div.trigger.open:after { border-top-color: #7A8498;
}
div.fancy-select ul.options { list-style: none; margin: 0; position: absolute; top: 40px; left: 0; visibility: hidden; opacity: 0; z-index: 50; max-height: 200px; overflow: auto; background: #62C8BF; border-radius: 4px; border-top: 1px solid #7DD8D2; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); min-width: 200px; transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out; -webkit-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out; -moz-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out; -ms-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out; -o-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
}
div.fancy-select ul.options.open { visibility: visible; top: 50px; opacity: 1; /* have to use a non-visibility transition to prevent this iOS issue (bug?): */ /*http://stackoverflow.com/questions/10736478/css-animation-visibility-visible-works-on-chrome-and-safari-but-not-on-ios*/ transition: opacity 300ms ease-out, top 300ms ease-out; -webkit-transition: opacity 300ms ease-out, top 300ms ease-out; -moz-transition: opacity 300ms ease-out, top 300ms ease-out; -ms-transition: opacity 300ms ease-out, top 300ms ease-out; -o-transition: opacity 300ms ease-out, top 300ms ease-out;
}
div.fancy-select ul.options.overflowing { top: auto; bottom: 40px; transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out; -webkit-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out; -moz-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out; -ms-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out; -o-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
}
div.fancy-select ul.options.overflowing.open { top: auto; bottom: 50px; transition: opacity 300ms ease-out, bottom 300ms ease-out; -webkit-transition: opacity 300ms ease-out, bottom 300ms ease-out; -moz-transition: opacity 300ms ease-out, bottom 300ms ease-out; -ms-transition: opacity 300ms ease-out, bottom 300ms ease-out; -o-transition: opacity 300ms ease-out, bottom 300ms ease-out;
}
div.fancy-select ul.options li { padding: 8px 12px; color: #2B8686; cursor: pointer; white-space: nowrap; transition: all 150ms ease-out; -webkit-transition: all 150ms ease-out; -moz-transition: all 150ms ease-out; -ms-transition: all 150ms ease-out; -o-transition: all 150ms ease-out;
}
div.fancy-select ul.options li.selected { background: rgba(43, 134, 134, 0.3); color: rgba(255, 255, 255, 0.75);
}
div.fancy-select ul.options li.hover { color: #fff;
}

Fancyselect Sample - Script Codes JS Codes

// Generated by CoffeeScript 1.4.0
(function() { var $; $ = window.jQuery || window.Zepto || window.$; $.fn.fancySelect = function(opts) { var isiOS, settings; if (opts == null) { opts = {}; } settings = $.extend({ forceiOS: false, includeBlank: false, optionTemplate: function(optionEl) { return optionEl.text(); }, triggerTemplate: function(optionEl) { return optionEl.text(); } }, opts); isiOS = !!navigator.userAgent.match(/iP(hone|od|ad)/i); return this.each(function() { var copyOptionsToList, disabled, options, sel, trigger, updateTriggerText, wrapper; sel = $(this); if (sel.hasClass('fancified') || sel[0].tagName !== 'SELECT') { return; } sel.addClass('fancified'); sel.css({ width: 1, height: 1, display: 'block', position: 'absolute', top: 0, left: 0, opacity: 0 }); sel.wrap('<div class="fancy-select">'); wrapper = sel.parent(); if (sel.data('class')) { wrapper.addClass(sel.data('class')); } wrapper.append('<div class="trigger">'); if (!(isiOS && !settings.forceiOS)) { wrapper.append('<ul class="options">'); } trigger = wrapper.find('.trigger'); options = wrapper.find('.options'); disabled = sel.prop('disabled'); if (disabled) { wrapper.addClass('disabled'); } updateTriggerText = function() { var triggerHtml; triggerHtml = settings.triggerTemplate(sel.find(':selected')); return trigger.html(triggerHtml); }; sel.on('blur.fs', function() { if (trigger.hasClass('open')) { return setTimeout(function() { return trigger.trigger('close.fs'); }, 120); } }); trigger.on('close.fs', function() { trigger.removeClass('open'); return options.removeClass('open'); }); trigger.on('click.fs', function() { var offParent, parent; if (!disabled) { trigger.toggleClass('open'); if (isiOS && !settings.forceiOS) { if (trigger.hasClass('open')) { return sel.focus(); } } else { if (trigger.hasClass('open')) { parent = trigger.parent(); offParent = parent.offsetParent(); if ((parent.offset().top + parent.outerHeight() + options.outerHeight() + 20) > $(window).height() + $(window).scrollTop()) { options.addClass('overflowing'); } else { options.removeClass('overflowing'); } } options.toggleClass('open'); if (!isiOS) { return sel.focus(); } } } }); sel.on('enable', function() { sel.prop('disabled', false); wrapper.removeClass('disabled'); disabled = false; return copyOptionsToList(); }); sel.on('disable', function() { sel.prop('disabled', true); wrapper.addClass('disabled'); return disabled = true; }); sel.on('change.fs', function(e) { if (e.originalEvent && e.originalEvent.isTrusted) { return e.stopPropagation(); } else { return updateTriggerText(); } }); sel.on('keydown', function(e) { var hovered, newHovered, w; w = e.which; hovered = options.find('.hover'); hovered.removeClass('hover'); if (!options.hasClass('open')) { if (w === 13 || w === 32 || w === 38 || w === 40) { e.preventDefault(); return trigger.trigger('click.fs'); } } else { if (w === 38) { e.preventDefault(); if (hovered.length && hovered.index() > 0) { hovered.prev().addClass('hover'); } else { options.find('li:last-child').addClass('hover'); } } else if (w === 40) { e.preventDefault(); if (hovered.length && hovered.index() < options.find('li').length - 1) { hovered.next().addClass('hover'); } else { options.find('li:first-child').addClass('hover'); } } else if (w === 27) { e.preventDefault(); trigger.trigger('click.fs'); } else if (w === 13 || w === 32) { e.preventDefault(); hovered.trigger('mousedown.fs'); } else if (w === 9) { if (trigger.hasClass('open')) { trigger.trigger('close.fs'); } } newHovered = options.find('.hover'); if (newHovered.length) { options.scrollTop(0); return options.scrollTop(newHovered.position().top - 12); } } }); options.on('mousedown.fs', 'li', function(e) { var clicked; clicked = $(this); sel.val(clicked.data('raw-value')); if (!isiOS) { sel.trigger('blur.fs').trigger('focus.fs'); } options.find('.selected').removeClass('selected'); clicked.addClass('selected'); trigger.addClass('selected'); return sel.val(clicked.data('raw-value')).trigger('change.fs').trigger('blur.fs').trigger('focus.fs'); }); options.on('mouseenter.fs', 'li', function() { var hovered, nowHovered; nowHovered = $(this); hovered = options.find('.hover'); hovered.removeClass('hover'); return nowHovered.addClass('hover'); }); options.on('mouseleave.fs', 'li', function() { return options.find('.hover').removeClass('hover'); }); copyOptionsToList = function() { var selOpts; updateTriggerText(); if (isiOS && !settings.forceiOS) { return; } selOpts = sel.find('option'); return sel.find('option').each(function(i, opt) { var optHtml; opt = $(opt); if (!opt.prop('disabled') && (opt.val() || settings.includeBlank)) { optHtml = settings.optionTemplate(opt); if (opt.prop('selected')) { return options.append("<li data-raw-value=\"" + (opt.val()) + "\" class=\"selected\">" + optHtml + "</li>"); } else { return options.append("<li data-raw-value=\"" + (opt.val()) + "\">" + optHtml + "</li>"); } } }); }; sel.on('update.fs', function() { wrapper.find('.options').empty(); return copyOptionsToList(); }); return copyOptionsToList(); }); };
}).call(this);
$('.fancyselect').fancySelect();
Fancyselect Sample - Script Codes
Fancyselect Sample - Script Codes
Home Page Home
Developer UX Snippets
Username appirio-ux
Uploaded October 27, 2022
Rating 3
Size 5,197 Kb
Views 28,336
Do you need developer help for Fancyselect Sample?

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!

UX Snippets (appirio-ux) Script Codes
Name
CSS Tooltip Test
Button examples
Color Indicators
Scroll Progress
A Pen by UX Snippets
Range Slider
Tree Nav - Jade template
Collapsible table
Responsive table with data-labels
CSS Org Chart
Create amazing blog posts 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!