Develop Reference

Adding a custom icon to a selectmenu

I'm working with JQuery & JQuery UI.
I followed the example on the JQuery UI demos for the custom rendering to add icons to the select menu items which is working well. What I'm having trouble with is adding the selected icon to the button that the user clicks to show the menu. I followed the accepted answer found here, and I've got an icon showing, but it doesn't show the custom icon I want it to, it shows one of the standard icons. I've tried many different variations for the CSS and adding classes to the span for the icon, but I can't get it right. When I inspect the element in Chrome, it always shows the image as being derived from the 'ui-button ui-icon' class, not my custom icon class. What combination of CSS and classes to I need to make it show correctly?
I've got a selectmenu defined as follows:
<select name="sourceIcon" id="jsSourceIconSelect">
<option value="AM-FM-2" data-class="am-fm">AM-FM</option>
<option value="CD-2" data-class="cd">CD</option>
<option value="Climate-2" data-class="climate">Climate</option>
<option value="Display-Alt-2" data-class="display-alt">Display Alt</option>
<option value="Display-2" data-class="display">Display</option>
<option value="DVR-2" data-class="dvr">DVR</option>
<option value="Energy Management-2" data-class="energy-management">Energy Management</option>
<option value="Favorites-2" data-class="favorites">Favorites</option>
<option value="Film Reel-2" data-class="film-reel">Film Reel</option>
<option value="Home-2" data-class="home">Home</option>
</select>
and the associated javascript:
$.widget("custom.iconselectmenu", $.ui.selectmenu, {
_renderItem: function(ul, item) {
var li = $("<li>"),
wrapper = $("<div>",{text: item.label});
if(item.disabled){
li.addClass("ui-state-disabled");
}
$("<span>", {
style: item.element.attr("data-style"),
"class":"ui-icon " + item.element.attr("data-class")
}).appendTo(wrapper);
return li.append(wrapper).appendTo(ul);
}
});
$("#jsSourceIconSelect").iconselectmenu({
select: function(event, ui){
$("#" + this.id + "ImgSelected").attr("class","ui-icon" + ui.item.element.data("class"));
},
create: function(event, ui){
var widget=$(this).iconselectmenu("widget");
$span = $('<span id="' + this.id + 'ImgSelected" class="ui-icon ' + $(this).children(":first").data("class") +'">').appendTo(widget);
}
})
.iconselectmenu("menuWidget")
.addClass("ui-menu-icons customicons");
and the associated css:
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper{
padding: .5em 0 .5em 3em;
}
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon{
background-image: url("ui-icons-largeicons.png");
height: 32px;
width: 32px;
top: .1em;
}
edit: thought I should add the css for a few of the icons:
.ui-icon.am-fm{ background-position: 0 0; }
.ui-icon.cd{ background-position: -32px 0; }
.ui-icon.climate{ background-position: -64px 0; }
.ui-icon.display-alt{ background-position: -96px 0;}
.ui-icon.display{ background-position: -128px 0;}
.ui-icon.dvr{background-position: -160px 0;}
.ui-icon.energy-management{ background-position: -192px 0;}
.ui-icon.favorites{background-position: -224px 0;}
.ui-icon.film-reel{background-position: -256px 0;}
.ui-icon.home{background-position: -288px 0;}

The way I handled a custom icon in selectmenu is to change position-x, position-y to normal settings because that was the reason the image wasn't shown.
I just made the following css :
.ui-icon {
background-image: url("/Images/dropdown-icon_2018-10-03/dropdown-icon.png");
background-position-x: 0;
background-position-y: 5px;
}

