Jquery slider to change interval on refresh script - javascript

i'm using this piece of code to refresh my div every X seconds:
<script>
$(document).ready(function() {
$("#container").load("stats.php");
var refreshId = setInterval(function() {
$("#container").load('stats.php');
}, 10*1000);
$.ajaxSetup({ cache: false });
});
</script>
This works great, only thing i want to add is a slider like this one: http://jqueryui.com/demos/slider/#steps
I want it to be able to set the interval on the refresh timer which is by default 10 seconds (10*1000)
Is it possible to let the slider modify the value ? if so, how can i do that ?
thanks!

Your script will be something like this:
$(document).ready(function() {
var intSeconds = 10;
var refreshId;
function sTimeout()
{
// Load content
$("#container").load("stats.php");
// Saving the timeout
refreshId = setTimeout(function() {
sTimout();
}, intSeconds *1000);
}
sTimeout();
$.ajaxSetup({ cache: false });
// The slider
$(".ui-slider").slider({
min : 1, // minimum value
max : 20, // Maximum value
value : intSeconds, // Copy current value
change: function(event, ui) {
clearTimeout(refreshId); // clear it
intSeconds = ui.value; // Update value
sTimeout(); // Restart it
}
});
});
Now just add a slider DIV to your source, and check it out.

Add the slider something like this:
var interval = 10000;
$( "#slider" ).slider({
value:10,
min: 1,
max: 20,
step: 1,
slide: function( event, ui ) {
interval = ui.value * 1000;
}
});
Then instead of using a setInterval, you could use setTimeout:
(function reload () {
$("#container").load('stats.php');
setTimeout(reload(), interval);
})();

Related

jQueryUI slider - How to get the value [duplicate]

I am working on http://gamercity.info/ymusic/.
And I am using UI slider as seek bar.
While the video is played I want to invoke a seekTo(seconds) function if user clicked anywhere on the seek bar. How to get new value of seconds after click event?
To read slider value/percentage value at anytime:
var val = $('#slider').slider("option", "value");
$('#slider').slider({
change: function(event, ui) {
alert(ui.value);
}
});​
http://jqueryui.com/demos/slider/
I checked all the answers mentioned above, but found none useful as the following code:
$('#slider').slider("values")[0]; // for slider with single knob or lower value of range
$('#slider').slider("values")[1]; // for highest value of range
Tested with jQuery v2.1.1 and jQuery-ui v1.12.1
var val = $("#slider").slider("value");
$("#slider").slider(
{
value:100,
min: 0,
max: 500,
step: 50,
slide: function( event, ui ) {
$( "#slider-value" ).html( ui.value );
}
}
);
JS FIDDLE EXAMPLE : http://jsfiddle.net/hiteshbhilai2010/5TTm4/1162/
you can have a function like this
function seekTo(seek_value)
{
$("#slider").slider('option', 'value',seek_value);
}
var value=document.getElementById('slider').value;
var a=value.split("specialName")//name=special charcter between minimum and maximum rang
var b=a[0];//this will get minimum range
var c=a[1];//this will get maximum range
// Price Slider
if ($('.price-slider').length > 0) {
$('.price-slider').slider({
min: 0,
max: 2000,
step: 10,
value: [0, 2000],
handle: "square",
});
}
$(document).ready(function(){
$(".price-slider").on( "slide", function( event, ui ) { console.log("LA RECTM"); var mm = $('.tooltip-inner').text(); console.log(mm); var divide = mm.split(':'); console.log( "min:" +divide[0] + " max:" + divide[1] ) } );
})
You can pass the value to any function or set any element with the value:
$(function () {
$('#slider').slider({
max: 100,
slide: function (event, ui) {
$('#anyDiv').val(ui.value);
}
});
});
Late to the party but this question has still unanswered.
Below example will show you how to get value on change in an input field to save in DB:
$( "#slider-videoTransparency" ).slider({
value: "1",
orientation: "horizontal",
range: "min",
max: 30,
animate: true,
change: function (e, ui) {
var value = $(this).slider( "value" );
$('.video_overlay_transparency').val(value);
}
});
<div id="slider-videoTransparency" class="slider-danger"></div>
<input type="hidden" name="video_overlay_transparency" class="video_overlay_transparency" value="">
JQuery ui slider
var slider = $("#range_slider").slider({
range: true,
min: 0,
max: 500,
values: [0, 500],
slide: function(event, ui) {
var x = ui.values[0];
var y = ui.values[1];
$('#min').text( ui.values[0] )
$('#max').text( ui.values[1] )
$.ajax({
url: '/search',
type: 'GET',
dataType: 'script',
data: {min:x, max:y,term:food_item_name},
success: function(repsonse){},
});
}
});
});

