We Keep Coding

Show increasing and decreasing values on noUiSlider

I'm using a noUiSlider with one handle and a range from 0 to 50. I'm trying to show the increasing value of the slider on an input field to the left of the slider and the diminishing value on the right - as in the below example:
Slider
Has anyone else tried to do this or know how it can be achieved?
var connectSlider = document.getElementById('slider');
noUiSlider.create(connectSlider, {
start: 20,
tooltips: true,
decimals: 0,
connect: [true, false],
range: {
'min': 0,
'max': 50,
},
format: wNumb ({decimals:0})
});
var inputFormat = document.getElementById('slider-value');
sliderFormat.noUiSlider.on('update', function( values, handle ) {
inputFormat.value = values[handle];
});
inputFormat.addEventListener('change', function(){
sliderFormat.noUiSlider.set(this.value);
});
$("#slider").Link('lower').to('#slider-value',function(value){
$(this).val(Math.abs(value));
});
Here it is in jsfiddle
I managed to get the left value to display on the screen but don't know how to bind it to the input field. And I don't know how to get the value on the right. I assume this should be 'max value' minus 'slider value' but don't have enough knowledge of JavaScript so I would really appreciate some help with this :)

I'm working with Slider control from the 0.99.0 Materialize version and I wanted to get that behavior too. So I do some tricks as follow:
My HTML inside a form tag:
<div class="input-field col s12">
<label for="wmAttendance">Porcentaje de Asistencias</label><br>
<p class="range-field">
<input type="range" id="test5" min="0" max="100" oninput="wAttendance.value = test5.value" />
<output id="wAttendance" name="wAttendance">0<span>% - Mujeres</span></output>
<output id="mAttendance" name="mAttendance" class="right">0<span>% - Hombres</span></output>
</p>
</div>
JS needed to intercept changes on the range input
$(document).ready(function() {
$("#test5").on("input", function() {
var women = this.value, men = 100 - women;
$("#a_women").html(women);
$("#a_men").html(men);
$("#wAttendance").html(women + "<span>% - Mujeres</span>");
$("#mAttendance").html(men + "<span>% - Hombres</span>");
});
});
And voila we have make the magic happen and the result is something like this:
In this way we can catch both values to send in the form or to make some operations etc. Here you have my pen for reference.
I hope it could be useful for somebody else.

Ive had a play with you code and got this working:
var connectSlider = document.getElementById('slider');
// add max amount variable (used to calculate #slider-value-after input value)
var maxAmount = 50
noUiSlider.create(connectSlider, {
start: 20,
tooltips: true,
decimals: 0,
connect: [true, false],
range: {
'min': 0,
'max': maxAmount, // use max amount variable to set max range amount
},
format: wNumb ({decimals:0})
});
var inputFormat = document.getElementById('slider-value');
// created variable for #slider-value-after input
var inputFormat2 = document.getElementById('slider-value-after');
// for some reason you were looking for a 'sliderFormat' variable to watch for slider updates
// this wasnt created and was causing JS errors in the fiddle
// Ive updated this to the 'connectSlider' variable you created.
connectSlider.noUiSlider.on('update', function( values, handle ) {
// on update set first input value
inputFormat.value = values[handle];
// also set #slider-value-after input value by minus'ing the max value by current slider value
inputFormat2.value = maxAmount - values[handle];
});
inputFormat.addEventListener('change', function(){
connectSlider.noUiSlider.set(this.value);
});
I think it is also possible to get slider options which would remove the need to set the maxAmount variable as you could query the sliders max range amount instead but I cant remember the code for this.

Set value to a datepicker without clicking 'Done' button

I'm using the Webix time picker and have no idea how to force it to set the value without clicking the "Done" button (I don't want to display it at all). Is there a way to do this through the DOM or through the plain JS?
For example, a time picker (a datepicker with type:"time")
var time = webix.ui({
view:"datepicker",
align: "right",
label: 'Select Date',
labelWidth:100, width:350,
type:"time", stringResult:true
});
http://webix.com/snippet/232a2e2c

