Bootstrap dropdown items do not align correctly - javascript

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">

Related

How to make buttons disappear if another button is hovered in bootstrap3?

I have implemented multiple buttons in bootstrap 3 . The idea is that a series of buttons open up if a particular button is hovered over by the mouse. In the following code when the "Water" button is hovered over it displays buttons "1,2,4" but when i hover or click on "a" they don't disappear. i want that when any other button from "a,bb2,c,d,ee2" is hovered over, only its child buttons are displayed and any other previously displayed buttons are hidden from the screen. How can this be done?
https://jsfiddle.net/tnj6zLos/1/
$( document ).ready(function() {
$('#create_btn').on('click', function(){
$('#create_tab').tab('show')
})
$('#login_btn').on('click', function(){
$('#login_tab').tab('show')
})
$('#create_btn').on('click', function(){
$('#create1_tab').tab('show')
})
$(".hover_btn").click(function(e){
e.preventDefault();
})
$(".hover_btn").mouseenter(function(e){
e.preventDefault();
$("#tab1default").css("opacity","1");
})
$(".hover_btn2").hover(function(e){
e.preventDefault();
$("#tab2default1").css("opacity","1");
})
$(".hover_btn2").mouseleave(function(e){
e.preventDefault();
$("#tab2default1").css("opacity","0");
})
});
#customTab a {
padding: 0;
}
.flex {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
}
#media (max-width: 576px) {
.container {
padding: 0;
}
.btn {
padding: 3px 6px;
font-size: 12px;
}
.flex .panel-default{
margin-right: 4px;
}
.flex .panel-default>.panel-heading{
padding: 0;
}
.flex .panel-default>.panel-body .btn:last-child{
margin-top: 4px;
}
}
.btn-dark {
background-color: #343a40;
color: #fff;
}
.btn-dark:hover,.btn.focus, .btn:focus {
color: #fff;
}
.btn.focus, .btn:focus,.btn:active,.btn:hover , .active >a .btn{
color: #fff;
background: blue;
}
.nav-tabs{
border: none;
}
.hover_btn{
background-image: url(air.jfif);
background-size: cover;
color: #000;
height: 200px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.hover_btn:hover{
background-image: url(air.jfif);
background-size: cover;
color: #000;
height: 200px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
opacity: 0.9;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<main>
<div><br></br>Some text.</div>
<div class="container" id="customTab">
</div>
<div class="panel-heading">
<ul class="nav nav-tabs" style="display: flex; justify-content: space-around; border: none;">
<li><span class="btn btn-info btn-lg ">main heading</span></a>
</li>
</ul>
</div>
</div>
</div>
<br></br>
<div class="container" id="customTab">
<ul class="nav " style="display: flex; justify-content: space-around; border: none;">
<li><span class="hover_btn" >Water</span>
</li>
<li><a href="#tab2default" data-toggle="tab"><span
class="btn btn-info">aaaa</span></a></li>
<li><a href="#tab3default" data-toggle="tab"><span
class="btn btn-info">b<br>b2</br>
</span></a>
</li>
<li><span class="btn btn-info">c</span>
</li>
<li><span class="btn btn-info">d</span>
</li>
<li><a href="#tab6default" data-toggle="tab"><span class="btn btn-info">e<br>e2</br>
</span></a></li>
</ul>
</div>
</div>
<div class="tab-content hover_btn2">
<div class= "hover_btn2" >
<div class="tab-pane fade" id="tab1default" >
<div class="flex ">
<ul class="nav nav-tabs">
<li data-toggle="tab"><span
class="btn btn-info">1</span></li>
</ul>
<div class=" panel-default">
<ul class="nav nav-tabs">
<li a id="login_btn"><span class="btn btn-info" data-target="#signin" data-toggle="modal">2</span></a>
</li>
</ul>
<div class="modal fade" id="signin" role="dialog">
<div class="modal-body">
<div class="well">
<ul class="nav nav-tabs">
<li class="active"><a id="login_tab" href="#login" data-toggle="tab">3</a></li>
<li class=""><a id="create_tab" href="#create" data-toggle="tab">Reviews</a></li>
<li class=""><a id="create1_tab" href="#create1" data-toggle="tab">Workflows</a></li>
</ul>
<div id="myTabContent" class="tab-content ">
<div class="tab-pane active in" id="login">
<iframe src= "" style="border:none;width:1450px;height:600px;" >
</iframe>
</div>
<div class="tab-pane fade.in" id="create">
<p>
hello
</p>
</div>
<div class="tab-pane fade.in" id="create1">
<p>
hellosss
</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" >Cancel</button>
</div>
</div>
</div>
</div>
<div >
<ul class="nav nav-tabs">
<li href="#tab2default3" data-toggle="tab"><span
class="btn btn-info">4</span></li>
</ul>
<br></br>
<div class="flex tab-pane fade" id="tab2default3">
<ul class="nav nav-tabs">
<li href="#tab22default3" data-toggle="tab"><span
class="btn btn-info">4</span>
</li>
</ul>
<ul class="nav nav-tabs">
<li href="#tab222default3" data-toggle="tab"><span
class="btn btn-info">5</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab2default">
<div class="flex">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab3default1" data-toggle="tab"><span
class="btn btn-info">6</span></a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab3default1">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal7">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal8">Reviews</button>
</div>
</div>
</div>
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab3default2" data-toggle="tab"><span
class="btn btn-info">7</span></a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab3default2">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal9">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal10">Reviews</button>
</div>
</div>
</div>
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab3default3" data-toggle="tab"><span
class="btn btn-info">8</span></a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab3default3">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal11">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal12">Reviews</button>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab3default">
<div class="flex">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab5default2" data-toggle="tab"><span
class="btn btn-info">9</span></a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab5default2">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal21">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal22">Reviews</button>
</div>
</div>
</div>
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab5default3" data-toggle="tab"><span
class="btn btn-info">10</span></a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab5default3">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal23">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal24">Reviews</button>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab4default">
<div class="flex">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab6default1" data-toggle="tab"><span
class="btn btn-info">11</span></a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab6default1">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal25">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal26">Reviews</button>
</div>
</div>
</div>
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab6default2" data-toggle="tab"><span
class="btn btn-info">12</span></a>
</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab6default2">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal27">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal28">Reviews</button>
</div>
</div>
</div>
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab6default3" data-toggle="tab"><span
class="btn btn-info">13</span></a>
</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab6default3">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal29">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal30">Reviews</button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>

create a button with an id exemple:
closing button
then with your javaScript scope the element and hide the buttons (took the way you hide from your code)
$("#closeButton").click(function(e){
e.preventDefault();
$("#tab1default").css("opacity","0");
})

How to activate a hover button in bootstrap 3?

i have multiple buttons in my page implemented through bootstrap 3 and html. The button having the name "Water" should open up other buttons once the mouse is hovered over it and should hide them once the mouse moves away from it. Currently the buttons open once the "Water' button is clicked.
i have implemented the hover functionality which can be seen in the javascript and html but it does not seem to work. How can i adjust the divs or classes so that it works?
Here is the code and fiddle :
https://jsfiddle.net/2vok9hLw/
$( document ).ready(function() {
$('#create_btn').on('click', function(){
$('#create_tab').tab('show')
})
$('#login_btn').on('click', function(){
$('#login_tab').tab('show')
})
$('#create_btn').on('click', function(){
$('#create1_tab').tab('show')
})
$(".hover_btn").click(function(e){
e.preventDefault();
})
$(".hover_btn").hover(function(e){
e.preventDefault();
$("#tab2default1").css("opacity","1");
})
$(".hover_btn").mouseleave(function(e){
e.preventDefault();
$("#tab2default1").css("opacity","0");
})
$(".hover_btn2").hover(function(e){
e.preventDefault();
$("#tab2default1").css("opacity","1");
})
$(".hover_btn2").mouseleave(function(e){
e.preventDefault();
$("#tab2default1").css("opacity","0");
})
});
#customTab a {
padding: 0;
}
.flex {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
}
#media (max-width: 576px) {
.container {
padding: 0;
}
.btn {
padding: 3px 6px;
font-size: 12px;
}
.flex .panel-default{
margin-right: 4px;
}
.flex .panel-default>.panel-heading{
padding: 0;
}
.flex .panel-default>.panel-body .btn:last-child{
margin-top: 4px;
}
}
.btn-dark {
background-color: #343a40;
color: #fff;
}
.btn-dark:hover,.btn.focus, .btn:focus {
color: #fff;
}
.btn.focus, .btn:focus,.btn:active,.btn:hover , .active >a .btn{
color: #fff;
background: blue;
}
.nav-tabs{
border: none;
}
.hover_btn{
background-image: url(air.jfif);
background-size: cover;
color: #000;
height: 200px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.hover_btn:hover{
background-image: url(air.jfif);
background-size: cover;
color: #000;
height: 200px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
opacity: 0.9;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<main>
<div><br></br>Some text.</div>
<div class="container" id="customTab">
</div>
<div class="panel-heading">
<ul class="nav nav-tabs" style="display: flex; justify-content: space-around; border: none;">
<li><span class="btn btn-info btn-lg ">main heading</span></a>
</li>
</ul>
</div>
</div>
</div>
<br></br>
<div class="container" id="customTab">
<ul class="nav " style="display: flex; justify-content: space-around; border: none;">
<li><span class="hover_btn" >Water</span>
</li>
<li><a href="#tab2default" data-toggle="tab"><span
class="btn btn-info">a</span></a></li>
<li><a href="#tab3default" data-toggle="tab"><span
class="btn btn-info">b<br>b2</br>
</span></a>
</li>
<li><span class="btn btn-info">c</span>
</li>
<li><span class="btn btn-info">d</span>
</li>
<li><a href="#tab6default" data-toggle="tab"><span class="btn btn-info">e<br>e2</br>
</span></a></li>
</ul>
</div>
</div>
<div class="tab-content hover_btn2">
<div class= "hover_btn2" >
<div class="tab-pane fade" id="tab1default" >
<div class="flex ">
<ul class="nav nav-tabs">
<li data-toggle="tab"><span
class="btn btn-info">1</span></li>
</ul>
<div class=" panel-default">
<ul class="nav nav-tabs">
<li a id="login_btn"><span class="btn btn-info" data-target="#signin" data-toggle="modal">2</span></a>
</li>
</ul>
<div class="modal fade" id="signin" role="dialog">
<div class="modal-body">
<div class="well">
<ul class="nav nav-tabs">
<li class="active"><a id="login_tab" href="#login" data-toggle="tab">3</a></li>
<li class=""><a id="create_tab" href="#create" data-toggle="tab">Reviews</a></li>
<li class=""><a id="create1_tab" href="#create1" data-toggle="tab">Workflows</a></li>
</ul>
<div id="myTabContent" class="tab-content ">
<div class="tab-pane active in" id="login">
<iframe src= "" style="border:none;width:1450px;height:600px;" >
</iframe>
</div>
<div class="tab-pane fade.in" id="create">
<p>
hello
</p>
</div>
<div class="tab-pane fade.in" id="create1">
<p>
hellosss
</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" >Cancel</button>
</div>
</div>
</div>
</div>
<div >
<ul class="nav nav-tabs">
<li href="#tab2default3" data-toggle="tab"><span
class="btn btn-info">4</span></li>
</ul>
<br></br>
<div class="flex tab-pane fade" id="tab2default3">
<ul class="nav nav-tabs">
<li href="#tab22default3" data-toggle="tab"><span
class="btn btn-info">4</span>
</li>
</ul>
<ul class="nav nav-tabs">
<li href="#tab222default3" data-toggle="tab"><span
class="btn btn-info">5</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab2default">
<div class="flex">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab3default1" data-toggle="tab"><span
class="btn btn-info">6</span></a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab3default1">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal7">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal8">Reviews</button>
</div>
</div>
</div>
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab3default2" data-toggle="tab"><span
class="btn btn-info">7</span></a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab3default2">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal9">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal10">Reviews</button>
</div>
</div>
</div>
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab3default3" data-toggle="tab"><span
class="btn btn-info">8</span></a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab3default3">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal11">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal12">Reviews</button>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab3default">
<div class="flex">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab5default2" data-toggle="tab"><span
class="btn btn-info">9</span></a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab5default2">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal21">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal22">Reviews</button>
</div>
</div>
</div>
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab5default3" data-toggle="tab"><span
class="btn btn-info">10</span></a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab5default3">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal23">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal24">Reviews</button>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab4default">
<div class="flex">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab6default1" data-toggle="tab"><span
class="btn btn-info">11</span></a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab6default1">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal25">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal26">Reviews</button>
</div>
</div>
</div>
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab6default2" data-toggle="tab"><span
class="btn btn-info">12</span></a>
</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab6default2">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal27">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal28">Reviews</button>
</div>
</div>
</div>
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab6default3" data-toggle="tab"><span
class="btn btn-info">13</span></a>
</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab6default3">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal29">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal30">Reviews</button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>

may you hover water and tell me if that was your expected result? (run snippet
$( document ).ready(function() {
$('#create_btn').on('click', function(){
$('#create_tab').tab('show')
})
$('#login_btn').on('click', function(){
$('#login_tab').tab('show')
})
$('#create_btn').on('click', function(){
$('#create1_tab').tab('show')
})
$(".hover_btn").click(function(e){
e.preventDefault();
})
$(".hover_btn").mouseenter(function(e){
e.preventDefault();
$("#tab1default").css("opacity","1");
})
$(".hover_btn").mouseleave(function(e){
e.preventDefault();
$("#tab1default").css("opacity","0");
})
$(".hover_btn2").hover(function(e){
e.preventDefault();
$("#tab2default1").css("opacity","1");
})
$(".hover_btn2").mouseleave(function(e){
e.preventDefault();
$("#tab2default1").css("opacity","0");
})
});
#customTab a {
padding: 0;
}
.flex {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
}
#media (max-width: 576px) {
.container {
padding: 0;
}
.btn {
padding: 3px 6px;
font-size: 12px;
}
.flex .panel-default{
margin-right: 4px;
}
.flex .panel-default>.panel-heading{
padding: 0;
}
.flex .panel-default>.panel-body .btn:last-child{
margin-top: 4px;
}
}
.btn-dark {
background-color: #343a40;
color: #fff;
}
.btn-dark:hover,.btn.focus, .btn:focus {
color: #fff;
}
.btn.focus, .btn:focus,.btn:active,.btn:hover , .active >a .btn{
color: #fff;
background: blue;
}
.nav-tabs{
border: none;
}
.hover_btn{
background-image: url(air.jfif);
background-size: cover;
color: #000;
height: 200px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.hover_btn:hover{
background-image: url(air.jfif);
background-size: cover;
color: #000;
height: 200px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
opacity: 0.9;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<main>
<div><br></br>Some text.</div>
<div class="container" id="customTab">
</div>
<div class="panel-heading">
<ul class="nav nav-tabs" style="display: flex; justify-content: space-around; border: none;">
<li><span class="btn btn-info btn-lg ">main heading</span></a>
</li>
</ul>
</div>
</div>
</div>
<br></br>
<div class="container" id="customTab">
<ul class="nav " style="display: flex; justify-content: space-around; border: none;">
<li><span class="hover_btn" >Water</span>
</li>
<li><a href="#tab2default" data-toggle="tab"><span
class="btn btn-info">aaaa</span></a></li>
<li><a href="#tab3default" data-toggle="tab"><span
class="btn btn-info">b<br>b2</br>
</span></a>
</li>
<li><span class="btn btn-info">c</span>
</li>
<li><span class="btn btn-info">d</span>
</li>
<li><a href="#tab6default" data-toggle="tab"><span class="btn btn-info">e<br>e2</br>
</span></a></li>
</ul>
</div>
</div>
<div class="tab-content hover_btn2">
<div class= "hover_btn2" >
<div class="tab-pane fade" id="tab1default" >
<div class="flex ">
<ul class="nav nav-tabs">
<li data-toggle="tab"><span
class="btn btn-info">1</span></li>
</ul>
<div class=" panel-default">
<ul class="nav nav-tabs">
<li a id="login_btn"><span class="btn btn-info" data-target="#signin" data-toggle="modal">2</span></a>
</li>
</ul>
<div class="modal fade" id="signin" role="dialog">
<div class="modal-body">
<div class="well">
<ul class="nav nav-tabs">
<li class="active"><a id="login_tab" href="#login" data-toggle="tab">3</a></li>
<li class=""><a id="create_tab" href="#create" data-toggle="tab">Reviews</a></li>
<li class=""><a id="create1_tab" href="#create1" data-toggle="tab">Workflows</a></li>
</ul>
<div id="myTabContent" class="tab-content ">
<div class="tab-pane active in" id="login">
<iframe src= "" style="border:none;width:1450px;height:600px;" >
</iframe>
</div>
<div class="tab-pane fade.in" id="create">
<p>
hello
</p>
</div>
<div class="tab-pane fade.in" id="create1">
<p>
hellosss
</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" >Cancel</button>
</div>
</div>
</div>
</div>
<div >
<ul class="nav nav-tabs">
<li href="#tab2default3" data-toggle="tab"><span
class="btn btn-info">4</span></li>
</ul>
<br></br>
<div class="flex tab-pane fade" id="tab2default3">
<ul class="nav nav-tabs">
<li href="#tab22default3" data-toggle="tab"><span
class="btn btn-info">4</span>
</li>
</ul>
<ul class="nav nav-tabs">
<li href="#tab222default3" data-toggle="tab"><span
class="btn btn-info">5</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab2default">
<div class="flex">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab3default1" data-toggle="tab"><span
class="btn btn-info">6</span></a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab3default1">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal7">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal8">Reviews</button>
</div>
</div>
</div>
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab3default2" data-toggle="tab"><span
class="btn btn-info">7</span></a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab3default2">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal9">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal10">Reviews</button>
</div>
</div>
</div>
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab3default3" data-toggle="tab"><span
class="btn btn-info">8</span></a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab3default3">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal11">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal12">Reviews</button>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab3default">
<div class="flex">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab5default2" data-toggle="tab"><span
class="btn btn-info">9</span></a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab5default2">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal21">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal22">Reviews</button>
</div>
</div>
</div>
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab5default3" data-toggle="tab"><span
class="btn btn-info">10</span></a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab5default3">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal23">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal24">Reviews</button>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab4default">
<div class="flex">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab6default1" data-toggle="tab"><span
class="btn btn-info">11</span></a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab6default1">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal25">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal26">Reviews</button>
</div>
</div>
</div>
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab6default2" data-toggle="tab"><span
class="btn btn-info">12</span></a>
</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab6default2">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal27">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal28">Reviews</button>
</div>
</div>
</div>
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab6default3" data-toggle="tab"><span
class="btn btn-info">13</span></a>
</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab6default3">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal29">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal30">Reviews</button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
So, hover is doing the job for the hover and the blur, both of things, so one solution if you want to use .hover would be to use toggleClass with a class that have opacity 0 (toggleClass add a class if it dont exist and remove it if it exist)
Second thing, your query was selected on something like #tab2default1, after 5 min of looking for it i found out its not existing
My solution here: i used 2 function, one for mouseenter and other for the mouseleave (you already had it)

dynamic creation of table and how to insert data

how to create a table and insert the column and row values in Oracle database which are dynamically given by the user from a JSP page and we have developed a jsp which shows add a column and add row can be incremented as per the user requirement and that same input data can be inserted in the database. can anyone please help me out this problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Start Bootstrap Template</title>
<!-- Bootstrap core CSS-->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template-->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Page level plugin CSS-->
<link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">
<!-- Custom styles for this template-->
<link href="css/sb-admin.css" rel="stylesheet">
<style>
#rom{
display:none;
}
</style>
</head>
<body class="fixed-nav sticky-footer bg-dark" id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<h2 ><p class="small" style="color:red;">Employee list</p></h2>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav navbar-sidenav" id="exampleAccordion">
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Dashboard">
<div class="dropdown-divider"></div>
<a class="nav-link" href="employeeHome.html">
<i class="fa fa-home"></i>
<span class="nav-link-text" style="color:#60b5ff"><b>Home</b></span>
</a>
</li>
<div class="dropdown-divider"></div>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Charts">
<a class="nav-link" href="employeeEditProfile.html">
<i class="fa fa-fw fa-user"></i>
<span class="nav-link-text">Edit Profile</span>
</a>
</li>
<div class="dropdown-divider"></div>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Components">
<a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseComponents" data-parent="#exampleAccordion">
<i class="fa fa-fw fa-file-text"></i>
<span class="nav-link-text">Tickets</span>
</a>
<ul class="sidenav-second-level collapse" id="collapseComponents">
<li>
Add Ticket
</li>
<li>
Edit Ticket
</li>
<li>
View Tickets
</li>
</ul>
</li>
<div class="dropdown-divider"></div>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Example Pages">
<a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseExamplePages" data-parent="#exampleAccordion">
<i class="fa fa-fw fa-wrench"></i>
<span class="nav-link-text">Test Management</span>
</a>
<ul class="sidenav-second-level collapse" id="collapseExamplePages">
<li>
Prepare Test Report
</li>
<li>
Prepare Test Data
</li>
<li>
Prepare Bug Report
</li>
<li>
View Test Report
</li>
<li>
Modify Test Report
</li>
</ul>
</li>
<div class="dropdown-divider"></div>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Link">
<a class="nav-link" href="#">
<i class="fa fa-fw fa-bell"></i>
<span class="nav-link-text">Notifications</span>
</a>
</li>
<div class="dropdown-divider"></div>
</ul>
<ul class="navbar-nav sidenav-toggler">
<li class="nav-item">
<a class="nav-link text-center" id="sidenavToggler">
<i class="fa fa-fw fa-angle-left"></i>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" data-toggle="modal" data-target="#exampleModal">
<i class="fa fa-fw fa-sign-out"></i>Logout</a>
</li>
</ul>
</div>
</nav>
<div class="content-wrapper">
<div class="container-fluid">
<!-- Breadcrumbs-->
<ol class="breadcrumb">
<li class="breadcrumb-item">
Dashboard
</li>
<li class="breadcrumb-item active">Tables</li>
</ol>
<!-- Example DataTables Card-->
<div class="card mb-3">
<div class="card-header">
<i class="fa fa-table"></i> Test Data</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="tb" width="100%" cellspacing="0">
<thead class="thead-dark">
<tr id="myRow">
<th>Type of Testing</th>
</tr>
</thead>
<tr>
<form>
<td id="sel"><select class="form-control" id="sel1">
<option select disabled>Test Result</option>
<option>Positive</option>
<option>Negative</option>
</select>
</form>
</tr>
<tfoot>
<tr>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
<div align="center">
<button onclick="addColumn('tb')" class="btn btn-info" id="addColumn">Add Column</button>
<button id="addMores" class="btn btn-info">Add Row</button>
<div id="rom">
<input class="form-control" type="text" name="val" id="for" >
</div>
</div>
</div>
</div>
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
</div>
</div>
<!-- /.container-fluid-->
<!-- /.content-wrapper-->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fa fa-angle-up"></i>
</a>
<!-- Logout Modal-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="login.html">Logout</a>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
function addColumn(tb)
{
var tbHeadObj = document.getElementById(tb).tHead;
for (var h=0; h<tbHeadObj.rows.length; h++) {
var newTH = document.createElement('th');
var x=document.getElementById('rom').innerHTML;
newTH.innerHTML=x;
tbHeadObj.rows[h].appendChild(newTH);
}
var tbBodyObj = document.getElementById(tb).tBodies[0];
for (var i=0; i<tbBodyObj.rows.length; i++) {
var newCell = tbBodyObj.rows[i].insertCell(-1);
var x=document.getElementById('rom').innerHTML;
newCell.innerHTML = x;
}
}
function deleteColumn(tblId)
{
var allRows = document.getElementById(tblId).rows;
for (var i=0; i<allRows.length; i++) {
if (allRows[i].cells.length > 1) {
allRows[i].deleteCell(-1);
}
}
}</script>
<script>
$(function(){
$('#addMores').on('click', function() {
var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb");
data.find("input").val('');
});
$(document).on('click','.remove', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>0) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
}
});
});
</script>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Page level plugin JavaScript-->
<script src="vendor/datatables/jquery.dataTables.js"></script>
<script src="vendor/datatables/dataTables.bootstrap4.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin.min.js"></script>
<!-- Custom scripts for this page-->
<script src="js/sb-admin-datatables.min.js"></script>
</div>
</body>
</html>