Writing and compiling a simple jQuery plugin

I am trying to compile a basic jQuery plugin which shows a div upon provided options when invoking:
select if a checkbox should be checked after X milliseconds or after X px on scroll,
if one of those two options are selected, set a delay value or scroll distance in px
otherwise do nothing
Example of desired options invoke:
$(document).ready( function() {
$('#testInput').testing({
myMethod : delay,
myValue : 2000
});
});
My current progress here: JSFiddle (it's not much as currently I'm still at a beginning of the learning curve)
After some fiddling i managed to get this working (kinda). Plugin seems to be working fine. Except there is some bug with the scroll function which i have to sort it out additionaly - it loops and changes checkbox states indefinitely instead just once.
Here is a working fiddle
And modified code:
(function($) {
$.fn.testing = function( options ) {
// Settings
var settings = $.extend({
delay : null,
delayTime : null,
scrolling : null,
scrollDist : null
}, options);
return this.each( function() {
var self = this;
// Timeout
setTimeout(function (){
$(self).prop('checked', settings.delay);
}, settings.delayTime);
// Scroll
if ($(window).scrollTop() > settings.scrollDist) {
$(this).prop('checked', settings.scrolling);
};
});
}
}(jQuery));
// Plugin invoke
$(window).on("load resize scroll",function(){
$('#testInput').testing({
delay : false,
delayTime : null,
scrolling : true,
scrollDist : 20,
});
});

Getting updated global variable in JavaScript - jQuery

I am getting undefined type for:
$(".ui-slider-handle").attr("title", '"'+current+'"');
As you can see I tried to alert the current in line 29 and alerts the correct updated current value but it is not functioning on .attr("title", '"'+current+'"'). Why is this happening, and how can I solve this issue?
$(function () {
var current;
$("#slider-vertical").slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
value: 60,
slide: function (event, ui) {
$("#amount").val(ui.value);
var offsets = $('.ui-slider-handle').offset();
var top = offsets.top;
$(".tooltip").css('top', top - 90 + "px");
$(".tooltip-inner").text(ui.value);
function setCurrent() {
current = ui.value;
}
setCurrent();
}
});
$("#amount").val($("#slider-vertical").slider("value"));
$(".ui-slider-handle").attr("rel", "tooltip");
$(".ui-slider-handle").attr("data-toggle", "tooltip");
$(".ui-slider-handle").attr("data-placement", "left");
// alert(current);
// $(".ui-slider-handle").attr("title", "50");
$(".ui-slider-handle").attr("title", '"'+current+'"');
$("[rel='tooltip']").tooltip();
});
What do you have the single-double-single quote for? Try to use:
$(".ui-slider-handle").attr("title", current);
Does it require double quotes to appear?
I'm gonna leave that cause it was boneheaded and funny. Anyway, current is inside the scope of the function and does not have a value outside of it. Try this instead:
Change this:
function setCurrent() {
current = ui.value;
}
setCurrent();
to
current = ui.value;
Or you could just return the value like this:
function setCurrent() {
return ui.value;
}
current = setCurrent();

How to start/stop ResponsiveSlides.js?

