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
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
Im trying to add a button/tab on the bottom right corner of the page. That when clicked slides up a window. I've seen this somewhere but i can't get it to work.
I found my answer shortly after. If you're looking for the same, this thread might help:
HTML CSS/JS Bottom navbar Sliding Up
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 am currently trying to make the new website for my school but I am having some problems with the responsive menu. Basically when I open the menu on a mobile device some of the links do not appear on the page as there are too many. When I try to scroll down through the list of links the menu just closes. I don't know what to do to solve the problem cos I've got no idea what's even causing it. Please help!
Any ideas?
You can see the page here
First Change the script order in your website. Jquery should be at top of all the remaining scripts. In your website it's different. See the below image.
and at the same time you are using ksmenu.js twice.
And for the issue you are asking is there is a script to hide menu on resize. Please see the below image.
I am creating a web page that contains lots of transitions and animations. I don't like it when things zap from one place to another, I like it to slide over instead. Which is why I have a problem with responsive web apps. Yes, the elements of the page will reposition themselves correctly when you resize the window, but they don't animate, instead they go from point A to point B in, quite literally, no time.
Is there any way I can solve this problem? I am open to any CSS or JS solutions. For an example, go here, make your browser window smaller, and click on the hamburger menu icon in the top left. The buttons in the main section of the page reposition themselves but again, no animation. It makes me sad.