jQuery / jQuery UI slider event for jump/click. Function not firing - javascript

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();
});

Related

JQuery slider with attribute for what to control, reusable prototype

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.

Javascript & jquery manipulation

I am stuck at what I think is a really simple thing, basically I have the following code for a slider.
$( ".slider" ).slider({
animate: true,
range: "min",
value: 0,
min: 0,
max: 255,
step: 1,
//this gets a live reading of the value and prints it on the page
slide: function( event, ui ) {
$( "#slider-result" ).html( ui.value );
},
//this updates the hidden form field so we can submit the data using a form
change: function(event, ui) {
$('#112').attr('value', ui.value);
}
});
All works fine and dandy, the thing I want to be able to do is make the value 0 again, resetting the slider. I have a little bit setup that does it in the physical form element, but I want the visual slider to show nothing as well.
If this is jQuery UI slider, then look at this:
http://api.jqueryui.com/slider/#option-value
// Get or set the value option, after initialization:
// getter
var value = $( ".selector" ).slider( "option", "value" );
// setter
$( ".selector" ).slider( "option", "value", 10 );
You can specifically set the value of the slider
// This would reset the slider
$( ".slider" ).slider( "value", 0);

Dynamic HTML causes libraries to fail

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 );
});
});

How to find jQuery DropDownCheckList selected items from an outside function

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());

Help with Jquery ui.slider

I am using this implementation of the ui.slider which controls the ui.tabs as found on the Jquery website:
http://jqueryui.com/demos/slider/#tabs
Everything is working fine however when I directly link to a tab, the slider always stays in its initial position (or whatever you stated as the initial value).
Demo can be found here: http://jqueryui.com/demos/slider/tabs.html#tabs-2
Is there any way of setting the slider to the same position as the tab when it is directly linked to?
Thanks very much.
Something like this should do it:
$(function() {
$( "#tabs" ).tabs({
select: function( event, ui ) {
$( "#slider" ).slider( "value", ui.index );
}
});
$( "#slider" ).slider({
min: 0,
max: $( "#tabs" ).tabs( "length" ) - 1,
slide: function( event, ui ) {
$( "#tabs" ).tabs( "select", ui.value );
},
value: $( "#tabs" ).tabs( "option", "selected" )
});
});

Categories

Resources