Develop Reference

JQuery UI slider shows wrong value when dragged to 100 (shows 0)

I've created a JQuery UI slider and using both change and slide events. Problem is when adding the slide event and dragging the slider to 100 the value shows as 0 not 100.
Fiddle here: http://jsfiddle.net/nrNX8/524/
var total;
var s = $("#slider").slider({
value: 0,
min: 0,
max: 500,
step: 100,
change: function(event, ui) {
$('#select').val(s.slider('value'));
},
slide: function(event, ui) {
$('#select').val(s.slider('value'));
},
});
$('#up').click(function() {
s.slider('value', s.slider('value') + s.slider("option", "step"));
$('#select').val(s.slider('value'));
});
$('#down').click(function() {
s.slider('value', s.slider('value') - s.slider("option", "step"));
$('#select').val(s.slider('value'));
});
$('#select').change(function() {
s.slider('value', $(this).val());
});

The problem is that when the slide event is fired, the value hasn't actually changed yet, which means that s.slider('value') is still zero when you set it.
Use the value that is passed to the slide callback rather than the value current set on the slider. In other words, you should change s.slider('value') to ui.value inside of the slide callback:
Updated Example
slide: function( event, ui ) {
$('#select').val(ui.value);
},
Reference: jQuery UI slide( event, ui )

According to the docs
Triggered on every mouse move during slide. The value provided in the
event as ui.value represents the value that the handle will have as a
result of the current movement. Canceling the event will prevent the
handle from moving and the handle will continue to have its previous
value.
value of the slider doesnt change during slide, you can access currently selected value via ui.value:
slide: function( event, ui ) {
$('#select').val(ui.value);
}
Updated fiddle

jQuery ui autocomplete stay focus on mouseout

I am using the this autocomplete, so far everything is good, but I was wondering how can I make the focus to stay if we mouseout.. I mean if I type something and mouseover to it they will be gray background on that focus and if I mouseout it will return to white, I want it to stay gray background. in other words I want the hover to stay.
this is an example how I want it to be http://xdsoft.net/jqplugins/autocomplete/ but for some reasons I want to use jquery ui autocomplete.
I don't think this is possible with css ? so..
demo http://jsfiddle.net/2wyqjhmk/
code
$.widget("ui.autocomplete", $.ui.autocomplete, {
options: {
maxItems: 9999
},
_renderMenu: function (ul, items) {
var that = this,
count = 0;
$.each(items, function (index, item) {
if (count < that.options.maxItems) {
that._renderItemData(ul, item);
}
count++;
});
}
});
$(function () {
$("#tags").autocomplete({
source: availableTags,
maxItems: 10
});
});

.ui-menu-item.selected {
background: pink;
}
Determine the previous selected li, find it and add the selected class. This should allow for custom styling of the UL that is shown when you type.

How do I get a value where a drag-able element dropped?

I'm now developing a website that can drag elements and drop into a table cells (each cell has its "ID")
Now I can drag and drop the element to the cells but I want to know
How to get the ID of table cell where I dropped the element?
here's the picture's concept.
Suppose that cell's ID are the combination of row and column number.

