I know how to use the jQuery slider but wondered how I might go about this.
I'd like it so the further right you slide the handle the quicker a divs width increases.
For example. If I slide to step 1 of the slider, the width of the div continuously increases by 5px. If I slide to step 2 of the slider, the width of the div continuously increases by 10px.
Thanks in advance
Edit:
so far I have this, but this obviously isn't right. I'm not quite sure where to go from here:
$( ".sliderh" ).slider({
value:1,
min: 1,
max: 200,
slide: function( event, ui ) {
horizontalVal = ui.value
$('.square').css('width', horizontalVal)
}
});
If you want the value of the slider to increase exponentially, you just have to decide on some exponential format for it. Something like horizontalVal = Math.pow(horizontalVal, 2). If that increases the div too slowly or too quickly, just adjust. You could do horizontalVal = Math.pow(horizontalVal/2, 2) for instance.
edit:
What about something like this:
var increase;
var interval;
$( ".sliderh" ).slider({
value:1,
min: 1,
max: 200,
slide: function( event, ui ) {
increase = ui.value;
}
});
$(".sliderh").mousedown(function(e){
interval = setInterval(function(){
$('.square').css('width', $('.square').width() + increase);
}, 200);
});
$(".sliderh").mouseup(function(e){
clearInterval(interval);
});
You can tweak the interval length, currently set to 200ms, and the increase size, currently just set to the value of the slider, to change the effect. Right now, it will increase while you hold down the mouse every 200ms by the value of the slider, the further you slide right, the more it increases each interval.
Related
I purchased a slider plugin called MightySlider http://codecanyon.net/item/mightyslider-responsive-multipurpose-slider/5898508 I need a simple automated carousel that scrolls smoothly from the beginning to the end and then either loops or reverses direction. I've played with the settings enough to allow for a smooth scroll from beginning to end by setting the 'speed' and the 'cycling: {pauseTime}' parameters to be equal. No I have a delay of 20s (equal to the speed of the slider).
It's a long shot but can anyone help with the parameters to this or help me write a javascript hack to trigger the slider to start moving on page load or 1-2s after? Alternatively, could anyone recommend a different slider?
Site is here: http://smmcnyc.com/work/1919market/
JSFiddle is here: https://jsfiddle.net/fhhdxnum/
$(".frame").mightySlider({
// Mixed options
moveBy: 9000, // Speed in pixels per second used by forward and backward buttons.
speed: 20000, // Animations speed in milliseconds. 0 to disable animations.
easing: 'linear', // Easing for duration based (tweening) animations.
startAt: 10000, // Starting offset in slides.
startRandom: 0, // Starting offset in slides randomly, where: 1 = random, 0 = disable.
viewport: 'fill', // Sets the cover image resizing method used to fit content within the viewport. Can be: 'center', 'fit', 'fill', 'stretch'.
autoScale: 0, // Automatically updates slider height based on base width.
autoResize: 0, // Auto resize the slider when active slide is bigger than slider FRAME.
videoFrame: null, // The URL of the video frame to play videos with your custom player.
preloadMode: 'nearby', // Preloading mode for slides covers. Can be: 'all', 'nearby', 'instant'.
// Scrolling
scrolling: {
scrollSource: null, // Selector or DOM element for catching the mouse wheel scrolling. Default is FRAME.
scrollBy: 0, // Slides to move per one mouse scroll. 0 to disable scrolling.
hijack: 300 // Milliseconds since last wheel event after which it is acceptable to hijack global scroll.
},
// Pages
pages: {
pagesBar: null, // Selector or DOM element for pages bar container.
activateOn: null, // Event used to activate page. Can be: click, mouseenter, ...
pageBuilder: // Page item generator.
function (index) {
return '<li>' + (index + 1) + '</li>';
}
},
// Automated cycling
cycling: {
cycleBy: 'pages', // Enable automatic cycling by 'slides' or 'pages'.
pauseTime: 20000, // Delay between cycles in milliseconds.
loop: 1, // Repeat cycling when last slide/page is activated.
pauseOnHover: 0, // Pause cycling when mouse hovers over the FRAME.
startPaused: 0 // Whether to start in paused sate.
},
});
Advice or a workaround would be very helpful!
Try nivo slider.
If you bought slider you can ask the customer support to do this.
Change cycling pouse time:
cycling: {
cycleBy: 'pages',
pauseTime: 1000,
or if this does not suit you:
I'm not sure if this is the best way, but this is how you can do this.
You will need to edit mightyslider.js
scroll down to function requestHandler and after timestamp=_now(); add (line ~2728) . These lines will start slide cycling if onLoadStart is true.
if(o.cycling.onLoadStart){
o.cycling.onLoadStart += -50;
if(o.cycling.onLoadStart == 0 || o.cycling.onLoadStart == true){
cyclingActivate();
o.cycling.onLoadStart = false;
}
}
add this value into mightySlider.defaults array line ~6648
// Automated cycling
cycling: {
.........................
startPaused: false,
onLoadStart: true
}
now you can pass in additional option into mightySlider
$(".frame").mightySlider({
........
// Automated cycling
cycling: {
..........
startPaused: 0,
onLoadStart: 1000 // true -- start immediately after load,
// false --- with delayed start,
// or enter time in miliseconds which is iess than delayed start.
}
...............
});
I am using a jquery slider like this. I want the slider to retain the initially set value of 20, even as the user slides the slider. As the slider is moved the "total" element is updated. Currently, when the user moves the slider the UI of the slider updates, I want to override this. Essentially, I want to operate the slider with it retaining the initial value. Is this possible?
$( "#slider2" ).slider({
value:20,
min: 0,
max: 100,
step: 1,
slide: function( event, ui ) {
$( "#total" ).val(ui.value + "%" );
}
});
I am writting a very cool jquery plugin and I'm finding myself snagged on this last bit. basically I'm animating an element on mouseenter and mouseleave. A good example can be found in this jsbin everything works well except when you hover over the back button before the go button has finished its animation it will move the image off screen. Assuming I know the starting location of the element, is there a way to keep the element from animating past its original location even if the animation is stopped early? I need to use .stop() for the animation. Maybe this is something easy that I'm just overlooking.
Code snippet from the jsbin link:
// Start animation
$( "#go" ).mouseenter(function() {
$( ".block" ).stop().animate({ left: "+=100px" }, 2000 );
});
// Start animation in the opposite direction
$( "#back" ).mouseenter(function() {
$( ".block" ).stop().animate({ left: "-=100px" }, 2000 );
});
stop accepts arguments that control how the animation is left. You may want to use .stop(true, true), which jumps the animation to the end when stopping it:
$( ".block" ).stop(true, true).animate({ left: "+=100px" }, 2000 );
...but it might be a bit jumpy.
Alternately, as you say you know where the element starts, just return it there:
$( ".block" ).stop().css(originalPosition).animate({ left: "+=100px" }, 2000 );
...where originalPosition is an object with the properties left and top, presumably. That might be a bit jumpy as well, it depends on the specifics of your use case.
Or as, again, you have the original position, you could just animate back to that position (or forward to that position + 100px, depending).
I want a slider with range 0 to 2400, which is limited by another slider's value. Together they only may add up to 2400. I have tried to implement it in the change method like this:
var cal_sl = $("#sl_4");
cal_sl.attr('max', 2400);
cal_sl.change(function()
{
var sumv = ($("#sl_3").val()*1)+($(this).val()*1);
if(sumv>2400)
{
$(this).val(2400-$("#sl_3").val());
}
var slider_value = $(this).val();
});
But then the slider won't move (only the text box of the slider would be correct). If I also add a refresh, the change function would enter an infinite loop of refreshing/changing/refreshing/...
Also, I do not want to change the 'max' value, since the thumb should be in the middle of the slider with a value 1200, but it should not be able to move to a higher value if the other slider has a value of 1200 as well.
How could this be implemented?
I just had to set the refresh within the if, this way the infinite loop does not happen:
$(this).slider('refresh');
I am blinking image tags in javascript using jquery.
Here's a simple sample of my code:
var timer = setInterval( function(){
$( leds ).css( 'opacity' ) == 1 ?
$( leds ).animate({ opacity: .1 }, 100 ) :
$( leds ).animate({ opacity: 1 }, 100 );
}, 500 );
But the the images blinking is not in sync, in fact, it is sequential in the order that the led array is stored. The difference is quite prominent. Also, over time, the the time it takes to blink appears to increase to upto 2 seconds instead of the original 0.5 seconds.
Any idea what is going on?
Probably your explicit setInterval isn't playing nice w/ jquery's animate. Have you considered looping the animation in some way?
http://www.irengba.com/codewell/