When in mobile view using Owl Carousel (Version 2 ) some of my sliders take up near the whole screen.
The carousel uses touch to slide left and right fine however when doing so the user cannot scroll the page up and down which makes it difficult to navigate the to the rest of the page.
Is there a way so that while sliding the scrolling for the page is still active?
Seems i had the touch-action property set to none disabling scrolling and zooming etc when touching on the items within the slide. I had to remove the below although i don't think this is default and i added it in at some point for some reason that i can't remember.
.owl-item {
touch-action: none;
}
Related
Im trying disable the swipe functionality when the slider is zoomed, to make sure when the user drags the image to zoom, they are not going to trigger the swipe to the next or prev slide.
I tried to use allowTouchMove, but this only works on chrome, not on safari, firefox or edge.
Disabling prev and next slides on zoom works, with allowSlidePrev, allowSlideNext however when I click on the gallerys thumbnails it also disables clicks on there. Is there another way of disabling the swipe events, but allowing drag, and the gallery events being clickable?
I also tried this before, and found no clues in the docs.
Notice that it's in fact really hard to swipe to other slide when the zoom is enabled (at least in the v6.0.4). So only if the attempt is long and strong enough, the swiper will swipe.
So... I think that this is the desired behavior of the maintainers.
I watched this presentation and there's a section on how to build an IOS Maps like UI. When dragging from the bottom to top, it drags to the top, and after it reaches the top, it continues scrolling up. Also, when scrolling down, when it reached the top content of the ScrollView, it continues to drag down.
It is suggested that it can be done using ScrollView by adding an empty transparent cell as the first element on the ScrollView. I have tried implementing the same which can be found in this snack. In my case, instead of Maps, I am using another ScrollView.
But the problem is that the first element (transparent element) does not allow to interact with the First ScrollView elements. I have tried with pointerEvents inside the first transparent view and even in its parent ScrollView. But this does not help. Has anyone tried implementing this kind of use case with react-native? All I found was this library, but I think it's not maintained properly.
you need to set the z-index of the transparent view to send it under/behind the interactive content, here is a good resource:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Edit: Actually I could not accomplish it, it seems like everything inside a scrollview will always be behind or in front of other elements, it seems like you can't have part of the scrollview behind something else and another part in front of something else.
I have an app I have deployed to the iOS and Android stores. Now I am taking the same thing and building a version that also works on the desktop in Chrome/Safari. For this I used the code in this thread
http://www.sencha.com/forum/showthread.php?110792-Add-support-for-mouse-scrolling-(for-development)&p=927483#post927483
to fix the scrolling and now need to figure out how to fix the scroll bar to support dragging and dropping. Any pointers on how this could be accomplished - am going to try to figure it out, but if someone has done it before that would help.
I initially tried to go down the ExtJS path for the desktop app, but found that there are enough differences between the two frameworks that it becomes pretty expensive to develop and maintain, so want to put out a V1 out there quickly and then figure out how to handle this in the long term if I have enough interest to put out one for IE and FireFox - and with desktop based controls.
Normally the scroll bar in sencha touch will be hide by default and fade out after you finish dragging a long list or a panel... If you want to make your scroll bar always visible you can set this in your css or scss file:
.x-tabpanel .x-scroll-indicator {
opacity: 0.5 !important;
z-index: 0; // Make scroll bar draggable
}
Maybe I'm understand your question wrongly but hope it helps :)
I'm having some issues with a website that only occur in Safari. I'm running version 5.1.7 (7534.57.2) on a Mac.
You can view the site here: http://mcad.edu/annual-report-2011-12/.
The website is parallax scrolling, with a relative positioned content div that holds everything, including the 3 parallax scrolling backgrounds which are all fixed, top and left set to 0.
Within the fixed parallax background containers, colorized images fade into full color images when a user mouses over them. For each "image", there are two divs stacked, each with background images that are positioned by background-position. The div on the bottom has the colorized image. The div on top has the full color image as a background and has its opacity set to 0 until mouseover. The fade is achieved using a CSS transition on the opacity property so that the top div becomes visible.
So, in Safari only, when I mouse over any of these divs, the transition occurs smoothly but all of the content in the same parallax scrolling background div shifts/jumps in the process. If I remove the CSS transition, this does not occur.
I think that it might have something to do with the transition/webkit-transition property not playing nicely with a fixed position container in Safari. However, all of the issues I've found that relate to that are from 2010 and mention a Safari bug that I assume has been fixed…two years later. But maybe not.
There's also another issue with the Catalyst section (3rd dot down on the right navigation). These animated images work as links in Chrome, Firefox and Opera, but not Safari. Any ideas?
I have a similar issue with a fixed position and transition-duration for a header menu I've created. When a visitor scrolls down, the menu has a box shadow that fades into place. Well when this is viewed on safari in a MacOS, I get a weird sliding in issue. To easily fix this, after spending way to much time searching for answers, I'm removing the transition effect for macs. This fixes the slide in issue but gets rid of the transition effect sadly.
So as you were speculating, it probably is the transition duration on your project as well. The best thing for this would probably be to make a Mac-Safari CSS file, get rid of the transition-duration for that particular area and move on with your project.
Best I can suggest for now. Hope it helps.
i am using jquery mobile and for header/footer i am using data-position="fixed".
However, when we scroll the page... the header footer goes away ands reappear when scrolling stops..
Is there a way we could just make it fixed on the screen an show all the time you are scrolling ?
I can only think of a way is to apply position fixed and not use jquerymobile for these elements..
I tried my best to get this to work. If you want you can delete the function that changes the header and footer class from .ui-fixed-overlay to .ui-fixed-inline and remove the webkit animation from .fade.in and .fade.out, but I've had no lock preventing the windows from disappearing. However, I believe JQM only recalculates the position of the header and footer elements after you scroll.
I put the following css in page div to remove the webkit animation.
.ui-fixed-inline {
opacity: 1!important;
display:block!important;
-webkit-animation-name:none!important;
}
.fade.in, .fade.out {
opacity: 1!important;
-webkit-animation-name:none!important;
display:block!important;
}
I know this is not what you want but it does speed up the reappearance of the header and footer elements (it looks a bit choppy.) Unless you want to rewrite the JQM javascript that controls the header and footer positioning, I don't think there is any easy way to do this as the JQM fixed position code is built to re-position after the user scrolls. I'll keep looking and edit this answer if I find a way.
A simpler version of Chase's code works fine for me:
/* sass - remove toolbar fade */
.nofade{
&.in, &.out {
-webkit-animation-name:none;
}
}
Note that tap-to-hide toolbars uses this same fade property, so the following is required:
$.mobile.fixedToolbars.setTouchToggleEnabled false # coffeescript