I have a slider and an small input text box which updates based on where you scroll on it.
Here is the javascript:
$(function() {
var tooltip = $('<div id="tooltip" />').css({
position: 'absolute',
top: -25,
left: -10
}).hide();
$("#client-slider").slider({
range: "min",
value: 30,
min: 15,
max: 300,
slide: function(event, ui) {
$('#client').val(ui.value).trigger("change");
tooltip.text(ui.value);
},
change: function(event, ui) {}
}).find(".ui-slider-handle").append(tooltip).hover(function() {
tooltip.show();
}, function() {
tooltip.hide();
});
});
$("#client").val($("#client-slider").slider("value"));
}
And here is the html/css:
<input type="text" id="client" style="width:50px;text-align:center"/>
<div id="slider"></div>
I am getting an error could not able to show tool tip on my slider
**Plz note its not the duplicate of any existing question - I was trying to get help from this answer but all in vain
It is often a bad idea to get answers from old posts. This implementation is much more up to date and much less complicated:
document.getElementById("slider").addEventListener("input", function(event) {
document.getElementById("budget").value = event.target.value;
})
<input type="text" id="budget" style="width:50px;text-align:center"/>
<input id="slider" type="range" min="15" max="300" value="15"/>
Full code:
<input type="text" id="budget" style="width:50px;text-align:center"/>
<input id="slider" type="range" min="15" max="300" value="15"/>
<script type="text/javascript">
document.getElementById("slider").addEventListener("input", function(event) {
document.getElementById("budget").value = event.target.value;
})
</script>
For the JQUERY implementation based off this answer:
var tooltip = $('<div id="tooltip" />').css({
position: 'absolute',
top: -25,
left: -10
}).hide();
$("#slider").slider({
value: 500,
min: 0,
max: 1000,
step: 50,
slide: function(event, ui) {
tooltip.text((ui.value/1000)*100 + "%");
$( "#client" ).val((ui.value/1000)*100 + "%");
},
change: function(event, ui) {}
}).find(".ui-slider-handle").append(tooltip).hover(function() {
tooltip.show()
}, function() {
tooltip.hide()
})
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css">
<input type="text" id="client" style="width:50px;text-align:center"/>
<div id="slider" style="margin:50px"></div>
<!-- Get ajax -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
Try it on fiddle as well.
Related
you can copy only one image to the droppable area with the bind method and url with javascript but you can not change any image,
i tried sourceImage = new Image() but the plugin only works with url
<div class="draggable">
<img src='team.jpg' class="resizable ui-resizable draggable" style="width:300px"/>
</div>
<div class="draggable">
<img src='foto11.jpg' class="resizable ui-resizable draggable" style="width:300px"/>
</div>
<div id="vanilla-demo" class='droppable' style="width:356px;height:286px;position:absolute;top:29.1em;left:73px;background-color: yellow">
</div>
<script>
$(".draggable").draggable({cursor:"grabbing",helper:"clone",opacity:0.8,grid:[20,20]});
$( ".droppable" ).droppable({
op: function(event,ui) {
vanilla.bind({
url: 'team.jpg',
orientation: 4
});
}
});
var el = document.getElementById('vanilla-demo');
var vanilla = new Croppie(el, {
viewport: { width: 300, height: 250 },
boundary: { width: 300, height: 250 },
showZoomer: true,
enableOrientation: false
});
vanilla.bind({
url: '',
orientation: 4
});
</script>
I hope the url shows the image when drope the image,
When you drag an item to a droppable, you can use the ui.draggable passed into drop.
drop( event, ui )
Triggered when an accepted draggable is dropped on the droppable (based on the tolerance option).
event
ui
draggable Type: jQuery A jQuery object representing the draggable element.
Consider the following code.
$(function() {
var el = $('#vanilla-demo');
var vanilla = new Croppie(el[0], {
viewport: {
width: 300,
height: 250
},
boundary: {
width: 300,
height: 250
},
showZoomer: true,
enableOrientation: false
});
vanilla.bind({
url: '',
orientation: 4
});
$(".draggable").draggable({
cursor: "grabbing",
helper: "clone",
opacity: 0.8,
grid: [20, 20],
zIndex: 1002
});
$(".droppable").droppable({
classes: {
"ui-droppable-hover": "ui-state-hover"
},
drop: function(event, ui) {
var newImage = ui.draggable;
vanilla.bind({
url: newImage.attr("src"),
orientation: 4
});
}
});
});
.droppable {
width: 356px;
height: 286px;
position: absolute;
top: 29.1em;
left: 73px;
background-color: #cccccc;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="draggable">
<img src='https://i.imgur.com/WDds7On.jpg' class="resizable ui-resizable draggable" style="width:300px" />
</div>
<div class="draggable">
<img src='https://i.imgur.com/p77MNQh.jpg' class="resizable ui-resizable draggable" style="width:300px" />
</div>
<div id="vanilla-demo" class='droppable'></div>
When the new item is dropped, the Binding is updated for Croppie.
Hope that helps.
I created a slider, which fulfills my needs.
But I do not want to show the output value in an input.
Here is my Codepen:
https://codepen.io/anon/pen/MOZGVx?editors=1010
$( document ).ready(function() {
function update() {
$optiona = $("#optiona").val();
$optionb = $("#optionb").val();
$totalsum = ($optiona * 0.75 * $optionb * 9) - ($optiona * $optionb);
$("#totalsum").val($totalsum);
}
debugger;
$("#slider-optiona").slider({
max:30,
min:1,
step:1,
slide: function(event, ui) {
$(this).parent().find("#optiona").val(ui.value);
$("#optiona").val(ui.value);
update();
},
create: function(event, ui){
$(this).slider('value',$(this).parent().find("#optiona").val());
}
});
$("#slider-optionb").slider({
max:100,
min:1,
step:1,
slide: function(event, ui) {
$(this).parent().find("#optionb").val(ui.value);
$("#optionb").val(ui.value);
update();
},
create: function(event, ui){
$(this).slider('value',$(this).parent().find("#optionb").val());
}
});
update();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
Option A<div id="slider-optiona"></div>
Choice: <input type="text" id="optiona" value="12" disabled /><br /><br />
Option B<div id="slider-optionb"></div>
Choice: <input type="text" id="optionb" value="30" disabled/><br /><br /><br />
Sum
<input id="totalsum" type="text" disabled/><br />
What I want:
I want the output to be not displayed in a input, but in a span or something like this.
I already tried it with
<span type="text" id="optionb"></span>
But it didn't worked :(
And the further question to the real experts: how can I show the totalsum in a complete currency value, e.g 145.50 instead of 145.5 at the moment.
Thank you so much guys!
As MenuItem42 stated, you just need to use jQuery's text() function instead of val() when you are working with div, span, etc. Also, do not specify type attribute for span because it does not support it.
$( document ).ready(function() {
function update() {
$optiona = $("#optiona").text();
$optionb = $("#optionb").text();
$totalsum = ($optiona * 0.75 * $optionb * 9) - ($optiona * $optionb);
$("#totalsum").text($totalsum);
}
debugger;
$("#slider-optiona").slider({
max:30,
min:1,
step:1,
slide: function(event, ui) {
$(this).parent().find("#optiona").text(ui.value);
$("#optiona").val(ui.value);
update();
},
create: function(event, ui){
$(this).slider('value',$(this).parent().find("#optiona").text());
}
});
$("#slider-optionb").slider({
max:100,
min:1,
step:1,
slide: function(event, ui) {
$(this).parent().find("#optionb").text(ui.value);
$("#optionb").val(ui.value);
update();
},
create: function(event, ui){
$(this).slider('value',$(this).parent().find("#optionb").text());
}
});
update();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
Option A<div id="slider-optiona"></div>
Choice: <span id="optiona">12</span><br /><br />
Option B<div id="slider-optionb"></div>
Choice: <span id="optionb">30</span><br /><br />
Sum
<span id="totalsum"></span>
When you want write in span you have to use .text() instead of .val()
I'm writting the doors calculate now. This calculate have got two parts - doorway and door. And I don't know how count up this dimensions. I've got table with dimensions doorway and door. My height does not change for door. This I realized. But with width I have got problems. What should be the formula for such values of width? I have got an idea: I write an array with objects with values height\width. But what to do next I don't know. Thank you!
$(document).ready(function() {
var $total = $(".total");
var $total1 = $(".total1");
var $tot = $(".tot");
var $tot1 = $(".tot1");
var mySlider = $( "#mySlider" ).slider({
range: "min",
min: 650,
step: 50,
max: 1000,
value: 1000,
slide: function( event, ui ) {
mySlider1.slider( "option", "value", ui.value + 50 );
$total.val( ui.value );
},
change: function(event, ui){
$total.val( ui.value );
}
});
$total.val( mySlider.slider( "value" ) );
// $total.on("keyup",function(e){
// $("#mySlider").slider("value",this.value);
// });
var mySlider1 = $( "#mySlider1" ).slider({
range: "min",
disabled: true,
min: 600,
step: 100,
max: 900,
value: 900,
slide: function( event, ui ) {
mySlider.slider( "option", "value", ui.value - 100);
$total1.val( ui.value );
},
change: function(event, ui){
$total1.val( ui.value );
}
});
$total1.val( mySlider1.slider( "value" ) );
var rangeSlider = $( "#rangeSlider" ).slider({
orientation: "vertical",
range: "min",
min: 2040,
max: 2080,
value: 3000,
slide: function( event, ui ) {
$tot.val( ui.value );
rangeSlider1.slider("option","value", ui.value);
},
change: function(event, ui){
$tot.val( ui.value );
}
});
$tot.val( rangeSlider.slider( "value" ) );
var rangeSlider1 = $( "#rangeSlider1" ).slider({
orientation: "vertical",
disabled: true,
range: "min",
min: 0,
max: 2000,
value: 2000,
slide: function( event, ui ) {
$tot1.val( ui.value );
rangeSlider.slider("option","value", ui.value);
},
change: function(event, ui){
$tot1.val( ui.value );
}
});
$tot1.val( rangeSlider1.slider( "value" ) );
// var sliderOptions = [
// { minWidth: 650 },
// { maxWidth: 1000 },
// { minHeight: 2040 },
// { maxHeight: 2080 },
// { doorHeight: 2000 },
// { doorMaxWidth: 900 },
// { doorMinWidth: 600 }
// ];
// function () {
// }
});
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI : Slider with Minimum Range </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head>
<body>
<!-- Doorway -->
<div class="before" style="display: inline-block; margin-right: 20px;">
<p>
<label for="tot"> Height:</label>
<input type="text" id="tot" class="tot" style="border:0; color:#fa4b2a; font-weight:bold;">
</p>
<div id="rangeSlider" style="height:250px; display: inline-block;"></div>
<div style="display:inline-block; width: 185px; height: 240px; background: #ececec;"></div>
<p>
<label for="total">Width:</label>
<input type="text" id="total" class="total" style="border:0; color:#fa4b2a; font-weight:bold;">
</p>
<div id="mySlider" style="width: 230px"></div>
</div>
<!-- Door -->
<div class="after" style="display: inline-block;">
<p>
<label for="tot1"> Height:</label>
<input type="text" id="tot1" class="tot1" disabled style="border:0; color:#fa4b2a; font-weight:bold; background: #fff;">
</p>
<div id="rangeSlider1" style="height:250px; display: inline-block;"></div>
<div style="display:inline-block; width: 185px; height: 240px; background: #ececec;"></div>
<p>
<label for="total1">Width:</label>
<input type="text" id="total1" class="total1" disabled style="border:0; color:#fa4b2a; font-weight:bold; background: #fff;">
</p>
<div id="mySlider1" style="width: 230px"></div>
</div>
</body>
</html>
This table with dimensions
I need to make the slider look like this:
As you can see, there is a limit (dark line) in the full capacity (light line).
I have this code so far:
<p>
<label for="amount">Amount:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider"></div>
var myMax = 500;
$( "#slider" ).slider({
range: "min",
value: 300,
min: 1,
max: 2000,
create: function(event, ui) {
$( "#amount" ).val(ui.value);
},
slide: function(event, ui) {
if(ui.value > myMax) {
return false;
ui.value = myMax;
}
$( "#amount" ).val(ui.value);
}
});
JSFIDDLE: https://jsfiddle.net/jimmyadaro/vp00n013/
Is this possible to do?
While I'm sure there are other jQuery plugins to accomplish this, here's a quick hack using your code.
First, create another <div> within your slider:
<div id="slider">
<div id="limit"></div>
</div>
Next, have JS calculate the percentage of myMax, and use a bit of jQuery to set the width of #limit to the appropriate percentage.
var myMax = 500;
var max = 2000;
var limit = $("#limit");
limit.css("width", (myMax/max)*100+"%" )
Finally, style the #limit, for example:
#slider {
position: relative;
}
#limit {
position: absolute;
height: 100%;
background: #afb1b2;
}
Here's a JSFiddle demonstrating the hack.
i want to enable/disable a slider every time a button is clicked.
here is the fiddle:
<div id="points" style="width:50px; margin-top: 17px; height:5px "></div>
<button id="lines" type="button" style="width:75px; height: 30px; margin-top:7px">lines</button>
$(function () {
$("#points").slider({
value: 100,
min: 1,
max: 100,
slide: function (event, ui) {
}
});
$('.ui-slider').slider('disable');
$('.ui-slider-handle').height(12);
});
Add this to your fiddle
$("#lines").click(function () {
var disabled = $( ".ui-slider" ).slider( "option", "disabled" );
$('.ui-slider').slider("option", "disabled", !disabled);
});
JQuery code:
$('#lines').click(function(){
if($('.ui-slider').hasClass('ui-slider-disabled'))
$('.ui-slider').slider('enable');
else
$('.ui-slider').slider('disable');
});
Updated fiddle: http://jsfiddle.net/D2RLR/4861/