Develop Reference

Getting Jquery-UI slider value while clicking on slider-track?

I tried to get the value of jquery-ui slider on click of slider track. But I couldn't able to get the value of slider. I'm able to get the value on slide but I couldn't able to get it on click.
<div id="slider"></div>
var handlers = [25, 50, 75];
$('#slider').on('click',function(e) {
//code to get the value
});
/*While sliding I'm getting the value*/
$("#slider").slider({
min:0,
max:100,
steps:20,
values: handlers,
slide: function (evt, ui) {
console.log(ui.values);
}
});

Welcome to Stack Overflow. jQuery UI Slider adds a number of elements and you'll have to be less ambiguous. If you look at the rendered DIV that is #slider, you will see it has a height of 0 basically. So when the User clicks the handle or the bar, the click event may not bubble up to the #slider element.
Consider the following code:
$(function() {
function log(str) {
$("#log").prepend("<p>" + str + "</p>");
}
var handlers = [25, 50, 75];
/*While sliding I'm getting the value*/
$("#slider").slider({
min: 0,
max: 100,
steps: 20,
values: handlers,
slide: function(evt, ui) {
log("Slide: " + ui.values.join(","));
$(".ui-slider-handle", this).each(function(i, el) {
$(el).html(ui.values[i]);
});
}
}).on("click", ".ui-slider-handle", function(e) {
log("Click: " + $(e.target).parent().slider("values").join(","));
});
});
#log {
width: 100%;
height: 7em;
font-size: 65%;
overflow: auto;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="content">
<div id="slider" class="ui-helper-clearfix"></div>
</div>
<div id="log" class="ui-widget"></div>
In the Log you can see both Click and Slide activity. You may consider using mousedown or mouseup events if you want to be more specific about when the callback should be triggered.

How to use jquery ui '.droppable' with jquery '.on' function?

I have three div 1, 2 and 3 within a main div i.e:
<div id="main">
<div style="height:30px; background-color:yellow;" class="bnr">Banner</div>
<div style="height:30px; background-color:yellow;" class="bnr">Banner2</div>
<div style="height:30px; background-color:yellow;" class="bnr">Banner3</div>
</div>
Now, I want to append a dragged <div class="other"></div> after any of a <div> with class 'bnr', append then, when I drop on 'placeholder'. i.e when I mouse over on any of these three <div>, it shows a 'placeholder' in between. like I am mouse hovering on <div> 1 and it will show a placeholder <div> in between <div> 1 and <div> 2.
Placeholder is like:
<div style="height:30px; background-color:light-yellow;" class="placeholder"></div>
I have concluded with my try that I have to use '.droppable' function property 'over', 'out' and 'drop', instead of using, jquery's .mouseenter and .mouseleave functions.
$(".other").draggable({
helper: 'clone'
});
$('.placeholder').droppable({
over: function (event, ui) {
},
out: function (event, ui) {
},
drop: function (event, ui) {
}
});
How can I drop on 'placeholder' div?
Because its created after mouseover. So from here '.on' function comes into play. Now tell me how I can use '.droppable' with '.on' or help me to find any other solution.

here is a sample code:
$(".other").draggable({
helper: 'clone'
});
$('.bnr').droppable({
over: function (event, ui) {
$('.placeholder').remove();
$('<div style="height:30px; background-color:light-yellow;" class="placeholder"></div>').insertAfter(this);
},
out: function (event, ui) {
},
drop: function (event, ui) {
$('.placeholder').remove();
$(".other").insertAfter(this);
}
});
see working demo: http://jsbin.com/hoyonugupu/edit?html,js,output

It looks like you're looking for a draggable which is connected to sortable widget having custom placeholder via connectToSortable option:
$('#main').sortable({
placeholder: 'placeholder'
});
$('.draggable').draggable({
helper: 'clone',
connectToSortable: '#main'
});
#main {
margin-bottom: 50px;
}
#main div.bnr {
height: 30px;
background-color: yellow;
}
.placeholder {
visibility: visible;
height: 30px;
background-color: orange;
}
.draggable {
width:100%;
height: 30px;
background: dodgerblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="main">
<div class="bnr">Banner</div>
<div class="bnr">Banner2</div>
<div class="bnr">Banner3</div>
</div>
<div class="draggable">Drag Me</div>
No need to manually inject elements and stuff, jQuery UI has inbuilt options for these interactions.
Side note: Please don't use inline styles.

blink with green color .drop div when .drag is dragged

I want to blink the .drop div when .drag is dragged.
And when the .drag div was droped or reverted I want that the .drop div stop blinking.
But I want to blink with colors, with green color for example, but I dont see how with fadeTo().
Do you know how to fix my code to achieve this?
Example here:
http://jsfiddle.net/8t9v5tpq/2/
Code:
$(".drag").draggable({
revert: 'invalid',
drag: function(event, ui) {
$('.drop').fadeTo('fast',0).fadeTo('fast',1);
}
});
$('.drop').droppable({
over: function(event, ui) {
$('.drop').fadeTo('fast',0).fadeTo('fast',0);
ui.draggable.remove();
}
});

You can try changing the background color of the div, when .drag is picked up
$(".drag").draggable({
revert: 'invalid',
drag: function(event, ui) {
$('.drop').fadeTo('fast',0)
$('.drop').css('background-color', 'green')
$('.drop').fadeTo('fast',1);
}
});
JSFiddle

This code can solve your problem.
<div id="cuadrado" class="drop" style="background:gray; margin-top:50px; width:100px; height:100px;"> drop</div>
<script>
$('.drop').droppable({
over: function(event, ui) {
document.getElementById("cuadrado").style.color="green";
document.getElementById("cuadrado").style.background="green";
$('.drop').fadeTo('fast',0).fadeTo('fast',0);
ui.draggable.remove();
}
});
</script>
Running the code the following is obtained:
I hope it helps you.
bye #locoalien

Simple jquery slide element

I'm totally new in js and jq. I'am trying force my #cont div to change height on hover with animation and back to previous height without hover, but I dont know how to achieve that. In my test it should make an alert (or make other function), right?
http://jsfiddle.net/JJh9z/1773/
<div id='cont'>
<ul>
<li>an item</li>
<li>an item</li>
<li>an item</li>
<li>an item</li>
<li>an item</li>
</ul>
<div id='ruch'>HOVER</div>
</div>
#cont {
border: 1px solid #000;
height: 200px;
overflow:hidden;
position:relative;
}
#ruch {
position:absolute;
bottom:0px;
}
var result = $("#cont").height();
$('#ruch').hover(function(){
$('#cont').animate({height:'300px'}, 500);
});
if (result == 300) {
alert(result)
}

