Hello everyone it is me again with another question. The booking system located here
http://www.divethegap.com/scuba-diving-programmes-dive-the-gap/divemaster-training.php?cat=16
There are 3 main collapsible panels controlled by the spry framework. There are then over a dozen more inside the first collapsible panel as you can see on that page. When you open one of those by pressing one of the 'learn more' buttons you will see that the main collapsible panel that it is in also expands to fit that content and the contracts if you close the smaller panel again.
However as soon as you go to the next main collapsible panel 'summery and quote' and then go back to the first main panel by pressing the button that says 'back' there are problems. Now if you open up one of the smaller panels inside the first main panel you will see that the main panel does not expand to fit the contents and in fact the content of the smaller panels spreads over the other content, floating above it. Does anybody know how to fix this?
Many Thanks,
Problem solved for anyone who is also stuck.
Open up the SpryCollapsiblePanel.js . Find the line that says
this.content.style.height = this.toHeight + "px";
And change it to .
this.content.style.height = "auto";
All problems solved with resizing content of collapsible panels where another collapsible panel is the content.
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 want to have a collapsible group with a large amount of content within each section. A problem that I've been having is that if I am scrolled down the page with the collapsible in around the top third of the viewport, if I click the collapsible to open it, it opens so that I am looking at the bottom of the content. So I have to scroll up past the content of the collapsible in order to close it again. As well as this, users won't be reading the content top-down.
This happens whether I have defined my own collapsible, or if I'm using Bootstrap collapsible/accordion.
Is there a way to ensure that collapsibles always open so that the viewport is left looking at the collapsible title and the start of the content, instead of the user being pushed down?
I've searched everywhere but for some reason I can't find an answer. Thank you.
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 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.
ok here is an easy one.
I need to create a simple custom panel that will have a collapse functionality.
The thing is I need to control over the collapse button position, and I need to control the collapsed mode UI (that is I want the panel to show somethings in collapsed mode and not just the title.
for example :
I want to create a search panel that will be nested in a viewport above a the pages of the application. each page will have access to the search panel title and its advance search form which is collapsible. in a collapse mode only a simple search and the title are visible.
here is an image before the collapse: (once clicking the circled arrow the panel will expand to show the advance search)
here is an image after the collapse:
how would you go about to implement such functionality?
I would use two panels in a vbox layout, the top one contains the basic search, and the bottom one contains the advanced search.
In the top panel I would just add an image of a down arrow and handle the onclick event to toggle the bottom panel.