I have a vertical slideshow that scrolls/sticks to the next panel when the user scrolls. Desired effect is https://www.tesla.com but I thought I could achieve this with CSS (example below).
Example 1: https://codepen.io/moy/pen/poNrVdO
The problem is I would like to add a class so I can fade in the text when the next panel becomes 'active' and I'm not sure what the best approach is. Due to the framework this is going into, a non-jQuery solution would be preferable. I tried using http://dbrekalo.github.io/whenInViewport/ but can't get that to play ball at the minute.
import * as whenInViewport from "https://cdn.skypack.dev/when-in-viewport#2.0.4";
var WhenInViewport = window.WhenInViewport;
var elements = Array.prototype.slice.call(
document.getElementsByClassName("slideshow__panel")
);
elements.forEach(function (element) {
new WhenInViewport(element, function (elementInViewport) {
elementInViewport.classList.add("inViewport");
});
});
Update
The JS I was trying to use would only add a class and not toggle (add/remove) when items entered/left the viewport. So I decided to try a few other options. I've used AOS (Animation On Scroll) before but this is also having problems...
Example 2: https://codepen.io/moy/pen/XWNavaO
I think this is done to the overflow-y: auto which is required to get the snap-scroll to work. Can anyone offer an advise on this or would I be better moving away from snap scroll - as it's more hassle than it's worth?
Once a slider has finished all slides how to stop the slider after the last slide. Disabling moving forward but enabling moving backward.
http://glide.jedrzejchalubek.com/docs.html
It's really simple, because it is buildin into plugin. You just need to set glide type to slider.
$('#Slider').glide({
type: 'slider'
});
I have made this slider with auto slide show. I also need manual controls working well on it, even if used with regressively slide switching. Problem comes when I click on labels for navigation very fast and randomly, it gets stuck at some point and doesn't switch to clicked slide instead it moves to its next slide. Please refer this fiddle: http://jsfiddle.net/Bhumika107/zbrcww6a/10/.
I also tried stopping auto and then replaying it on click event of labels:
$(document).on('click','.bx-pager-link',function() {
slider.stopAuto(); // stops auto on click of pager
slider.startAuto(); // starts auto on click of pager
});
But it doesn't make any difference.
I've developed a web page using masonry in order to rearrange a set of items of different heights, when user scroll down a "Loading..." message is shown and new items are loaded and layout is recalculated by masonry, so far so good. The problem is that the new items fly from the top left corner of the screen to their new position in the layout and I would like to deactivate that effect, I would prefer to fade in for example better than fly in from the top, or even do not have animation at all, just display the new item in their positions directly.
I am using masonry 3.1.5
I've tried with
$('#container').masonry().masonry( 'transitionDuration', 0 );
$('#container').masonry().masonry( 'isAnimated', false );
What can I do?
the solution that worked for me was:
$("#container").masonry({
transitionDuration: 0
});
thanks for your time.
I'm developing a mobile app with PhoneGap. I have a view that has some records, and those records need to be rearranged by doing a drag and drop. The number of this records might variate from 2 to 12, and they are inside a container that implements a scroll by the native properties of css, like this:
div#parentDiv {
-webkit-overflow-scrolling: touch;
overflow: scroll;
width: 100%;
}
Now, the thing is. I have tryied to do this but there seems to be some sort of events conflict. When you tap down or do a "finger down" event, the event that lasts is the scroll of the inner container, instead of being able to drag and drop the inner elements of that view.
I tryied an alternate option that is not acceptable, as you will see in this screenshot:
Here I made a scroll down to the last element of the list.
As you will see, I need to keep both the scroll and do a drag and drop.
Do you have any idea of how can I solve this?
I have tried by using plugins, HTML native drag and drop, and so far, nothing has worked for me.
Thanks again.
I'm not sure I completely understand the problem at hand. But, here's my take on a solution:
window.addEventListener("mousedown", function(e1){
timer = setTimeout(startDrag_disableScroll, 500);
window.addEventListener("mousemove", function(e2){
//if not dragging, and |e1_location-e2_location|
//exceeds a certain threshold, cancel the timer
//otherwise, drag the object, if dragging
});
});
window.addEventListener("mouseup", function(e){
//disable dragging
});
function startDrag_disableScroll(e){
//disable scrolling
//enable dragging
}
Wait until the user clicks on an item
If they hold the same position for a small amount of time (< .5s), we switch from "scrolling" mode to "dragging" mode; if they move too much, we can assume they want to scroll instead, so we don't enable dragging.
Once in "dragging" mode, we disable scrolling by changing the CSS overflow to hidden
Wait until the user releases their finger/mouse before switching back to "scrolling" mode.
Here is a JSFiddle with a complete demo. If you quickly click and drag your mouse, nothing will happen (if you were on a mobile device, it should scroll). However, if you click and hold for .5 sec, scrolling will be disabled and the draggable item will turn red. Once you release the mouse, it should reset.
I assume you also want to be able to scroll whilst dragging. To do this, you'd have to do auto-scrolling with JavaScript. If they drag the item far enough up/down the screen, it will start to auto-scroll up or down, respectively.
Use this.
Drag and drop library for a two-dimensional resizable and responsive list of items.
Almost definitely addresses the problem you are having, and will allow for features & expandability that will definitely be useful as you continue development :)
I would use a TapHold (also known as "long press") event to trigger the "sortable lists".
The user won't be able to sort the list of articles unless he presses for a few seconds on the list. At that moment, he'll be able to order the list items.
You can use any jQuery UI Sortable or any other "sortable" plugin.
If you don't want to use the TapHold, you can use the following code:
var pressTimer;
$(function(){
// By default, disable the sortable list
$("#sortable").mouseup(function(){
// Disable the sortable list
clearTimeout(pressTimer);
// Clear timeout
return false;
}).mousedown(function(){
// Set timeout
pressTimer = window.setTimeout(function() {
// Enable the sortable list
},1000);
return false;
});
});