Best Practice for Vertical scrolling through long collapsible submenus

We’re redesigning some of our landing pages. In this case each landing page has 6-8 course categories each of which contain 3-4 courses by date, time and price. Current Layout

Each course has a CTA button and is contained under collapsible course menu. The landing page currently opens with all menus expanded, which introduces the issue of needing to scroll down a lot to find the right course. We also believe we can organize the data better.

For this we’ve come up with a floating bar at the right side which, when clicked upon, scrolls to the right course category (e.g, category 4). Propose layout

We’re wondering if there’s a better way to do this. Suggestions to improve the layout would also be welcome.

Collapsible Power App Sections

I have an app that includes form elements that users fill out and submit to a Sharepoint list.

However, since there are many form fields to fill in users have complained about the app requiring too much scrolling and being too long. They would like to have collapsible sections that contain related datacards. Currently, I have a form element within my screen with a list of all the related data cards where users enter responses. I need to split it into different subjects and each subject expands when an down arrow is pressed.

I have followed this tutorial : tutorial – which is exactly what I want – but I want each section to contain the related datacards. Is it possible to have form datacards in each of these sections? Or is there another way to accomplish this?

Collapsible Tree Structure View in SharePoint?

Is there any way to create a collapsible tree structure in SharePoint that would not only allow me to create an easily browsable structure (with + and – buttons to collapse and uncollapse each section) but would also allow me to upload a file (e.g. pdf or xls) under the last level of the structure so that a person viewing the structure might also download and read the file?

Basically, the reason behind all this is that I have a vast amount of separate files for which I would have to find a way to display in a hierarchical order for other people to view them and actually make sense of the entire structure & the files. (PS: Creating a folder structure on the computer won’t work because the names of some of the folders become too long and thus limit the maximum depth of the structure since at some point, the folder path reaches its limit.)

Is a floating, collapsible bottom navigation bar a good pattern on mobile web?

I’m working on a mobile web app that has two pages (tabs) of equal importance. As the user will switch between the two frequently, I’m worried that displaying a classic navigation bar at the top of the screen will prove frustrating and harm the experience.

I’ve found a few examples of mobile websites with bottom navigation bars (Pitchfork and Quartz) but these are problematic on iOS:

  • When Safari’s toolbar is collapsed, taps on the navigation bar will be ignored and will instead summon Safari’s toolbar back into view. This makes the navigation bar a moving target and requires a second tap in order to use it, adding friction to the experience;
  • On iPhone X and XS, when Safari’s toolbar is collapsed, the navigation bar is rendered behind the Home Indicator, looking visually unpleasant and inaccessible. Click here to see an example.

I was able to work around both of these issues by implementing a navigation bar that is floating, and collapses away at the same time as Safari’s toolbar does. The collapsing is helpful as it means the navigation bar will be out of the way of the content, won’t clash with the home indicator, and won’t require the user to tap it twice to use it.

You can experiment with this proof-of-concept here (this only works on iOS Safari). You can see a gif of the proof-of-concept in action at the bottom of my post.

While the proof-of-concept seems to behave satisfactorily, I have a few concerns I’d like to ask about:

  • Is this pattern a good idea for a mobile web app? Is it unexpected enough to result in a net loss in usability?
  • Is it confusing to keep the navigation bar hidden while Safari’s interface is collapsed and, if so, should I use some sort of indicator to show the user how to summon it?
  • How should I go about testing whether this pattern is effective and clear to my users?

gif of the proof-of-concept

tree collapsible d3.js agrandar tamaño de forma automática al colocar div dentro, agregar acciones a menú contextual y crear margen entre nodos

Soy nuevo en d3.js y estoy usando la librería d3 v3 pero no es una restricción se puede responder con la versión 5 o 4 pero no menor a la 3. Por lo general no necesito pregunatar cuando tengo que hacer algo pero en hacer preguntas y d3.js soy novato.

favor implementar las modificaciones a este código y de forma que sea facil de implementar y modificar Código fuente aquí

  1. Quiero separar los nodos de su punto de intersección Ejemplo de código (obviar funcionalidad jquery) ver aquí que cando una finalize el otro inicio “var pixel = 10px” después de lo que indique la variable. Extraido de aquí

  2. Tamaño auto ajustable al contenido y que se puedan agregar si se le agregan varios div dentro y que sea de forma automática y por transición (esto se vincula a la 3).

  3. Agregar funcionalidad al menú contextual y los div que se puedan agregar de la petición 2 se puedan hacer desde el menú contextual, al igual que un una opción para hacer acercamiento. Código ejemplo aquí, extraído de aquí

Collapsible and icons Quick Launch in SharePoint 2013

I’m very new in SharePoint and I’ve receive the task to create an internal SharePoint site for our department. I searched a lot on internet regarding a way to add icons to quick launch menu but I cannot find anything from head to tail. For now I used a CSS code.

The menu shoul look like this : enter image description here

For the moment my result looks like this.

I tried to use JQuery , but again I’m new on this also. Can anyone help me with this problem ? Thank you so much for your help.

enter image description here