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.
Related
Just like the image I want to make, when Home is clicked, it is located in the navigation-aside-wrapper on the right.
Opening the navigation-aside-item page, I couldn't figure out how to do this. I would love it if you could help.
image
<div class="container">
<div class="navigation">
<div class="navigation-wrapper">
<div class="navigation-aside-item">
<span>Home</span>
</div>
<div class="navigation-aside-item">
<span>About</span>
</div>
</div>
</div>
<div class="navigation-aside-wrapper">
<div class="navigation-aside-item">
Home Child
</div>
<div class="navigation-aside-item">
About Child
</div>
</div>
</div>
If you are wanting to show different page content when you click an menu item you can use Javascript to show the correct content for each button.
Here is a post that shows how to do this. show hide html code/content using nav menu
I have an accordion with 6 buttons (button class ".course-accordion") to expand or collapse.
Under the accordion I have a div ("collapse-bottom") that I would want hidden if all accordions are collapsed, but visible if 1 (or more) are open. This div contains a button to collapse all.
I've tried show/hide if the button class contains 'active', and I've tried to show/hide if the accordion content has a max-height of 0/100%. I can't seem to get it working.
Any ideas? jQuery or Javascript would be fine here.
Sample Code Markup:
<div class="course-wrapper">
<button class="course-accordion active">Course 01</button>
<div class="course-panel">Course Content</div>
</div>
<div class="course-wrapper">
<button class="course-accordion">Course 02</button>
<div class="course-panel">Course Content</div>
</div>
<div class="course-wrapper">
<button class="course-accordion">Course 03</button>
<div class="course-panel">Course Content</div>
</div>
<!-- I want this to be hidden unless one or all of the above accordions is active -->
<div class="expand-collapse">
<a class="collapse-bottom">Collapse All</a>
</div>
You can use hasClass() to check if a certain element has a particular class.
This can be done using jquery:
<div class="course-wrapper">
<button class="course-accordion">Course 01</button>
<div class="course-panel">Course Content</div>
</div>
<div class="course-wrapper">
<button class="course-accordion">Course 02</button>
<div class="course-panel">Course Content</div>
</div>
<div class="course-wrapper">
<button class="course-accordion">Course 03</button>
<div class="course-panel">Course Content</div>
</div>
<div class="expand-collapse">
Collapse All
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
function check_accord() {
//check if any button has class active and shows the collapse-bottom element
if ($(".course-accordion").hasClass("active")) {
$(".collapse-bottom").show();
} else {
$(".collapse-bottom").hide();
}
}
$(".course-accordion").click(function () {
//toggles the active class of the clicked button
$(this).toggleClass("active");
check_accord();
});
$(".collapse-bottom").click(function () {
//removes the active class from all the buttons when collapse bottom is clicked
$(".course-accordion").removeClass("active");
check_accord();
});
check_accord(); //executes the function each time the webpage is loaded
</script>
Here is just one example of some pseudo code (Sorry, been a while since I have written any JS or JQuery, so disregard if this doesn't help, but I figured maybe I could help get you on the right track), but this could be accomplished in many ways.
Keep track of the state of the Accordion by having a Counter that gets updated with the amount of Accordion Divs that have a class == "Active" every time one of the Accordion Buttons is clicked.
//Then "While" the counter is greater than or equal to 1, Show the Hide/ Display Button.
Hope that helps. Id be glad to write something out, but just wanted to give a quick and dirty implementation for you to get you started. But again, if you are looking for something more concrete then I am sure that either I, or someone else, would be happy to help you out.
I have the following html:
<div class="col-sm-12" id='dropdown_menu_group'>
<div id='dropdown_library_menu'>
<div class="row" id='dropdown_menu_row'>
<div class="col-sm-2">
<a class='button-text btn' id='library_button' href="{{pathFor 'library'}}">my library</a>
</div>
<div class='col-sm-2 col-sm-pull-1' id='google_drive_text'>
GOOGLE DRIVE
</div>
<div class="col-sm-2" id='settings_button'></div>
</div>
</div>
<div id='dropdown_library_menu_border'></div>
</div>
my id='dropdown_library_menu' is hidden by default, and the div below it <div id='dropdown_library_menu_border'></div> has opacity of 0, so that when it is scrolled over, it makes the id='dropdown_library_menu' slide down. The issue is, though, that <div id='dropdown_library_menu_border'></div> is still there when the menu slides down, and thus, when I scroll over the opacity 0 div that triggers the slideDown (inside of the menu, at this point), it tricks my jQuery into thinking this condition is met:
'mouseout #dropdown_library_menu': function(ev){
ev.preventDefault();
$('#dropdown_library_menu').slideUp('slow');
}
Because technically, I am mousing out of the dropdown menu and into the dropdown menu trigger.
I want to make the blank div move to the bottom of the menu when the slideDown is triggered, but setting position relative on the parent and position absolute on the children totally messes up my webpage.
You can make it even slower,
'mouseout #dropdown_library_menu': function(ev){
ev.preventDefault();
$('#dropdown_library_menu').slideUp(3000); // Slide up in 3 seconds,
}
I have two containers, as displayed in this FIDDLE.
Both have content that can become quite lengthy, thus I need to use overflow: auto on both containers.
The HTML structure:
<div id="maincontainer">
<div id="left-container" class="go-left overflow-y-auto">
<div id="left-inner-container">Contents</div>
</div>
<div id="right-container" class="go-right overflow-y-auto">
<div id="right-inner-container">
<div id="button-wrapper">
<button type="button" id="tip_button" class="btn primary customized-button">tip</button>
</div>
</div>
</div>
</div>
I have a button within the #right-container that creates a tooltip on click, displayed right next to it. The problem is that, when I have lengthy content (that determines scroll bar to appear), the tooltip won't be placed near the button (on scroll). It will remain relative to the #maincontainer. If I make it relative to the #right-container the tooltip will be 'chopped' (due to overflow).
What I'm seeking is to have the tooltip aligned next to the button when the user scrolls down that area.
If you are using Bootstrap tooltip then add class 'bootstrap-demo' to parent div of button & make sure you are NOT passing container:'body' parameter when initializing tooltip.
I would like to create a simple javascript slideshow that allows a user to click 'Previous' or 'Next' and have the element slide in from the right or left depending. Content will be coming in from a CMS, so it's not 'hard-coded' persay. My markup would look like this ideally (where the most recent entry receives the 'show' class):
<span class="back">Previous slide</span>
<span class="next">Next Slide</span>
<div id="slideshow">
<div class="client show">
<p>Yada</p>
</div>
<div class="client hide">
<p>Yada</p>
</div>
<div class="client hide">
<p>Yada</p>
</div>
<div class="client hide">
<p>Yada</p>
</div>
</div><!--end slideshow-->
I need something that will automatically detect order and allow the number of .client classes to be anything. This seems very close: http://jsbin.com/ekecu but I don't want it to be based on visible links to switch, just the same absolutely positioned previous and next buttons.
Would really appreciate some help, or if you were feeling especially generous an source snippet I could use.
Shadow Box or Fancybox?