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;
}
Related
I am programming a website creator where user is allowed to visually create some website structure in an iframe.
The iframe's height must get updated always when the iframe's content is updated. I'm having some difficulties in understanding why height of iframe's content is sometimes read incorrectly in JavaScript after dynamically changing the content. I made a test script which shows the thing:
http://vickcreator.com/test/test.php
with iframe here: http://vickcreator.com/test/test2.php
As you can see by looking in source code in browser (or below) the first button fills the iframe with many boxes and immidiately tries to update iframe's height which does not work - it looks like the height is not updated yet in DOM (or something like that), so I though the second button will do - it uses 1 second of delay (doesn't really matter how many seconds, I tried even 5 sec), but no, here height is read wrong (a little less than should be) which results in vertical scroll bar (tested on Firefox and Chrome) - WHY ? Then pressing "set height" fixes the issue. The same happens (first "clear" to reset) when pressing "ONLY fill", then"set height" - then pressing "set height" second time fixes this.
Two questions:
is there any event saying that updating of iframe's content has completed ?
how to correctly read the outerHeight ? I tried:
$( '#iframe' ).contents().find( 'html' ).outerHeight();
$( '#iframe' ).contents().find( 'body' ).outerHeight();
$( '#iframe' ).contents().find( '#wrapper' ).outerHeight();
$( '#iframe' ).contents().outerHeight();
None of these worked.
Below is source code of both files. I didn't use code snippet in StackOverflow because it does not allow me to use iframes.
I can update the code on my server if you need. Thanks for help.
test.php:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="https://searchcode.com/codesearch/raw/73742722/"></script>
<script type="text/javascript">
function setHeight()
{
var newHeight = $( '#iframe' ).contents().find( 'html' ).outerHeight();
$( '#iframe' ).height( newHeight );
$( '#heightText' ).html( newHeight );
}
function fill()
{
for( i=0; i<1000; ++i )
{
$( '#iframe' ).contents().find( '#wrapper' ).append( '<div class="box"></div>' );
}
}
function go( delay )
{
fill();
if( ! delay )
{
setHeight();
}
else
{
$( document ).everyTime( 1000, function(i)
{
setHeight();
}, 1 );
}
}
function clearContent()
{
$( '#iframe' ).contents().find( '#wrapper' ).empty();
$( '#iframe' ).height( '500px' );
$( '#heightText' ).html( 500 );
}
</script>
<style type="text/css">
.box { border:1px dashed black; height:50px; width:50px; margin:5px; display:inline-block; }
.coloured { background: darkgreen; }
</style>
</head>
<body>
<button onclick="go( false );">Fill and set height with NO delay</button>
<button onclick="go( true );">Fill and set height WITH delay (1s)</button>
<button onclick="setHeight();">Set height</button>
<button onclick="fill();">ONLY fill</button>
<button onclick="clearContent();">Clear</button>
Height:<span id="heightText"></span>
<iframe id="iframe" style="width:100%; height:500px;" src="test2.php"></iframe>
</body>
</html>
test2.php (iframe):
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<style type="text/css">
.box { border:1px dashed black; height:50px; width:50px; margin:5px; display:inline-block; }
.coloured { background: darkgreen; }
</style>
</head>
<body>
<div id="wrapper">
</div>
</body>
</html>
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 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?
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 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>