I have a nav tab class with two tabs with material and I want to show the second tab.
I have tried with jQuery but that is not working for me.
Here my HTML :
<div class="mdc-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content nav nav-tabs" id="exTabs">
<button class="nav-item nav-link mdc-tab mdc-tab--active" id="nav_tns_tab" data-toggle="tab" href="#nav_tns" role="tab" aria-selected="true" tabindex="0" style="border:0px">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label text-uppercase tab-mdc-title details-text-style" style="font-size: 14px">TNS</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="nav-item nav-link mdc-tab" id="nav_act_tab" data-toggle="tab" href="#nav_act" role="tab" aria-selected="false" tabindex="0" style="border:0px">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label text-uppercase tab-mdc-title details-text-style" style="font-size: 14px">Activite</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
<div class="tab-content mt-4" style="display: block;position: relative;width: 100%;margin-bottom: 56px;">
<div class="tab-pane active mt-3" id="nav_tns">
<div class="mdc-card demo-card">
</div>
<div class="mdc-card demo-card mt-3">
</div>
</div>
<div class="tab-pane fade mt-3" style="" id="nav_act">
<div class="mdc-card demo-card">
</div>
</div>
</div>
Here my code Jquery :
activaTab('nav_act');
function activaTab(tab) {
$('.nav-tabs [href="#' + tab + '"]').tab('show');
};
So how can I solve this problem with jquery or by adding specific class like show active in bootstrap.
Make sure to add the proper libraries. As you can see in this example, the default tab is the second.
activaTab('nav_act');
function activaTab(tab) {
$('.nav-tabs [href="#' + tab + '"]').tab('show');
};
.show {
background-color: red!important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.js"></script>
<div class="mdc-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content nav nav-tabs" id="exTabs">
<button class="nav-item nav-link mdc-tab mdc-tab--active" id="nav_tns_tab" data-toggle="tab" href="#nav_tns" role="tab" aria-selected="true" tabindex="0" style="border:0px">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label text-uppercase tab-mdc-title details-text-style" style="font-size: 14px">TNS</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="nav-item nav-link mdc-tab" id="nav_act_tab" data-toggle="tab" href="#nav_act" role="tab" aria-selected="false" tabindex="0" style="border:0px">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label text-uppercase tab-mdc-title details-text-style" style="font-size: 14px">Activite</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
<div class="tab-content mt-4" style="display: block;position: relative;width: 100%;margin-bottom: 56px;">
<div class="tab-pane active mt-3" id="nav_tns">
<div class="mdc-card demo-card">
</div>
<div class="mdc-card demo-card mt-3">
</div>
</div>
<div class="tab-pane fade mt-3" style="" id="nav_act">
<div class="mdc-card demo-card">
</div>
</div>
</div>
Related
I'm trying to use material.io tabs in a project, anyway the html structure is not well documented:
https://material.io/components/tabs/web#design-api-documentation
<div class="mdc-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content">
<button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">favorite</span>
<span class="mdc-tab__text-label">Favorites</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
where am i supposed to put the tab body content? It seems they shows only how to build a tab bar but not the whole functionality?
first, you should make the tab bars in a div then content in another div additionally use javascript to specify when content should change. I hope this answer helped. I think my answer must not be very clear but when you go through the code you will find what I mean
<div class="svelte4" style="flex:1;" id="tim">
<div class="mdc-tab-bar" role="tablist" style="background-color:rgb(34, 34, 34);">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content">
<button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">1</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab mdc-tab" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">2</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab mdc-tab" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">3</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
<div class="content content--active">
<p>1</p>
</div>
<div class="content">
<p>2</p>
</div>
<div class="content">
<p>3</p>
</div>
</div>
var tabBar = new mdc.tabBar.MDCTabBar(document.querySelector('.mdc-tab-bar'));
var contentEls = document.querySelectorAll('.content');
tabBar.listen('MDCTabBar:activated', function (event) {
// Hide currently-active content
document.querySelector('.content--active').classList.remove('content--active');
// Show content for newly-activated tab
contentEls[event.detail.index].classList.add('content--active');
});
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'm trying to add a hover effect for my sidebar. When the user hovers on the sidebar it should call the onmouseover function and when the user hovers out of the sidebar it should call the onmouseout function.
However, I noticed that both functions are being called at the same time. Even if the user is hovering over the sidebar and clicks on the dropdown and scrolls through the individual list items within the sidebar, the onmouseout function is being called and the onmouseover.
How do I only call the onmouseover function when it is inside the sidebar only ?
https://jsfiddle.net/bc6m3Lte/
<body>
<ul id="sidebar" class="nav flex-column" onmouseover="HoverOpenSideBar()" onmouseout="HoverCloseSideBar()">
<div id="TitleSidebar" class="pt-2 pb-3 px-1 d-flex" >
<span id="sidelogo" class="mr-auto p-2">Logo</span>
<button type="button" class="btn btn-default" href="#" onclick="OpenCloseSideBar()" >
<span class="fas fa-align-justify" aria-hidden="true"></span>
</button>
</div>
<li id="list1" class="nav-item ">
<a id="toggleDropDown" class="nav-link active px-0 " data-toggle="collapse" href="#submenu1" aria-expanded="false">
<div id="list2" class=" d-flex align-items-center ">
<span id="list3" class=" pl-3 fas fa-comment-dots"></span>
<span class="list4 ml-3 text-nowrap">Dashboard one</span>
<span class="fas fa-angle-right ml-3"></span>
</div>
</a>
</li>
<!-- Submenu content -->
<div id='submenu1' class="collapse" >
<a href="#" class="list-group-item list-group-item-action py-1">
<div id="abcd" class="d-flex align-items-center pl-2 " >
<span class="fas fa-circle"></span>
<span class="menu-collapsed ml-2">Charts</span>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action py-1">
<div id="abcd" class="d-flex align-items-center pl-2 " >
<span class="fas fa-circle"></span>
<span class="menu-collapsed ml-2">Charts</span>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action py-1">
<div id="abcd" class="d-flex align-items-center pl-2 " >
<span class="fas fa-circle"></span>
<span class="menu-collapsed ml-2">Charts</span>
</div>
</a>
</div>
</ul>
<nav id="topbar" class="navbar navbar-dark bg-dark Max-width 100%">
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
</div>
</div>
</body>
Javascript
function HoverOpenSideBar() {
console.log("In Hover OPEN sidebar");
}
function HoverCloseSideBar() {
console.log("In Hover OUT sidebar");
}
Use onmouseenter and onmouseleave instead of onmouseover and onmouseout.
<ul id="sidebar" class="nav flex-column" onmouseenter="HoverOpenSideBar()" onmouseleave="HoverCloseSideBar()">
This is my header area section of my template. i want to stick the menu bar and logo at the top. I tried a lot for all most 4 days.But i couldn't.I use sticky.js plugin.But it wouldn't happen.What's wrong with my code?I couldn't understand.I use parallax in the header section.Is that for the problem.
.parallax-window {
background: transparent;
}
.parallax_bg {
z-index: 2;
position: relative;
color: #FFFFFF;
}
<div class="top_area parallax-window" data-z-index="1" data-parallax="scroll" data-image-src="img/header_img/header_background.jpg">
<div class="parallax_bg">
<div class="top_area">
<div class="header_area">
<div class="container">
<div class="row" id="navbar-example">
<div class="col-md-2">
<div class="logo">
<img src="img/header_img/logo.png" alt="">
</div>
</div>
<div class="col-md-10">
<div class="main_menu">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Igredients</li>
<li>Menu</li>
<li>Reviews</li>
<li>Reservations</li>
</ul>
</div>
<div class="social_links">
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header_text_area">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="header_text">
<h2>the right ingredients <br /> for the right food</h2>
BOOK A TABLE
SEE THE MENU
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Try navbar-fixed-top in class of header.
Is this what you're trying to achieve?
.parallax-window {
position: fixed;
top: 0px;
left: 0px;
}
<div class="top_area parallax-window" data-z-index="1" data-parallax="scroll" data-image-src="img/header_img/header_background.jpg">
<div class="parallax_bg">
<div class="top_area">
<div class="header_area">
<div class="container">
<div class="row" id="navbar-example">
<div class="col-md-2">
<div class="logo">
<img src="img/header_img/logo.png" alt="">
</div>
</div>
<div class="col-md-10">
<div class="main_menu">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Igredients</li>
<li>Menu</li>
<li>Reviews</li>
<li>Reservations</li>
</ul>
</div>
<div class="social_links">
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header_text_area">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="header_text">
<h2>the right ingredients <br /> for the right food</h2>
BOOK A TABLE
SEE THE MENU
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>