I am testing some new stuff on responsive sliders, and I got stranded on something while using this plugin: http://responsiveslides.com/
Can anyone help me on how to create a start/stop function for the slider? I want to have a start/stop option, to control if the slider is automatically switching between slides or paused, giving the user a bit more control.
The only option available in the slider yet is to start/stop on hover. I need it to start/stop when I click a custom element in the DOM.
you will need to add some code to the plugin.
First, create a variable named forcePause:
fadeTime = parseFloat(settings.speed),
waitTime = parseFloat(settings.timeout),
maxw = parseFloat(settings.maxwidth),
forcePause = false, // <---- here!
In the restartCycle method you need to check if the paused is forced or not:
restartCycle = function () {
if (settings.auto) {
// Stop
clearInterval(rotate);
if ( !forcePause ) // new line
// Restart
startCycle();
}
};
After that, you can add something like that in the line 300:
$( '.pause_slider' ).click( function( e ){
e.preventDefault();
forcePause = true;
$( this ).hide()
$( '.play_slider' ).show();
clearInterval(rotate);
});
$( '.play_slider' ).click( function( e ) {
e.preventDefault();
forcePause = false;
$( this ).hide();
$( '.pause_slider' ).show();
restartCycle();
});
You will need two HTML elements with each class to do his work. The forcePause avoid to restart de slider after hovering it.
I know it's not the best solution ever, but it does the trick.
You can see it working here:
http://jsbin.com/eHaHEVuN/1/
Also you will find the code. :) I hope this works for you.
Control start/stop with pause parameter:
$(".rslides").responsiveSlides({
auto: true, // Boolean: Animate automatically, true or false
speed: 500, // Integer: Speed of the transition, in milliseconds
timeout: 4000, // Integer: Time between slide transitions, in milliseconds
pager: false, // Boolean: Show pager, true or false
nav: false, // Boolean: Show navigation, true or false
random: false, // Boolean: Randomize the order of the slides, true or false
pause: true, // Boolean: Pause on hover, true or false
pauseControls: true, // Boolean: Pause when hovering controls, true or false
prevText: "Previous", // String: Text for the "previous" button
nextText: "Next", // String: Text for the "next" button
maxwidth: "", // Integer: Max-width of the slideshow, in pixels
navContainer: "", // Selector: Where controls should be appended to, default is after the 'ul'
manualControls: "", // Selector: Declare custom pager navigation
namespace: "rslides", // String: Change the default namespace used
before: function(){}, // Function: Before callback
after: function(){} // Function: After callback
});
There's another simple solution - enable pause on hover, then emulate hover:
JS:
$(".rslides").responsiveSlides({
pause: true
});
$('.carousel-pause .pause').click(function(e){
$(this).hide();
$('.play').show();
$('.rslides').trigger('mouseenter');
});
$('.carousel-pause .play').click(function(e){
$(this).hide();
$('.pause').show();
$('.rslides').trigger('mouseleave');
});
HTML:
<div class="carousel-pause">
<span class="pause">Pause</span>
<span class="play">Play</span>
</div>
Built off of answer from #miduga to get solution tailored to allow external events to pause slide show.
I ended up creating a global variable of window.responsiveSlidesForcePause that is used in the rotate interval to determine if rotate should occur. Ideally, there should be a public method that pauses the individual slideshow, but this is a quick hack that will pause any slideshow on the page. My situation only needed a single slideshow on a page that will have a short lifespan.
http://jsfiddle.net/egeis/wt6ycgL0/
Initialize global variable:
return this.each(function () {
// Index for namespacing
i++;
window.responsiveSlidesForcePause = false; // new global variable
var $this = $(this),
Use global variable:
startCycle = function () {
rotate = setInterval(function () {
if (!window.responsiveSlidesForcePause) { // new if statement
// Clear the event queue
$slide.stop(true, true);
var idx = index + 1 < length ? index + 1 : 0;
// Remove active state and set new if pager is set
if (settings.pager || settings.manualControls) {
selectTab(idx);
}
slideTo(idx);
}
}, waitTime);
};
Which allows the events that pause the slideshow to be outside the actual plugin.
$(document).ready(function() {
$( "#slider" ).responsiveSlides({ nav: true, prevText: '', nextText: '' });
$( ".pause_slider" ).on("click", function (e) {
e.preventDefault();
$(this).hide();
$( '.play_slider' ).show();
window.responsiveSlidesForcePause = true;
});
$( '.play_slider' ).click( function(e) {
e.preventDefault();
$( this ).hide();
$( '.pause_slider' ).show();
window.responsiveSlidesForcePause = false;
});
});

Error : cannot call methods on slider prior to initialization attempted to call method 'value'

I have written something like below. onclick of div with id "PLUS" I
am getting the following error:
cannot call methods on slider prior to initialization attempted to call method 'value'
<div id="PLUS" class="PLUS"></div>
<script>
$(function() {
$(".slider").slider({
animate: true,
range: "min",
value: 18,
min: 18,
max: 70,
step: 1,
slide: function(event, ui) {
$("#slider-result").html(ui.value);
document.getElementById(findElement('ageId')).value = ui.value;
},
//this updates the hidden form field so we can submit the data using a form
change: function(event, ui) {
$('#hidden').attr('value', ui.value);
}
});
$(".PLUS").click(function() {
var value = $("#slider-result").slider("value"),
step = $("#slider-result").slider("option", "step");
$("#slider-result").slider("value", value + step);
});
});
</script>
Any help is appreciated.
If we check error in detail you will notice that it says you are trying to call the value method before the initialization of slider plugin.
Reason:
Actually JavaScript is an interpreted language, and it doesn't wait for first command to execute and finish. That's why your $(".slider").slider({ and $(".PLUS").click(function() { lines run at same time and the error occurs.
Solution:
You can put your code in setTimeout function here is an example given below.
<script>
$(function() {
$(".slider").slider({
animate: true,
range: "min",
value: 18,
min: 18,
max: 70,
step: 1,
slide: function(event, ui) {
$("#slider-result").html(ui.value);
document.getElementById(findElement('ageId')).value = ui.value;
},
//this updates the hidden form field so we can submit the data using a form
change: function(event, ui) {
$('#hidden').attr('value', ui.value);
}
});
setTimeout(function(){
$(".PLUS").click(function() {
var value = $("#slider-result").slider("value"),
step = $("#slider-result").slider("option", "step");
$("#slider-result").slider("value", value + step);
});
},200); // 200 = 0.2 seconds = 200 miliseconds
});
</script>
I hope this will help you/someone.
Regards,
You have used $(".slider").slider() at the time of initializing and
$("#slider-result").slider() at the time of getting the value some plugins work on selector you have used at the time of init, so try that.
The error is caused because $("#slider-result") is not the element initialized as slider and you're trying to execute slider widget methods on it instead of $(".slider") which is the actual slider.
Your code should be
$(".PLUS").click(function() {
var value = $(".slider").slider("value"),
step = $(".slider").slider("option", "step");
$("#slider-result").text(value + step);
//---- maybe you'll need to ----^---- parseInt() the values here
});
i had a similar problem.
your block here
$(".PLUS").click(function() {
var value = $("#slider-result").slider("value")
, step = $("#slider-result").slider("option", "step");
$("#slider-result").slider("value", value + step);
});
just keep it under
create: function( event, ui ) {}
ie.
create: function( event, ui ) {
$(".PLUS").click(function() {
var value = ui.value;
, step = $("#slider-result").slider("option", "step");
$("#slider-result").slider("value", value + step);
});
}
hope this works.
The best way I found to achieve this is to use the event from the ON function from the slider library to get the value. Ex:
slider.on('slideStop', function(ev) {
let value= ev.value; //try ev if you want to see all
console.log(value);
})
Regards

Categories

Resources