I would like to use Bootstrap slider to represent 3 lengths of axes whose sum doesn't change (the max value of the slider corresponds to this sum).
So I have 2 cursors on bootstrap slider and the 3 intervals represent these lengths.
Here's an example: bootstrap with two cursors
My issue is that I would like to stop dragging the second cursor (on the right) when it is equal (or nearly with a fixed step) to the first one (on the left) and inversely for the first cursor.
I saw there's an slide stop event but this doesn't seem to be the same thing.
I have surely to modify the bootstrap-slider.js source but I don't know how to do for implementing this specific functionality.
It would be like:
slider.on("slide", function(slideEvt) {
if ((cursor2.value - cursor1.value) < step)
{ this.stopSlide();}
});
Using slides events it's possible. The idea is to see which cursor is fixed, and when its value change, block the slide movement, by setting value.
Didn't find a cleaner way to block slide event...
Working code :
var slider = new Slider("#slider1");
var initPos,
fixedCursor,
fixedCursorPos;
slider.on("slideStart", function(slideEvt) {
initPos = slideEvt;
fixedCursor = null;
fixedCursorPos = null;
});
slider.on("slide", function(slideEvt) {
if (initPos[0] !== initPos[1] && (slideEvt[0] !== initPos[0] || slideEvt[1] !== initPos[1])) {
if (fixedCursor == null) {
fixedCursor = (slideEvt[0] === initPos[0] ? 0 : 1);
fixedCursorPos = slideEvt[fixedCursor];
}
if (fixedCursorPos !== slideEvt[fixedCursor]) {
slider.setValue([fixedCursorPos, fixedCursorPos], false, false);
}
}
});
Working JS Bin : http://jsbin.com/kopakiciti/1/edit?html,js,output
Related
I've created a jQuery plugin to create a Horizontal Timeline. Now I'm trying to add a Right to Left (RTL) option. I've managed to swap round most of the functions so it's going right to left, but I'm struggling to get the scrolling of the timeline to work as intended. I've made a jsfiddle
The piece of code I'm stuck on is this:
Timeline.prototype._updateTimelinePosition = function (event, timelineComponents) {
if (this.settings.useRTL == false) {
// Get the css left value of the targeted event date
var eventLeft = Number(event.css('left').replace('px', '')),
// Get the width value of the .events-wrapper
timelineWidth = timelineComponents['timelineWrapper'].width(),
// Get the width value of the events (previously set)
timelineTotalWidth = timelineComponents['eventsWrapper'].width();
this._translateTimeline(timelineComponents, - eventLeft + timelineWidth/2, timelineWidth - timelineTotalWidth);
}
else {
/* RTL */
// Get the css left value of the targeted event date
var eventRight = Number(event.css('right').replace('px', '')),
// Get the width value of the .events-wrapper
timelineWidth = timelineComponents['timelineWrapper'].width(),
// Get the width value of the events (previously set)
timelineTotalWidth = timelineComponents['eventsWrapper'].width();
// This line here...
this._translateTimeline(timelineComponents, - eventRight + timelineWidth/2, timelineWidth - timelineTotalWidth);
}
}
Timeline.prototype._translateTimeline = function (timelineComponents, value, totalTranslateValue) {
// Only negative translate value
if (this.settings.useRTL == false) var value = (value > 0) ? 0 : value;
/* RTL*/
// This line here...
else var value = (value > 0) ? 0 : value;
// Do not translate more than timeline width
if (this.settings.useRTL == false)
value = (!(typeof totalTranslateValue === 'undefined') && value < totalTranslateValue ) ? totalTranslateValue : value;
/* RTL */
// This line here...
else value = (!(typeof totalTranslateValue === 'undefined') && value < totalTranslateValue ) ? totalTranslateValue : value;
this._setTransformValue(timelineComponents['eventsWrapper'], 'translateX', value+'px');
// Disable the buttons if necessary
this._buttonDisable(timelineComponents, value, totalTranslateValue);
}
Where I've commented "This line here" on the RTL part is the lines I'm stuck with. I've tried so many variations of code: swapping round all the variables, swapping round all the operands and nothing seems to work correctly.
Basically what I am wanting is the Left to right functionality flipped round for right to left, both of which can be found in the jsfiddle.
The line: this._translateTimeline(timelineComponents, - eventRight + timelineWidth/2, timelineWidth - timelineTotalWidth); in _updateTimelinePosition function, is the function call to translate/move the timeline, calculating the translate value as the second argument. The timeline uses the transform: translate() css to translate/move the timeline along. I can't get it to get calculate properly for right to left.
Expectation:
In the RTL timeline, when clicking prev/next and event buttons the timeline
should automatically scroll along to the correct selected event.
The timeline should start from the right, but sometimes calculates
this wrong.
I've got a series of rectangles drawn on a canvas and use a scroll event listener to move the boxes up and down.
I'm trying to add in some validation so that the boxes cannot be scrolled past a certain point.
Due to the acceleration, the scroll values don't always increment by 1, so when scrolling quickly, sometimes my validation kicks in too early.
Any ideas how to solve this?
So in my event listener I have:
lScroll += e.deltaY;
if (lScroll > 0) {
canScroll = false;
lScroll = 0;
} else {
canScroll = true;
}
https://jsfiddle.net/kr85k3us/3/
Please check if this is working for you: https://jsfiddle.net/kr85k3us/4/
I tested it and it should work, but perhaps you can move your mousewheel faster :)
if (!canScroll && lScroll == 0) {
var first = Object.keys(boxes)[0];
if (boxes[first]['y'] < 10) {
var delta = 10 - boxes[first]['y'];
Object.keys(boxes).forEach(function(k){ boxes[k]['y'] += delta; });
}
}
This is the piece of code I added. If you can't scroll and lScroll is 0, it means that we reached the top. Next, I check if the first box is where it should be. If not (i.e. boxes[first]['y'] < 10) then it adjusts all the boxes' y position.
SITUATION
I have been trying to trigger the 'slide to next picture' animation when the NEXT button is clicked, but i have not found a solution for this.
There is an ongoing discussion about this on GitHub, but it is only about adding the option for a slide animation, not about how to actually do it with PS as it is right now.
There was an option for it in 3.0 but as 4.0 is a complete rewrite it does not work anymore.
QUESTION
Instead of just 'jumping' to the next/prev picture when an arrow is clicked, i need the 'slide transition' that is also used when swiping/dragging the image.
There is no option to trigger that, so how can i manually trigger this effect with JS?
PhotoSwipe Slide Transitions
So, I added slide transitions to Photoswipe, and it's working nicely without disturbing native behavior.
http://codepen.io/mjau-mjau/full/XbqBbp/
http://codepen.io/mjau-mjau/pen/XbqBbp
The only limitation is that transition will not be applied between seams in loop mode (for example when looping from last slide to slide 1). In examples I have used jQuery.
Essentially, it works by simply adding a CSS transition class to the .pswp__container on demand, but we need to add some javascript events to prevent the transition from interfering with Swipe, and only if mouseUsed. We also add a patch so the transition does not get added between loop seams.
1. Add the below to your CSS
It will be applied on-demand from javascript when required.
.pswp__container_transition {
-webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
}
2. Add javascript events to assist in assigning the transition class
This can go anywhere, but must be triggered after jQuery is loaded.
var mouseUsed = false;
$('body').on('mousedown', '.pswp__scroll-wrap', function(event) {
// On mousedown, temporarily remove the transition class in preparation for swipe. $(this).children('.pswp__container_transition').removeClass('pswp__container_transition');
}).on('mousedown', '.pswp__button--arrow--left, .pswp__button--arrow--right', function(event) {
// Exlude navigation arrows from the above event.
event.stopPropagation();
}).on('mousemove.detect', function(event) {
// Detect mouseUsed before as early as possible to feed PhotoSwipe
mouseUsed = true;
$('body').off('mousemove.detect');
});
3. Add beforeChange listener to re-assign transition class on photoswipe init
The below needs to be added in your PhotoSwipe init logic.
// Create your photoswipe gallery element as usual
gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
// Transition Manager function (triggers only on mouseUsed)
function transitionManager() {
// Create var to store slide index
var currentSlide = options.index;
// Listen for photoswipe change event to re-apply transition class
gallery.listen('beforeChange', function() {
// Only apply transition class if difference between last and next slide is < 2
// If difference > 1, it means we are at the loop seam.
var transition = Math.abs(gallery.getCurrentIndex()-currentSlide) < 2;
// Apply transition class depending on above
$('.pswp__container').toggleClass('pswp__container_transition', transition);
// Update currentSlide
currentSlide = gallery.getCurrentIndex();
});
}
// Only apply transition manager functionality if mouse
if(mouseUsed) {
transitionManager();
} else {
gallery.listen('mouseUsed', function(){
mouseUsed = true;
transitionManager();
});
}
// init your gallery per usual
gallery.init();
You can just use a css transition:
.pswp__container{
transition:.3s ease-in-out all;
}
This might not be ideal for performance on mobile, but I just add this transition in a media query and allow users to use the swipe functionality on smaller screens.
I finally bit the bullet and spent some time making this work as nobody seemed to have a solution for that, not here neither on GitHub or anywhere else.
SOLUTION
I used the fact that a click on the arrow jumps to the next item and triggers the loading of the next image and sets the whole slide state to represent the correct situation in an instant.
So i just added custom buttons which would initiate a slide transition and then triggered a click on the original buttons (which i hid via CSS) which would update the slide state to represent the situation i created visually.
Added NEW next and prev arrows
Hid the ORIGINAL next and prev arrows via css
Animated the slide myself when the NEW next or prev arrows were clicked
Then triggered the click on the ORIGINAL next or prev arrows programmatically
So here is the code:
HTML
// THE NEW BUTTONS
<button class="NEW-button-left" title="Previous (arrow left)">PREV</button>
<button class="NEW-button-right" title="Next (arrow right)">NEXT</button>
// added right before this original lines of the example code
<button class="pswp__button pswp__button--arrow--left ...
CSS
pswp__button--arrow--left,
pswp__button--arrow--right {
display: none;
}
NEW-button-left,
NEW-button-right {
/* whatever you fancy */
}
JAVASCRIPT (helper functions)
var tx = 0; // current translation
var tdir = 0;
var slidepseactive = false;
// helper function to get current translate3d positions
// as per https://stackoverflow.com/a/7982594/826194
function getTransform(el) {
var results = $(el).css('-webkit-transform').match(/matrix(?:(3d)\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))(?:, (-{0,1}\d+)), -{0,1}\d+\)|\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))\))/)
if(!results) return [0, 0, 0];
if(results[1] == '3d') return results.slice(2,5);
results.push(0);
return results.slice(5, 8);
}
// set the translate x position of an element
function translate3dX($e, x) {
$e.css({
// TODO: depending on the browser we need one of those, for now just chrome
//'-webkit-transform': 'translate3d(' +String(x) + 'px, 0px, 0px)'
//, '-moz-transform': 'translate3d(' +String(x) + 'px, 0px, 0px)'
'transform': 'translate3d(' +String(x) + 'px, 0px, 0px)'
});
};
JAVASCRIPT (main)
// will slide to the left or to the right
function slidePS(direction) {
if (slidepseactive) // prevent interruptions
return;
tdir = -1;
if (direction == "left") {
tdir = 1;
}
// get the current slides transition position
var t = getTransform(".pswp__container");
tx = parseInt(t[0]);
// reset anim counter (you can use any property as anim counter)
$(".pswp__container").css("text-indent", "0px");
slidepseactive = true;
$(".pswp__container").animate(
{textIndent: 100},{
step: function (now, fx) {
// here 8.7 is the no. of pixels we move per animation step %
// so in this case we slide a total of 870px, depends on your setup
// you might want to use a percentage value, in this case it was
// a popup thats why it is a a fixed value per step
translate3dX($(this), tx + Math.round(8.7 * now * tdir));
},
duration: '300ms',
done: function () {
// now that we finished sliding trigger the original buttons so
// that the photoswipe state reflects the new situation
slidepseactive = false;
if (tdir == -1)
$(".pswp__button--arrow--right").trigger("click");
else
$(".pswp__button--arrow--left").trigger("click");
}
},
'linear');
}
// now activate our buttons
$(function(){
$(".NEW-button-left").click(function(){
slidePS("left");
});
$(".NEW-button-right").click(function(){
slidePS("right");
});
});
I used info from those SE answers:
jQuery animate a -webkit-transform
Get translate3d values of a div?
The PhotoSwipe can do this by itself when you use swipe gesture. So why not to use the internal code instead of something that doesn't work well?
With my solution everything works well, the arrow clicks, the cursor keys and even the loop back at the end and it doesn't break anything.
Simply edit the photoswipe.js file and replace the goTo function with this code:
goTo: function(index) {
var itemsDiff;
if (index == _currentItemIndex + 1) { //Next
itemsDiff = 1;
}
else { //Prev
itemsDiff = -1;
}
var itemChanged;
if(!_mainScrollAnimating) {
_currZoomedItemIndex = _currentItemIndex;
}
var nextCircle;
_currentItemIndex += itemsDiff;
if(_currentItemIndex < 0) {
_currentItemIndex = _options.loop ? _getNumItems()-1 : 0;
nextCircle = true;
} else if(_currentItemIndex >= _getNumItems()) {
_currentItemIndex = _options.loop ? 0 : _getNumItems()-1;
nextCircle = true;
}
if(!nextCircle || _options.loop) {
_indexDiff += itemsDiff;
_currPositionIndex -= itemsDiff;
itemChanged = true;
}
var animateToX = _slideSize.x * _currPositionIndex;
var animateToDist = Math.abs( animateToX - _mainScrollPos.x );
var finishAnimDuration = 333;
if(_currZoomedItemIndex === _currentItemIndex) {
itemChanged = false;
}
_mainScrollAnimating = true;
_shout('mainScrollAnimStart');
_animateProp('mainScroll', _mainScrollPos.x, animateToX, finishAnimDuration, framework.easing.cubic.out,
_moveMainScroll,
function() {
_stopAllAnimations();
_mainScrollAnimating = false;
_currZoomedItemIndex = -1;
if(itemChanged || _currZoomedItemIndex !== _currentItemIndex) {
self.updateCurrItem();
}
_shout('mainScrollAnimComplete');
}
);
if(itemChanged) {
self.updateCurrItem(true);
}
return itemChanged;
},
I have created a newsfeed. The feed switches every 2 seconds. You can also manually switch left/right, or click the panel from the squares at the bottom. The switching between slides is down using jQuery UI Slide.
Right now, if you are in the middle of a slide, and you click left/right/squares, then another slide occurs on top of the existing, still going slide and the whole system is messed up.
How can I prevent other actions occurring if a slide/switch is already in progress?
This is my code:
$(document).ready(function(){
newsfeedTimer = setInterval(newsfeed, displayDuration);
// Manual change of feed (LEFT)
$('#newsfeeds_wrapper > .left').click(function(event){
event.stopPropagation();
feedLeft();
clearInterval(newsfeedTimer);
newsfeedTimer = setInterval(newsfeed, displayDuration);
});
// Very similar code for feed right
// Ignore the other method of switching (if it works for above, I can implement it for this one)
});
function newsfeed() {
feedRight();
}
// Feed to the Right
// jump is used to jump multiple newsfeed instead of one at a time
function feedRight(jump)
{
jump = typeof jump !== 'undefined' ? jump : 1;
var current = $('.newsfeed:first');
var next = $('.newsfeed:nth(' + jump + ')');
current.hide('slide',{duration: transitionDuration}, function(){
// Append as many needed
for( var i = 0; i < jump; i++ ) {
$('.newsfeed:first').appendTo('#newsfeeds');
}
next.show('slide',{direction : 'right' , duration: transitionDuration});
}
I don't want to stop() an animation! I want to disable changing the slides IF there is animation happening!!
without seeing the full breadth of the code, I am shooting myself in the foot here. But here is a direction I would take it. You could also have two functions, one to bind, another to unbind. When animation is initiated, you unbind the left/right controls. When stopped, you bind. Or, set a global variable... ala.
var config = {'inProgress': false};
$('#newsfeeds_wrapper > .left').click(function(event){
if(!config.inProgress){
event.stopPropagation();
feedLeft();
clearInterval(newsfeedTimer);
newsfeedTimer = setInterval(newsfeed, displayDuration);
}
});
in your animation function. Seems like when you cut/paste, some of the code is lost, so lets just assume some animation.
when you enter your animation functions, set config.inProgress = true;
function feedRight(jump)
{
config.inProgress = true;
// removed your code, but just using for simplicity sake
// added a callback
next.show('slide',{direction : 'right' , duration: transitionDuration},
function() {
// Animation complete. Set inProgress to false
config.inProgress = false;
});
)
}
I'd like to make a slider that snaps to the center while retaining smooth action elsewhere. Something like a jQuery version of a real-life speaker balance slider. Is it possible?
Or should I just create my own slider with a draggable object, constricted to one axis with containing it frame, snapping to another object (or grid) positioned in the center of the frame?
Edit: I simply need a slider that allows values e.g. from -10 to -1, 0, and 1 to 10 (between -1 and 1 snap to 0) with step: 0.1
You should be able to use the jQuery slider, but restrict its motion with the slide event:
jSlider.slider({
// other options...
slide: function (event, ui) {
if (ui.value > -1 && ui.value < 1 && ui.value != 0) {
// force it to 0 between -1 and 1.
jSlider.slider('value', 0);
return false;
}
return true;
}
});
Hmmm...so this is what I'm envisioning in my head...A background that slides on a timer like a carousel (maybe these are big images), with a row of thumbnails on top that slides smooth. That what you want to build?
EDIT: Here's what you need to do:
I rarely find the need to use jQuery plugins. Here is what you need:
Mousedown (on the slider). api.jquery.com/mousedown/. There is a callback on mouse down an on release.
Track mouse position inside the slider container while you're dragging the slider docs.jquery.com/Tutorials:Mouse_Position
Use the animate function to move the slider while your mouse still hasn't been released api.jquery.com/animate/ Stop animate on release.
When your slider gets to a certain x position in it's container, force the "smooth" function - ie a different animate function.
Use the following so that your jquery slider automatically snaps to the nearest in the step. The trick is to implement your own step-interval-slider. The problem is, if your max and min are separated by a small distance (for e.g. 5-10) your slide will behave in steps because the default step=1, so you need to compute your step based on that. If your max-min values are separated by a huge distance (e.g. 1-1000 or more) you can leave the computed_step calculation and initialize it to 1.
max_limit = 30;
min_limit = 5;
stick_to_steps_of = 5;
var computed_step = max_term/100; //you can vary the denominator to make it smoother
$("#my_slider" ).slider({
animate : true,
value: max_limit,
min: min_limit,
max: max_limit,
step: computed_step,
stop: function( event, ui ) {
d = parseInt(parseInt(ui.value)/stick_to_steps_of);
rem = parseInt(ui.value)%stick_to_steps_of;
var fval = 0;
if (rem <= parseInt(stick_to_steps_of/2)) {
fval = d*stick_to_steps_of;
}else{
fval = (d+1)*stick_to_steps_of;
}
$("#my_slider").slider('option', 'value', fval);
$('#myslider_current_value').html(fval); //some placeholder to show the current value
}
});