I have an image on a web page, and want to change it based on the position of a slider, I have looked through a few answers on here but nothing quite covers it for the way I need it to work.
So far i have a functioning slider, and an image but i cant get them to talk to each other:
HTML:
<img src="images/flask_image1.png" alt="Isa lab" id="flask" />
Slider HTML:
<div id="slider1">
Script:
<script>
$(function() {
$( "#slider1" ).slider({
min: 0,
max: 4,
step: 1,
change: function(event, ui){
if(ui.value == 1){
$('flask').attr('src','images/flask_image2.png');
}else{
$('flask').attr('src','images/flask_image1.png');
};
}
});
});
</script>
Basically does nothing.
I'm not a JS or JQ user much, so i'm stuck!
Change $('flask') to $('#flask')
Just change $('flask') to $('#flask')
Working Example: http://jsfiddle.net/4WEML/1/
The problem is you mention id with out the hash "#"
Like below
$('flask').attr('src','images/flask_image2.png');
this wont work as because thats a id you should use hash '#' so try like below code
$(function() {
$( "#slider1" ).slider({
min: 0,
max: 4,
step: 1,
change: function(event, ui){
if(ui.value == 1){
$('#flask').attr('src','images/flask_image2.png');
}else{
$('#flask').attr('src','images/flask_image1.png');
};
}
});
});
Hope this helps....
$('flask').attr('src','images/flask_image2.png');
You need to add a # before hand to refer to an element with an ID of flask
if(ui.value == 1){
$('#flask').attr('src','images/flask_image2.png');
}else{
$('#flask').attr('src','images/flask_image1.png');
};
Related
After spending hours on several tutorial books and online help I am not able to figure out my problem.Here i am trying to store values of UI slider using localstorage object and it is working fine ( i am getting stored value on every page load) but UI slider pointer not moving according to stored value
it shows position as zero(0) on every page load.
Any suggestion would be a great help
Thanks
<script>
$(function() {
$( "#slider-range" ).slider({
min: 0,
max: 100,
step:25,
value:show(),
change: function() {
iremember();
},
stop: function( event, ui ) {
$.post('volume.php', {volume: ui.value}, function(data) {
});
$('#volume').val(ui.value+' %');
}
});
});
function iremember()
{
var dataTosave=document.getElementById("volume").value
localStorage.setItem("intdata",dataTosave)
}
function show()
{
var dataToshow=localStorage.getItem("intdata")
document.getElementById("volume").value=dataToshow
}
</script>
html-----
<div class="def_class" id="slider-range"></div>
<input type="text" id="volume"/>
Your function show() should return a value:
function show() {
var dataToshow=localStorage.getItem("intdata");
document.getElementById("volume").value=dataToshow;
return parseInt(dataToshow);
}
I'm using the Slider widget, as a range from 0 to 500000, in my rails web app. I'm trying to display the value of slider as it changes, but I don't know where I'm wrong. I'm new to JQuery, help would be much appreciated.
JQuery:
<script type="text/javascript">
$(document).ready(function() {
var slider = $("#the_slider").slider({
range: true,
min: 0,
max: 500000,
step: 1,
values: [0, 500000],
animate: 'slow',
slide: function(event, ui) {
$("#q_rent_gteq").val(ui.values[0]);
$("#q_rent_lteq").val(ui.values[1]);
},
slide: function(event, ui) {
$(ui.handle).find('span').html('฿' + ui.value[0]);
$(ui.handle).find('span').html('฿' + ui.value[1]);
}
});
$("#q_rent_gteq").val(slider.slider("values")[0]);
$("#q_rent_lteq").val(slider.slider("values")[1]);
});
</script>
View:
<div id="the_slider"></div>
<span id="q_rent_gteq"></span>
<span id="q_rent_lteq"></span>
Use .text if #q_rent_gteq or #q_rent_lteq are not inputs, textareas or selects. Other than this I cannot reproduce your error. Also combine both your slides. There is no need for two
slide: function(event, ui) {
$("#q_rent_gteq").val(ui.values[0]);
$("#q_rent_lteq").val(ui.values[1]);
$(ui.handle).html('฿' + ui.values[0]);
$(ui.handle).html('฿' + ui.values[1]);
}
Also ui.handle is a span itself. Did you mean to find that span or another? I don't see any others in the jQuery slider that can be found with a .find.
https://jsfiddle.net/eu793by7/
I'm following along this example:
http://jqueryui.com/slider/#slider-vertical
I've copied the exact code (changing the div/input names to my own) from this example into another webpage, but chrome throws a Uncaught TypeError: undefined is not a function and the slider never appears.
The exact code that does not work:
$(function() {
$( "#timeframe_slider" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
value: 60,
slide: function( event, ui ) {
$( "#month_week" ).val( ui.value );
}
});
$( "#month_week" ).val( $( "#timeframe_slider" ).slider( "value" ) );
});
When I change the code from what the example has to simply:
$( "#timeframe_slider" ).slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 1,
value: 0,
slide: function( event, ui ) {
if (ui.value === 0) {
$( "#month_week" ).val("Month");
} else {
$( "#month_week" ).val("Week");
}}
});
it works perfectly.
I'm fairly new to javascript, but I understand that having:
$(function() {
code goes here
};
is to ensure that the page is ready. Can someone explain why when attempting to use the example the .slider() function suddenly does not work?
UPDATE
This problem does not appear when trying to recreate it in jsfiddle.. Here's exactly what I'm looking at however:
One thing to check is that you're not accidentally including jquery twice, causing the slider plugin to no longer be attached to $ when the $(function() { wrapped code fires.
Sorry this is more of a comment then an answer, but I don't have enough reputation to comment yet.
Im trying to enable the slider when the checkbox is checked!
the html:
<label for="zerovalueback">Zero Back</label>
<input id="zerovalueback" type="checkbox" name="zerovalueback">
<div id="slider"></div>
<div class="sliderValues">
<span class="leftVal">
</span>
= = =
<span class="rightVal">
</span>
</div>
the script:
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery('body').on('click', '#zerovalueback', function() {
var status = jQuery(this).prop("checked"); console.log(status);
if (status == 'true') {
jQuery( "#slider" ).slider({
range : "max",
min : 1,
max : 10,
value : 6,
slide: function(event,val){
jQuery('.leftVal').text(val.value);
}
});
};
});
});
Everything is linked correctly, because If I call simply the slider before the on(click) function it works.
Does anybody have idea how to solve this?
The if statement was not correct, advice from #DontVoteMeDown was helpfull,
it should be
if (status === true) {
jQuery( "#slider" ).slider({
range : "max",
min : 1,
max : 10,
value : 6,
slide: function(event,val){
jQuery('.leftVal').text(val.value);
}
});
}
If your need is to enable disable jQuery. There are methods called enable() and disable(). you can find more info here.
To disable slider you can use jQuery( "#slider" ).slider('disable'); and to enable slider you can use jQuery( "#slider" ).slider('enable')
You can find the working demo here
im a jq newbie, but im fighting my way trough ;(
question:
i need to pass a slider variable(ui.value) to a "http://NAME/sensor?ConnectFloat InputB cf_GrA_l2pY VALUE_FROM_SLIDER" where value_from_Slider is the value, when i stop sliding.
.
my code can be found here:
http://jsfiddle.net/f2AWC/30/
or here:
$(function() {
$("#slider").slider({
value: 50,
min: 0,
max: 99,
step: 1,
slide: function(event, ui) {
$("#slider_value").val(ui.value);
}
});
$("#slider_value").val($("#slider").slider("value"));
});
html:
<div id="slider"></div>
sliderValue:
i know that im missing a new $function, but this is as far as i understand.
Thanks for any help!
use the stop event
$sliderValue="";
$("#slider").slider({
value: 50,
min: 0,
max: 99,
step: 1,
slide: function(event, ui) {
$("#slider_value").val(ui.value);
},
stop: function(event, ui) {
alert(ui.value);
$sliderValue=ui.value; //set the value to a global variable
}
});
$("#slider_value").val($("#slider").slider("value"))
//send the value here
// $.post("http://NAME/sensor?ConnectFloat InputB cf_GrA_l2pY VALUE_FROM_SLIDER",{value:$sliderValue},function(data){...});
here is the fiddle http://jsfiddle.net/f2AWC/34/
I am not sure I understand the part with http://NAME/sensor?ConnectFloat InputB cf_GrA_l2pY VALUE_FROM_SLIDER. Can you elaborate a bit more there?
When you stop sliding, you can use stop function, which works the same way as slide. Documentation here
you can use the slider val and append it to the link href
e.g.
$('#link').attr('href','http://NAME/sensor?ConnectFloat InputB cf_GrA_l2pY '+$("#slider_value").val());
Demo - http://jsfiddle.net/Jayendra/f2AWC/32/
It might be a bit late to answer on the post.
But after looking at the question.You might need to send an AJAX request over the stop event of the jquery slider.
Following code might be helpful in future for fellow programmers facing the same problem.
$(document).ready(function(){
$("#slider").slider({
range : "min",
min : 0,
max : 100,
value : 3,
stop : function(event, ui) {
slideValue = ui.value;
$.ajax({
url : "http://sample/url/request",
type : "POST",
data : {
"slideValue" : slideValue
},
dataType : "json",
success : function(response){
console.log(response);
}
});
}
});
});
http://api.jqueryui.com/slider/#toptions