I modified your code a little. Now you can select a date hitting the Enter key:
var time = webix.ui({
view:"datepicker",
align: "right",
label: 'Select Date',
labelWidth:100, width:350,
type:"time", stringResult:true
});
document.addEventListener("keydown", keyDownTextField, false);
function keyDownTextField(e) {
var keyCode = e.keyCode;
if(keyCode==13) {
var done = document.getElementsByClassName('webix_cal_done');
if(done.length > 0){
done[0].click();
}
}
}
Working fiddle: http://webix.com/snippet/91f4cecc

I've created a similar solution for my project using DOM. Works good enough for me, but actually, it's a temporary hack (unless I can find something better). Check it out:
time.getPopup().attachEvent("onhide", function(){
var timeArr = document.getElementsByClassName("webix_cal_block webix_selected");
if (timeArr.length == 2){
var hour = timeArr[0].getAttribute("data-value");
var min = timeArr[1].getAttribute("data-value");
time.setValue(hour+" "+min);
}
});
http://webix.com/snippet/ff554921

Based on your code, I would look at using datepicker() directly instead of using ui. its part of the jquery UI set. I have linked directly to the datepicker site.
var time = webix.datepicker();
And on the jquery page there is a list of time picker plugins that may also help fill the void
Timepicker plugins

all done in one script:
var time = webix.ui({
view:"datepicker",
align: "right",
label: 'Select Date',
labelWidth:100, width:350,
type:"time", stringResult:true
}).attachEvent("onBlur", function(){
document.getElementsByClassName('webix_cal_done')[0].click();
});
thanks #Hackerman http://webix.com/snippet/1613c3d2

Issue using Buttons instead of default navigation with Glide.js

I am working with the glide.js library to make an image slider on my website. I would like to have three pre made buttons to act as the slider buttons instead of the default navigation. The default nav seems to be using <a> tags.
Looking through the js file It seems the default navigation is created here:
Glide.prototype.navigation = function() {
this.navigation.items = {};
//CLASS
// Navigation wrapper
this.navigation.wrapper = $('<div />', {
'class': this.options.navigationClass
}).appendTo(
/**
* Setting append target
* If option is true set default target, that is slider wrapper
* Else get target set in options
* #type {Bool or String}
*/
(this.options.navigation === true) ? this.parent : this.options.navigation
);
//Navigation controls
for (var i = 0; i < this.slides.length; i++) {
this.navigation.items[i] = $('<li />', {
'href': '#',
'class': this.options.navigationItemClass,
// Direction and distance -> Item index forward
'data-distance': i
}).appendTo(this.navigation.wrapper);
}
// Add navCurrentItemClass to the first navigation item
this.navigation.items[0].addClass(this.options.navigationCurrentItemClass);
// If centered option is true
if (this.options.navigationCenter) {
// Center bullet navigation
this.navigation.wrapper.css({
'left': '50%',
'width': this.navigation.wrapper.children().outerWidth(true) * this.navigation.wrapper.children().length,
'margin-left': -(this.navigation.wrapper.outerWidth(true)/2)
});
}
};
I adjusted the code, I replaced the loop with the code below to use 3 buttons I placed on my html page but it has no effect. I'm just wondering if I am doing something wrong, or if it is even possible? This is the changes I made to the code:
this.navigation.items[0] = $('.b1', {
'href': '#',
'class': this.options.navigationItemClass,
'data-distance': 0
}).appendTo(this.navigation.wrapper);
this.navigation.items[1] = $('.b2', {
'href': '#',
'class': this.options.navigationItemClass,
'data-distance': 1
}).appendTo(this.navigation.wrapper);
this.navigation.items[2] = $('.b3', {
'href': '#',
'class': this.options.navigationItemClass,
'data-distance': 2
}).appendTo(this.navigation.wrapper);
Does anyone have any idea how I might implement this?