Using selectmenu examples as OP i came up with the following solution:
$(function () {
$.widget("custom.iconselectmenu", $.ui.selectmenu, {
_renderItem: function (ul, item) {
var li = $("<li>"),
wrapper = $("<div>", { html: item.element.html() });
if (item.disabled) {
li.addClass("ui-state-disabled");
}
$("<span>", {
style: item.element.attr("data-style"),
"class": "ui-icon " + item.element.attr("data-class")
})
.appendTo(wrapper);
return li.append(wrapper).appendTo(ul);
}
});
$("#people")
.iconselectmenu({
create: function (event, ui) {
var widget = $(this).iconselectmenu("widget");
$span = $('<span id="' + this.id + 'selected" class="avatar-selected"> ').html(" ").appendTo(widget);
$span.attr("style", $(this).children(":first").data("style"));
},
change: function (event, ui) {
$("#" + this.id + 'selected').attr("style", ui.item.element.data("style"));
}
})
.iconselectmenu("menuWidget")
.addClass("ui-menu-icons avatar");
});
and corresponding CSS:
.ui-selectmenu-menu .ui-menu.avatar .ui-menu-item-wrapper {
padding: 2px 10px 0 30px;
}
.ui-selectmenu-menu .ui-menu.avatar .ui-menu-item .ui-icon {
height: 24px;
width: 24px;
top: 0.1em;
}
.ui-selectmenu-text {
padding-left: 2em;
}
.avatar-selected {
position:absolute;
height: 24px;
width: 24px;
right:auto;
margin-top:-12px;
top:50%;
background-repeat:no-repeat;
}

Highlight words from multiple input fields simultaneously

I have a problem i'm working on, my program will highlight words if typed in an input field. It wont highlight words from both.(Example Input1 type "Test1", Input2 type "Test2") is there a way to keep the highlighted words active from one field when the user switches to another?
JSBIN: http://jsbin.com/xovisayaso/edit?html,css,js,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<title>JS Bin</title>
</head>
<body>
<div id="listArray">
<span>Test1</span>
<span>Test2</span>
<span>Test3</span>
</div>
<input type="text" class="form-control" id="userArray">
<input type="text" class="form-control" id="userArray2">
</body>
</html>
<script
$("#userArray, #userArray2").on('change keyup paste', function() {
var input = $(this).val().toLowerCase().split(" ");
$('#listArray span').each(function(){
$(this).removeClass('active');
if( $.inArray( $(this).text().toLowerCase(), input ) != -1 ) {
$(this).addClass('active');}});});
</script>
<style>#list_input > div { border:4px solid; padding: 1em; margin: 1em auto; }
#listArray { overflow: auto; }
#listArray span { display: block; float: left; clear: left; padding:4px; margin:1px; }
#listArray span.active { background: green; }
}
</style>

You can achieve the desired effect by removing the active class whenever the text changes and then checking against both inputs:
$("#userArray, #userArray2").on('change keyup paste', function() {
$('#listArray span').removeClass('active');
$('input').each(function() {
var input = $(this).val().toLowerCase().split(" ");
$('#listArray span').each(function() {
if ($.inArray($(this).text().toLowerCase(), input) != -1) {
$(this).addClass('active');
}
});
});
});
#list_input > div {
border: 4px solid;
padding: 1em;
margin: 1em auto;
}
#listArray {
overflow: auto;
}
#listArray span {
display: block;
float: left;
clear: left;
padding: 4px;
margin: 1px;
}
#listArray span.active {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="listArray">
<span>Test1</span>
<span>Test2</span>
<span>Test3</span>
</div>
<input type="text" class="form-control" id="userArray">
<input type="text" class="form-control" id="userArray2">

Try this code :
$("#userArray, #userArray2").on('change keyup paste', function() {
var input = $("input").map(function(){return $(this).val().toLowerCase();}).get();
$('#listArray span').each(function(){
if( $.inArray( $(this).text().toLowerCase(), input ) != -1 ) {
$(this).addClass('active');
}
else
$(this).removeClass('active');
});
});
Reason : In your code you are only getting single value at a time to compare, rather the both textbox's values !!!

How do I align text/class with the button in the <style> tag when it won't center in css or style tag?

