Enable dropdown hovers only after click? - javascript

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().

Related

Set class on page load for filterable grid

In a wordpress site I am using a filterable grid that shows 2 categories with a sandbox effect. The default functionality is to show all categories with no way to display a defined category on page load.
Until the menu item is clicked the class is empty. When then category menu item is clicked the class becomes "selected" like this :
<a data-option-value=".cat3" class="selected" href="#"><span>Portfolio 1</span><span class="num">10</span></a>
So, I tried to enable this on page load using jquery like this:
jQuery(document).ready(function($) {
$("#filter-by li:first a").addClass("selected");
});
When the page loads, the tab is now selected, but the grid still displays all of the items from both categories. The desired outcome would be to only show the items from the category that is selected.
Here is the code from the filterable grid on page load which displays all items (both categories).
<ul data-option-key="filter" class="option-set clearfix" id="filter-by"><li><a data-option-value=".cat3" class="" href="#"><span>Portfolio 1</span><span class="num">10</span></a></li><li><a data-option-value=".cat4" class="" href="#"><span>Portfolio 2</span><span class="num">10</span></a></li></ul>
How can I make it so that each time the page loads, Portfolio 1 is the default category shown?
Try triggering the click event:
jQuery(document).ready(function($) {
$("#filter-by li:first a").addClass("selected").click();
});
when you wrote:
Until the menu item is clicked the class is empty. When then category menu item is clicked the class becomes "selected"
I assume this also triggers a function on click, not just adding the class
EDIT
if you need to query for the <a> tag using an attribute like data-option-value, example:
$('[data-option-value=".cat3"]').addClass("selected").click()
The class="selected" is enabled once clicked. With that in mind I modified the original attempt. Here was the solution. You definitely helped me figure this out. Thanks!
jQuery( window ).load(function() {
jQuery('#filter-by li:first a').click();
});

Call javascript after choosing from Bootstrap Dropdown

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.

Foundation5 Stop Dropdown from Being clickable

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

Bootstrap, CSS, JS - Bootstrap file menubar hover after click

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>

How to make on click an label combo box should appear

On click an label an combo box should appear...
please check http://guruji.com/en/local.html
on clicking near mycity the label changes into combobox (dropdown list)..how to do it.
You can use the jEditable plugin for jQuery to accomplish this.
simple. you need to have two span element and play with js, css
<span style='display:block' id="click me">
<a href="#" onclick="javascript:document.getElementbyId('dropdownspan').style.display=hidden" select me</span><span style='display:hidden' id="dropdownspan">
<select name="test"><option value="1">one</option></select>
</span>
Clicking that link simply hides the original link and makes the "cities" dropdown visible. The dropdown is already on the page, you just can't see it.

Categories