Your if statement only runs once when the script is first loaded, so no it won't alert each time someone hovers. it is not an event listener.
You need to add another event listener for when the mouse leaves the element (mouseout). See this modified code:
$('#ruch').hover(function(){
$('#cont').animate({height:'300px'}, 500);
});
$('#ruch').mouseout(function(){
$('#cont').animate({height:'200px'}, 500);
});
http://jsfiddle.net/JJh9z/1775/

http://api.jquery.com/hover/
You can specify a handleout event handler, in which you'd restore the element to its previous height.
You also should select not the 'HOVER' div (it's small) but a bigger element (like cont):
$('#cont').hover(
function () {
$('#cont').animate({
height: '300px'
}, 500);
},
function () {
$('#cont').animate({
height: '200px'
}, 500);
});
Here, I've specified a hover-out handler, and focused on 'cont' instead of 'ruch'
http://jsfiddle.net/JJh9z/1773/

There are several ways of doing this. One is to call the 'after animation completes function'. which takes another function as option.. the below example alerts 'Hii' after animating the height to 300px.
$( "#ruch").hover(function() {
$( "#cont" ).animate({
height: "300px"
}, {
duration: 500,
complete: function() {
alert('Hii');
}
});
});

To prevent multiple animations for one hover event since #ruch moves from under the mouse pointer during hover animation, use the following and a current version of jQuery:
var result = $("#cont").height();
$('#ruch').on( 'mouseenter', function(){
$('#cont').animate({height:'300px'}, 500, function() {
alert( result );
});
});
$('#cont').on( 'mouseleave', function(){
if( $(this).height() != result ) {
$(this).animate({height:result}, 500);
}
});
Once the #cont expands the mouse is no longer over #ruch and any slight movement would fire mouseleave and the #cont collapses. To prevent that, attach the mouseleave event to #cont as above.

You could play around with some webkit transitions as well, which is pretty easy.
The problem with adding an event listener for when the mouse leaves the even and queuing up an animation is that you can end up with a queue of many animations if you move your mouse crazily over the div, while this method will only do one animation.
#cont {
border: 1px solid #000;
height: 200px;
overflow:hidden;
position:relative;
-webkit-transition: 0.5s;
}
#ruch {
position:absolute;
bottom:0px;
}
$(document).on('mouseover', '#cont', function() {
document.getElementById('cont').style.height = 300;
});
$(document).on('mouseleave', '#cont', function() {
document.getElementById('cont').style.height = 200;
});

Jquery UI - Drag shape, but keep a copy of the original shape?

I have an interesting question. Theoretically, let's say you have a navigation bar on the left with a series of shapes: a circle, square and triangle and to the right of the nav bar you have a blank canvas.
Using Jquery UI or Jquery Mobile, would it be possible to be able to drag shapes from the navigation bar onto the canvas, but for the original shape to still remain in the bar?
Many thanks,
LS

See http://jqueryui.com/demos/droppable/#photo-manager for an example -- the trick is to clone the original element using something like $( ".selector" ).draggable( "option", "helper", 'clone' );

Here is Running Example for intended task -
$(function () {
$("#draggable").draggable({
helper: "clone",
cursor: 'move'
});
$("#container").droppable({
drop: function (event, ui) {
var $canvas = $(this);
if (!ui.draggable.hasClass('canvas-element')) {
var $canvasElement = ui.draggable.clone();
$canvasElement.addClass('canvas-element');
$canvasElement.draggable({
containment: '#container'
});
$canvas.append($canvasElement);
$canvasElement.css({
left: (ui.position.left),
top: (ui.position.top),
position: 'absolute'
});
}
}
});
});
#draggable {
width: 20px;
height: 20px;
background:blue;
display:block;
float:left;
border:0px
}
#container {
width:200px;
height:200px;
background:yellow;
margin:25px;
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<div id="draggable" class="ui-widget-content">
<div id="draggable" class="ui-widget-content"></div>
</div>
<div id="container" class="ui-widget-content">Drop blue box here..</div>
Link To JS Fiddle
http://jsfiddle.net/4VRUK/
improve it further as you want.

Add the helper: clone option.

Add helper: clone to the options. If you want the original object to remain be visible, you must set this explicitly:
$(".sortable").sortable({
helper: 'clone',
start: function(event, ui) {
$(ui.item).show()
}