I put margin-auto in the toggle class on my site. It sort of went it the middle but it didn't align with the button. Do I need to do something in CSS or JavaScript and what should I place there?
<style>
.toggler { width: 500px; height: 200px; position: relative; margin-top:0; margin-right:auto; margin-bottom:0;
}
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
.ui-effects-transfer { border: 2px dotted gray; }
.kiri{text-align:center;}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$( function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = $( "#effectTypes" ).val();
// Most effect types need no options passed by default
var options = {};
// some effects have required parameters
if ( selectedEffect === "scale" ) {
options = { percent: 50 };
} else if ( selectedEffect === "transfer" ) {
options = { to: "#button", className: "ui-effects-transfer" };
} else if ( selectedEffect === "size" ) {
options = { to: { width: 200, height: 60 } };
}
// Run the effect
$( "#effect" ).effect( selectedEffect, options, 500, callback );
};
// Callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
}, 1000 );
};
// Set effect from select menu value
$( "#button" ).on( "click", function() {
runEffect();
return false;
});
} );
</script>
</head>
<body>
<nav>
<ul>
<li>Contact</li>
<li>JQUERY TIPS</li>
<li>JS TIPS</li>
<li>Info</li>
<li>About</li>
<li>Home</li>
</ul>
</nav>
<h2>Jquery Tips</h2>
<p id="js">JavaScript/jQuery is a programming language that you can use to add interactivity to your web page.</p>
<p id="poo"> if you put your mouse over the sentence above there will be a light blue highlight the lightgray background that was made using the <span class="pink">onmouse event.</span>
<div class="footer">
<span class="flatorange">#2016-20XX &#8226 Nia Daniels &#8226 FINAL EXAM &#8226 CIST1520 </span><br>
<span class="flatblue">Scripting Technologies</span><br>
<span class="flatgreen">Mr.Cash</span><br>
</div>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">2 Jquery Effects</h3>
<p id="hmm">eres una mujer o hombre? soy una mujer. quiero una pizza. queires una pizza o no?</p>
</div>
</div>
<div class="kiri">
<select name="effects" id="effectTypes">
<option value="bounce">Bounce</option>
<option value="clip">Clip</option>
</select></div>
<div class="kiri">
<button id="button" class="ui-state-default ui-corner-all">Run Le Effect</button></div>
<script>

Add margin: 0 auto; to both .toggler and #effect and it should do the trick. Since you set a width on #effect you'll need the auto margin to handle the centering for you.

Expanding Search Bar

I'm developing a webpage of videos, like YouTube or Vimeo...
I'm working now in a search input... I was searching in Google about guides and I found this one: http://tympanus.net/codrops/2013/06/26/expanding-search-bar-deconstructed/
I have almost done it, but the problem is, the guy who posted it, did it with Javascript, not with JQuery (easier...)
I have been trying to modify the code, the search input appears when you click on the button, but it doesn't dissapear...
Could you help me in this part?
Javascript:
;( function( window ) {
function UISearch( el, options ) {
this.el = el;
this.inputEl = el.querySelector( 'form > input.sb-search-input' );
this._initEvents();
}
UISearch.prototype = {
_initEvents : function() {
var self = this,
initSearchFn = function( ev ) {
if( !classie.has( self.el, 'sb-search-open' ) ) { // open it
ev.preventDefault();
self.open();
}
else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) { // close it
self.close();
}
}
this.el.addEventListener( 'click', initSearchFn );
this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); });
},
open : function() {
classie.add( this.el, 'sb-search-open' );
},
close : function() {
classie.remove( this.el, 'sb-search-open' );
}
}
// add to global namespace
window.UISearch = UISearch;
} )( window );
My JQuery code:
$(document).ready(function () {
$("#search_container").click(function(){ if(!$("#search_container").hasClass("open")){ $("#search_container").addClass("open"); } });
$(".search_input").click(function(){
if($("#search_container").hasClass("open")){
if($(".search_input").val() == ""){
$("#search_container").removeClass("open");
} else {
// Search
}
}
});
});
And my HTML code:
<div id="search_container">
<form>
<input type="search" class="search_input" placeholder="Búsqueda" id="search" value="" />
<input type="submit" class="search_submit" value="" />
<span class="btn icon_search"></span>
</form>
</div>

You can achieve it by combining a little css, and the .animate() function of jQuery.
Here is the JS part, see the fiddle for live demo
$(document).ready(function () {
$("#btnsearch").on('click',function(e){
e.preventDefault();
e.stopPropagation();
/* Check if field is already displayed, if not, displays it, else, submit */
if($('#search_container').hasClass('closed')){
$('#search_container').toggleClass('closed');
$('#hint').html('');
$('#search').animate({
right: '40px',
}, 200, function(){
/*
* Bind event to hide field when clicking OUT
* use .one() instead of .on() to avoid stacking binding click events on document
*/
$(document).one('click', function(){
$('#search_container').toggleClass('closed');
$('#search').animate({
right: '-200px',
}, 200);
$('#hint').html('');
});
});
}
else {
/* Add here your field entry check */
/* Submit your form with $('#myform').submit(); */
$('#hint').html("Your form has been submitted with $('#myform').submit();");
}
});
$('#search').on('click',function(e){
/* Needed to avoid closing field when clicking on it */
e.preventDefault();
e.stopPropagation();
});
});
LIVE DEMO HERE

