I have a simple JQuery slider on a Rails ERB page. I'm trying to get an alert to fire on change but it just isn't happening.
For what it is worth, the slider does work.
I've placed this code in home.html.erb.
Can anyone tell me where I'm going wrong?
<html>
<head>
<style media="screen" type="text/css">
h1 {
font-family: Helvetica, Arial;
font-weight: bold;
font-size: 18px;
}
body, p {
font-family: Helvetica, Arial;
}
</style>
<!-- Load jQuery and jQuery UI -->
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- Load the jQuery UI CSS -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<!-- jQuery UI Slider code -->
<script>
// When the browser is ready...
$(function() {
// Create a new jQuery UI Slider element
// and set some default parameters.
$( "#slider" ).slider({
range: "min",
value: 50,
min: 20,
max: 300,
slide: function( event, ui ) {
// While sliding, update the value in the #amount div element
$( "#amount" ).html( ui.value );
},
change: function (event, data) {
alert(data.value)
}
});
// Set the initial slider amount in the #amount div element
var value = $( "#slider" ).slider( "value" );
$( "#amount" ).html( value );
});
</script>
</head>
<body>
<!-- The div that is used as the slider container -->
<div id="slider" style="margin-top:100px;"></div>
<br /><br /><br />
<!-- The div that is used to display the slider value -->
<div id="amount" style="color:#777;font-size:72px;text-align:center;"></div>
</body>
Related
I'm trying to combine two examples to make a vertical slider with a custom handle that displays its value.
https://jqueryui.com/slider/#custom-handle
https://jqueryui.com/slider/#slider-vertical
I was able to get the slider to move and update the value on the naked vertical slider example by selecting the slider with a css class but this won't work for me since I will have numerous sliders on the page.
Any advice on how I can get this slider to work right?
Codepen example here:
https://codepen.io/cschroeder/pen/EXXqqv
js:
$( function() {
var handle = $( "#custom-handle" );
$( "#slider-vertical" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 9,
value:0,
create: function() {
handle.text( $( this ).slider( "value" ) );
},
slide: function( event, ui ) {
//$(".ui-slider-handle").text(ui.value);
handle.text( ui.value );
}
});
} );
HTML:
<link rel="stylesheet" href="http://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>
<link rel="stylesheet" href="https://jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css">
<div id="slider-vertical" style="height:200px;">
<div id="custom-handle" class="ui-slider-handle"></div>
</div>
CSS:
#custom-handle {
width: 3em;
height: 1.6em;
top: 50%;
margin-top: -.8em;
text-align: center;
line-height: 1.6em;
}
Remove the line "top: 50%" from your CSS markup. In vertical orientation, the slider code is changing the "bottom" parameter but it has no effect while the "top" parameter is set.
I need to make a div dragable over the another div . How to do this ?
This is my html and i made this responsive using media query
<style>
.text-canvas{
z-index:1;
position:absolute;
}
.imageupload{
z-index:-1;
}
</style>
<script>
function submit_button(){
alert('hiii');
}
</script>
<div class="parent-canvas">
<div class="text-canvas" contenteditable="true">
my text
</div>
<div class="image-canvas">
<div class="imageupload" onclick="submit_button()">
<img src="img.png">
</div>
</div>
</div>
Here i need to make this text-canvas div dragabble, so that user can drag that my text and he can place it on any where in the image (only inside image-canvas div ).
I see the html drag and drop , but i didn't understand how to apply this .
Based on your html : Add this script
$( ".text-canvas"").draggable({
containment: ".imageupload"
});
For any doubts in syntax or working check these documents
(1) http://api.jqueryui.com/draggable/
(2) https://jqueryui.com/draggable/
Make sure you already included jquery-ui.js . First you need to call jquery.js or jquery.min.js then only call jquery-ui.js , the order is important.
eg:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Check Out HTML5 Drag And Drop
HTML5 Drag & Drop
Create targets for draggable elements.Enable any DOM element to be droppable, a target for draggable elements.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<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>
<script>
$( function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
} );
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
</body>
</html>
The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by draggables). You can specify which draggables each will accept.
Theming
The droppable widget uses the jQuery UI CSS framework to style its look and feel. If droppable specific styling is needed, the following CSS class names can be used for overrides or as keys for the classes option:
ui-droppable: The droppable element. When a draggable that can be dropped on this dropppable is activated, the ui-droppable-active class is added. When dragging a draggable over this droppable, the ui-droppable-hover class is added.
link https://jqueryui.com/droppable/
See the Draggable example from jQuery UI here
I have just started learning html, css and js and I recently had to create a price slider range in a website that will be reasonable in it.
I would like to know how can I reposition it. I've copied the entire code from this link http://jqueryui.com/slider/#range however, the positioning is at the top of the web browser and it takes up the entire width of the browser as well
Is there anyway I can make it like adidas web page does it? http://shop.adidas.com.sg/men.html
At the side of the web browser and the size is kinda small ?
terribly sorry if I sound extremely dumb but I have no experienced in this.
Visit https://jsfiddle.net/vexsc7d8/1/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
/**** In style.css add class .container { float:left; width:200px;} ****/
<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
</head>
<body>
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div class="container">
<div id="slider-range"></div>
</div>
</body>
</html>
I would hazard a guess you just haven't put it within a div and therefore it's taking up 100% of page body instead of 100% of a div sized as you need.
Hope this helps, just a last minute idea for you before I go home from work lol
Regards
Liam
to shape the way a component looks you'll need to use CSS.
1 option is to create a div tag around the slider html element and use css to change its side using with width property.
#divContainingSlider {
width: 100px;
}
I am curious to know how to add add image icon using jquery as in stack overflow. When user clicks it, it increases its size and goes wherever user places it.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 50px; height: 50px; padding: 0.5em; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<image src="/addImage" />
</div>
</body>
</html>
Here I have added simple image on which user should able to place where he wants to place image. I don't know how to increase the size of that div after dragging. Also I want to get the position where user have added it.
I also want it should ask to browse on pc to upload a image
This code will increase the size of the draggable after it is been dragged and will return the position (as offset) of the draggable-element:
$(function () {
$("#draggable").draggable({
stop: function( event, ui ) {
ui.helper.css({
width: '200px',
height: '200px'
});
$('#position').text('Top: ' + ui.position.top + ' Left: ' + ui.position.left)
}
});
});
Demo
Reference
.draggable()
I am trying to create a responsive slider. I have searched for many horizontal slider examples and found this one to be the most straight forward and simple. Now I want to adapt the code to make it responsive. When the slider is for example on 2013 than something should happen. All I need to know is where in the code I would implement this. So if anybody could help adapting underneath code that would be very helpful. Just a different print statement for each number that could be slided to would be awesome. Thank you in advance!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Slider bound to select</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
var select = $( "#minbeds" );
var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
min: 1,
max: 8,
range: "min",
value: select[ 0 ].selectedIndex + 1,
slide: function( event, ui ) {
select[ 0 ].selectedIndex = ui.value - 1;
}
});
$( "#minbeds" ).change(function() {
slider.slider( "value", this.selectedIndex + 1 );
});
});
</script>
</head>
<body>
<form id="reservation">
<label for="minbeds">Minimum number of beds</label>
<select name="minbeds" id="minbeds">
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
<option>2019</option>
<option>2020</option>
</select>
</form>
</body>
</html>
This happens in the slide function
slide: function( event, ui ) {
console.log(ui.value); // prints 1 for 2013, 2 for 2014 ...
select[ 0 ].selectedIndex = ui.value - 1;
}
To make it responsive, use something like this
slide: function( event, ui ) {
var index = ui.value-1;
select[ 0 ].selectedIndex = index;
if (select[0][index].text === "2013") { // text works, but innerHTML, innerText and label do too
console.log("2013!");
}
}