I am testing my jquery skills and want to use the slider found in the jquery ui over here. I have tried implementing this on my code but the slider does not appear. All that appears is 'Rpice Range: $75- $300'. I have tried making sure I have the right jquery version. This is my code. Nothing too complex, just my trying to test out the slider:
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="jquery-ui.js">
<style>
div{
padding-right: 30%;
padding-left: 30%;
}
</style>
<script>
$(document).ready(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>
<div> <h1>Resorts 'R' Us</h1>
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
</div>
</body>
</html>
I looked at the console window when my chrome browser was running it but there was no error. So why is this not displaying? Also another question, would I be able to use bootstrap with all the jquery uis?
Related
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;
}
The following jquery code works just fine on the latest version of Chrome,
On focus event of the input field it should trigger the autocompletion of the field itself using ajax to retrieve the suggestions but it does not work at all on IE10
The console is empty...
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script>
$(function() {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#myBut").click(function(){
if($('#city').val() == "")
return;
log("selected: " + $("#city").val() );
$('#city').val("");
$('#city').blur("");
});
$( "#city" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://localhost:8085/TestJsonArrayAJAX/MyServlet",
dataType: "json",
data: {
q: request.term
},
success: function( data ) {
alert("ciao");
response( data );
}
});
},
minLength: 0,
select: function( event, ui )
{
alert('ccc');
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}}).focus(function() { alert("c");
//Use the below line instead of triggering keydown
$(this).data("uiAutocomplete").search($(this).val()) });
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="city">Your city: </label>
<input id="city">
Powered by geonames.org
</div>
<button name="subject" id="myBut" value="HTML">HTML</button>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Result:
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
</body>
</html>
There are known issues with scrollTop on IE. Might this help? document.body.scrollTop is always 0 in IE even when scrolling
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!");
}
}
I was working on JQuery UI Date Picker.
before it was working great but now the calendar won't show up.
any ideas?
here's my code.
http://pastebin.com/L4j2TmyY
my code is too long so i placed it in pastebin.
I follow this exactly but calendar is not showing
http://jqueryui.com/datepicker/
I think you should download all the JavaScript files into your project folder and call the JavaScript files.
Example :
Calling JavaScript from external URL (Not working)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>undelegate demo</title>
<style>
button {
margin: 5px;
}
button#theone {
color: red;
background: yellow;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="theone">Does nothing...</button>
<button id="bind">Bind Click</button>
<button id="unbind">Unbind Click</button>
<div style="display:none;">Click!</div>
<script>
function aClick() {
$( "div" ).show().fadeOut( "slow" );
}
$( "#bind" ).click(function() {
$( "body" )
.delegate( "#theone", "click", aClick )
.find( "#theone" ).text( "Can Click!" );
});
$( "#unbind" ).click(function() {
$( "body" )
.undelegate( "#theone", "click", aClick )
.find( "#theone" ).text( "Does nothing..." );
});
</script>
</body>
</html>
Calling from project Folder(Working fine)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>undelegate demo</title>
<style>
button {
margin: 5px;
}
button#theone {
color: red;
background: yellow;
}
</style>
<script src="jQuery.js"></script>
</head>
<body>
<button id="theone">Does nothing...</button>
<button id="bind">Bind Click</button>
<button id="unbind">Unbind Click</button>
<div style="display:none;">Click!</div>
<script>
function aClick() {
$( "div" ).show().fadeOut( "slow" );
}
$( "#bind" ).click(function() {
$( "body" )
.delegate( "#theone", "click", aClick )
.find( "#theone" ).text( "Can Click!" );
});
$( "#unbind" ).click(function() {
$( "body" )
.undelegate( "#theone", "click", aClick )
.find( "#theone" ).text( "Does nothing..." );
});
</script>
</body>
</html>
As i saw your pastebin you are loading two jQuery libraries, which is not recommended, although you can use it with jQuery.noConflict(). So the quick fix is this:
Remove this library:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
#Kim Carlo
I continue with #Rohit Bandooni's answer.
As his answer, it should work correctly.
A pastebin cloned from your paste: http://pastebin.com/2yNiXy44
I did some changes:
- comment yours 2 "die"
- change the method name (search for text "CHANGE_BY_ME" in pastebin)
I run on my EasyPHP, it works well: http://imgur.com/kfmLkLY,lHsEUyv (2 images for 2 controls)
I found only 2 date controls on your page.
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>