Hi guys I know its a simple thing but I'm having trouble making this work. Slidedown on click/touch for the nav, the slideUp function isnt working any help? Thanks
Some Code
<div class="nav-container">
<div class="nav nav-pills nav-stacked">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Is Landscape Architecture Right For Me?</a>
<ul class="dropdown-menu">
<li>What Is Landscape Architecture?</li>
<li>What Skills Do I Need?</li>
<li>Future Career Prospects (U.S. Labor Department)</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">What Do Landscape Architects Do?</a>
<ul class="dropdown-menu">
<li>Interviews With Leading Landscape Architects</li>
<li>ASLA Professional Awards</li>
<li>ASLA Student Awards</li>
<li>Buy the Book: <em>Becoming A Landscape Architect</em></li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Why Is Their Work So Important?</a>
<ul class="dropdown-menu">
<li>Designing Our Future: Sustainable Landscapes</li>
<li>ASLA Animations</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Where Can I Study?</a>
<ul class="dropdown-menu">
<li>Picking A School</li>
<li>Design Intelligence Rankings (2013)</li>
</ul>
</div>
</div>
</div>
Jquery
$(document).ready(function(e) {
$('.nav-pills ul li').on('click touchstart', function() {
$(this).children('ul').stop().slideDown(500);
});
$('.nav-pills ul li ul').on('click touchstart', function(){
$(this).children('ul').stop().slideUp(300);
});
});
2nd part of my question is if I can hide tooltips on tablets (ipad) currently a user would have to click for the tooltip then click again to launch the modal
Some Code
<div class="modal-container0">
<button class="btn btn-primary btn-lg top" data-toggle="modal" data-placement="top" data-original-title="About Columbus Circle" data-target="#myModal_0"><span class="glyphicon glyphicon-plus"></span></button>
<div class="modal fade right" id="myModal_0" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">About Columbus Circle</h4>
</div>
<div class="modal-body">
<img src="img/0173ColCir_062_c_before.jpg" class="img-responsive"/>
<p>Columbus Circle is an awesome project</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div><!--End Modal 1-->
</div><!--End.modal-content-->
</div><!--End.modal-dialog-->
</div>
Jquery
$(function(){ $('.top').tooltip();});
Also here is a link to the site I'm working on asla.org/yourpath
Thanks so much!
Related
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 have a Bootstrap Navbar that works fine in desktop but when shrunk down at about 425px the contact button starts to work as the login button as well, which it's never have done before.
The code I have is this
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navtop navbar-nav pull-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Contact Us <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Advertising</li>
<li>Contact the Council </li>
<li>Report a Problem</li>
</ul>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<p class="modalfooter discoverthesecret">discover the secret...</p>
</div>
</div>
</div>
</div>
So when I click on the contact us, it loads up the login modal?
Thank you.
Your second list item (login btn) is over the first so you are triggering the the second instead of first
add the following:
.nav>li {
width: 50%;
float: right;
}
I am making a simple webpage that is acting as a front-end for a SQL database. I have not added any custom CSS or any custom code other than plain Bootstrap elements. The dropdown items are not aligned and appear to the right of the actual dropdown button. Here is the HTML
<!DOCTYPE html>
<html>
<head>
<title>No Fail Sales Database</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
function showAbout(){
$('#aboutModal').modal('toggle');
}
</script>
<link href="bootstrap.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!--------------- BEGIN ABOUT MODAL ---------------------->
<div class="container" align="center">
<div id="aboutModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">About Us</h4>
</div>
<div class="modal-body">
<p class="lead">This site contains a front-end interface for our project: No Fail Sales</p>
<p class="lead">Project Members: Anthony Bonarrigo, Brian Keiran, Cesar Nascimento</p>
</div> <!--END BODY-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div><!--END FOOTER-->
</div>
</div>
</div>
</div>
<!------------------------- END ABOUT MODAL --------------------->
<!------------------------ BEGIN JUMBOTRON/HEADER --------------->
<div class="jumbotron" id="db_header">
<div class="container">
<h1 style="text-align: center">No Fail Sales</h1>
<p style="text-align: center">A UI for database for No Fail Sales
<br><br><br><button type="button" class="btn btn-default" onclick="showAbout()">About</button></p>
</div>
</div>
<!------------------------END JUMBOTRON ------------------------>
<!------------------------BEGIN INPUT FIELDS--------------------->
<div class="container">
<div class="row">
<div class="col-xs-4">
<h2 style="text-align: center">Query by Product</h2>
<div class="input-group">
<input method="GET" type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
<div id="q_seller" class="col-xs-4" align="center">
<h2 style="text-align: center">Query by Seller</h2>
<div class="input-group">
<input method="GET" type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
<!-----------------END INPUT FIELDS-------------------->
<!-----------------GENERATE THE DROPDOWN--------------->
<div class="col-xs-4" align="center">
<h2 style="text-align: center">Search by Category</h2>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="categoryDropdown" data-toggle="dropdown" aria-expanded="true">
Category
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="categoryDropdown">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Clothing</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Electronics</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cleaning Supplies</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Office Supplies</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sports Equipment</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Health and Beauty</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Jewelry</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Automotive</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Food and Drink</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Lawn and Garden</a></li>
</ul>
</div>
</div>
<!----------------END DROPDOWN---------------------->
</div>
<!--------------------END INPUT AREA------------------->
</div>
<!--Placed at end of page so it loads faster-->
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
</body>
</html>
Your dropdown <div> is expanding to the full with of its containing column while the dropdown-toggle is not, causing the dropdown-menu to align with the column instead of the button. This solution isn't general but I think it best for a quick fix like yours:
CSS:
.dropdown {
width: 100px;
}
.dropdown .dropdown-toggle {
width: 100%;
}
or
HTML:
<div style="width: 100px;" class="dropdown">
<button style="width: 100%;" class="btn btn-default dropdown-toggle" type="button" id="categoryDropdown" data-toggle="dropdown" aria-expanded="true">
I'm trying to build responsive layout for webpage using bootstrap. I would like to render the webpage normally with header, left navigation on large displays[desktop resolutions]. But I would like to show toggle button if the site is resized to that of tablets or mobile device [OffCanvas Bootstrap]. Below is what i have achieved so far..
JsFiddle : http://jsfiddle.net/BqKNV/222/
Now,I'm having issues with slide animation and left navigation visibility[always hidden]. If anyone can spot where I'm going wrong will be appreciated.. thanks
<section class="offcanvas-layout">
<aside id="aside-menu" class="offcanvas-left nav-collapse collapse">
<div id="leftcontent">
<div class="inner">
<div></div>
</div>
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav nav-pills nav-stacked">
<li> <span class="glyphicon glyphicon-play"></span>United States
</li>
<li> <span class="glyphicon glyphicon-play"></span>Canada
</li>
</ul>
</div>
<!-- /.container-fluid -->
</div>
</aside>
<article class="offcanvas-content">
<div id="header">
<div class="container">
<button class="btn navbar-btn" data-toggle="collapse" data-target="#aside-menu">Click Me</button> <a id="logo">Logo here</a>
<div class="dropdown pull-right"> Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
<div class="searchBox">
<div class="input-group input-group-sm">
<input id="header-search" type="text" class="form-control" placeholder="search..." /> <span class="input-group-btn">
<button class="btn btn-default" type="button" id="search_Button"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
<div id="maincontent">
<div id="maincontentnav">
<p>Main Content Here</p>
</div>
</div>
</article>
</section>
You can use the visible-xs responsive utility class like this...
<button class="btn navbar-btn visible-xs" data-toggle="collapse" data-target="#aside-menu">Click Me</button> <a id="logo">Logo here</a>
http://bootply.com/130279
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>