I have a jquery range slider that I am using to select a percentage of color for an overall image and it can have a dynamic number of handles based on how many elements the user decides to use. I am trying to display the percentage for each of the individual handles of the slider in the handles themselves. I have not had luck in figuring this one out and I'm hoping to get some help/direction.
I have found a number of examples on the net that have selected the ".ui-slider-handle" and then modified the text but I can only seem to get this to change one or all of them to the same text. I also got the slider object and then got its children, then iterated through the children and tried changing the text val for each but it never changes it. Any ideas?
This doesn't work:
myslider.slider({
min: 0,
max: 100,
orientation: 'vertical',
values: handles,
slide: function( event, ui ) {
var handleText = $(this)[0].children[0].text;
handleText = "Test";
console.log("val should be changed: ",handleText);
//The below line works, however it changes them all to the same value
//myslider.find("a.ui-slider-handle").text(ui.values);
}
});
Edited answer: You can use each() to do what you want (and here's a working jsFiddle):
myslider.find("a.ui-slider-handle").each(function( index ) {
$(this).text(ui.values[index]);
});
Let's break it down:
myslider.find("a.ui-slider-handle") - get all the handle objects, just like you're doing right now.
.each(function( index ) { - apply a function to each element that we just found, using its index in the jQuery object as an argument. each() is what's doing the heavy lifting; more on it here.
$(this).text(ui.values[index]); - make this handle's text the value from our values object that corresponds to this handle's index.
}); - close up the shop.
That should do the trick!
Note: myslider.find("a.ui-slider-handle").text(ui.values); didn't work because, while it selected all the correct handles, it just assigned them one value - your values sequence. You need to use the above method to break up the contents of values and apply them to the handles separately.
Related
I am kinda drawing a blank on this one facet, and I can't seem to quite figure it out.
So I have a simple HTML select => option element which is populated from the back-end (not really relevant tho)
My question is this:
Let's say I have a pre-made object such as this:
{
keyName1: 450,
keyName2: 800,
keyName3: 300
}
What I want to do is to check if the key name matches a name of an option value in my multi-select dropdown (the values come from an array, using 'ng-repeat' on the option), and if the option value matches the key, add the number value to some sort of increment variable, so I can display the total number of 'keyNames' found.
For example - if a user selects 'keyName1' the incrementer value will total 450. If a user selects 'keyName1' and 'keyName2' the incrementer value will total 1,250.
I am lost on how to accomplish this - right now it is reading only the very first item in the dropdown.
Here is the code doing that:
_.forEach($scope.widget.instance.settings.serviceContractTypes, function (type) {
// if item in array matches what is selected in multi-select option
if(type === $('#contractType:selected').text().trim()) {
// do stuff
}
});
Hope this all made sense, and thanks very much for any direction you might offer...
(does not have to utilize lodash, I'm just used to using it)
jQuery's :selected selector only works for HTML options:
"The :selected selector works for elements. It does not work for checkboxes or radio inputs; use :checked for them."
(https://api.jquery.com/selected-selector/)
You say "I have a simple HTML select => option element which is populated from the back-end (not really relevant tho)"
This could be relevant. By default, an HTML option tag does not support multiple selections; it has to explicitly be created as a select multiple in order to support that. Can you share the HTML code for the option to make it clear whether that's a problem or this is a red herring?
Also, can you echo $scope.widget.instance.settings.serviceContractTypes and share to make sure it's actually matching what's available in the text of the options?
ADDENDUM - Wait, I think I figured it out!
The $('#contractType:selected') selects all the selected options in #contractType and concatenates them. Then $('#contractType:selected').text().trim() trims this down to the first word, which is just the first selected option. You should do something like $('#contractType:selected').text().split(" ") and then check if each type is in the resulting list.
I am using the select2 plugin to convert a multiple select html element to a more presentable format. Also I don't think my question is very much dependent on the plugin.
What the plugin does internally is -
this.select.val(val);
where this.select points to the hidden multiple select element.
On feeding the function above a val of say - 2,4,0 ,
the value stored as confirmed when I do an alert(this.select.val()) is 0,2,4 , i.e. with automatic unwanted sorting according to the order of the options in the select element.. :/
DEMO - http://jsfiddle.net/rohanxx/DYpU8/ (thanks to Mark)
Is there a way to preserve the sort order after feeding in the value to my select element?
Thanks.
This is a very good question. I think this is more to do with the multiselect html element, rather than select2.
If you have a normal multiselect, there is no "order" sort of speak. You just have a list in the original order, with either each item selected or not.
I'm almost 100% sure there is a better way of doing this than the below, but for a workaround it should do just fine.
End result:
JavaScript code
// 'data' brings the unordered list, while 'val' does not
var data = $('#e1').select2('data');
// Push each item into an array
var finalResult = [];
for( item in $('#e1').select2('data') ) {
finalResult.push(data[item].id);
};
// Display the result with a comma
alert( finalResult.join(',') );
JSFiddle:
http://jsfiddle.net/DYpU8/4/
A little late for an answer but I actually found a way of doing this.
Keep in mine that this method will hide the options that are already selected, because for my use case it looked better, plus it needs to be that way in order the choices to be in the order the user made them.
$('.my-multi-select').select2('Your Options').on("select2:select", function (e) {
$('[data-option-id="' + e.params.data.id + '"]').insertBefore(_this.find('option:not(:selected):eq(0)'));
}).on("select2:open", function () {
_this.append(_this.find('option:not(:selected)').sort(function (a, b) {
return +a.getAttribute('data-sort-order') - +b.getAttribute('data-sort-order');
}));
});
And for the styles
.select2-results__option[aria-selected=true]{
display:none !important;
}
You will want to make sure you know how the jQuery .sort() function works for you to be able to modify this for your own needs.
Basically what this is doing is when you select an option, it gets hidden and then placed at the bottom of the other selected options, which are before the unselected options. And when you open the drop down, it sorts all of the unselected options by their pre-determined sort order.
Here's the jsfiddle for the code http://jsfiddle.net/VFskn/2/
The jquery multiselect2side has 2 parts for the list say the Available and Selected
a.To get the values of Selected portion of the I used the following code:
var multipleValues = $("#columnList").val() || [];
b. To get all values of the list I can use:
$('#columnList option').each(function() {
columns.push( $(this).attr('value') );
});
My Question is how I can obtain the Available portion of the list
If I understand your question right, you want to get the value of every option that is in the select under Available?
In the given example this select has the id "columnListms2side__sx", so that you can get the values of its options with
var multipleValues = [];
$("#columnListms2side__sx option").each(function()
{
multipleValues.push($(this).val())
});
here's the updated fiddle: http://jsfiddle.net/VFskn/3/
!important notes though: its not a good idea to mess with it, other then the functions provided by the plugin.
And I'm not sure how safe it is too assume that this select will allways get this id (e.g. if you have multiple of them in one page). It might be smarter to, build a more generic select. (the plugin seems to create a div container after the select it replaces, you want to get the first select in there)
EDIT:
this would be more generic, but less efficient:
$("#columnList").next().find("select").filter(":first").children().each(function(){...}
updated fiddle: http://jsfiddle.net/VFskn/4/
Playing around with Slickgrid. But got some questions that I'm not figurate out.
I have made an Regex filter on two X cells, and it works surprisingly well.
But for every time you filter or make other actions i want to flash all incorrect fields with cellFlash or highlighter.
Atm i have made a formatter with same regex as filter uses but it seems not 100% correct.
The problem when i'm using cellFlash is that it trigger the animation on ALL rows not only the rows thats rendered.
I'm not sure that i'm triggering the flashcell on correct callback/stage, I did it on my filter function i saved all incorrect rows in an array then i loop them throught and trigger flash.
So is it possible to get all items thats rendered in Viewport? Haven't find any information about this. Only data i can get out from getRenderedViewport.. is pxls. getRenderedRange() or getViewport()..
If you need to do processing on each data item in the current slick grid viewport, you can use getRenderedRange() to get the range of data item indexes that are rendered. You could then use that to get each visible data item
function forEachItemInViewport(fn) {
var range = slickGrid.getRenderedRange();
var bottom = range.bottom;
while(bottom--) {
var dataItem = slickGrid.getDataItem(bottom);
fn(dataItem);
}
}
forEachItemInViewport(function (item) {
// do your work on each item in viewport
});
I'm using jquery to display the line beside the textarea.
from this link:
http://alan.blog-city.com/jquerylinedtextarea.htm
Is there any way to change the selected line, so every time the user goes to the next line the line selected changes to the current line.
$(function()
{
// Target all classed with ".lined"
$(".lined").linedtextarea(
{
//change it from 1 to the current line that the user on.
selectedLine: 1
});
// Target a single one
$("#mytextarea").linedtextarea();
});
yep,
function selectLine(n) {
if (n<1) return false; //If the total number of lines is known it is worth checking you are not above it either
$(".codelines .lineno.lineselect").removeClass("lineselect")
$(".codelines .lineno").eq(n-1).addClass("lineselect");
}
with a lot of jQuery plugins (when they are full on jQuery widgets) you can use the "options" method to do this kind of thing, like $(".lined").linedtextarea("options",{selectedLine: 6}) but it doesn't look like this has been turned into a widget. This solution is kind of reverse engineered from the fact that the mod uses the lineselect class to control which line number is highlighted.
We do some checking to make sure we will use a sane value, remove the highlight class from any lines that have it already, and add it to the n-1th line number div (-1 because eq is Zero based).
This won't work if you have multiple lined text boxes on the one page. If that's the case we need to add another parameter to define which one to target and some logic to handle that.