I have a page with multiple dropdowns like this:
<div class="btn-group">
<button class="btn">Please Select From List</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Item I</a></li>
<li><a tabindex="-1" href="#">Item II</a></li>
<li><a tabindex="-1" href="#">Item III</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Other</a></li>
</ul>
</div>
I want to change the button text to selected element value. I've found this thread: How to Display Selected Item in Bootstrap Button Dropdown Title, which explains how to retrieve the text/value of selected item and change the text of the button, but there's a problem when there's more drop down menus on the page, the below script changes labels for all buttons present on the page:
$(function(){
$(".dropdown-menu li a").click(function(){
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});
});
How to modify it so that it would only change the corresponding dropdown menu button?
As a side question: is there really no simple way of having <select> like behavior with dropdown menus out of the box in bootstrap?
You need to add specificity to your jQuery selector. Currently, you're selecting all elements with a .btn class that are the first child of their parent. What you want to do instead is get the current element's parent .btn-group then find the .btn:first-child inside of that. You can do that as follows:
$(function(){
$(".dropdown-menu li a").click(function(){
$(this).closest('.btn-group').find(".btn:first-child").text($(this).text());
$(this).closest('.btn-group').find(".btn:first-child").val($(this).text());
});
});
One of many potential solutions, transverse up the DOM to find the group it's in, and then target the button within the group.
$(function(){
$(".dropdown-menu li a").click(function(){
var target = $(this).closest('.btn-group').find('.btn:first-child')
target.text($(this).text());
target.val($(this).text());
});
});
Related
I have the following CSS code that when the .dashboard-actions class is clicked opens up a dropdown menu. Once clicked the 2nd div in the tree .dropdown changes to class="dropdown open" (indicates the dropdown menu is open/visible), once the user clicks off the open class is removed and the dropdown menu disappears (as expected).
I want to be able using some form of javascript (AngularJS 1.3 or jQuery) be able to do some logic to recognise when the dropdown is 'open' - if so, if a user clicks anywhere else on the screen, for instance the href below the div it will open 'close' the dropdown by removing the 'open' class rather than doing that default action, how could I best approach this?
<div class="dashboard-actions ellipsis">
<div class="dropdown" stop-event>
<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>
<ul class="dropdown-menu" aria-labelledby="dropdown1">
<div>
<div ng-include src="'templates/menu.html'" ng-repeat="x in item.x"></div>
</div>
</ul>
</div>
</div>
<div class="interaction-body">
<a href="https://somecdn.com/t51.2885-15/aaa.jpg" ng-href="https://somecdn.com/t51.2885-15/aaa.jpg" target="_blank" stop-event="">
<img ng-src="https://somecdn.com/t51.2885-15/aaa.jpg" src="https://somecdn.com/t51.2885-15/aaa.jpg"></a>
</div>
Hope you are searching for this
//Some code
$('.dropdown-menu').each({
if($(this).hasClass('open')){
// Do something
// $(this).removeClass('open');
}
});
//More code
I have a Bootstrap Button group that used a split button dropdown. What I want to do is when you select an option from the dropdown, the text, href and icon will change on the button. I can get the text to change just fine, but I'm getting stuck with changing the HREF attribute and the icon.
HTML
<div class="btn-group">
<span class="standard">Search</span><span class="mobile"><i class="fa fa-search"></i></span>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Search</li>
<li>Song Search</li>
<li>Advanced Search</li>
</ul>
</div>
JAVASCRIPT
$(".dropdown-menu li a").click(function(){
$(this).parents(".btn-group").find('a.btn').html($(this).text());
$(this).parents(".btn-group").find('a.btn').attr('href') = $(this).data('value');
$(this).parents(".btn-group").find('a.btn i').removeClass();
$(this).parents(".btn-group").find('a.btn i').addClass($(this).data('icon'));
});
I'm want to use the data-values, because in the long run, this dropdown will be dynamic, the list will depend on which page it appears on.
ok... apparently everything is correct EXCEPT the href portion.
instead of
$(this).parents(".btn-group").find('a.btn').attr('href') = $(this).data('value');
use
$(this).parents(".btn-group").find('a.btn').attr('href', $(this).data('value'));
I have a couple console.logs displaying the results of the change, and it's all working perfectly.
HREF
Your href doesn't change because
.attr('href') = $(this).data('value');
Is not the way to change an attribute. It should be:
.attr('href', $(this).data('value'));
ICON
The icon change doesn't work because
$(this).parents(".btn-group").find('a.btn').html($(this).text());
Removes the entire content from the a.btn, which includes the <span> which contains the <i> that contains the icon. Basically, this line also removes the <span class="mobile"><i class="fa fa-search"></i></span>, so there is nothing left to removeClass or appendClass to :-D!
Here is your working code: https://jsfiddle.net/DTcHh/16689/
Happy coding!
Try this code.
$(".dropdown-menu li a").on("click",function(){
var icon = $(this).attr('data-icon');
var html = $(this).html();
$(this).parents(".btn-group").find('a.btn').html('<i class="'+icon+'"></i>'+html);
$(this).parents(".btn-group").find('a.btn').attr('href', $(this).attr('data-value'));
});
You can do something like:
document.getElementById('elementid').className = 'classname'
or a string replace:
document.getElementById('elementid').className
= document.getElementById('elementid').className.replace(your replace code)
This is straight from the bootstrap site's page. In this certain code i would like to know how to change the color of the text from blue to black. It is by default blue at the moment.
Site for reference and a live example: http://getbootstrap.com/components/
Code: The section the code is under is called "Using Drop downs" Tabs with drop downs.
<ul class="nav nav-tabs" role="tablist">
...
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>
...
</ul>
Regards
Bootstrap dropdown buttons are like other bootstrap buttons. A default bootstrap button has the btn class.
You can change their themes by adding classes such as btn-primary, btn-info, btn-danger, etc.
For more examples of this check out http://getbootstrap.com/components/#btn-dropdowns.
use id on li and apply style in this way: example
<li id ="abc"</li>
Custom Style
#abc .dropdown-toggle {
color: black;
}
so it will take only for those drop-down-toggle class which has id "abc" and remove the !important from style
you can apply custom style on class "dropdown-toggle" in your css file
.dropdown-toggle {
color: black !important;
}
So i'm trying to make a jquery dropdown that adds and removes classes. It does work, but only once. If i try the dropdown again, it simply drops down and slides up right after. It's suppose to drop down after clicking a button and slide up after another click.
$(document).ready(function() {
//dropdown menu function
$(".menuDrop").click(function(){
$(".nav").slideDown("slow");
$(".menuDrop").addClass("btn-hover");
$(".menuDrop").click(function(){
$(".nav").slideUp("slow");
$(".menuDrop").removeClass("btn-hover");
});
});
});
The "btn-hover" class is meant to add the same css as it where in a hover state once the button is clicked.
--edit--
<div class="menu">
<div class="col-lg-12">
<button type="button" class="menuDrop btn btn-default btn-lg">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<ul class="nav">
<li><a class="link" href="#">home</a></li>
<hr>
<li>portfolio</li>
</ul>
</div>
</div>
Using slideToggle and toggleClass should help you achieve this, and with less code:
//dropdown menu function
$(".menuDrop").click(function(){
$(".nav").slideToggle("slow");
$(".menuDrop").toggleClass("btn-hover");
});
Here's a fiddle: http://jsfiddle.net/scesR/
Hope that helps!
Bind it using change event, instead of click event.
$(".menuDrop").change(function(){
$(".nav").slideDown("slow");
$(".menuDrop").addClass("btn-hover");
$(".menuDrop").click(function(){
$(".nav").slideUp("slow");
$(".menuDrop").removeClass("btn-hover");
});
});
I have the following problem: I have an outer div and inner div that i need to change to match dynamically the sizing of my device properties. as you can see I have a click function that pulls the width and height in the title, but need to apply the sizing to the inner div, outer div and iframe at the same time as well as update the background image to match. I have tried some onclick functions for divs but no luck... The Fiddle has the CSS for the basic default view, just need to figure out how to apply on select or click of my select.
http://jsfiddle.net/jZJc3/
`<ul class="nav nav-pills left">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="device">Device</a>
<ul class="dropdown-menu" id="devices">
<li data-deviceid=1>iPad 768x1024h</li>
<li data-deviceid=2>iPhone 5 320x568h</li>
<li data-deviceid=3>iPhone 3-4 320x480h</li>
<li data-deviceid=4>Tablet 600x1024h</li>
</ul>
</li>
</ul>
<div id="iphone"><div id="mobilecontent" class="mobilecontent">
<iframe id="ui_frame" src="http://voicefusion.com/iframe.htm" style="width:320px; height:480px;" class="mobilecontent" frameborder="0"></iframe>
</div>
</div>`
http://jsfiddle.net/W37nF/1/
Using hide class in CSS I was able to do what I needed....
$('select').on('change', function(){
var val = $(this).val();
$('div').hide();
$('.' + val).css('display','block'); }).change();