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.
Related
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.
Scenario:
I have an accordion.
When it expands I have a form. Sometimes a long form (bigger than page height).
The form action buttons are on the end of the form.
Problem:
You must scroll the page to see/click on the action button. For some particular reason, the user may want to save it even without see all the form.
Question:
How to fix the action button in the end of the screen?
How to keep these buttons inside the accordion item (if you scroll to the end of the page, you should see other accordion item siblings)
In other words: the action buttons should be attached to the end of the screen only while the end of that accordion item is not visible yet;
Edit
Demo: http://jsfiddle.net/1vkcmo7a/1/
<div>
<accordion close-others="true">
<accordion-group heading="Item #{{i}}" ng-repeat="i in [1,2,3,4,5]">
<ul>
<li ng-repeat="a in [1,2,3,4,5,6,7,8,9,10]">long form</li>
</ul>
<button class="btn btn-success">Save</button>
</accordion-group>
</accordion>
</div>
How about enclosing the accordion item contents in a div with fixed height and a scroll e.g. <div style="max-height:50px;height:50px; overflow:auto"> ?
See http://jsfiddle.net/1vkcmo7a/7/
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'm creating a dropdown in my navbar which contains a video player, however when I hide the video player by toggling the dropdown button, I'm still able to click on the hidden div element.
So when I'm trying to navigate other elements on the page, sometimes I click on the hidden div video player. How do I make the hidden div element in droppable unclickable? and then clickable again when I show the element using the dropdown.
Thanks!
EDIT:
I'm using the following code:
<a ng-cloak class="dropdown-toggle player-btn btn btn-large" data-toggle="dropdown">TOGGLE</a>
<div class="dropdown-menu">
<div style='position:relative;height:210px'>
<div style='position:relative;height:210px'>
<div id="player"></div>
</div>
</div>
</div>
So I have this menu and when I click on a button I need to create another div under the menu. I have done that. But when I click on another button on the menu that div is still there and I want it to dissapear/collapse. So how should I do it? What I found until now is how to hide a div when clicking on a specific show/hide button, but I need to hide that div when I click any button on my page...
Any help is highly appreciated.
My code is this but I don't think it is relevant (I am interested in the process, how should I do it):
<div id="container">
<ul id="nav">
<li>Despre noi</li>
<li>Projects</li>
<li>Implica-te</li>
<li>Stiri</li>
<li>Contact</li>
</ul>
</div>
So this is my menu and when I click on projects this div shows up
<div id="menu_lava">
</div>
which is a lavalamp submenu. But how can I make it to collapse when I click on other buttons on my main menu?
Hide all info-div's on a click and just show the sepcific one:
Here's a jsfiddle (using jQuery):
http://jsfiddle.net/FKeAF/1/