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,
}
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.
I am having a problem with make "table of content" expand and collapse with a button in Bootstrap 4.
Here is my code:
https://codepen.io/nht910/pen/RwwwyKB
Snippet:
<div class="main-wrapper col-12">
<div class="post-wrapper">
<div class="post-body d-flex">
<div class="post-content">
<p>...</p>
</div>
<div class="post-toc">
<!-- this table of content i use Boostrap-TOC to auto generate: https://afeld.github.io/bootstrap-toc-->
<nav class="sticky-top" id="toc"></nav>
</div>
</div>
</div>
</div>
Can you guys please help me to put "table of contens" inside a colapse button and when clicked it we have animation like the images below.
Thank you guys so much.
To animate the side menu you have to make a transformation and slide the menu using translateX(100%);. You can then add a transition: all 300ms; to have a sliding effect.
You will also need to change the side menu width as you are sliding, so the content fills the space of the side menu.
I think I achieved the effect you wanted, Example below:
https://codepen.io/diogoperes/pen/NWWWMYW
I added some animation with jQuery, as well as added the button and some Bootstrap classes, to bring your main content at the center.
Here's the jQuery method:
$(function() {
$("#toc-button").click( function() {
$(".post-toc").stop(true).animate({width:'toggle'}, 400);
});
});
Example here: https://codepen.io/evelyng/pen/XWWWqYg
When I scroll down my page three boxes appears on scrolling which is perfect. But when I scroll up my page those three boxes goes disappear and I will have to scroll down again for appearing those boxes. I just wanted to animate boxes only once, If I scroll up page, those boxes should not be disappear.
Link is here
http://www.shahfahad.com/scrol/demo/scrol.html
set All boxes in on div
<div class="aos-item" data-aos="fade-up">
<div class="aos-item" data-aos="fade-right">
<div class="aos-item__inner"><h3>42</h3></div>
</div>
<div class="aos-item" data-aos="fade-left">
<div class="aos-item__inner"><h3>42</h3></div>
</div>
<div class="aos-item" data-aos="fade-up">
<div class="aos-item__inner"><h3>1</h3></div>
</div>
</div>
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 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/