I'm using Bootstrap 3 dropdown menu in my markup. But other than the default behaviour, it should pop out if I'm hovering the elements. So I created a small script:
jQ('.dropdown').hover(function() {
jQ(this).find('.dropdown-menu').stop(true, true).delay(50).fadeIn();
}, function() {
jQ(this).find('.dropdown-menu').stop(true, true).delay(50).fadeOut();
});
which is working fine. But for some reason the Bootstrap dropdown prevents redirecting to another page when I want to have the first item (which triggers the hover) as a link. I'm clicking on the link and nothing happens, it only appends a class .open. I only can open the link if I do a right click and select open destination in new tab. How can I fix this?
Thanks
Simply remove data-toggle="dropdown" attribute from the button (I suppose it's anchor tag):
<a class="btn btn-default dropdown-toggle" href="http://somewhere" target="_blank" id="dropdownMenu1" >
Dropdown
<span class="caret"></span>
</a>
JSFiddle
data-toggle attribute is an indicator for bootstrap, that an event should be bind to the element, depends on the attribute value:
data-toggle="dropdown"
data-toggle="tooltip"
data-toggle="modal"
data-toggle="popover"
data-toggle="tab"
data-toggle="collapse"
data-toggle="button"
NOTE:
You may have a problem on mobile devices with the "click open link" scenario.
Related
I have a Bootstrap dropdown menu inside a container that triggers an event--the way I want it to work is, if you click the dropdown button, the menu items are displayed as normal. If you click anywhere else within the container, the parent event should be triggered (in this case displaying a Javascript alert). Instead, the event is being triggered even when I click the dropdown button.
Is there some way I can get the dropdown click event to "override" its parent event, so that if it's clicked its own evnet will be triggered the parent event won't?
<div class='main-container' onClick='alert("a thing was clicked!")'>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action 1</a>
<a class="dropdown-item" href="#">Action 2</a>
<a class="dropdown-item" href="#">Action 3</a>
</div>
</div>
</div>
http://jsfiddle.net/0fpbcy2L/12/
I'd appreciate any help on this. I have this DataTable with the last column being a button that spans various options such as Edit/Delete/View. Upon clicking that, it should delete the entire row. However, I'm not able to get the currently clicked element.
Here's my code
$('.dropdown-menu a').click(function(e){
console.log($(this).data('value'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
<span class="dropdown">
<button id="btnSearchDrop_{{ index }}" type="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="true"
class="btn btn-primary dropdown-toggle dropdown-menu-right"><i
class="ft-settings"></i></button>
<span id='selected' aria-labelledby=btnSearchDrop_{{ index }}" class="dropdown-menu mt-1 dropdown-menu-right">
<i class="ft-edit-2"></i> Edit
<i class="ft-trash-2"></i> Delete
<i class="ft-plus-circle primary"></i> View
</span>
</span>
</td>
This should log the id of tag but it doesn't.
I am not sure which version of jquery you are using but .data() function works in versions 1.4.3 and above. I tested your code here with jquery-3.3.1, which worked fine. Another way to get what you want would be to use .attr() function instead of .data() like:
alert($(this).attr('data-value'));
I am using the Bootstrap library and when I click the dropdown-toggle class this will show/hide the dropdown as expected (hence why its called toggle).
If I click the the image at the bottom of the HTML snippet this will activate the ng-click angular directive found in the javascript code.
This code simply does a check to see if the dropdown menu is displayed by checking to see if the .dropdown class has a class of 'open'. If not, then it will open the url passed in a new window, otherwise it will remove the 'open' class which hides the dropdown menu.
The issue I have is if I try to click the same .dropdown class to activate the dropdown again it only appears after I click two more times??
I'm obviously not doing the correct way to destroy the dropdown by removing the 'open' class can anyone suggest what I am doing wrong? If i don't click the image (and therefore not activate the ng-click this all works fine), so the issue is related to the doInteractionBodyEvent() and somehow i'm not 'destroying' the dropdown correctly.
// HTML
<div class="dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="material-icons">more_vert</span>
</div>
<div>
<div ng-if="interaction.media[0].image" class="image">
<a ng-click="doInteractionBodyEvent(interaction.media[0].href)">
<img ng-src="{{interaction.media[0].image.replace('amp;','')}}" />
</a>
</div>
</div>
// Javascript Angular Controller
$scope.doInteractionBodyEvent = function(url) {
if (angular.element('.dropdown').hasClass('open')) {
angular.element('.dropdown').removeClass('open');
} else {
$window.open(url, '_blank');
}
}
Remove the data-toggle="dropdown" from the HTML
<div class="dropdown-toggle" type="button" id="dropdown1" aria-haspopup="true" aria-expanded="true">
<span class="material-icons">more_vert</span>
</div>
I'm currently working on an ordering system that allows the user to choose a specified vendor from a dropdown-menu and comfirm their selection by clicking a seperate button.
A perfect example would be the Fallout 4 store page, where the "Order"-button is disabled until an item has actually been selected from the dropdown menu. (In my case there is only one dropdown menu).
I've got the following HTML:
<div class="col-md-12">
<div class="productRow">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-5">
<div class="dropdownPositionLeft">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Choose your platform!
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<!-- List of vendors -->
<li><a tabindex="-1">Item I</a></li>
<li><a tabindex="-1">Item II</a></li>
<li><a tabindex="-1">Item III</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-5">
<div class="dropdownPositionRight">
<!-- This is the button that confirms the selection and takes the user to the specified vendor from the dropdown menu -->
Order now!
</div>
</div>
</div>
</div>
And the following javascript that replaces the label of the dropdown-button:
$(".dropdown-menu li a").click(function(){
$(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
$(this).parents(".dropdown").find('.btn').val($(this).data('value'));}
I want the "Ordner now"-button to be able to receive an external link to a vendor based on the dropdown menu. Meaning I would need to pass a variable to the button from the dropdown menu - So far I haven't managed to succeed in this.
I'm very new to both bootstrap and javascript and was hoping someone here might point me in the right direction as to how I should handle this.
I'm assuming I should be able to store an href-value with the items in the dropdown-menu and pass them on to the order-button when selected, but I've had no luck in trying to figure this out while at the same time not pointing the player directly to the vendor through the dropwdown-menu.
I've also experimented with forms without the desired effect. Obviously I'm doing something wrong, but not sure as to what it is.
Check out the information for using bootstrap buttons here: http://v4-alpha.getbootstrap.com/components/buttons/
I usually take the button and then wrap it in the tag like this:
<button type="button" class="btn btn-primary" disabled>Primary</button>
Notice how I made the button disabled by default, then you can use javascript/jquery to remove the disabled attribute when a certain action is performed on the page.
As far as setting it based on a different box being selected, you can also set the href="" attribute using jquery if you want it to live update without reloading the page, or if you're not worried about the page needing to be reloaded, you could use inside the href quotes.
Any ideas how to fix? This applies to the "Animations" and "Education" links. Click these should open a new page, but bootstrap.min just adds the .open class.
HTML
<li class="dropdown cases videos">
<a class="dropdown-toggle" href="videos.html" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="main-nav">Animations</a>
<ul class="dropdown-menu cases-body videos-drop">
<p style="padding-top:15px;" class="category-cases">Building a Park Out of Waste</p>
<p class="category-cases">Designing for Active Living</li>
<p class="category-cases">Designing Neighborhoods for People and Wildlife</p>
<p class="category-cases">The Edible City</li>
<p class="category-cases">Energy Efficient Home Landscapes</p>
<p class="category-cases">From Industrial Wasteland to Community Park</p>
<p class="category-cases">Infrastructure for All</p>
<p class="category-cases">Leveraging the Landscape to Manage Water</p>
<p class="category-cases">Revitalizing Communities with Parks</p>
<p class="category-cases">Urban Forests = Cleaner, Cooler Air</p>
</ul>
</li>
<li class="dropdown cases educations">
<a class="dropdown-toggle" href="education.html" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="main-nav">Education</a>
<ul style="padding-right:0;" class="dropdown-menu cases-body educations-drop">
<p style="padding-top:15px; " class="category-cases">Brownfield Restoration / Ecosystem Rehabilitation</p>
<p class="category-cases">Design for Active Living</p>
<p class="category-cases">Designing for Biodiversity</p>
<p class="category-cases">Energy Efficiency</p>
<p class="category-cases">Green Infrastructure</p>
<p class="category-cases">Incorporating Sustainable Materials</p>
<p class="category-cases">Transforming Transportation Infrastructure</p>
<p class="category-cases">Urban Agriculture</p>
<p class="category-cases">Urban Forestry</p>
<p class="category-cases">Urban Parks</p>
</ul>
</li>
I tried this script but it didnt work.
$('.dropdown .dropdown-toggle a').on('click', function(e) {
e.preventDefault();
window.location.href = $(this).attr('href');
})
Any ideas?
Site is here
Your selector is incorrect
You have:
$('.dropdown .dropdown-toggle a')
which is looking for a tags inside of .dropdown-toggle class elements, but it is actually your a tag that has the class.
You want:
$('.dropdown a.dropdown-toggle')
to select a elements with the .dropdown-toggle class
Just remove "data-toggle="dropdown"", But as say gwar9 in the comment that will prevent dropdown opening on mobile. So if you want that work for both you need detect if the device is mobile or not if it is not you erase the data toggle attribute.
I've created a jsfiddle to demonstrate how you could meet your requirements.
http://jsfiddle.net/DarrenS/pcav6v1g/
As you explained, you have a UX requirement to allow the following;
On Hover of the main menu, expand the menu to show sub menu items.
On Click of the main menu, follow the main menu link.
I explained that this is not default Bootstrap behaviour and the limitation of hover on touch devices.
To implement this solution I am using Modernizr to detect touch and then adding some custom jQuery to attach hover() and click() events to the menu.
I've implemented it this way because I still wanted to allow larger touch devices (such as a tablet) to access the sub menu. Which they wouldn't be able to do if you simply added a click event handler to the main menu.
//Non-Touch devices
//Hover expands menu (non default Bootstrap behaviour)
$('html.no-touch div.btn-group').hover(function(e) {
$(this).toggleClass('open');
});
//Non-Touch devices
//Click follows main link (non default Bootstrap behaviour)
$('html.no-touch div.btn-group a.dropdown-toggle').on('click', function(e) {
e.preventDefault();
window.location.href = $(this).attr('href');
})
//Touch devices
//Touch (click) expands menu (default Bootstrap behaviour)
//Touch devices
//Allow touch (click) to follows main link when menu open (non default Bootstrap behaviour)
$('html.touch div.btn-group.open a.dropdown-toggle').on('click', function(e) {
e.preventDefault();
window.location.href = $(this).attr('href');
})
.dropdown-menu{
margin-top: 0;
}
<div class="btn-group">
<a href="/page.html" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Google <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Facebook</li>
<li>Twitter</li>
<li>LinkedIn</li>
</ul>
</div>
I encountered this issue too, but realised that changing the behaviour would make the site harder to use for mobile users (who don't have a mouse to hover over controls). So, instead I inserted an "Overview" entry to the drop-down menu that links to the parent page. This makes the parent page clickable on all device types.
Details here: https://keasigmadelta.co.nz/blog/the-bootstrap-drop-down-menu-solution