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
Related
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
I'm working on this site: http://editingplus.com.au
In the submenu Resource > Getting published, at some screen sizes when a link is clicked, instead of navigating to the link the submenu jumps to a different position and then closes. A second attempt at opening the menu and clicking the link works, but only if you try to click the same link--clicking a different link means you have to start again and click that link a further time.
This problem only occurs at smaller screen sizes where the Getting Published submenu doesn't fit to the right of the Resources submenu. Clicking on the Getting Published submenu makes it jump briefly from the left to the right of the Resources submenu before closing. At larger screen sizes where the Getting Published submenu fits to the right of the Resources submenu, links work on first click.
This screenshot shows the situation of the Getting Published submenu being to the left. It's when it's like this that the menu jumps then closes.
This is a problem with JavaScript--if I disable JS on my browser and the site falls back to CSS only menus, the links work first time.
I haven't made any custom menus. The site is using the Mins theme from GoDaddy, which is built off the Primer theme. As far as I can tell, neither of them are using any custom JS for the menus, and all the JS is standard WordPress JS.
StackOverflow recommended I check out these two other questions:
Jquery Drop Down Menu. The sub menu disappears when clicked. So, How to make the submenu stays when clicked?
Submenu disappearing when clicked in the submenu in wordpress
However, those are both to do with developing custom menus, and those menus not working ever when clicked, rather than only sometimes not working at certain screen sizes.
I'm guessing I will need to add some custom JS to this site to stop the menus not working, or somehow disable the JS so the menus roll back to pure CSS, but I'm not sure how to do either of those things.
Any help would be much appreciated!
I have made this website here: http://dijon-egg.com/Possum/
If you click on green big dot button, it takes you to page2. My problem is I can't figure and fix the menu being too big on page 2 or change view of carousel on page 2 so full carousel can show to us.
As I looked at your source code, I guess you should somehow add the .cbp-af-header-shrink class back to the header, when you click the green button.
I have a Bootstrap navbar on my site with a collapsed menu that toggles on/off. I would like it so that when a user clicks one of the links in the menu (which is a dropdown, by the way), that active link should jump to the top of the menu. This way they can see a more expanded list of the dropdown items.
Here's a regular Bootstrap navbar. I want that when I click on "Dropdown", bring that active link to the top under "project name".
If I understand what you want to do correctly, from a user interface point of view I would strongly recommend against doing this. This is highly unexpected behaviour for the user who is likely to get confused as to why the thing they just tapped has moved. It could also cause mistakes from people opening the menu, then (since their finger is probably still close to the screen) accidentally clicking one of the menu items and being moved to a new page.
If you are worried about users not being able to see all the items maybe you should consider a different menu interface for your mobile devices such as an off-canvas menu (click the little 'toggle nav' button rather than the hamburner menu to see the off canvas menu). This would give you more space to play with for your menu items.
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.