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)
Related
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");
})
I've a template that has tabbed navigation with a nested dropdown menu. The previous and next buttons should provide secondary navigation through each of the tabs. The buttons work until they need to go through the pages in the dropdown navigation. If you use the Next button to advance to a lecture, all of the pages/lectures in the dropdown will be displayed below the buttons.
I'm not sure of the best way to approach writing out the if/else piece in the js. Not sure if it's better to look at if/else based on what I have so far or start from scratch. I need help with figuring out how to get the script to go forwards and backwards through the entire list used for navigation.
$('.btnNext').click(function () {
$('.nav-tabs > .nav-item > .active').parent().next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function () {
$('.nav-tabs > .nav-item > .active').parent().prev('li').find('a').trigger('click');
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<body>
<nav role="navigation">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="tab1" data-toggle="tab" href="#page1" role="tab" >Welcome</a></li>
<li class="nav-item">
Activities</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Lectures</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="tab" role="tab" id="tab3" href="#page3">Lecture 1</a>
<a class="dropdown-item" data-toggle="tab" role="tab" id="tab4" href="#page4">Lecture 2</a>
<a class="dropdown-item" data-toggle="tab" role="tab" id="tab5" href="#page5">Lecture 3</a>
</div>
</li>
</ul>
</nav>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="page1" role="tabpanel" aria-labelledby="overview-tab">
<h2>Overview</h2>
<p>Page 1. </p>
<div>
<a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a>
</div>
</div>
<div class="tab-pane fade" id="page2" role="tabpanel" aria-labelledby="activities-tab">
<h2>Activities</h2>
Page 2.
<div class="alert alert-info fade in">
×
<p class="text-center">If you have questions regarding any of these activities, make sure to post those questions in the <strong>Open Forum</strong>.</p>
</div>
<div>
<a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a>
<a type="button" class="btn btn-primary btnPrevious"> <em class="fas fa-chevron-left"></em> Previous</a>
</div>
</div>
<div class="tab-pane fade" id="page3" role="tabpanel" aria-labelledby="page3-tab">
<h2>Lecture 1</h2>
<p>Page 3.</p>
<div>
<a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a>
<a type="button" class="btn btn-primary btnPrevious"> <em class="fas fa-chevron-left"></em> Previous</a>
</div>
</div>
<div class="tab-pane fade" id="page4" role="tabpanel" aria-labelledby="page4-tab">
<h2>Lecture 2</h2>
<p>Page 4. </p>
<div>
<a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a>
<a type="button" class="btn btn-primary btnPrevious"> <em class="fas fa-chevron-left"></em> Previous</a>
</div>
</div>
<div class="tab-pane fade" id="page5" role="tabpanel" aria-labelledby="page5-tab">
<h2>Lecture 3</h2>
<p>Page 5. </p>
<div>
<a type="button" class="btn btn-primary btnPrevious"><em class="fas fa-chevron-left"></em> Previous</a>
</div>
</div>
</div>
</body>
Here is a working demo using tab('show') instead of trigger('click')
$('.btnNext').click(function() {
if (!$('[data-toggle="tab"].active').next('[data-toggle="tab"]').first().tab('show').length)
$('[data-toggle="tab"].active').parents('li').nextAll().find('[data-toggle="tab"]').first().tab('show')
});
$('.btnPrevious').click(function() {
if (!$('[data-toggle="tab"].active').prev('[data-toggle="tab"]').first().tab('show').length)
$('[data-toggle="tab"].active').parents('li').prevAll().find('[data-toggle="tab"]').last().tab('show')
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<nav role="navigation">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="tab1" data-toggle="tab" href="#page1" role="tab">Welcome</a></li>
<li class="nav-item">
Activities</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Lectures</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="tab" role="tab" id="tab3" href="#page3">Lecture 1</a>
<a class="dropdown-item" data-toggle="tab" role="tab" id="tab4" href="#page4">Lecture 2</a>
<a class="dropdown-item" data-toggle="tab" role="tab" id="tab5" href="#page5">Lecture 3</a>
</div>
</li>
</ul>
</nav>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="page1" role="tabpanel" aria-labelledby="overview-tab">
<h2>Overview</h2>
<p>Page 1. </p>
<div>
<a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a>
</div>
</div>
<div class="tab-pane fade" id="page2" role="tabpanel" aria-labelledby="activities-tab">
<h2>Activities</h2>
Page 2.
<div class="alert alert-info fade in">
×
</div>
<div>
<a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a>
<a type="button" class="btn btn-primary btnPrevious"> <em class="fas fa-chevron-left"></em> Previous</a>
</div>
</div>
<div class="tab-pane fade" id="page3" role="tabpanel" aria-labelledby="page3-tab">
<h2>Lecture 1</h2>
<p>Page 3.</p>
<div>
<a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a>
<a type="button" class="btn btn-primary btnPrevious"> <em class="fas fa-chevron-left"></em> Previous</a>
</div>
</div>
<div class="tab-pane fade" id="page4" role="tabpanel" aria-labelledby="page4-tab">
<h2>Lecture 2</h2>
<p>Page 4. </p>
<div>
<a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a>
<a type="button" class="btn btn-primary btnPrevious"> <em class="fas fa-chevron-left"></em> Previous</a>
</div>
</div>
<div class="tab-pane fade" id="page5" role="tabpanel" aria-labelledby="page5-tab">
<h2>Lecture 3</h2>
<p>Page 5. </p>
<div>
<a type="button" class="btn btn-primary btnPrevious"><em class="fas fa-chevron-left"></em> Previous</a>
</div>
</div>
</div>
Basically, after pressing the submit button I want to refresh the page (so the new data from the form will be updated), and load up another view <div class="view-practitioner">.
I dont want to stay in the blade.php with form <form id="practitioner_edit_form".
Both of those blade.php are in the same nav-link href="#practitioner"
I have found a way to do that using jquery with ajax, but I don't know how to finish it correctly, there are commented parts of my code that I tried, none of them did what I wanted.
js with function
$(document).ready(function () {
$('#practitioner_edit_form').on('submit', function(e) {
e.preventDefault();
$.ajax({
url : $(this).attr('action') || window.location.pathname,
type: "POST",
data: $(this).serialize(),
success: function (data) {
window.location = $('.nav-tabs a[href="#practitioner"]').tab('show');
/*^reloads my page to http://rps.me/person/profile/49/[object%20Object] from http://rps.me/person/profile/49/Smith*/
/*$('.nav-tabs a[href="#practitioner"]').tab('show');*/
/*^stays in the form after submitting, changed data isn't visible, only after reload, but I want to reload to correct nav tab*/
/*location.reload();*/
},
error: function (jXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
});
});
#extends('person.person-dashboard')
#section('personContent')
<div class="page-body">
<div class="row">
<div class="col-lg-12">
<div class="row-no-margin">
<br>
#if ($message = Session::get('successRemove'))
<div class="alert alert-success alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $message }}</strong>
</div>
#elseif($message = Session::get('failRemove'))
<div class="alert alert-danger alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $message }}</strong>
</div>
#elseif($message = Session::get('defaultRemoveError'))
<div class="alert alert-danger alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $message }}</strong>
</div>
#endif
</div>
<div class="cover-profile">
<div class="profile-bg-img">
<img class="profile-bg-img img-fluid" src="/files/assets/images/bg-img1-30opacity.png"
alt="bg-img">
<div class="card-block user-info">
<div class="col-md-12">
<div class="media-left">
<div class="card-block">
<div class="img-hover">
{{--Check if the picture is null, if so show default image--}}
#if (is_null($person->avatar))
<img class="img-fluid img-radius"
src="{{asset('storage/images/userImage/standard/default.png')}}"
width="150"
height="150" alt="user-img">
<div class="img-overlay img-radius">
<span>
<a href="/person/profile/{{$person->person_id}}/{{$person->last_name}}/uploadfile"
class="btn btn-sm btn-primary">
<i class="icofont icofont-edit"></i></a>
</span>
#else
<img class="img-fluid img-radius"
src="{{asset('storage/images/userImage/standard').'/'.$person->avatar}}"
width="150"
height="150" alt="user-img">
<div class="img-overlay img-radius">
<span>
<a href="/person/profile/{{$person->person_id}}/{{$person->last_name}}/uploadfile"
class="btn btn-sm btn-primary">
<i class="icofont icofont-edit"></i></a>
<a href="/person/profile/{{$person->person_id}}/{{$person->last_name}}/remove"
class="tabledit-delete-button btn btn-sm btn-danger waves-effect waves-light active"
name="delete-image" id="delete-image-button"
onclick="return confirm(trans('collaborators.areYouSure'))">
<i class="icofont icofont-ui-delete"></i></a>
</span>
#endif
</div>
</div>
</div>
</div>
<div class="media-body row">
<div class="col-lg-12">
<div class="user-title">
#if ($person->person_title == null)
<h2>{{$person->first_name}} {{$person->last_name}}</h2>
#else
<h2>{{$person->person_title->name}} {{$person->first_name}} {{$person->last_name}}</h2>
#endif
<span>{{$person->mobile}}, {{$person->email}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="cover-profile">
<div class="profile-bg-img">
</div>
<div class="card-block user-info">
<div class="col-md-12">
<div class="media-body row">
<div class="col-lg-12">
<div class="user-title">
</div>
</div>
<div>
<div class="pull-right cover-btn">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="tab-header card">
<ul class="nav nav-tabs md-tabs tab-timeline" role="tablist" id="mytab">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#personal" role="tab"
aria-expanded="true">{{trans('navigation.general')}}</a>
<div class="slide"></div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#practitioner" role="tab"
aria-expanded="false">{{trans('navigation.practitioner')}}</a>
<div class="slide"></div>
</li>
#isset($practitioner->practitioner_id)
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#availability" role="tab"
aria-expanded="false">{{trans('navigation.availability')}}</a>
<div class="slide"></div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#absence" role="tab"
aria-expanded="false">{{trans('navigation.absence')}}</a>
<div class="slide"></div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#contract" role="tab"
aria-expanded="false">{{trans('navigation.contract')}}</a>
<div class="slide"></div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#training" role="tab"
aria-expanded="false">{{trans('navigation.training')}}</a>
<div class="slide"></div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#history" role="tab"
aria-expanded="false">{{trans('navigation.history')}}</a>
<div class="slide"></div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#access" role="tab"
aria-expanded="false">{{trans('navigation.access')}}</a>
<div class="slide"></div>
</li>
#endisset
#empty($practitioner->practitioner_id)
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#availability" role="tab"
aria-expanded="false">{{trans('navigation.availability')}}</a>
<div class="slide"></div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#absence" role="tab"
aria-expanded="false">{{trans('navigation.absence')}}</a>
<div class="slide"></div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#contract" role="tab"
aria-expanded="false">{{trans('navigation.contract')}}</a>
<div class="slide"></div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#training" role="tab"
aria-expanded="false">{{trans('navigation.training')}}</a>
<div class="slide"></div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#history" role="tab"
aria-expanded="false">{{trans('navigation.history')}}</a>
<div class="slide"></div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#access" role="tab"
aria-expanded="false">{{trans('navigation.access')}}</a>
<div class="slide"></div>
</li>
#endempty
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="personal" role="tabpanel" aria-expanded="true">
<div class="card">
<div class="card-header">
<button id="edit-btn" type="button"
class="btn btn-editpanel btn-sm btn-primary waves-effect waves-light f-right">
<i class="icofont icofont-edit"></i>
</button>
</div>
<div class="card-block">
#include('person.profile.info-display')
#include('person.profile.info-edit')
</div>
</div>
</div>
<div class="tab-pane" id="practitioner" role="tabpanel" aria-expanded="true">
<div class="card">
#isset($practitioner->practitioner_id)
<div class="card-header">
<button id="edit-practitioner-btn" type="button"
class="btn btn-editpanel btn-sm btn-primary waves-effect waves-light f-right">
<i class="icofont icofont-edit"></i>
</button>
</div>
#endisset
<div class="card-block">
#include('person.profile.practitioner.practitioner-display')
#isset($practitioner->practitioner_id)
#include('person.profile.practitioner.practitioner-edit')
#endisset
</div>
</div>
</div>
<div class="tab-pane" id="availability" role="tabpanel" aria-expanded="false">
<div class="row">
{{trans('navigation.availability')}}
</div>
</div>
<div class="tab-pane" id="contract" role="tabpanel" aria-expanded="false">
<div class="row">
{{trans('navigation.contract')}}
</div>
</div>
<div class="tab-pane" id="training" role="tabpanel" aria-expanded="false">
<div class="row">
#include('person.profile.training.training')
</div>
</div>
<div class="tab-pane" id="absence" role="tabpanel" aria-expanded="false">
<div class="row">
{{trans('navigation.absence')}}
</div>
</div>
<div class="tab-pane" id="history" role="tabpanel" aria-expanded="false">
<div class="row">
{{trans('navigation.history')}}
</div>
</div>
<div class="tab-pane" id="access" role="tabpanel" aria-expanded="false">
<div class="row">
{{trans('navigation.access')}}
</div>
</div>
<!-- tab content end -->
</div>
</div>
</div>
#include("settings.remove-confirmation")
<link rel="stylesheet" type="text/css" href="/files/assets/css/custom-person-profile.css">
<link rel="stylesheet" type="text/css" href="/files/assets/css/custom-j-forms.css">
<script src="/files/js/views/person/person-profile.js"></script>
<script src="/files/js/services/initialization.js"></script>
<script src="/files/js/services/editButton.js"></script>
<script src="/files/js/services/practitioner/editPractitionerButton.js"></script>
<script src="/files/js/services/colors.js"></script>
<script src="/files/js/modules/dataTable.js"></script>
<script src="/files/js/modules/update.js"></script>
<script src="/files/js/modules/create.js"></script>
<script src="/files/js/modules/displayInfo.js"></script>
<script src="/files/js/services/forms.js"></script>
<script src="/files/js/services/validation.js"></script>
<script src="/files/js/settings/setup-ajax-requests.js"></script>
#endsection
I commented on what codes that I tried did after submitting the form.
I want to show hidden navigation with jQuery. Here is my code:
$(document).ready(function() {
var x = 0;
$(".navbar-fixed-top").mouseover(function() {
console.log("555");
if (x != 1) {
$(".header-triangle").fadeToggle();
$(".topbar-menu").slideToggle();
}
x = 0;
});
});
.topbar-menu {
background-color: rgba(84, 84, 84, 0.4);
height: 40px;
line-height: 40px;
direction: rtl;
display: none;
}
#fix-header {
background-color: rgba(84, 84, 84, 0.4);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hidden-xs">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid" id="fix-header">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="img/150_50.png" alt="image">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class=" hidden-xs ">
<a id="navbar-menu" href="#">
<img id="menuHeader" src="img/hamburgerMenu.png">
</a>
</li>
<li class="visible-xs">example
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<div class="searchbox-navigation">
<form class="navbar-form" role="search">
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default " type="submit"><i class="glyphicon glyphicon-search"></i>
</button>
</div>
<input type="text" class="form-control" style="direction: rtl;" placeholder="search" name="q">
</div>
</form>
</div>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
<div class="topbar-menu container-fluid hidden-xs">
</div>
</nav>
</div>
<script src="js/headerEvent.js"></script>
When I leave my mouse from that section, it logs another “555”. why does this happen? I want to have it logged just once.
here's a codepen link: http://codepen.io/anon/pen/RaGLWd
You'd wan to change it to either mouseenter or mouseleave to trigger it only once:
$(".navbar-fixed-top").mouseenter(function() {
console.log("555");
if (x != 1) {
$(".header-triangle").fadeToggle();
$(".topbar-menu").slideToggle();
}
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">