jQuery - add icon to select option based on value - javascript

I am currently trying to make any use of Polylang, a Wordpress plugin that allows to add language switcher to the website.
It currently generates simple select dropdown menu and changes the language upon selecting the language, so it's ok, however I am unable to style it properly - it's a raw dropdown menu.
I would like to add icons next to the displayed option, and as far as I know jQuery is my best shot here.
The issue I am having is that <option> tags are missing id or class tags, and it is impossible to add them without modifying the plugin itself.
Is it possible to create a jquery script that will display a flag next to the option based on it's value attribute?
Can you show me any example how to?
<select name="lang_choice" id="lang_choice">
<option value="en">English</option>
<option value="fr" selected="selected">French</option>
<option value="de">Deutsch</option>
</select>

SOLUTION 1 (Flags outside of the dropdown):
Try this:
$('<img class=flagicon src="'+$("select#lang_choice").val()+'.png">').insertAfter("#lang_choice");
$("select#lang_choice").change(function(){
$(".flagicon").attr("src", $("select#lang_choice").val()+'.png');
});
The function assumes, that you have your flags named fr.png, de.png and en.png
The first line adds the first icon, if no option has changed yet.
JSFiddle: http://jsfiddle.net/2j46orr4/1/
SOLUTION 2 (Flags inside the dropdown, every option has its own background-image):
If you want to show the flag INSIDE the option, use a background-image:
CSS:
#lang_choice {
background-repeat: no-repeat;
background-image: url(/img/en.png);
background-position: right center;
padding-right: 20px;
}
#lang_choice option:nth-child(1) {
background: url(/img/en.png) no-repeat right center;
}
#lang_choice option:nth-child(2) {
background: url(/img/fr.png) no-repeat right center;
}
#lang_choice option:nth-child(3) {
background: url(/img/de.png) no-repeat right center;
}
jQuery:
$("select#lang_choice").css("background-image",'url(/img/'+$("select#lang_choice").val()+'.png)');
$("select#lang_choice").change(function(){
$("select#lang_choice").css("background-image",'url(/img/'+$("select#lang_choice").val()+'.png)');
});
The flags have 16px margin on their right, so they are not hidden under the option arrow.
Demo: http://jsfiddle.net/2j46orr4/7/
(Chrome does not seem to render the option > background-image at the moment.)

you can use a jquery plugin like this one.
HERE: http://designwithpc.com/Plugins/ddSlick#demo

Related

Select2 - Make each selected option be in its own line

I was wondering if there's an option in select2 to make each selected item appear in its own line when using multiple selection.
<select id="items-select" multiple>
<optgroup label="Items">
<option>Alpha</option>
<option>Bravo</option>
...
<option>Zulu</option>
</optgroup>
</select>
$('#items-select').select2();
This is the default behavior
I want each option to appear in its own line because the selected options could be 30+ at a time and it would make it easier for the user to check if they got what they wanted.
I tried using the templateSelection option but adding a line break or a <br> tag did nothing there. Currently, I'm able to achieve this by using the following CSS rule
.select2-selection__rendered {
display: grid !important; /* by default it's inline-block */
}
Is there something I'm missing or is there no other way to do this?
You could add the following CSS rule :
.select2-selection--multiple .select2-selection__choice {
display: block !important;
width: fit-content;
}

How to make a Select element accessible if it has no label?

I'm learning about accessibility in HTML and I came across an example of a Select dropdown HTML element, this element doesn't have any text label next to it, just the context of a title higher up the page gives an idea to what this element contains e.g. for example a list of countries on a section about countries.
When running an accessibility tool on it, the tool complains that there is no accessible name, I was wondering if there is a way to give this a name for a screen reader without having to add a label if that is not wanted as part of the design?
Short Answer
It isn't about what you want as part of your design, it is about what makes the page usable for as many people as possible. You should make the design work with a visible and properly associated label.
Longer Answer
There are ways we can add a label that isn't visible, one way being aria-label:
<select aria-label="label for the select">
</select>
Or we could use a visually hidden class on a <label> element so that it is still reachable by Assistive Tech (screen readers etc.) but does not show visually:
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
<label for="select1" class="visually-hidden">Label Text</label>
<select id="select1">
<option>Option 1</option>
<option>Option 2</option>
</select>
But although that helps people using Assistive Tech (AT) such as a screen reader, it doesn't help everybody else.
What if someone has a learning difficulty and cannot associate the options in your select with the heading further up?
What if someone is using a screen magnifier and needs a label close to the control to know what it is for?
What if someone is using a custom style sheet that changes your layout and the association based on the layout doesn't work anymore?
So the answer is to add a <label> that is visible and properly associated to make it accessible and better for everybody.
The design should not suffer from a visible label (and if it does, your graphic designer / UI team need to up their game!) and it is likely to have the added bonus that people will feel like the form is easier to fill out, increasing conversions (as you reduce "friction").
So the best thing is to add a visible label:
<label for="select1">The label</label>
<select id="select1">
<option>Option 1</option>
<option>Option 2</option>
</select>
Note the use of an explicit label using for="IDofSelect", rather than an implicit label - where you wrap the <select> in a <label>, as implicit labels can cause problems with voice software such as Dragon Naturally Speaking