Sliding effect can be achieved with CSS (or jQuery .animate({width: '100%'})). Also, you are removing class, but never adding it back.
$(document).ready(function() {
$('.input-wrapper')
.click(function() {
$(this).toggleClass('active');
$('input', this).focus();
})
.focusout(function() {
$(this).removeClass('active');
});
});
.wrapper {
width: 200px;
background-color: #ddd;
padding: 10px 25px;
}
.input-wrapper {
width: 25px;
height: 25px;
overflow: hidden;
position: relative;
float: right;
-webkit-transition: width .5s;
/* For Safari 3.1 to 6.0 */
transition: width .5s;
}
.input-wrapper input {
width: 100%;
border: none;
}
.input-wrapper.active {
width: 100%;
}
.input-wrapper:after {
content: '?';
width: 25px;
height: 25px;
text-align: center;
font-weight: bold;
background-color: red;
color: black;
line-height: 20px;
font-size: 20px;
display: block;
position: absolute;
right: 0;
top: 0;
}
.clear {
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="input-wrapper">
<input type="text" placeholder="Enter your search term..." />
</div>
<div class="clear"></div>
<div class="input-wrapper">
<input type="text" placeholder="Enter your search term..." />
</div>
<div class="clear"></div>
<div class="input-wrapper">
<input type="text" placeholder="Enter your search term..." />
</div>
<div class="clear"></div>
<div class="input-wrapper">
<input type="text" placeholder="Enter your search term..." />
</div>
<div class="clear"></div>
</div>

Drag/Drop event only works once on dynamically added divs

I'm using the drag and drop libraries found here: http://threedubmedia.com/code/event/drop/
But I can't seem to get it to work more than once for elements added dynamically.
I've made a jsfiddle to demonstrate the issue.
http://jsfiddle.net/Rn9gQ/
Here you can click the button to add new divs, and you can drag the mouse to select some of them, but you can't select again after finishing dragging the mouse. Even if you make no selection the first time.
Now sure where I'm going wrong, and any help would be greatly appreciated :)
*Edit: Added code below
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="http://threedubmedia.com/inc/js/jquery-1.7.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag.live-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drop-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drop.live-2.2.js"></script>
<title>Testpage</title>
</head>
<body>
<script type="text/javascript">
jQuery(function($){
$('#foo').click(function(){
$('#main').append($('<div class="drop">foo</div>'))
});
$( document )
.drag("start",function( ev, dd ){
return $('<div class="selection" />')
.css('opacity', .65 )
.appendTo( document.body );
})
.drag(function( ev, dd ){
$( dd.proxy ).css({
top: Math.min( ev.pageY, dd.startY ),
left: Math.min( ev.pageX, dd.startX ),
height: Math.abs( ev.pageY - dd.startY ),
width: Math.abs( ev.pageX - dd.startX )
});
})
.drag("end",function( ev, dd ){
$( dd.proxy ).remove();
})
.on("dropstart", ".drop", function(){
$(this).addClass("active");
})
.on("drop", ".drop", function(){
$(this).toggleClass("dropped");
})
.on("dropend", ".drop", function(){
$(this).removeClass("active");
});
$.drop({ multi: true });
});
</script>
<h1>Live adding of selectable elements</h1>
<p>Click and drag to select any number of dashed boxes.</p>
<input type="button" id="foo" value="Add a box"/>
<div id="main"></div>
<style type="text/css">
.selection {
position: absolute;
border: 1px solid #89B;
background: #BCE;
background-color: #BEC;
border-color: #8B9;
}
.drop {
float: left;
border: 1px dashed #888;
background: #EEE;
text-align: center;
padding: 20px;
margin: 0 10px 10px 0;
}
.dropped {
background-color: #EBC;
border-color: #B89;
}
.active {
background-color: #CEB;
border-color: #9B8;
}
</style></body>
</html>