BootStrap dropdown in wrong position

I have created a modal and in the modals body I want to add a dropdown button.
But for some reason the drop down is in the complete wrong place and I have tried over writing it in the css but to no avail
I tried this first
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2 align="left"><img src="/pic"width="50px" height="50px" />Share</h2>
</div>
<div class="modal-body">
<input type="textarea" align="left" id = "shareSearchBar" placeholder ="" name = "search">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<img src="pic2"width="20px" height="20px" />Edit
<span class="caret"></span>
</button>
<ul class="dropdown-menu " aria-labelledby="dropdownMenu1">
<li><img src="/pic"width="20px" height="20px" />E</li>
<li><img src="/pic"width="20px" height="20px" />V</li>
</ul>
</div>
With my css trying to move the button in the correct position which it does.
#dropdownMenu1 {
position: absolute;
top: 35%;
right: 3%
}
.dropdown {
position: absolute;
top: 35%;
right: 0%
}
Then I tried the follwoing which is very similar but a bit different
<div class="modal-body">
<button type="button" id = "dropdownMenu1" class="btn btn-small btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<img src="/pic"width="20px" height="20px" />Edit
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><img src="/pic"width="20px" height="20px" />e</li>
<li><img src="/pic"width="20px" height="20px" />v</li>
</ul>
</div>
</div>
Same css...
I really can't see anyway about this.

#hat_to_the_back: here is updated the fiddle that #Drinking People made.. fits what you want to do:
https://jsfiddle.net/Jyde/hcgd9u43/2/
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="/pic"width="20px" height="20px" />Edit <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><img src="/pic"width="20px" height="20px" />e</li>
<li><img src="/pic"width="20px" height="20px" />v</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

Can you reinitiliaze your dropdown on show event of model. Something like this :
$('#mymodal').on('shown', function() {
$("#mydropdown").dropdown();
});
And remove your custom css.
Event and initiliaze syntax can change according to the version of bootstrap.

$slideDown working but not $slideUp also a tooltip issue

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!

Categories

Resources