At first you need to rename yours IDs because one ID can't start with a number. You neet at lest one letter, example "ID11" "ID12" ...
Than what are the Cells? div? Td? Input?
Can you a jsfiddle ?
-Edit.
you need something like thise:
jsfiddle
you must only change your skript to:
$(function() {
$("#draggable").draggable({ snap: ".drop"});
$(".drop").droppable({
drop: function(event, ui){
console.log("Dropped to" + $(".drop").attr("id"));
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});

Here is the working fiddle.
Try something like this:
$(function() {
$("#draggable").draggable({ snap: ".drop"});
$(".drop").droppable({
drop: function(event, ui){
console.log($(this).attr('id'));
}
});
});

Check this fiddle.
First you need to enable the table cells to be dragged to by defining ondragover event callback. In the fiddle:
box.ondragover = function (evt) { evt.preventDefault(); };
preventDefault ensures that the browser does not set a dropdown lock on the element.
Then you simply play around with the event data, like this:
box.ondrop = function (evt) { droppedTo.innerHTML = evt.toElement.id; };
toElement holds reference to the element that you drop on, and you can get all the data you need from it, including id.

You need to change your script like this
$(function () {
$("#draggable").draggable({
snap: ".drop"
});
$(".drop").droppable({
drop: function (event, ui) {
alert($(this).attr("id"));
console.log("Dropped to " + $(this).attr("id"));
}
});
});
Change from $(".drop").attr("id") to $(this).attr("id") to get the id of the element that you are dropping into :)
Example http://jsfiddle.net/81ja79Ls/4/

Display hidden element with the help of jquery

I have some code in a jsfiddle and I want to display one hidden element <div id="e1"></div>
I have written code for this in jquery like this:
$("#credit4").sortable({
receive: function (event, ui) {
ui.item.remove();
var s="PLEASE SELECT ANOTHER BLOCK";
$("#e1").show();
$("#e1").html(s);
setTimeout('$("#e1").hide()',1500);
}
});
credit4 is the id of a draggable element and when the user wants to drag the element then this hidden elemet should be displayed.
You can also check my jsfiddle here - http://jsfiddle.net/sanjayrathod7/5cZD5/44/.
Please suggest me where I'm wrong.

Here's a simplified fiddle with a set of alerts in place indicating which line is hiding #e1. You can see that you're probably hiding it when you didn't intend to (at lines 45 and 171):
http://jsfiddle.net/isherwood/5cZD5/50
$("#credit").sortable({
receive: function (event, ui) {
ui.item.remove();
$("#e1").show();
$("#e1").html(s);
setTimeout('$("#e1").hide()', 1500); alert('hiding 10');
}
});

I have find out the answer
Try this
$( "#credit4" ).draggable({
revert: true,
start: function( event, ui ) {
var s="PLEASE SELECT ANOTHER BLOCK";
$("#e1").show();
$("#e1").html(s);
setTimeout('$("#e1").hide()',1500);
}
});

Only select one row at a time using jquery

I am using mouseover(), mouseout() and click() to highlight rows on mouseover and add a highlight class on click:
//Mouseover any row by adding class=mouseRow
$(".mouseRow tr").mouseover(function() {
$(this).addClass("ui-state-active");
});
$(".mouseRow tr").mouseout(function() {
$(this).removeClass("ui-state-active");
});
$('.mouseRow tr').click(function(event) {
$(this).toggleClass('selectRow');
});
The above code will allow a user to 'highlight' (i.e add class selectRow) to as many rows as they want. What is the best way, using jQuery, to limit the number of rows they can select to just one (so that if they click one row, then click another it will remove the 'selectRow' class from the previously selected row)?

You could remove the selectRow class from all of the tr elements except the clicked one whenever you click on one, and then toggle it on the clicked one:
$('.mouseRow tr').click(function(event) {
$('.mouseRow tr').not(this).removeClass('selectRow');
$(this).toggleClass('selectRow');
});
Here's a working example.

Use this script at end of your html,meant after </body> tag
<script>
$("tr").hover(function()
{
$(this).addClass("hover");
}, function()
{
$(this).removeClass("hover");
});
$('tr').click(function(event) {
$('tr').not(this).removeClass('click');
$(this).toggleClass('click');
});
</script>
This is css that highlight your row:
.click{
background:#FF9900;
color: white
}
.hover{
background:blue;
color: white
}
here is the link of working example
Working example
Hope this will help

While I first tried the toggleClass/removeClass-way with a '.clicked'-Class in CSS, it turned out to lag a bit. So, I did this instead which works better/faster:
$(document).on('click', '.DTA', function (event) {
$('.DTA').not(this).css('backgroundColor', "#FFF");
$(this).css('backgroundColor', "#FAA");
});
Here is the fiddle: https://jsfiddle.net/MonteCrypto/mxdqe97u/27/

$('.mouseRow tr').click(function(event) {
if (!$(this).hasClass('selectRow')){
$('.selectRow').removeClass('selectRow');
$(this).addClass('selectRow');
} else {
$('.selectRow').removeClass('selectRow');
}
});
Should do the trick. Note this still allows your toggle, if you don't want that just remove the if(){ and } else { ... } parts leaving:
$('.selectRow').removeClass('selectRow');
$(this).addClass('selectRow');

Using jquery-ui .selectable function with tbody id='selectable':
$(function() {
$("#selectable").selectable({
filter: "tr", //only allows table rows to be selected
tolerance: "fit", //makes it difficult to select rows by dragging
selected : function(event, ui) {
var rowid = "#"+ui.selected.id; //gets the selected row id
//unselects previously selected row(s)
$('tr').not(rowid).removeClass('ui-selected');
}
});
});
Each of my table rows, which were created dynamically have an id of 'task'+i

You could try this:
$('.mouseRow tr').click(function(event) {
$('.mouseRow tr').each(function(index) {
$(this).removeClass('selectRow');
});
$(this).toggleClass('selectRow');
});
You could also use the .find() method and wrap logic to check if any elements have this class first before removing all.