I want to make an application making use of twitter's bootstrap framework. I have a navbar that functions like a File Menu bar with File/Edit/Help/etc.
I like the fact that you need to click to make the dropdown appear, however how can I make it where it will dropdown the Edit menu for instance when moving from the File menu (after it is clicked and dropped down).
An example of this is going to google docs, clicking one menu and then moving to another menu item it will dropdown the new hovered menu
My solution: for your <ul> element make two classes.
One for example doc-menu other normal-menu.
On menu item click: your <li> should get class="active" and <ul class="doc-menu".
Then show up inner <ul><li>....</ul> inside <li class="active"> and keep it up even if not hovered. On other doc-menu item hover you change the active class to other <li> element. This can be done by listening to mouseover using javascript. When clicked on background or inner <ul><li>....</ul> change <ul class="doc-menu"> to <ul class="normal-menu>
Related
All Bootstrap Dropdown menu examples show the items having an link like:
<li>a</li>
How can I make a Bootstrap dropdown menu where choosing an item triggers a javascript method?
(If it makes a difference, the menu items will also be added to the menu using javascript/jquery initially)
Is this just a matter of adding a click function to each <li>? Or does Bootstrap provide special handling for its dropdown items?
If I add a click function, do I still need each item to also have the <a href="#"> tag around the text?
Looks like the answer is:
Bootstrap does not supply any special handling for clicks on its
dropdown menu items; and
I could add a click function to each item in the list; or
I could use event delegation to add the click function to the list
itself, and it will be triggered on each child's click
Thanks to #Pevara and #spaceman for getting me rolling.
I'm trying to create a form that uses accordions for organization using Foundation 6. I want to add inputs and buttons to the accordion title. Normally when the accordion title is clicked it, it toggles its content by sliding. I want to disable this effect, so that if I click the button in the title the content won't toggle, since it's really annoying if it expands and contracts every time I click the button.
I have something like:
$body.on('click', '.button_on_title', function (event) {
// do stuff
});
I've tried event.preventDefault() and event.stopPropagation(), and they have no effect. It seems like Foundation 6 is somehow overriding the event stack?
Edit:
To clarify, I want to prevent the accordion from opening and closing when clicked, not just remove the sliding animation.
You just need to set the slide speed to 0 to disable the animation. One easy way to set the slide speed is through the data-slide-speed data attribute.
Here is the example from the docs with this attribute added:
<ul class="accordion" data-accordion data-slide-speed="0">
<li class="accordion-item is-active">
<a class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>
I would start in the open state, due to using the `is-active` state class.
</div>
</li>
<!-- ... -->
</ul>
When I hover over the dropdowns on:
Website with Issue
They do not open unless they are clicked. The website is built using Foundation5 (FoundationPress) and I am not able to figure out how to disable this behaviour in favour of having the dropdown appear on hover.
Thanks
Try using the hoverable dropdown options on the menu accessed through the data-options attribute. Similar convention with some of your content below as an example:
Course Locations
<ul id="hover1" class="f-dropdown" data-dropdown-content>
<li>Brampton</li>
<li>Burlington</li>
<li>Hampton</li>
<li>etc.</li>
</ul>
You can set the hover_timout in milliseconds to delay closing after removing your mouse from the area.
Docs for this here: http://foundation.zurb.com/docs/components/dropdown.html
I have a sidebar that looks somewhat like this site's sidebar: http://scotch.io/
If you hover over tutorials it expands the element with a menu of items to choose from.
What I am trying to do is get it so if I click one of those elements it shows a nice popover instead of expanding the entire sidebar. Something that could ease in, but if it just shows up that's fine too.
I looked at the bootstrap 3 popover but it seems to only work with buttons, and what I am using is this for one of my list elements:
<li class="sidebar-available-rooms" data-container="body">
<a class="fa fa-comments" id="sidebar-icon-comments" data-toggle="popover" data-placement="right"></a>
<span class="sidebar-text" id="sidebar-available-rooms-text">Available Rooms</span>
</li>
I would to be able to click it and in the simplest form, get a popover to the right of the element.
Thanks
Use a little piece of jQuery and it also works on links.
$("[data-toggle=popover]").popover({html:true})
Check this fiddle: http://jsfiddle.net/HsZ9q/5/
I am using Twitter Bootstrap built in dropdowns, and they show on hover. The user should know they are available when the arrow/eject icons shows up. I want these dropdowns only available and able to hover once the user clicks/chooses a row from the table. The fiddle I have below shows them permanently, which isn't what I need here. The arrows show as they should, but I can't figure out how to disable/enable the dropdown hovers. Any ideas? Thanks in advance.
jQuery
$('table tr').click(function(){
//enable dropdowns after row click
$('.dropdown-menu').show();
//now show hover icons for dropdowns
$('.glyphicon-eject').show();
});
http://jsfiddle.net/YSmK7/6/
So if you take away the dropdown class initially that will stop the dropdowns. If you add the dropdown class after the click then the drop downs will be activated.
Everywhere where you have <li class="dropdown"> change it to <li class="beforedropdown">
HTML
<li class="beforedropdown"> <a href="#" class="dropdown-toggle"
jQuery
$('table tr').click(function(){
//now show hover icons for dropdowns
$('.glyphicon-eject').show();
$('.beforedropdown').addClass('dropdown');
});
http://jsfiddle.net/YSmK7/8/
Update
And if you don't want to be able to click on the links to bring up the drop down menu either you need to do the following.
<a href="#" class="dropdown-toggle" data-toggle="">
Remove the value out of all the data-toggles on all your .dropdown-toggle links.
http://jsfiddle.net/YSmK7/9/
Try using .toggle() method instead of .show()
Or bind a .hide() to the event that should remove the menus, such as mouseout().