I just solved the issue. Might be helpful to anyone trying to do the same thing. It was very easy, I don't know how I didn't figure it out initially.
Basically initialize the slider as follows:
$('.slider').glide({
autoplay: 5000,
arrows: 'none',
navigation: 'none'
});
Get an instance of the API:
var glide = $('.slider').glide().data('api_glide');
Then get references to each button and code the required action you want to execute when the button is clicked:
$('.b1').click(function(){
console.log("Button 1 Clicked");
glide.jump(1, console.log('1'));
});
$('.b2').click(function(){
console.log("Button 2 Clicked");
glide.jump(2, console.log('2'));
});
$('.b3').click(function(){
console.log("Button 3 Clicked");
glide.jump(3, console.log('3'));
});
All of this assumes you've got three buttons on your page like so:
<button class="b1" id="b1" name="b1" >Button 1</button>
<button class="b2" id="b2" name="b2">Button 2</button>
<button class="b3" id="b3" name="b3">Button 3</button>

CustomColors colors in ExtJS 4 menu color picker (Ext.menu.ColorPicker)

and thank you for viewing this message!
I have a problem in one of my projects that uses a Ext.menu.ColorPicker
I don't know why (and it's probably something very simple, i hope) but the picker simply does not assume the custom colors that i need it to have!
Here is some sample code, that illustrates my problem:
Ext.onReady(function () {
var customColors = [
'fa7166', 'cf2424', 'a01a1a', '7e3838', 'ca7609', 'f88015', 'eda12a', 'd5b816',
'e281ca', 'bf53a4', '9d3283', '7a0f60', '542382', '7742a9', '8763ca', 'b586e2',
'7399f9', '4e79e6', '2951b9', '133897', '1a5173', '1a699c', '3694b7', '64b9d9',
'a8c67b', '83ad47', '2e8f0c', '176413', '0f4c30', '386651', '3ea987', '7bc3b5'
];
var picker = Ext.create('Ext.picker.Color');
picker.colors[0] = '556677';
picker.colors = customColors;
var btn = Ext.create('Ext.Button', {
menu: {
xtype: 'colormenu',
picker: picker,
value: 'FFFFFF',
handler: function (obj, rgb) {
Ext.Msg.alert('border-color: ' + rgb.toString());
} // handler
}, // menu
renderTo: Ext.getBody(),
text: 'Menu Button'
}).showMenu();
}); // onReady()
The line:
picker.colors[0] = '556677';
works perfectly, has you can see, i can change the element 0 of the array.
But this line:
picker.colors = customColors;
Should assign the whole array of new colors to the picker, i don't know why, but it doesn't seem to work.
I need the component to have all of those colors, 32 colors not the 40 default colors that are default on the picker!
How should i do this?
Thanks in advance...

You are you using the wrong combination of widgets, you are embedding a Ext.menu.ColorPicker inside another Ext.menu.Menu, instead of that you should use the Ext.menu.ColorPicker as is, and then you will be good to go, like this
var customColors = ['fa7166', 'cf2424', ...];
var pickerMenu = Ext.create('Ext.menu.ColorPicker');
pickerMenu.picker.colors = customColors;
var btn = Ext.create('Ext.Button', {
menu: pickerMenu, // menu
renderTo: Ext.getBody(),
text: 'Menu Button'
}).showMenu();
Here's a modified version of your code that works with the custom color list. Hope it helps to solve your problem.

Options not cleared from previous call jQuery

I've made this little plugin to show Twitter style alerts:
jQuery.fn.myAlert = function (options) {
var defaults = {
message: false,
class: 'normal',
timer: 500,
delay: 3000,
};
var options = $.extend(defaults, options);
if (!options.message || options.message == '') {
return false;
}
$('body').append('<div id="alert_notification" class="'+options.class+'"><div id="alert_message">' + options.message + '</div></div>')
$('#alert_notification').slideToggle(options.timer).delay(options.delay).slideToggle(options.timer);
return;
}
The problem is: first time it works great, but when I call again in the same page, the values are set from previous call.
Any ideas how to make it work?

My guess is that the slideToggle() isn't showing the <div> you are intending it to show because jQuery isn't appending new <div>s that don't have unique IDs. You should probably remove the originally appended <div>s from the page before appending the new ones. Or, make jQuery replace the existing ones.
$('#alert_notification').remove();
$('body').append(...);
In addition, class is a reserved word in JavaScript. I would change your defaults to:
var defaults = {
message: false,
'class': 'normal',
timer: 500,
delay: 3000,
};
And then access it with options['class'] instead of options.class, or pick a different name for the class property.