I can't get this dynamically created content working with jQuery Slider and jscolor. The library functions are ignored. I'm guessing it's something to do with the order that things are processed in. Could someone point me in the right direction please?
Here's a simplified example of the failing code.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<title>Test dynamic code and jscolor</title>
<script type="text/javascript" src="jscolor/jscolor.js"></script>
<script type="text/javascript">
function addcontent() {
document.getElementById('colordiv').innerHTML = '<input id="valColourRGB" class="color" />';
document.getElementById('sliderdiv').innerHTML = '<input type="text" class="p_slidernum" id="colT" name="valColourT" value="200" /><div id="colTslider"></div>';
}
$(function() {
$( "#colTslider" ).slider({
value: 100,
min: 0,
max: 255,
slide: function( event, ui) {
$( "#colT" ).val( ui.value );
}
});
});
</script>
</head>
<body onload="addcontent();">
<div id="colordiv"></div>
<div id="sliderdiv"></div>
</body>
If I manually move the INPUT tags into the DIVs it works fine, but why doesn't this work?
You have to call the slider after injecting the html.
http://jsfiddle.net/p46cs/
function addcontent() {
document.getElementById('colordiv').innerHTML = '<input id="valColourRGB" class="color" />';
document.getElementById('sliderdiv').innerHTML = '<input type="text" class="p_slidernum" id="colT" name="valColourT" value="200" /><div id="colTslider"></div>';
$( "#colTslider" ).slider({
value: 100,
min: 0,
max: 255,
slide: function( event, ui) {
$( "#colT" ).val( ui.value );
}
});
}
addcontent();
load will fire later than the DOMContentLoaded that jQuery's .ready() depends on (using $(function) is equivalent to that).
One way of fixing your code is removing onload from body (you should not use this method called inline event handlers anyway) and calling addContent like this:
$(function() {
addContent();
$( "#colTslider" ).slider({
value: 100,
min: 0,
max: 255,
slide: function( event, ui) {
$( "#colT" ).val( ui.value );
}
});
});
the jquery may be trying to assign the events before you load the content into dom. Try putting the call to addContent() in the ready method.
here is a bin
http://jsbin.com/eYaqoci/1/edit
window.onload will happen after jQuery's ready event, what that means is that:
$( "#colTslider" ).slider({
value: 100,
min: 0,
max: 255,
slide: function( event, ui) {
$( "#colT" ).val( ui.value );
}
will run before addContent(), meaning $('#colTslider') won't match any element.
(See http://learn.jquery.com/about-jquery/how-jquery-works/#Launching_Code_on_Document_Ready)
You can call addContent before you setup the slider in jQuery's ready event handler ($(function(){...}) and it should start working:
$(function(){
$('#colordiv').html('<input id="valColourRGB" class="color" />');
$('#sliderdiv').html('<input type="text" class="p_slidernum" id="colT" name="valColourT" value="200" /><div id="colTslider"></div>');
$( "#colTslider" ).slider({
value: 100,
min: 0,
max: 255,
slide: function( event, ui) {
$( "#colT" ).val( ui.value );
});
});
Related
I use jQuery UI range slider for IE 9 and lower. With it I want to update the font size live.
My problem is that the range slider does not slide correctly. I cant get value 0 after 1. I also cant gate vaule 100 after 99.
function update() {
var Rvalue = $('#range-slider').slider('value');
$("#slidevalue").text(Rvalue);
};
$(function() {
$( "#range-slider" ).slider({
range:false,
min: 0,
max: 100,
value: 20,
slide: function( event, ui ) {
update();
}
});
});
Here is a jsFiddle
Your problem is your update function.
Try like this :
$(function() {
$( "#range-slider" ).slider({
min: 0,
max: 100,
value: 20,
slide: function( event, ui ) {
$( "#slidevalue" ).text( ui.value );
}
});
});
I am using this vertical slider, which works as it should, but I need to change some values dynamically.
https://jqueryui.com/resources/demos/slider/slider-vertical.html
The values I need to change are "min", "max" and "value" in this function:
$(function() {
$( "#slider-vertical" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
value: 60,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
});
The values "min" , "max" and "value" must be set at each page reload, i.e before the user slide the slider up or down. They are generated within PHP codes before the page is shown. They are saved in variables such as $_min; $_max; and $_value;
Now the question is how do I send them to the javascript function and how do I catch them.
In a simple function like the following I put them in the parentesis...
<input type="text" onClick="myVal(<?php echo $_min ?>);">
And then catch them via function name like this:
function myVal(a)
{alert(a) ;
----- do something more ---
}
But now I dont even know the name of the function. Its not javascript, it's jquery
I hope now I am clearer :)
jquery-UI slider has APIs for that. Check this.
$( ".selector" ).slider( "option", "max", 50 );
$( ".selector" ).slider( "option", "min", 10);
$( ".selector" ).slider( "option", "value", 10 );
You should check the documentation before you ask a question,
$( "#slider-vertical" ).slider( "option", "max", 300 );
http://api.jqueryui.com/slider/
To execute the code within php you can echo the statement as such:
<?php
echo "<script> $( '#slider-vertical' ).slider( 'option', 'max', " + $_max + "); </script>";
?>
Your PHP/HTML should look like this:
<div id="slider-vertical"
data-slider-min="<?php echo $_min ?>"
data-slider-max="<?php echo $_max ?>"
data-slider-value="<?php echo $_value ?>"
>
</div>
Your Javascript should look like this:
$(document).ready( function() {
var $slider = $("#slider-vertical"),
min = $slider.data("slider-min"),
max = $slider.data("slider-max"),
value = $slider.data("slider-value");
$slider.slider({
orientation: "vertical",
range: "min",
min: min,
max: max,
value: value,
slide: function( event, ui ) { $("#amount").val( ui.value ); }
});
});
Explanation:
We use PHP to append the variables as html data attributes to a HTML element. We then can access this data with jQuery, and set the values on the slider.
PHP renders the page the page on the server with the data, and then when a user loads it, their browser will tell jQuery to collect the information and create a slider from it.
the jQuery is wrapped in a function which makes sure the Document is ready to be manipulated.
No need for a user to interact with a click/anything :)
I solved the problem like this
min: - document.getElementById("diff").value,
max: document.getElementById("diff").value,
value: 0,
document.getElementById("bild").style.top = ( ui.value );
document.getElementById("klip22").style.top = ( $( "#slider-vertical" ).slider( "value" )
Its working now!
Thanks
In my project i intend to have multiple similar sliders therefore it would be interesting to make them using a prototype:
To set what the sliders control I want to use a "motorLabel". I have tried adding an attribute to the slider below but it does not find the attribute.
Can you please help me change the code to a usable slider prototype.
$(function() {
$('#svgbasics').svg({onLoad: drawOpenSwitch});
//Slider for Last:
$( "#slider" ).slider({
motorLabel: 'm1',
orientation: "horizontal",
range: "min",
min: 1,
max: 200,
value: 50,
change: function( event, ui ) {
$( "#amount" ).val( ui.value );
console.log(this.motorLabel); // RETURNS UNDEFINED
eval(this.motorLabel.motorSetLast(ui.value));
}
}).draggable();
$( "#amount" ).val( $( "#slider" ).slider( "value" ) );
You can pass argument on html instead :
<div id="slider" data-motor-label="m1"></div>
And in your change function :
$(this).data('motor-label');
To get the value.
The following function does kind of what I want in that it retrieves the values of the selected dropdown menu:
$(function() {
$("#s1").dropdownchecklist();
$('#s1').change(function() {
alert($(this).val());
});
});
My problem is I don't want this to occur on Change, I want to get the selected values from inside another function that is being called when my slider moves. So, my question is how can I assign the checked values from #s1.dropdownchecklist to var checkedValuesFromDropdownChecklist?
$(function() {
$( "#slider" ).slider({
change: function(event, ui) {
if (event.originalEvent) {
//manual change
RunThisFunction(ui.value,checkedValuesFromDropdownChecklist);
}
},
orientation: "horizontal",
range: "min",
min: 0,
max: 100,
value: 10,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( $( "#slider" ).slider( "value" ) );
$( ".selector" ).on( "slidecreate", function( event, ui ) {
} );
});
RunThisFunction(ui.value, $('#s1').val());
Just use .val to access the current value of the dropdown.
var selectedValue = $('#s1').val();
console.log(selectedValue);
RunThisFunction(ui.value, $('#s1').val());
I am creating a jQuery slider to loop through a collection of divs, if I hold the slider down and drag it and let go. The handleSlider() is called. If I click on a random point in the slider, the function never gets called. I've tried to use two other event types with no luck. Is there an event handler for "When the user clicks/jumps" on the slider without sliding?
$( "#video_seek" ).slider({
range: "max",
step: 1,
slide: function( event, ui ) {
handleSlider();
}
});
$( "#video_seek" ).slider({ stop: function( event, ui ) {handleSlider();}});
$( "#video_seek" ).slider({ change: function( event, ui ) {handleSlider();}});
I believe your problem is in the syntax. Every time you use $ it makes a new jQuery object, so
$( "#video_seek" ).slider({
range: "max",
step: 1,
slide: function( event, ui ) {
handleSlider();
}
});
//below are not necessarily referring to the original slider, but rather creating new sliders.
$( "#video_seek" ).slider({ stop: function( event, ui ) {handleSlider();}});
$( "#video_seek" ).slider({ change: function( event, ui ) {handleSlider();}});
#Andrew is correct in his syntax. All you should need is the 'change' event, which you can set in your original declaration like this:
$( "#video_seek" ).slider({
change: function( event, ui ) {
handleSlider();
}
});
or even like this:
$( "#video_seek" ).slider({
change: handleSlider
});
if you need to attach an event handler after the fact, do so like this:
$( "#video_seek" ).bind( "slidechange", function(event, ui) {
handleSlider();
});
or even:
$( "#video_seek" ).bind( "slidechange", handleSlider);
(Edit)
Putting it all together and avoiding the production of subsequent jQuery objects.
var videoSeek = $('#video_seek');
videoSeek.slider({
slide: handleSlider
});
//added later on not necessary just for example of doing so
videoSeek.bind('slidechange', handleSlider);
function handleSlider(event, ui){
//do stuff
}
You need to set the events inside the actual object creation or bind them afterwards...
$( "#video_seek" ).slider({
range: "max",
step: 1,
slide: function(event, ui) {handleSlider();}
stop: function(event, ui) {handleSlider();}
change: function( event, ui ) {handleSlider();}
});
or:
$( "#video_seek" ).slider({
range: "max",
step: 1,
});
$( "#video_seek" ).bind( "slidechange", function(event, ui) {
handleSlider();
});