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.
Related
I have a jQuery slider that is modifying a div css on slide. All is working perfectly, however when I add a new div the settings from the slider are not being attached to the new div until the slider is moved again.
HTML
<div class="inputWrap hidden">
<input class="inputNumber" type="text" value="5">
<div class="slider"></div>
</div>
<div class="boxout">
<div class="box"></div>
</div>
<div class="add">
add box
</div>
CSS
.boxout {
width: 200px;
height: 200px;
}
.box {
width: 10%;
height: 10%;
background: black;
}
JQUERY
$(".slider").slider({
min: 0,
max: 10,
slide: function(event, ui) {
console.log("slide", ui);
$(".box").css("width", 10 + ui.value * 2 + "%");
$(this)
.parent()
.find(".inputNumber")
.val(ui.value);
},
create: function(event, ui) {
$(this).slider(
"value",
$(this)
.parent()
.find(".inputNumber")
.val()
);
}
});
var slider = $(".slider");
slider
.slider("option", "slide")
.call(slider, null, { value: slider.slider("value") });
$(".add").click(function() {
$(".boxout").append('<div class="box"></div>');
});
FIDDLE
In this fiddle you can see how I have everything setup perfectly, but when a new div is added it doesn't match the above box until the slider is used again
http://jsfiddle.net/or5fhsvh/1/
Thanks for your help.
To achieve what you want you need to modify your click function on .add class.
$(".add").click(function() {
var slideValue = parseInt($('.inputNumber').val());
var boxWidth = (10+(slideValue*2)) + '%';
$(".boxout").append('<div class="box" style="width:'+boxWidth+'"></div>');
});
It will get the value of the slider, calculate the desired width of the box and then append that box in the UI. This way the width is maintained for all boxes that you are adding with respect to the slider values. And you don't need to slide the slider to reflect that change.
Here is the working JSFIDDLE
Your add function just creates 1 block and doesn't apply the style to it. Whereas all other blocks have their box class' width overridden by inline styles.
You can change your add function to
$(".add").click(function() {
let extraStyle = 'width: ' + $(".box")[0].style.width;
$(".boxout").append('<div class="box"' + extraStyle + '></div>');
});
Following is my script to show and hide content on click of a div.
I also want to disable other div elements until the first div is clicked again.
$('.leader-pic-wrapper').click(function(){
var $el = $(this);
var bottom = $el.position().top + ($el.outerHeight(true) - 30);
$('.leader-pic-overlay').toggle();
$('.leader-pic-wrapper').not(this).toggleClass('inactive-leader');
/*$(".inactive-leader").unbind("click");*/
$(".inactive-leader").off("click");
$(this).next('.leader-profile-wrapper').css('top', bottom);
$(this).next('.leader-profile-wrapper').toggle();
});
I don't understand how to toggle the unbind statement. I tried toggling a class called inactive-leader and apply unbind to that class, but its not working.
Basically I want to set unbind on
leader-pic-wrapper
Thanks
My option is approach this with a different view. Without bind and unbind the event just exclude the items with the first selector using :not(), and as you are doing add a class to the elements you want to exclude; please check this snippet:
$('body').on('click', '.box:not(".disabled")', function() {
if ($('.disabled').length) {
$(this).siblings().removeClass('disabled')
$(this).animate({
'width': '80px'
}, 300)
} else {
$(this).siblings().addClass('disabled')
$(this).animate({
'width': '160px'
}, 300)
}
})
.box {
display: inline-block;
height: 80px;
width: 80px;
background: tomato;
margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
This logic on your code will look like this:
//Delegate the event since we are add/remove the class
//Target the elements that aren't inactive
$('body').on('click', '.leader-pic-wrapper:not(".inactive-leader")', function() {
var $el = $(this);
var bottom = $el.position().top + ($el.outerHeight(true) - 30);
//Check if exists some inactive elements to handle 1/2 click
if ($('.inactive-leader').length) {
//Target other leader-pic-wrapper elements, use sibling or the method you need based on your markup
$(this).siblings().removeClass('inactive-leader')
//...ACTIONS - This will act as the second click
} else {
$(this).siblings().addClass('inactive-leader')
//...ACTIONS - This will act as the first click
}
});
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.
Hopefully this makes sense. I'm creating a drag and drop modal with jquery UI. I have my code set up to fire a function that adjusts some styling using the "over" option. Here's my code.
function makeDraggable(){
$(function(){
$( "tr[role='row']" ).draggable({
cursor: "none",
cursorAt: { top: 50, left: 50 },
containment: "body",
scroll: false,
delay: 200,
start: function() {
openModal();
},
stop: function() {
closeModal();
},
helper: function( event ) {
return $( "<div class='drag-folder'><img src=<?php echo site_url("imgs/processIcons/file_icon.svg");?>></div>" );
}
})
});
makeDroppable();
}
function makeDroppable(){
$(function(){
$( ".flex-item" ).droppable({
tolerance: 'pointer',
over: function(event, ui) {
$(this).find('.drag-container').css('height', (180 + (event.pageY / 5 )));
},
out: function(event, ui) {
$(this).find('.drag-container').css('height', '');
},
drop: function(event, ui) {
$('.drag-container').css('height', '');
}
})
});
}
function openModal(){
var modal = $('.drag-modal');
modal.fadeIn();
}
function closeModal(){
var modal = $('.drag-modal');
modal.fadeOut();
}
The effect I'm trying to achieve is this: The user starts dragging on an element, a modal pops up with several different drop regions. For aesthetic purposes, the height of each drop region stretches vertically towards the mouse. The problem is the height is adjusted using the 'over' option but it only fires once (When the mouse enters the element). Is there some way I can run my code that changes the height every time the mouse moves, but only while over the element?
--edit--
It occurred to me that perhaps this could be achieved using some kind of while loop, but I haven't been able to figure out a solution that doesn't crash the page.
Could you use the ondragover event?
DEMO
JS
function allowDrop(ev) {
document.getElementById("div1").textContent += " dragging! \n";
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
HTML
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<img id="drag1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=336&h=69" draggable="true" ondragstart="drag(event)" width="336" height="69">
CSS
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
font-size: 5px;
}
I want to create a simple "let's build a look" tool which basically allows a user to drag a div (with an image inside) on to a target area, resize it, rotate it or delete it and do the same with several other elements.
I can create the drag part to all elements and also resize one element but can't do it do more than one.
Here's what I have (I have copied partially the code from an example found here in Stackoverflow):
$(document).ready(function() {
//Counter
counts = [0];
$(".closeMe").hide();
$(".dragImg").draggable({
revert: "invalid",
containment: "#droppable",
helper: "clone",
cursor: "move",
start: function(event, ui) {
counts[0]++;
isDraggingMedia = true;
},
stop: function(event, ui) {
isDraggingMedia = false;
}
});
$("#droppable").droppable({
accept: ".dragImg",
drop: function(e, ui){
if(ui.draggable.hasClass("dragImg"))
$(this).append($(ui.helper).clone());
//Pointing to the dragImg class in dropHere and add new class.
$("#droppable .dragImg").addClass("item-"+counts[0]);
//Remove the current class (ui-draggable and dragImg)
$("#droppable .item-"+counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging");
$("#droppable .item-"+counts[0]+" .closeMe").addClass("del-"+counts[0]);
$(".item-"+counts[0]).click(function(){
$(".item-"+counts[0]+" .closeMe").show();
//$(".item-"+counts[0]).attr('class', 'ui-draggable-helper');
$(".item-"+counts[0]+" img").resizable({
aspectRatio: true
});
});
make_draggable($(".item-"+counts[0]));
}
});
var zIndex = 0;
function make_draggable(elements){
elements.draggable({
containment:'#droppable',
start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
stop:function(e,ui){}
});
}
});
What I can not do is to achieve resize to every element or even have found a decent way to rotate them or delete them.
I want to click to select and show handles that allow resize, rotate and select and also when clicking outside the element, the handles should disappear.
How can i do this ?
It's a bit hard to answer the question accurately since the HTML is not provided, but I created a tiny sample page implementing these functionalities (dragging, dropping, deleting and resizing). Deleting uses the droppable 'trash' div, you may want to implement the delete functionality within the element similar to drag and resize.
Since jQuery UI provides no rotating functionality in itself, I left that one out. There is several plugins offering this kind of functionality so you should decide which suits you best. Rotating is also offere in CSS3, but you should keep in mind that this approach is very likely to have some browser compatibility issues, for more information see http://caniuse.com/transforms2d.
EDIT: Added a link to a very minimalistic demo application with this functionality: https://github.com/relicode/dragdrop-minimalistic/
<!doctype html>
<head>
<meta charset='utf-8'>
<title>jQuery draggable / droppable test</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<style>
.drop-hover {
border: solid green 3px;
}
.handle {
display: none;
}
.move-handle {
cursor: move;
}
.rotate-handle {
cursor: pointer;
}
.resize-handle {
cursor: nwse-resize;
}
.trash {
background-color: silver;
display: table-cell;
height: 100px;
vertical-align: middle;
width: 100px;
}
div.area {
border: solid black 1px;
float: left;
height: 500px;
width: 300px;
}
div.interactable {
background-color: silver;
height: 100px;
position: relative;
width: 100px;
}
div.interactable-tools {
bottom: 0;
position: absolute;
width: 100%;
}
p {
text-align: center;
}
</style>
</head>
<body>
<div id='target-area' class='area'>
<p>target</p>
<div class='trash' id='trash'>Trash</div>
</div>
<div id='source-area' class='area'>
<p>source</p>
<div class='interactable'>
Draggable 1
<div class='interactable-tools'>
<span class='handle move-handle'>Mo</span>
<span class='handle rotate-handle'>Ro</span>
<!-- <span class='handle resize-handle'>Re</span> -->
</div>
</div>
<div class='interactable'>
Draggable 2
<div class='interactable-tools'>
<span class='handle move-handle'>Mo</span>
<span class='handle rotate-handle'>Ro</span>
<!-- <span class='handle resize-handle'>Re</span> -->
</div>
</div>
<div class='interactable'>
Draggable 3
<div class='interactable-tools'>
<span class='handle move-handle'>Mo</span>
<span class='handle rotate-handle'>Ro</span>
<!-- <span class='handle resize-handle'>Re</span> -->
</div>
</div>
</div>
<script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
var counts = 0; // make sure you use var before your variable name to prevent declaring it as a global variable
$('.interactable')
.resizable()
.draggable({
handle: '.move-handle'
})
.hover(function() {
$(this).find('.handle').toggle();
}, function() {
$(this).find('.handle').toggle();
});
;
$('#target-area').droppable({
drop: function(ev) {
counts += 1;
}
});
$('#trash').droppable({
accept: '.interactable',
drop: function(ev) {
$(ev.toElement).parent().parent().remove();
},
hoverClass: 'drop-hover'
});
});
</script>
</body>