Get value while dragging the slide - javascript

How do I get the value of the slide while I drag the slide?
I tried but it did not work:
$("#slider").slider({
slide : function() {
alert($("#slider").val());
}
});

As written here, to get the value you need to use stop and not slide to get the value after interaction is stopped
$( "#slider" ).slider({
stop: function( event, ui ) {
alert($(this).val());
}
});
here is a jsfiddle

Related

swipebox auto transition to next slide

This is more of a tip than a question, but i hope others find this useful.
Basically i needed to make the lightbox slider called 'Swipebox' auto transition to the next slide, I looked online for help but found nothing.
to add this feature to the plugin i added this code:
setInterval(function(){
$this.getNext(); // Auto transitions each slide
}, 5000);
The file for this JS is called 'jquery.swipebox.js'. This is the code where you want to place the code previously mentioned:
/**
* Navigation events : go to next slide, go to prevous slide and close
*/
actions : function () {
var $this = this,
action = 'touchend click'; // Just detect for both event types to allow for multi-input
if ( elements.length < 2 ) {
$( '#swipebox-bottom-bar' ).hide();
if ( undefined === elements[ 1 ] ) {
$( '#swipebox-top-bar' ).hide();
}
} else {
$( '#swipebox-prev' ).bind( action, function( event ) {
event.preventDefault();
event.stopPropagation();
$this.getPrev();
$this.setTimeout();
} );
$( '#swipebox-next' ).bind( action, function( event ) {
event.preventDefault();
event.stopPropagation();
$this.getNext();
$this.setTimeout();
} );
}
$( '#swipebox-close' ).bind( action, function() {
$this.closeSlide();
} );
// THIS IS THE NEW CODE ADDED:
setInterval(function(){
$this.getNext(); // Auto transitions each slide
}, 5000);
},
This function is around about 550 lines down.
Also, to make the slideshow loop back around, you will need to change the option called 'loopAtEnd' from FALSE to TRUE. This is located at the top of the document.
loopAtEnd: true,
Hope this helped :)

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

sortable - start , update , stop events not getting triggered

When I am dragging and dropping an item, following code using sortupdate gets triggered
$('#sortable').sortable().bind('sortupdate', function (event, ui) {
debugger;
//Triggered when the user stopped sorting and the DOM position has changed.
});
BUT
start, update, stop, change events are not getting triggered
That is,
$('#sortable').sortable({
start: function(event, ui) {
//
},
change: function(event, ui) {
//
},
update: function(event, ui) {
//
}
});
My goal is to find the original and dropped position of an item.
EDIT (for clear understanding):
In short,
$('#sortable').sortable().bind('sortupdate' ..... is working(triggered)
$('#sortable').sortable().bind('start' ..... is not working(not triggered)
$('#sortable').sortable().bind('change' ..... is not working(not triggered)
$('#sortable').sortable().bind('update' ..... is not working(not triggered)
$('#sortable').sortable().bind('sort' ..... is not working(not triggered)
If possible to get the values of old and new position with sortupdate event alone, then also it is ok..My ultimate goal is to find the position of both old and new for an item.
all this event are prefixed with sort so instead of start it becomes sortstart
i have created a fiddle where it will give the message of item moved from and to have a check at
http://jsfiddle.net/p2gethgh/
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
var from,to;
$("#sortable").on("sortstart",function(event,ui){
from = $(this).children().index(ui.item);
});
$('#sortable').on('sortdeactivate',function(event,ui) {
to = $(this).children().index(ui.item);
alert(ui.item.text()+' moved from '+(from + 1)+' to '+(to + 1));
});
This is the correct way to bind event to jquery sortable
$( ".selector" ).sortable({
start: function( event, ui ) {}
});
OR
$( ".selector" ).on( "sortstart", function( event, ui ) {} );

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);
}
});

Categories

Resources