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.

Website jumps to middle content on load. One page design

I have one page design with 3 sections.
<section>
<div class="page1">
content
</div>
</section>
<section>
<div class="page2">
content
</div>
</section>
<section>
<div class="page3">
content
</div>
</section>
I use scrollify.js to scroll to next section on mousewheel. In my first section I have fotorama loaded. When I reload the page, the page shows the second section for a second before it jumps to first section when fotorama is loaded.
I know that I can use Javascript delay function to delay the second and third section. But will this be the right thing to do? Or is there a way to use a function that can wait for the first section to load until the second and third section is loaded?

Ok. I managed to fix this problem by setting a min-height to page1.
min-height: 100vh;

JQuery Mobile Menu static on page change

I'm trying to fix the top menu on page change.
Example:
<div data-role="page" id="page1">
//page 1 contents
</div>
<div data-role="page" id="page2">
//page 2 contents
</div>
and my top menu
<div id="top-menu">
</div>
Is there any way to not make the menù code reappear on each page?
I want my menu div to be collective for all pages.
Any ideas?
Thanks,
Andrea

No, the concept of "pages" does not allow for static content to be shared among them.
But I see at least two solutions:
use only one page containing your menu, and many hidden div to encapsulate your content (like <div data-role="content" id="page1" class="hidden">). Using your menu navigation, you just have to show/hide the content you need
use some JavaScript trickery:
$(document).on("pagebeforeshow", "[id^=page]", function(event)
{
// "move" the menu to the content of the current page
// (you have to add IDs to each page like 'page1content')
$("#top-menu").prependTo("#" + this.id + "content");
});

jQuery Navigation fade,hide,show,bounce and timing

Here goes a really simple question!
I want to make a navigation menu and content with jQuery.
Here is my navigation links :
<div id="menu" class="menuBg">
<ul>
<li><a class="btn1" href="#">How To?</a></li>
<li><a class="btn2" href="#">Prizes?</a></li>
<li><a class="btn3" href="#">Rules</a></li>
<li><a class="btn4" href="#">Score</a></li>
</ul>
</div>
Content :
<div id="content">
<div id="MainPage"><!-- content goes here --></div>
<div id="HowTo"><!-- content goes here --></div>
<div id="Prizes"><!-- content goes here --></div>
<div id="Rules"><!-- content goes here --></div>
<div id="Score"><!-- content goes here --></div>
</div>
Sample Navigation Code (includes first links code) :
$(document).ready(function() {
$('#baslaBtn').on('click', function(){
$('#HowTo').hide();
$('#Prizes').hide();
$('#Rules').hide();
$('#Score').hide();
$("#MainPage").fadeOut(500,"linear", function() {
$("#soru1").slideToggle(function() {
$("#soru1").effect("fadeIn",2000);
}).show(2000);
});
$('#MainPage').hide(1000);
});
});
...and i have 5 more on('click') function to navigate my menu to my contents. The problem is every time all of these contents loading without any effect. I want to load my content when load process is finished. The other problem is i'm putting hide() in every function to hide other objects.
Is there any way to make a function without a repeated code like :
$('#HowTo').hide();
$('#Prizes').hide();
$('#Rules').hide();
$('#Score').hide();
And i want to show my contents opening with simple fadeIn effect. If i click the other links all objects will hide them self or fadeOut, new content object's goes load and will open with fadeIn effect.
P.S : When i load my content to i can't use the content features like jquery.scroll plug in..All of them are disabling themself.
Really confused. Any suggestions?
Thanks.

Assuming you're going to fade all divs inside #content and #soru1 is the div you want to show, you could simply use this:
$('#content div').fadeOut(function() {
$("#soru1").fadeIn(2000);
});
This will fade every div inside #content.
To fade only specific divs and not every div element inside #content, you can change your code into this, as example:
<div id="content">
<div id="MainPage" class='toFade'><!-- content goes here --></div>
<div id="HowTo"><!-- content goes here --></div>
<div id="Prizes class='toFade'"><!-- content goes here --></div>
<div id="Rules"><!-- content goes here --></div>
<div id="Score" class='toFade'><!-- content goes here --></div>
</div>
And do the following:
$('#content .toFade').fadeOut( function() {
/* ... */
});
Then, only the selected divs would fade.

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/