this is my first post on stackoverflow, so please let me know if I've asked my question correctly, and if my terminology is incorrect at any point. Thank you.
I'm using jQuery and the Cycle plugin. I have about 18 images that rotate with no delay. You can view a working example of this here: (http://dev.ctsciencecenter.org/freeze-frame/).
I'm attempting to change the 'speed' value, eventually with a jQuery UI slider, but for now with a link and the .click function.
Here is the Cycle function:
$('#slideshow').cycle({
fx: 'none',
timeout: 1,
continuation: 1,
speed: 'fast'
});
I would like to change the 'speed' value to 'slow' when a link with the id #example is clicked.
I really appreciate the help, could you please also tell me the term for properties like 'speed' and 'fx', are these called 'Object Properties?".
Let me know if this is what you are looking for:
$(function () {
$('#slideshow').cycle({
fx: 'none',
timeout: 1,
continuation: 1,
speed: 'fast'
});
$('#example').click(function (e) {
e.preventDefault();
$('#slideshow').unbind();
$('#slideshow').cycle({
fx: 'none',
timeout: 1,
continuation: 1,
speed: 'slow'
});
});
});
Related
This seems to be pretty basic but i can't find anything on the topic, i tried looking the Advanced Documentation and here but nothing.
I need to execute a callback when the carousel changes the image to do some DOM manipulation. is there a way to do that?
There is an onAfter Attribute
onAfter : function(oldItems, newItems) {
...
}
You should try this:
$(document).ready(function() {
$("#caroufredsel-6").carouFredSel({
responsive : true,
items : 3,
width: '100%',
height: 'auto',
scroll: {
duration: 1000,
timeoutDuration: 3000,
onBefore : function( data ) {
console.log("Transition");
//alert("Transition");
}
}
});
});
Working Fiddle: http://jsfiddle.net/robertrozas/PwCJb/
Doesn't scroll.onAfter do just that?
Function that will be called right after the carousel finished scrolling.
This function receives the same parameter as the onBefore-callback function.
The code is set to on the start slide forward and after 500 its suppose slide back. Well the code does slide forward but the code does not slide back after the 500. The code is not written properly as it should slide back. Here is the code JSFiddle:
$("#slideout").animate({right:'0px'}, {queue: false, duration: "slow"}, function () {
timer = setTimeout(function () {
$("#slideout").animate({right:'-280px'}, {queue: false, duration: 500})
}, 500);
});
http://jsfiddle.net/wdvUQ/2/
If anybody can fix it up so that the code can slide back would be awesome.
Your issue is with the animate arguments
$("#slideout").animate({right:'0px'}, {queue: false, duration: "slow"}, function ()...
should be
$("#slideout").animate({right:'0px' , queue: false, duration: "slow"}, function ()...
You'll need to remove the closing/opening curly braces.
I am trying to animate a number so that it rolls into the number when the page loads. I am using another library to display a dial (http://anthonyterrien.com/knob/). The issue I am having is that the number seems to be different every time I run it. It should be a consistent number ending on 19420. However sometimes it is lower and there doesn't seem to be any particular pattern.
My JS code looks like this:
$(function() {
$('#dial').knob({
min: '0',
max: '25000',
readOnly: true
});
$({
value: 0
}).animate({
value: 19420
}, {
duration: 950,
easing: 'swing',
step: function() {
$('#dial').val(Math.round(this.value)).trigger('change');
}
});
});
The fiddle can be found here: http://jsfiddle.net/ND5Sf/
What have I done wrong or is there anything I've missed out? If not, are these 2 libraries not compatible?
The issue is because you are using step function instead of progress.
Step:
A function to be called for each animated property of each animated
element. This function provides an opportunity to modify the Tween
object to change the value of the property before it is set.
Progress:
A function to be called after each step of the animation, only once
per animated element regardless of the number of animated properties.
(version added: 1.8)
Code:
$(function () {
$('#dial').knob({
min: '0',
max: '25000',
readOnly: true
});
$({
value: 0
}).animate({
value: 19420
}, {
duration: 950,
easing: 'swing',
progress: function () {
$('#dial').val(Math.round(this.value)).trigger('change');
}
});
});
Docs: http://api.jquery.com/animate/
Demo: http://jsfiddle.net/IrvinDominin/JW2gP/
My jquery code is like this
$(document).ready(function() {
$(".slideshow").css("overflow","hidden");
$("ul#slides").cycle({
fx: 'fade',
pause: 1,
prev: '#prev',
next: '#next'
});
And i want to know ,is there any slide change event in jquery for this...i mean i need to get the slide number when each slide changes
Thank you
Your question is about Cycle specifically, not general jQuery. The documentation on options for Cycle can be found here.
It looks like there is an event called onPrevNextEvent:
onPrevNextEvent: null,// callback fn for prev/next events: function(isNext, zeroBasedSlideIndex, slideElement)
The second parameter passed into a function you define for that event will be zeroBasedSlideIndex. That's your current slide number, with the first slide starting at 0.
So your code might look something like:
$(document).ready(function() {
$(".slideshow").css("overflow","hidden");
$("ul#slides").cycle({
fx: 'fade',
pause: 1,
prev: '#prev',
next: '#next',
onPrevNextEvent: function(isNext, slideNum) {
alert("This is slide "+ slideNum);
}
});
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