Semantic-UI multiple sidebars pushing each other - javascript

I'm looking for a good way to realize a sort of breadcrumb navigation through a database using Semantic-UI (on top of Django, if that matters). The idea is to click on a link toggling the first sidebar, showing a dataset with in a form with each data offering a link to dig further down, opening the dug down data in another sidebar, shifting the parent further to the left. So in the end you end up with a horizontal "timeline" of sorts, made up of sidebars (or something else) that the user can then step back through, shifting everything back to the right.
The default sidebars seem to always overlay each other, so basically the question is, how do you make new sidebars shift existing ones?

Related

Delayed / animated scroll presentation

Anyone knows what I can use to create an scroll effect like the one of this website? https://www.kissthebride.fr/
When mouse wheel is used the presentation pages are shown one by one and the user is forced to stay some seconds at least on the page (if he doesn't use the right navigation).
I built my site using React. It has a pinned site navigation menu on the left, a pinned page navigation menu (to navigate through the current presentation pages) on the right and the main content on the middle. I need to apply this effect to the main content only and keep the right and left parts as they are.
The effect itself
Animation ideas
.

Horizontal scrolling to a specific element

I made the following component in Angular.
It's basically a kind of tree component.
Please note the following:
The tree has several branches.
It consists of nodes in alternating colors.
And the selected node is marked by a blue dot.
The tree does not fit the screen, that's why there's a horizontal scroll bar.
Each node has a unique id (i.e. <div id="...">)
This component works fine, however. I don't know how to add the following feature:
When the focus changes, (in other words, a different node becomes active), I want this node always to be visible on the screen. That means that the webbrowser has to scroll to the left or right, automatically whenever a node is selected. It has to scroll or jump until the specific <div> is visible.
How can this be done using javascript or typescript ?
EDIT:
I want to use this javascript is the base for better navigation tools.
button to move back and forth in the tree
button to jump 10 nodes to left/right.
button to jump to the back.
button to jump to the start.
Also when a new node is added to the back of the tree, right now the user has to scroll all the way to the right, manually. I want it to be visible immediatly, automatically.
Those are my real objectives :)
If the only scroll mechanism you need is the automatic one, I would avoid trying to use the browser's built in scrolling mechanism altogether and just use ElementRef of the node to get its horizontal position relative to its container, and then apply a CSS 'translate' to move it as needed. It will be much easier this way to have it look "nice" with CSS transitions and animations. But if you would still need manual scroll behavior (i.e, the user still needs to be able to scroll with a scrollbar) youd have to program a scrollbar directive / solution as well, which may end up being more effort than the problem demands.
This page has a sort of hacky workaround for horizontal scrolling - https://css-tricks.com/pure-css-horizontal-scrolling/
The problem for me in the past with 'scrollTop' and 'scrollLeft' is you can't apply transitions to those attributes, so they end up looking very jerky without implementing custom easing functions in javascript.

How to keep my place when two column become three columns

I have a new project using a bootstrap two-column layout, nav and content. Users will want to drill-down on blocks in the content. Sometimes it'll be two-column cards and sometimes it'll be tables. Clicking anywhere on an item should drill down.
When I click on the card, I want a drawer to slide out from the right side of the screen with the details. But there isn't enough room. So I want to shrink the nav and second column. The second column will became only one card wide, leaving room for details to appear in a new third column.
Here's a working example without animation. It's jarring but it gets the point across. Click on a recipe and you'll see it change states. Click again to remove the "drill down" panel.
https://jsfiddle.net/cg5n2eL6/
Question: How do I keep the current recipe where it is? That's a huge user experience issue. If you use card 1, it's fine. But any recipe in column 2 or even some later on in column one and it jumps somewhere else.
If it matters I'm sure I'll end up dumping the .col-sm-6 classes ... it looks like in order to get the transition between states to be animated, I need to use .main-content.main-content-full-width or something like that and just toggle main-content-full-width, instead of toggling both .col-sm-6 and .col-sm-4. So if that affects your answer, you have been warned. :)

AngularJs application going to the top of a div

I'm creating a single page web app using AngularJs and I am having trouble with showing information as if they were in different panels.
So basically each panel contains text and photos, basic information slides. I am currently showing and hiding these using a left and right arrow.
But when I go from one panel to the next, the next div is scrolled to the bottom of the div.
On the click of the next arrow, I also need the next div to be at the top no matter what.
Any help would be appreciated.
As #ferTo says, you should provide some code for us to comment on. Assuming you are using ui-router (which I have no idea in practise) then you will want to turn off autoscroll
<div ui-view autoscroll="false"></div>

Mini-map of HTML page sections shown as fixed anchors in viewport

I saw a site a month or two ago that had anchors fixed to the right side of the page that would not scroll when the page was scrolled. That alone is not hard to do with CSS.
But on that site, the fixed anchors were dynamically generated based on the section headers in the page. And they were proportionately spaced down the right side of the page in relation to their position in the document.
In essence, it created a mini-map of the entire document, giving a visual overview of what was in the document, and the spacing between sections of the document, all within the current viewport. You could quickly see how large each section was in relation to each other. Maybe I should call it a table-of-contents instead of a mini-map.
I believe this was on a documentation page for an API of some sort. I think it worked really well for navigation, and want to build something like it for some documentation I need to do.
In a way, it reminded me of the minimap on the right side of Sublime Text 2, but only major headings were shown and they were depicted as buttons fixed to the right side of the page.
Unfortunately, I can't remember or find the site I saw it on. Has anyone seen an example of something like this? I'd love to see some examples before I start implementing it. Or do any tools exist for doing this, jquery plugins, etc?

Categories