Develop Reference

Make Bootstrap 4 dropdown have dynamic height

I am trying to make Bootstrap 4 dropdown have this style: slinky.js.org
This is what I have by now: https://codepen.io/nht910/pen/yLexeEM
Main code:
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="main-container">
<div class="menu-container">
<div class="menu-1">
<span>Link-1</span>
<button class="button-1">arrow-1</button>
</div>
<div class="menu-2">
<span>Link-2</span>
<button class="button-2">arrow-2</button>
</div>
</div>
<div class="submenu-container">
<div class="submenu-1"> <!-- submenu of .menu-1 -->
<div class="arrow-back">
<button class="button-back-1">Arrow back 1</button>
</div>
<div>
<span>Child 1</span>
</div>
</div>
<div class="submenu-2"> <!-- submenu of .menu-2 -->
<div class="arrow-back">
<button class="button-back-2">Arrow back 2</button>
</div>
<div>
<span>Child 2</span>
</div>
</div>
</div>
</div>
</div>
To make dropdown has slide effect:
I set two classes .submenu-1 and .submenu-2 to display: none, and when user click on arrow button, corresponding submenu will be shown and slide to it.
when user click on arrow back, it will slide back to main menu, and after finish sliding effect, it will hide submenu.
That is what I have for now. But I don't know how to resize dropdown's height to fit content inside it (dynamic height) like slinky.js.org.
Thank you so much.

Try using hide & code when you click.
you can simply do it by using jQuery
$("selector").hide() & $("selector").show()
when user clicks your custom buttons

Solution: https://codepen.io/nht910/pen/OJMobEm
I change height of dropdown using JS with .submenu-1 is the content I want dropdown to fit:
$('.dropdown-menu').height($('.submenu-1').outerHeight());
But it got one problem. At the first time I click on arrow button (it is the first time height of dropdown changed), the transition animation doesn't work. But after that, it work perfectly. So I add another line at global to make the first time that height is changed happen on page load. And now it work perfectly for me.

Use jQuery to show an element whose parent is hidden

How do I show a fixed position element, when it's parent element is hidden (display: none)?
My scenario.
I have a bottom, fixed toolbar with five buttons across the bar. One of those buttons is a More/Less button that expands and retracts the toolbar showing even more buttons. Inside each button div is a panel element. So, when a button is clicked its panel element is shown and moved so that it sits above the selected button.
Here is some sample markup:
<div id="dashbar" class="dashbar">
<div id="dashbar-apps" class="dashbar-apps">
<!-- The More/Less Button -->
<!-- My First Button -->
<div id="dash-projects" class="dash-button">
<i class="fa fa-area-chart fa-fw icon"></i>
My Projects
<ul class="dash-menu" id="dash-projects-menu">
<li>Some</li>
<li>Links</li>
<li>Here</li>
</ul>
</div>
<!-- Any number of additional appbar buttons -->
</div> <!-- for the appbar that is always visible -->
<div id="app-deck" class="dash-app-deck">
<!-- The exact same markup for the buttons -->
</div>
</div> <!-- for the dashbar as a whole -->
The More/Less button toggles the appdeck visibility with a simple slide animation.
What I want is for someone to be able to expand the dashbar and click one of the buttons in the appdeck portion. Then the toolbar retracts automatically and displays the panel element associated with that button.
Everything works fine except that when the toolbar retracts, it hides the appdeck and (therefore) all the elements inside it -- including the panel element I'm trying to show.
I've played with detaching and moving the element to the body, but that seems excessive. Is there another way to simply show the element when it's parent is hidden?
Thanks.

Semantic-UI sidebar with fixed top menu

Semantic-UI forewarns on its sidebar page that "Fixed position content may have issues changing its position when a sidebar appears." It then provides two possible solutions to the problem.
Surprisingly, on that very same page and throughout the site, Semantic-UI's website uses a fixed top menu that adjusts just fine when the left sidebar is triggered.
I want to simply create a fixed top menu like the one Semantic-UI's site uses that adjusts properly when the sidebar is opened. However, this is proving frustratingly difficult, as neither of the two proposed solutions work. I've inspected the markup, css, and javascript but can't figure out how he went from the code Semantic-UI provides to a working fixed top menu that adjusts properly when the sidebar is opened.
Any thoughts or direction? Using Semantic-UI how do you create a fixed top menu that adjusts properly when a sidebar is opened?

From the docs:
Using Fixed Content Any fixed position content that should move with
page content when your sidebar is visible, should receive the class
name fixed and exist as a sibling element to your sidebar.
Fixed content that is not included adjacent to your pusher will lose
its positioning when a sidebar is shown.
<div class="ui left vertical inverted labeled icon sidebar menu">
</div>
<div class="ui fixed inverted main menu">
</div>

<!-- Left Sidebar -->
<div class="ui visible inverted left vertical sidebar menu">
<a class="item">Home </a>
<a class="item">Page 1</a>
<a class="item">Page 2</a>
</div>
<!-- Top Fixed Menu -->
<div class="ui top fixed menu">
<a class="item menu-trigger">Menu</a>
<a class="item">Page 1</a>
<a class="item">Page 2</a>
</div>
<div class="pusher">
<!-- Page Content Here-->
<div class="ui basic segment">
<h3 class="ui header">Hello there</h3>
</div>
</div>
Don't forget to put the code above inside the "body" tag and including the css & js files.

Use the 'exclusive' setting to display multiple sidebars that play nicely with each other.
$('.your-shared-sidebar-class').sidebar('setting','exclusive',false).sidebar('show');

Disable horizontal scroll where element is larger than viewport

I've trying to create something a bit like the navigation on google play, with a fixed number og tabs (the swyping in app-browsing).
I've created a div that contains some content divs.
<div id="container">
<div class="section"> ... </div>
<div class="section"> ... </div>
<div class="section"> ... </div>
</div>
To create the sliding between sections I set the container to a width of 300 %
I then set the left property of the container according to the button pressed.
My question is: How to disable horizontal scrolling of viewport?

You have two solutions:
Wrap #container inside another <div> which has 100% width, disabled wrap and overflow: hidden, then scroll #container inside it, or
Put overflow: hidden on the viewport (or try with overflow-x:hidden);

Slide contents from one div into the other

I have a markup arranged as follows in my website:
<body>
<div id="wrapper">
<div id="middle">
<div class="red-container">
<div class="row">
Middle. Row 1.
</div>
</div>
</div>
<div id="right">
<div class="green-container">
<div class="row">
Right. Row 1.
</div>
</div>
</div>
</div>
</body>
The right div as would be obvious has to be towards the right of the middle div.
Here's the fiddle (right div here inside my fiddle somehow is not actually to the right of middle div) : http://jsfiddle.net/NNMYS/
I am trying to achieve a sliding effect here:
All the content from the middle div should slide to the left and get removed after the animation. On the other hand, simultaneously, the content from the right div (which in my case will be added by ajax to the right div) should slide from the right div to the middle div (and removed from the right div). How can that be done?
I could have done a content slider directly by having all the content directly placed separated by positions and sliding to the clicked item. But here since I would be adding content by ajax and also have some responsive implementation, in my case that doesn't seem to possible.

Look at this. I think this might help
http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/