I have a simple horizontal list that is swipeable on a mobile device. Once a tab is clicked on, its page content is displayed.
However, I would like to have the swiping SNAP from tab to tab. Once a tab is snapped to, that tab will then become active and show its page content.
In short, the goal is to swipe tab to tab, NOT swipe and click.
Does anyone have any code or resources they would like to share with me to achieve this effect?
Cheers.
PS: I only need to test for iOS
You can use hammer js to do actual swipe. To slide between tabs you can use jquery scrollTo plugin passing an index of the tab you are swiping to. Because .eq method is zero-based index of the last tab would be tabs length - 1.
Every content section will have its index as well, so based on the tab's index you can show relevant content section.
Related
I made this website with an accordion menu in a sidebar on mobile, and there is one little problem i can not solve.
If you look at the page https://lieth-schule.de and open the sidebar on a mobile device (button underneath the image banner) you can see the accordion menu. If you now open a submenu, you can only scroll if you exactly hit the scrollbar of the whole sidebar.
What do I have to change in order to be able to scroll the entire sidebar, when touching and holding anywhere inside it? Like you would do on a mobile touch device?
Most likely the scroll does not work because the opening of accordions is done through mousedown
Need to be converted to click
I need to create an image accordion where it will be controlled by page scroll, like when you scroll your page and the accordion start it start to open and close horizontally while you still 'scrolling down' the page, after all, images open it continues to scroll vertically the page.
on the image you can see like when you scroll down the images should open one by one until finish.
If anyone has a solution for that and could share. Thanks!
The accordion should look like this
You can play around with slick.js https://kenwheeler.github.io/slick/ it's open source and has custom events. Here is working codepen demo: https://codepen.io/webisora/pen/EwQoMR
On Sencha Touch 2.3.1.410 (on Chrome 44.0.2403.157), the list scroller does not refresh after loading new data with more items. For example:
If I push a panel onto the display with a list that has 0 items in it, and then from that panel press a button that loads items into the list such that the list extends past the bottom of the window, the list scroller fails to recognize the longer list. The list correctly shows the top portion of the list, however, if you try to scroll down, the list simply snaps back to the top. You can see the scroller has not recognized the longer list.
It seems to me that there is an event that is not being fired, because if I push another panel on top of the panel with the list, and then pop back out, the scroller on the list is magically fixed, and I can scroll to the bottom.
Can anyone tell me how to send that event to the list scroller (or another better solution) so I don't have to push another panel to get it to work?
Thanks!
There will be only layout issue in your code. This is not problem of scroll events etc..
I have a page with a big accordion, when the user click on next step i refresh the page and i set active the next accordion, but the user for see the last accordion is obliged to scroll down with the mouse.
My goal is to set the active accordion automatically in the window (without using animation), i tried to search an answer on the net but i had found solution only with the animation and I don' want it.
The accordion is the same that foundation framework has in his documentation, http://foundation.zurb.com/docs/components/accordion.html , the only difference is that I have 10 panel.
Thanks
on the following site i have two hidden panels labelled "show map" and "show floor plans".
When the the header of each is clicked the slide panel is opened.
The floor plans is long and thus will go below the page view. is there anyway to keep focus at the bottom of the panel, so that when it's clicked you manage to see the whole window opening, thus avoiding scrolling?
the dev link is: http://marldon.staging.dante-studios.com/property.php
Thanks in advance.
I believe what you're looking for is the scrollIntoView method:
$("#foo").show()[0].scrollIntoView(false);
Passing a value of false scrolls the bottom of #foo to the bottom of the viewport. Passing true or not passing any value aligns the top to the top.
This method is supported both by standards-friendly browsers and by Internet Explorer.