We Keep Coding

Capturing the drop values (not the drags) on bootstrap slider

I am trying to use the BootStrap Slider mentioned here :
http://seiyria.com/bootstrap-slider/
I seem to have run into a rather strange requirement. As users drag the slider, the change in the slider value can change and such change can be capture (as mentioned in the examples in the link above).
However, I want to capture only those values of the slider at which the user "rests" after a slider, (or drops after the drag). She slides, stops, slides back, stops, slides forth stops, and so on. I want to capture values only where she stops.
How can I do this ? Is there an event for a slider, that captures just the drop or the resting place ?
p.s. I have not included any detailed code because I use the code in those linked examples directly, Example 6 in particular, which mentions :
$("#ex6").on("slide", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});

You can do it like this:
$("#ex6").on("slideStop", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});
More info Here

Why ComboBox is not working after applying Resize and Move functionality to PopUpDiv

I have a normal Div with title-header ['Resize and Move Me! , Combobox'] and body part as mention below in link.
When I applied move and resize functionality using javascript, ComboBox on header part is not working. It would not drop list. If I put Combobox outside of that DIVs then its working properly,But inside it would not. See example,
JSFIDDLE DEMO
I have few questions
Can anyone tell me the reason that why its not working?
What should be the solution to make it work properly.

Because, in one the mouse click events, you are trying to block the default behavior of the select box.
function onMouseDown(e) {
onDown(e);
e.preventDefault();
}
Here e.preventDefault, is blocking the select box from showing the options when you click the mouse.
Please comment/delete it out to get the normal behavior of the select box.

Jquery datetimepicker opening first time at different position

I am using Jquery datetimepicker plugin link here
When I click on the field for first time, the datetimepicker is not opening near the field, something like below, the picker is way above the field.
When I close it and click on it second time and after, it is appearing in proper place. depicted below.
This is weird, and when I set either timepicker or datepicker to false, the picker is working fine from the first click.
The code I used to construct the picker is below,
HTML
<input id="DateTimeFrom" type="text" class="widthAdjust" />
JS
$('#DateTimeFrom').datetimepicker({
onShow:function( ct ){
this.setOptions({
maxDate:maximumDate,
maxTime:maximumTime
})
},
mask : true
});
I am not applying any CSS except for setting width to the field.
For maximumDate and maximumTime I performing some logic and setting to it, But I am pretty sure that the logic has no effect on this issue.
EDIT
I have my code in fiddle here. but I couldnt link the datetimepicker js and css.
Any sort of guidance will be helpful.

Try to set offset() for datetimepicker
$("#buttonID").click(function(){
$('.xdsoft_noselect').css('top', $("#DateTimeFrom").offset().top + $("#DateTimeFrom").outerHeight());
});

Styling custom date picker

I'm using this datepicker plugin to display a popup datepicker.
It's working fine, but I'm having trouble assigning it the correct styles.
I have 2 of them, the first not being an issue.
I have the following JS:
$(".datepicker1").pickadate({
min: 1,
onClose: function() {
var picker = $input.pickadate("picker");
picker.set("select", this.component.item.select.pick);
picker.open();
}
});
What it does is simple: The moment a user selects a date on the first picker, the second one is displayed, with the previously selected date displayed(In order to let the user know what the range of dates will be that he/she selects).
Everything works just fine, but I don't want the default blue square background for the selected date. I want something like this as opposed to what I currently have, which is just a different background-color.
Does anyone know how I can achieve this?

Without being able to see the markup or css, my first inclination with these is to add a CSS triangle either to the element, or to the elements :before pseudo class.
As for making the CSS triangle, go here:
http://apps.eky.hk/css-triangle-generator/

You have to find the class
.picker__day--highlighted:hover, .picker--focused .picker__day--highlighted
in the default.date.css file. Then, you can easily modify "everything" concerning the today hightlight shape

date picker should appear when clicked on image

In fiddle i am displaying a dynamic date picker which displays date when we put curser on that text box, that is fine.i want a image to be placed right side of text box and when image will be clicked then same date picker will be displayed.
http://jsfiddle.net/cBwEK/
I am trying by putting an image there but when i click on that image nothing happens. How can it be done? Any help please

As it turns out, there is an option for this very thing: toggleElements. It expects a collection of other elements that can also invoke the datepicker. I added an array with a single element and it seems to work just fine.
var dp = new DatePicker('.picker', {
pickerClass: 'datepicker ',
allowEmpty: true,
toggleElements: ['imageInvokerP']
});
Fiddle: http://jsfiddle.net/cBwEK/10/

one ans was given by Jonathan and this should be the way of doing things of these kinds.
but therez an easy solution you can take
assuming id of your image is Image and that of text box is Input
you can do everything normally
binding the datepicker to the input element using $('#Input').datePicker() in document.Ready
next you can bind the click event of the $('#Image') like this
$('#Image').click(function(){
$('#Input').click();
});
this way automatically your input element will get focus when you will click on the image.