I have been looking for a way to make objects move horizontally on vertical scrolling.
I found this great answer from plugin's author.
So the code to move things horizontally looked something like this:
$.stellar.positionProperty.apple = {
setTop: function($el, newTop, originalTop) {
$el.css({
'top': newTop,
'left': $el.hasClass('apple') ? originalTop - newTop : 0
});
},
setLeft: function($el, newLeft, originalLeft) {
$el.css('left', newLeft);
}
};
The issue with this is that it only covers horizontal scrolling from the left side. But it also affects another elements, even if they don't have the apple class from the example script.
So if I have an image for example:
<section>
<img></img>
</section>
Where image is absolute positioned and right:0; as soon as you add data-stellar-ratio to it, this script will push the element to the left side, even if the image haven't the class "apple"
Is there any way to define on the script that images with class "left" scrolls from left and then images with class "right" scrolls from the right hand side?
Related
I have this JSFiddle, where I can draw annotations and drag them around.
But, in case I draw a segment or arrow-segment and in case I try to drag them to the most left edge of the chart, they are changing it's position and are aligning vertically and parallelly to the left edge. The demo can be seen in this video.
I tested and concluded that the issue has nothing to do with the plugins which I am having in the code I posted. So I wonder if this is a highcharts bug or if this behavior can be fixed within the onDrag event?
H.wrap(H.Annotation.prototype, 'onDrag', function(proceed) {
var annotation = this;
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
//do something here?
});
It looks like a bug, I reported it on the Highcharts Github issue channel where you can follow this thread: https://github.com/highcharts/highcharts/issues/14944
Setting ordinal=false resolves the issue: https://jsfiddle.net/BlackLabel/cnosa15L/1/
with WooCommerce 4.2, on iOS, FlexSlider (v2.7.2) show a bug with a horizontal slider: when the focus is on the slider as the user swipes left or right, the vertical scroll is still active, there is some level of vertical movement. That makes the slider "rebound".
You can see the bug in this video: https://youtu.be/bM8zcv3ciTo
EDIT: My question is similar to this one, but related to Flexslider.
I have this in functions.php:
/*PRODUCT PAGE FlexSlider Options*/
add_filter( 'woocommerce_single_product_carousel_options', 'filter_single_product_carousel_options' );
function filter_single_product_carousel_options( $options ) {
if ( wp_is_mobile() ) {
$options['controlNav'] = true; // Option 'thumbnails' by default
$options['direction'] = "horizontal";
$options['slideshow'] = false; // Already "false" by default
}
return $options;
}
Any idea how to prevent this vertical scroll while the focus is on the Flexslider?
Anybody also has this bug?
I installed a test site with only Wordpress and WooCommerce, and the bug is here, so it's not plugin-related: http://woo.makemy.biz/produit/produit-de-test/
Edit: Adapting the owl carousel solution would result in code that looks like this:
//You should replace ".myFlexslider" with an appropriate class.
jQuery('.myFlexslider').data('flexslider').vars.before = function(){
jQuery('body').css('overflow', 'hidden');
};
jQuery('.myFlexslider').data('flexslider').vars.after = function(){
jQuery('body').css('overflow', '');
};
which should work. https://codepen.io/Terrafire123/pen/YzWRXOJ
It's not possible to do this via PHP, because PHP doesn't expose the API necessary to do this.
You should know, that preventing vertical scroll when the slider swipes is usually discouraged because this can result in the slider being annoyingly difficult to scroll past.
Original answer: The fact that the issue seems to occur with both Flickity and Flexsider seems to indicate that it isn't a problem with either one, but rather with the user.
A careful review of the Youtube video you have seems to indicate it's working correctly, and there is no real bug. Every time the slider doesn't move in your video, it's because
a. He's sliding vertically, not horizontally, or
b. He's sliding in a direction he can't slide because loop is disabled and he's at the first element.
The rebound effect is normal when you scroll to the top of the page in iOS. If desired, you can disable the bouncing effect with a workaround like this:
html {
position: fixed;
height: 100%;
overflow: hidden;
}
body {
width: 100vw;
height: 100vh;
position:relative;
overflow:auto;
-webkit-overflow-scrolling: touch;
}
In ionic 3 ,Using iPhone when sliding ionic slider the vertical scrolling occur, it causes app ui experience. it’s serious bug I have tried many ideas in googling no one works. please help me any one aware of this issue
We had the same problem with some sliders on our project. The first slide was ok, you could slide left & right without any vertical scroll, however any further slides would scroll the whole page up & down. What fixed it for us was to add the following css:
.swiper-wrapper{
width:auto !important;
}
The .swiper-wrapper was width: 100%, and then being pushed to the left (and off screen) when scrolled. So any further swipes on the slider were outwith the swiper-wrapper thus causing the whole page to move.
i have the solution!
ionSlideDrag Emitted when a slide moves. When the slide moves i call a function which add a class to my content which add
overflow-y: hidden.
ionSlideDidChange Emitted when a slide change ends. it means that when slide change ends i call a function which remove the class and my content is again scrollable.
For add and remove class i have implemented jquery. ( How can I use jQuery with Ionic 2?)
this is an example of my code:
in my view.html
<ion-slides slidesPerView="4" spaceBetween="20" (ionSlideDrag)="dragging()" (ionSlideDidChange)="endDragging()">
<ion-slide *ngFor="let action of actionPages">
<img [src]="url + action.imgSmall">
<h1></h1>
</ion-slide>
</ion-slides>
in my view.ts
dragging(){
$("#contenitore").addClass("no-scroll")
}
endDragging(){
$("#contenitore").removeClass("no-scroll")
}
no-scroll class in app.scss:
.no-scroll {
div.scroll-content {
overflow-y: hidden;
}
}
Problem
I am having problems with my sortable list with several items of various height. The problem occurs when I'm trying to move a larger item to the first or last position (which both have smaller objects). If I succeed currently depends very much on where on the larger item I click and start dragging.
If I want to move the item to the smaller bottom position I must click close to the bottom of the item for it to work, and if I want to drag it to the top position I must click closely to the top. But I want to be able to drag the item by clicking anywhere.
Some additional information
The items cannot be dragged outside the parent and the parent is only as large as it has to be and a scroll appears if it's larger than it's container. So it seems that I cannot drag the larger item past the first(smaller) item if I don't drag it in the top part of the item.
I've been trying to fix this by using cursorAt and using top:0 and another test using bottom:0 But it doesn't seem to make any difference (so I might have misunderstood how to use it). I am currently using tolerance: pointer.
I can bypass the problem of not being able to drag the larger item to the last position by temporary during the sorting increasing the height with the height of the dragged item. But it doesn't always work and its not a very good solution. And the problem of not being able to drag it to the top still appears?
I cannot change the JQuery code as in jquery-sortable-with-containment-parent-and-different-item-heights
Question:
How can I drag a larger item to the top or bottom position while allowing the user to click anywhere on the item?
Thanks for your help!
This might not solve your problem, but I thought I'd share the results of some experimenting I did today. I needed to make a sortable photo gallery with inline-block pictures of varying widths, and found that moving wider photos would be really hard work because the placeholder was smaller than the item I was moving. I ended up using this:
container.sortable({
placeholder: "photo placeholder",
start: function (event, ui) {
ui.placeholder.width(ui.item.width());
}
});
The custom placeholder classes are there to ensure the placeholder isn't hidden by default, and the start event ensures that the placeholder is the same width as the item you're about to move. This worked very well for me, and in your case, substituting height for width might work.
I also tried using containment as you have done, and found that it sometimes makes things much harder depending on the items in the row. Like you have explained, including tolerance: "pointer" helps to alleviate the issues, but if possible, removing containment generally makes the UI more forgiving.
I'm using jQuery UI Draggable to drag a <div> whose width is calculated as part of the layout (margin:auto;).
When dragging that element using helper:clone, the clone also gets the margin:auto; style, but is no longer constrained by the original's container.
Result: The cloned <div> may have a different width than the original.
Fiddle: http://jsfiddle.net/ericjohannsen/ajpVS/1/
How can I cause the clone to retain the original's width?
Jon's answer is really good, but it doesn't work properly when you have child elements in the draggable. When that's the case, the event.target can represent your draggable's children, and you'd want to modify the draggable's helper() method something like:
$(".objectDrag").draggable({
helper: function(e) {
var original = $(e.target).hasClass("ui-draggable") ? $(e.target) : $(e.target).closest(".ui-draggable");
return original.clone().css({
width: original.width() // or outerWidth*
});
},
...
});
Without this, the helper would represent any child element clicked within the draggable (click the within the light blue region in the "Drag 1" box for example). Adding the additional logic above ensures that the draggable element is used for the helper. Hope that helps for anyone in a similar situation!
* Note: You'll want to use outerWidth if the original element has box-sizing: border-box applied (thanks to #jave.web for raising).
You just need to set the width and the margin on the cloned element based on the draggable object when it is dropped, using $(ui.draggable).clone().css({ ... });
Here's an updated fiddle for you, should be what you're looking for. It will also keep the width for the helper object as well. http://jsfiddle.net/ajpVS/2/
I think I know what the problem is.. where you have:
<div style="width:50px">
it also needs to be included in the objectDrag class:
<div class="objectDrag" style="width:50px;margin:auto; color:white;border:black 1px solid; background-color:#00A">Drag me</div>
I hope thats what you meant!
EDIT:
Hi took another quick look
http://jsfiddle.net/He2KZ/1/
I used the width:inherit property to inherit the parents width no matter what size it is. Also I noticed removing the border fixed the problem. the dragable clone is 2px out and you have a border of 1px. This is kinda buggy from Jquery-ui IMO they should account for borders at least.
If you really want borders try using "outline" instead of "border". This does not add to the width of the div.