How to keep my place when two column become three columns - javascript

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. :)

Related

Bokeh - how to create a hideable sidebar

I have a bokeh project that looks very similar to this https://demo.bokeh.org/movies
Now I would like to make it possible to hide/unhide the column on the left.
I know how to hide it following the solution from here https://discourse.bokeh.org/t/hiding-bokeh-elements/4335/2
The problem is now where to put a button which would show the column again.
I thought of the following:
When hiding the column make another button visible which will allow to unhide the column. This is easy but adding a new widget to the layout would defeat the purpose of hiding the column since either way I would have a big button visible on the screen affecting the position of the figure. Is there some way of adding a new button widget which does not affect the whole layout?
Adding a new tool to the figure which would call the unhide the column. I am not sure though if this can be done easily.

Force datatables column to take up full width on small screen

BACKGROUND: I have a jQuery datatable on my website that I want to look, act, and feel like a table on desktop sizes. When it hits a small screen size (as definied by Foundation - 39.9375em), I want to hide the header and footer (which I already basically figured out) and have the first column take up the full width of the page and force all the other columns to a child row. The other columns just have buttons/links that take you to other pages having to do with the name of the row. Things like settings, status, etc.
QUESTION: How do I force the column to take up the full width?
WHAT I'VE ALREADY TRIED: I tried setting white-space: nowrap, but then it just responsive hides the whole column and then I'm left with literally just the control thing. So it's like an accordion. I tried to look up how to force the other columns to be hidden responsively, but I couldn't find anything and I can't think of any way to do it myself.
Thanks in advance!
After some playing around, I found a solution on this page of the datatables documentation: https://datatables.net/extensions/responsive/classes. For all of the columns except the title column, I simply put className: 'min-tablet-l'. That way, as soon as we hit landscape tablet size, the columns are automatically thrown into the child row and the control turns up that lets me show/hide it is shown too.

Semantic-UI multiple sidebars pushing each other

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?

jQuery: Scrolling like a contained ios scrolling box you would see in the app store

Here is what I am talking about:
When you visit https://soundcloud.com/ , when you look at the homepage you see the whole "Connect on Soundcloud" thing.
The texts and buttons on the screen in that confined space scrolls by itself in a given amount of time. It also has those two small white circle buttons that tell you which item it is on(the first white circle gets filled in while the other one is hollowed out with a border when the user is looking at "Connect on SoundCloud" and the other way around when it is on "Discover more with SoundCloud GO+").
How is this made?
Thank you!
You should take a look at Carousels on w3schools, they cover this pretty well.
Bootstrap brings functions and html attributes for building components that slide though elements. Elements not currently visible are pushed off the view with CSS and visible ones can slide into view.
That is called carousel, and it is part of many frameworks/libraries like Bootstap. Some frameworks/libraries call it gallery.

How would I expand a superdiv with then scroll to a subdiv with scrollTo?

as you may have guessed from my post title I have no idea how to work with jQuery or javascript in general. I know that this isn't too hard of a function to put together but I can't seem to do it on my own.
Pretty much what I'm trying to do (in theory) is there are four large boxes that cover the available content area that link to (literal) menu items like breakfast, lunch, sides, and drinks hidden inside a div that when one of them is clicked the full menu expands down and scrolls gracefully down to the one they clicked on after which they can browse all the sections together as they please.
I have no idea how to do it and every time I try it breaks the page. Hopefully somebody with more than five minutes experence can help. I have no problem at all with CSS and HTML but scripting is just pitiful.
So for scrolling you can do something like this.
I don't quite understand how the full menu portion is supposed to work but you could hide it initially and then show it when the menu item link is clicked.

Categories