How to display bootstrap select combo box in datatable?

Can anyone help me with my following query please:
- I am using dataTable to display my data. However, when I am using bootstrap select dropdown to display inside one of the column then, when menu gets open it's hide by dataTable. So how to resolve this:
As you can see the other two menu item is hidden by dataTable so how to show all of the three menu item????
Should show me like other two items as well of the combobox like following:
Some dropdown code:
<select class="selectpicker remove-example">
<option value="Mustard">Mustard</option>
<option value="Ketchup">Ketchup</option>
<option value="Relish">Relish</option>
Table will be the bootstrap and dataTable.....
Please let me know if anyone have any idea??? Thanks in advanced:)
You have to set the container option, see example here
So you code become:
<select class="selectpicker remove-example" data-container="body">
<option value="Mustard">Mustard</option>
<option value="Ketchup">Ketchup</option>
<option value="Relish">Relish</option>
I resolved my issue by removing some of the lines from bootstrap component.css file as they are stopping overflow of the combo box out of the box.
As it was look like following:
.table-scrollable {
width: 100%;
/* overflow-x: auto;*/ /* removed on 24/11/2015 as stop overflowing combobox*/
/* overflow-y: hidden;*/ /* removed on 24/11/2015 as stop overflowing combobox*/
border: 1px solid #dddddd;
margin: 10px 0 !important;
}
So good think is it's working now so, it's not good idea to directly edit the bootstrap component.css file but you can do the inline as well wherever you want combo into the table which have table-scrollable class.
Good part is it's working.:)

How do you get rid of a random "pressed" class popping up on <div> click?

I currently have a div that I am trying to make into a like button that when clicked it switches to another image and back again when clicked again.....
With that I am having a problem where every time I click the div image it adds a class called "pressed" and the 2nd image only stays until I lift my finger off of the left-click.
I am using phonegap and and Intel mobile framework to help with the html, css, and javascript.
Is there anyway to disable this function from popping up on click or is there anything I can do to make the 2 images swap on click with a much easier method?
Thanks for the help. I am a little new at this.
HTML
<td align="right">
<div class="like_button"></div>
</td>
CSS
.like_button {
background-color: transparent;
border-color: transparent;
border:0px;
background-image: url(../img/like_button.png);
background-size: 52px 52px;
height: 52px;
width: 52px;
}
.like_button:active {
background-image: url(../img/liked_button.png);
background-size: 52px 52px;
height: 52px;
width: 52px;
}
JAVASCRIPT
jQuery('like_button').click(function(){
jQuery(this).toggleClass('active');
});
Like what lmgonzalves said in the comments, I think the problem has to do with the :active pseudo selector which is mostly used to alter an element's state while it is being activated (being clicked on or otherwise activated), hence the split second effect you are experiencing when you lift your finger away.
Instead, you should remove the pseudo selector and use a simple class selector like .like_button.clicked in handling state changes CSS.
You can see the demo here: https://jsfiddle.net/k135g025/
Hope this helps!
You need to change .like_button:active to .like_button.active in your CSS.
And also jQuery('like_button') should be jQuery('.like_button') in jQuery code.

Show the URL preview in the bottom left of the browser for a clickable div

I have made a div clickable using jquery. Is there a way to also tell the browser to display the target of the clickable div like it does for anchors? (example in the bottom left of the image below)
In answer to those suggesting using an anchor tag - That's not the question I asked. I want to avoid using anchor tags as that requires changing a lot of html, rather than a small amount of jquery. And even if changing the html to use anchors is the correct thing to do - it will still be useful to know if this is possible.
Edit it seems this is not easilly possible, but an alternative suggested by Pete, using jquery to wrap the div in an anchor works fine (better than I thought it would)
Just use a normal link and hide it:
a {
opacity: 0;
font-size: 100px;
}
div {
width: 100px;
height: 100px;
border: 1px solid red;
}
<div>
hidden link
</div>

Categories

Resources