I'm trying to put a panel with a few form elements and a dropdown category selection into a collapsible navbar in bootstrap. Currently I have
<div class="collapse navbar-collapse" style="z-index:5;">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<img class="headerToolbarIcon2" src="img/configuration.png"> Configuration<b class="caret"></b>
<form class="dropdown-menu" style="width:425%; padding-top:1px;">
<li>
<div class="container" id="configurationPanel" style="height:140px;">
<div class="panel-body panel-default" style="float:left;">
<p><strong> Article <br/> Properties:</strong></p>
</div>
<div class="panel-body panel-default" style="float:left; margin-left:20px;" >
<p style="border-bottom:1px solid black;"><strong>Category</strong></p>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data>
Personal <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Weather</li>
<li>Military</li>
<li>International</li>
<li class="divider"></li>
<li>Uncategorized</li>
</ul>
</div>
</div>
</div>
</li>
</form>
</li>
</ul>
</div>
</div>
I stopped event propagation on the panel, and the radio buttons work great, but whenever I click the "Personal" button to select from categories, the panel shuts. I'm sure it has something to do with having the data target of the parent dropdown, but I'm not sure how to fix that.
Bootstrap 3.0.3 can't show 2 dropdown-menu class with data-toggle="dropdown" because first click show class="dropdown-menu" and second click hide first class="dropdown-menu" and show the second . this your problem .
try this solution :
<div class="collapse navbar-collapse" style="z-index:5;">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a id="dp1" class="dropdown-toggle" data-toggle="dropdown" href="#" ><img class="headerToolbarIcon2" src="vbnet.PNG" width="20px" height="20px"> Configuration<b class="caret"></b></a>
<form class="dropdown-menu" style="width:425%; padding-top:1px;">
<li>
<div class="container" id="configurationPanel" style="height:140px;">
<div class="panel-body panel-default" style="float:left;">
<p><strong> Article <br/> Properties:</strong></p>
</div>
<div class="panel-body panel-default" style="float:left; margin-left:20px;" >
<p style="border-bottom:1px solid black;"><strong>Category</strong></p>
<div class="btn-group">
<button id="dp2" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Personal <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Weather</li>
<li>Military</li>
<li>International</li>
<li class="divider"></li>
<li>Uncategorized</li>
</ul>
</div>
</div>
</div>
</li>
</form>
</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="bootstrap.min.js"></script>
<script>
$(function(){
$("#dp2").click(function(){
$("#dp1").attr("data-toggle","");
$("#dp1").one("click",function(){
$("#dp1").attr("data-toggle","dropdown");
});
});
});
</script>
Related
<div class="input-group">
<div class="input-group-btn addon-button" toggle-dropdown>
<button type="button" class="button-m button-default dropdown-toggle http-button copyInput" data-toggle="dropdown" style="border-right:none !important;">
<span id="addresstype" class="custom-input">Http://</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-m dropdown-menu-m-small custom-dropdown-withInput w-100 p-0">
<li id="Http://">
Http://
</li>
<li id="Https://">
Https://
</li>
</ul>
</div>
</div>
What javascript code or directive to be used?
I'm using Bootstrap 3.7 and I have two buttons inside a panel-body, but whenever I click either of the buttons, both of the buttons opens their dropdown menus.
<div class="static">
<div class ="container">
<div class="panel panel-default">
<div class="panel-heading">
<ul class="nav nav-pills nav-justified" role="tablist">
<li class="active">Booking</li>
<li>Flight Times</li>
<li>My Trips</li>
</ul>
</div>
<div class="panel-body">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
data-toggle="dropdown">From
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>London Stanstead Airport (<strong>STN</strong>)</li>
</ul>
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2"
data-toggle="dropdown">To
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Manchester (<strong>MAN</strong>)</li>
<li>Glasgow (<strong>GLA</strong>)</li>
<li>Dublin (<strong>DUB</strong>)</li>
<li>Paris (<strong>CDG</strong>)</li>
<li>Madrid (<strong>MAD</strong>)</li>
<li>Brussels (<strong>BRU</strong>)</li>
</ul>
</div>
</div>
</div>
</div>
Is there a way to fix this?
You will have to wrap each button dropdown into a .btn-group itself, like this :
https://www.bootply.com/ErHpvikz6x
You can check the details in Bootstrap documentation : https://getbootstrap.com/docs/3.3/components/
I'm having a problem with the following piece of code.
<header style="position: fixed; z-index: 999999; width: 100%;">
<nav class="navbar navbar-default navbar-fixed-top" style=" position: relative; margin-bottom:0;">
<div class="container">
<div class="row">
<div class=" col-xs-12 col-sm-3">
<a class="navbar-company" href="http://www.premiersoftware.co.uk"> </a>
</div>
<div class="col-xs-12 col-sm-9 nav-small">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-product" aria-expanded="false" aria-controls="navbar">
<span class="caret"></span>
</button>
</div>
<div id="navbar-product" class="navbar-collapse collapse mainlist">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Products<span class="caret"></span>
<ul class="dropdown-menu">
<li>Salonlite</li>
<li>Premier Salon</li>
<li>Premier Spa</li>
<li>Core by Premier Software</li>
<li>College by Premier Software</li>
</ul>
</li>
<!--<li>
About Us
</li>-->
<li>
Careers
</li>
<li>
Partners
</li>
<li>
Support
</li>
<li class="dropdown">
News<span class="caret"></span>
<ul class="dropdown-menu">
<li>Premier News</li>
<li>Premier Blog</li>
</ul>
</li>
<li class="dropdown" id="menuLogin">
<a class="dropdown-toggle grey" href="javascript:;" data-toggle="dropdown" id="navLogin">Login<span class="caret"></span></a>
<div class="dropdown-menu">
<h4 class="logintxt">Client Login</h4>
<p class="logintxt">Premier Softwares client login area allows you to manage your online premier web booking.</p>
<form class="form" id="dologin" action="../Web-Portal/doLogin.php" method="post">
<input name="txtSerial" id="txtSerial" class="form-control" type="text" placeholder="Serial number">
<input name="txtPostCode" id="txtPostCode" class="form-control" type="text" placeholder="Postcode">
<button type="submit" id="login-submit" class="btn">Login</button>
</form>
</div>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
</nav>
<nav class="navbar navbar-default product-nav-bar">
<div class="container">
<div class="row">
<div class="col-md-push-3 col-sm-push-3 col-lg-push-2 remove-padding-and-center col-xs-3 col-lg-3">
<a class="call" href="tel:01543466580">
<i class="fa fa-phone" aria-hidden="true"></i>
<div>01543 4666580</div>
</a>
</div>
<div class=" col-xs-6 col-sm-3 col-lg-2 col-md-pull-3 col-sm-pull-3 col-lg-pull-3">
<a class="navbar-brand" href="#"> </a>
</div>
<div class="col-xs-12 col-sm-6 col-lg-5 col-lg-push-2 nav-small">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="book-consultation-nav">
<a href="#contact-us" class="scroll-to" >Book a FREE Consultation</a>
</li>
<li class="nav-small-contact-us">
<a class="scroll-to" href="#contact-details">Contact Us</a>
</li>
<li>
<a class="scroll-to" href="#marketing">Overview</a>
</li>
<li>
<a class="scroll-to" href="#features">Key Features</a>
</li>
<li>
<a class="scroll-to" href="#additional-reasons">In-Depth</a>
</li>
<li class="nav-small-brochure">
<a class="scroll-to" href="#brochure">View Core Brochure</a>
</li>
<li>
<a class="scroll-to" href="#casestudies">Testimonials</a>
</li>
<li>
<a class="scroll-to" href="#contact-details">Contact Us</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="hidden-xs col-lg-pull-5 col-sm-12 col-lg-2">
<a class="btn btn-primary book-consultation scroll-to" href="#contact-us" role="button">Book a FREE Consultation</a>
</div>
</div>
</div>
</nav>
</header>
<script>
$(".scroll-to").on('click', function(event)
{
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top -153
}, 800, function(){
window.location.hash = hash;
});
}
});
</script>
I'm using bootstrap and have two collapsible navigation on top of each other. When I select on of the options in the lower navigation in smaller screens (ie mobile screens), the top navigation opens.
To see this in action please visit:
http://www.premiersoftware.co.uk/corebypremier/index9.php
Really I would just like the lower navigation animate the page without the top one opening.
Any suggestions would really be appreciated.
Thanks
Dan
I've built a nav menu using expand and collapse in and not using a dropdown. My problem is that I can't get the div to toggle when I click a menu link. I've tried using js to toggle it closed when a link is clicked, but then I can't re-open the menu again.
Here's my html:
<header style="padding:0px 0%;">
<nav class="navbar navbar-inverse navbar-static-top" style="margin:0px 0px;">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header hidden-md hidden-lg">
<button type="button" class="navbar-toggle collapsed hidden-sm hidden-xs" data-toggle="collapse" data-target="#myNavmenu" aria-expanded="true" style="color:#fff;display:inline-block;">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right inverse hidden-xs hidden-sm" style="margin:0px 0px; font-size:0.8em;">
<li style="float:left !important"><img src="/products/greg2/images/avatierwatermark.png" style="height:34px; width:auto;"></li>
<li>Customers</li>
<li>Solutions</li>
<li>Products</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<div class="collapse" id="expandmenu">
<div class="well">
<div class="container">
<button type="button" class="navbar-toggle2 pull-right" data-toggle="collapse" href="#expandmenu" aria-expanded="false" aria-controls="collapseExample" style="float:right; padding:16px 5px 17px 0px; color:#333;"><p class="explore" style="font-size:0.8em; color:#333;">Close </p>
<span class="glyphicon glyphicon-remove" aria-hidden="true" style="font-size:1.1em;"></span>
</button>
<div class="row">
<div class="col-sm-12">
</div>
</div>
<div class="row">
<ul class="expand txt-ctr" style="padding-left:0px;">
<li class="blue"><div style="background-position:0px 0px;"></div><span>Benefits</span></li>
<li class="blue"><div style="background-position:-165px 0px;"></div><span>Overview</span></li>
<li class="blue"><div style="background-position:-330px 0px;"></div><span>Features</span></li>
<li class="blue"><div style="background-position:-495px 0px;"></div><span>Reports</span></li>
<li class="blue"><div style="background-position:-660px 0px;"></div><span>Security</span></li>
<li class="blue"><div style="background-position:-825px 0px;"></div><span>Help Desk</span></li>
<li class="blue"><div style="background-position:-990px 0px;"></div><span>App Support</span></li>
<li class="blue"><div style="background-position:-1155px 0px;"></div><span>Architecture</span></li>
<li class="blue"><div style="background-position:-1315px 0px;"></div><span>Languages</span></li>
<li class="blue"><div style="background-position:-1490px 0px;"></div><span>Ticketing</span></li>
<li class="blue"><div style="background-position:-1665px 0px;"></div><span>Testimonials</span></li>
<li class="blue"><div style="background-position:-1825px 0px;"></div><span>Demo</span></li>
<li class="blue"><div style="background-position:-1998px 0px;"></div><span>Resources</span></li>
<li class="blue"><div style="background-position:-2165px 0px;"></div><span>True Cost</span></li>
</ul>
</div>
</div>
</div>
</div>
And here's the js I've tried:
$('.collapse a').click(function(){
$("#expandmenu").toggle();
});
Thank you for your help!
Try this, it worked for me:
$('#expandmenu a').click(function(){
$("#expandmenu button").click();
});
I am using jquery isotope to filter some data and i want to use it at 2-3 places on same page.
Jquery code
var $container = $('.filterable');
$container.each(function() {
$(this).isotope({
itemSelector: '.item',
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
}); //each
//FILTER
$('.filters li a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
$('[data-toggle="dropdown"]').parent().removeClass('open');
return false;
});
html
<div class="row filters">
<div class="col-md-6">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Colors <span class="caret"></span> </button>
<ul class="dropdown-menu" role="menu">
<li>Blue</li>
<li>Red</li>
<li class="divider"></li>
<li>All Fabrics</li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Type <span class="caret"></span> </button>
<ul class="dropdown-menu" role="menu">
<li>Check</li>
<li>Plain</li>
<li class="divider"></li>
<li>All Types</li>
</ul>
</div>
</div>
<div class="filterable">
<div class="item plain red"><img class="" src="http://localhost.com/uploads/1.jpg" alt="type" width="75" /></div>
<div class="item check red"><img class="" src="http://localhost.com/uploads/2.jpg" alt="type" width="75" /></div>
</div>
I am using same code for different 3 sections where items in <div class="filterable"></div> are same as first section, its perfectly works for first section but other 2 sections shows only 1 item unless i click All types or All colors.
Please help me to resolve this. thanks
Try adding the class "filters" to your ul instead of div.row,
<ul class="filters dropdown-menu" role="menu">
like this:
<div class="row">
<div class="col-md-6">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Colors <span class="caret"></span> </button>
<ul class="filters dropdown-menu" role="menu">
<li>Blue</li>
<li>Red</li>
<li class="divider"></li>
<li>All Fabrics</li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Type <span class="caret"></span> </button>
<ul class="filters dropdown-menu" role="menu">
<li>Check</li>
<li>Plain</li>
<li class="divider"></li>
<li>All Types</li>
</ul>
</div>
</div>
<div class="filterable">
<div class="item plain red"><img class="" src="http://localhost.com/uploads/1.jpg" alt="type" width="75" /></div>
<div class="item check red"><img class="" src="http://localhost.com/uploads/2.jpg" alt="type" width="75" /></div>
</div>