While I am clicking this dropdown menu it's not going to the product section it's only expanding the menu and showing me Single-phase and three-phase but not also going to the product section that I made. Currently, I am using Bootstrap 5
Here is the code:(for navbar)
<li class="nav-item dropdown a-group">
<a class="nav-link dropdown-toggle" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false" href="#product">
Products
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="nav-link dropdown-item" href="#">Single Phase</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="nav-link dropdown-item" href="#">Three Phase</a></li>
</ul>
</li>
Here is product section:
<section id="product">
<div class="container">
<header class="section-header">
<h3><b>Check out our products!</b></h3>
</header>
<div class="carousel">
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active justify-content-center" data-bs-interval="10000">
<img src="image/intro-one.png" height="500px" class="d-block" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item justify-content-center" data-bs-interval="2000">
<img src="image/intro-two.png" height="500px" class="d-block " alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item justify-content-center">
<img src="image/intro-one.png" height="500px" class="d-block" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</section>
Just remove data-bs-toggle="dropdown" and add style for hover
.dropdown:hover > .dropdown-menu { display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://google.com" id="navbarDropdown" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
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()">
I have a page where I let the user search for information, and it displays an alert at the top stating that he is searching. He is then shown a filtered result. If he clicks the alert dismiss button, the main page is to be reloaded.
However I find that the dismissed event closed.bs.alert is never fired.
My javascript code:
$("document").ready(function () {
$('body').on('click', '#mainsearch', function (event) {
url = window.location.href;
console.log('Clicked');
SearchPatients();
});
$('body').on('closed.bs.alert', "#srpatalert", function () {
console.log('Closed alert');
window.location.href = "/appointments/patients";
});
$(function () {
$('#srpatalert').on('closed.bs.alert', function () {
console.log('Closed alert');
window.location.href = "/appointments/patients";
});
});
});
function SearchPatients() {
var srmsgpre = `
<div id="srpatalert" class="mr-3 alert alert-info alert-dismissible fade show" role="alert">
<strong>Searching For`;
var srmcl = ' </strong>';
var srmsgpost = `
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
`;
var breadcrumb = `
<li class="breadcrumb-item">
Home
</li>
<li class="breadcrumb-item">
Patients
</li>
<li class="breadcrumb-item active" aria-current="page">Search results</li>`;
var srstr = $("#searchterm").val();
sralmsg = srmsgpre + 'Patients:' + srmcl + srstr + srmsgpost;
$('#presearch').html(sralmsg);
return true;
}
My html code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Show Patients</title>
</head>
<body>
<div id="navbar">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Patients
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/appointments">Home
<!-- <span class="sr-only">(current)</span> -->
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Doctor
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/appointments/doctors">View Doctors</a>
<a class="dropdown-item" href="/appointments/createdoctor">Add Doctor</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Patients
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/appointments/patients">View Patients</a>
<a class="dropdown-item" href="/appointments/createpatient">Add Patient</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/appointments/getappointment">Appointments
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Welcome, joel
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/accounts/logout/?next=/appointments/patients">Logout</a>
<a class="dropdown-item" href="#">My Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/appointments/myappointments">My Appointments</a>
</div>
</li>
<!-- <li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li> -->
</ul>
<!-- <form class="form-inline my-2 my-lg-0"> -->
<div class="form-inline my-2 my-lg-0">
<div id="presearch"></div>
<input id="searchterm" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button id="mainsearch" type="button" class="btn btn-success">Search</button>
</div>
<!-- </form> -->
</div>
</nav>
</div>
<nav aria-label="breadcrumb">
<ol id="breadcrumb" class="breadcrumb">
<li class="breadcrumb-item">
Home
</li>
<li class="breadcrumb-item">
Patients
</li>
<li class="breadcrumb-item active" aria-current="page">Show Patients</li>
</ol>
</nav>
<div id="containerblock" class="container-fluid">
<div class="row">
<div class="col-sm-3 card-deck">
<div class="card mb-3 mr-3 ml-3 shadow bg-white rounded" style="width: 18rem;">
<div class="card-body">
<div id="id" style="display: none;">13 </div>
<h2 class="card-title">
Epra Peter
</a>
</h2>
<h6 class="card-subtitle mb-2 text-muted">Age 45</h6>
<p class="card-text">Mobile 0000</p>
<p class="card-text">Place </p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/appointments/patient/edit/13" class="btn btn-primary mr-1">
<i class="fas fa-user-edit"></i>
</a>
<a href="/appointments/patient/calendar/13" class="btn btn-primary mr-1">
<i class="fas fa-calendar"></i>
</a>
<a href="/appointments/patient/appointment/add/13" class="btn btn-primary mr-1">
<i class="fas fa-calendar-plus"></i>
</a>
<a href="/appointments/patient/remove/13" class="btn btn-danger mr-1">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3 card-deck">
<div class="card mb-3 mr-3 ml-3 shadow bg-white rounded" style="width: 18rem;">
<div class="card-body">
<div id="id" style="display: none;">11 </div>
<h2 class="card-title">
Jeffy Kelly
</a>
</h2>
<h6 class="card-subtitle mb-2 text-muted">Age 5</h6>
<p class="card-text">Mobile 0000</p>
<p class="card-text">Place </p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/appointments/patient/edit/11" class="btn btn-primary mr-1">
<i class="fas fa-user-edit"></i>
</a>
<a href="/appointments/patient/calendar/11" class="btn btn-primary mr-1">
<i class="fas fa-calendar"></i>
</a>
<a href="/appointments/patient/appointment/add/11" class="btn btn-primary mr-1">
<i class="fas fa-calendar-plus"></i>
</a>
<a href="/appointments/patient/remove/11" class="btn btn-danger mr-1">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3 card-deck">
<div class="card mb-3 mr-3 ml-3 shadow bg-white rounded" style="width: 18rem;">
<div class="card-body">
<div id="id" style="display: none;">15 </div>
<h2 class="card-title">
Ramu Pillai
</a>
</h2>
<h6 class="card-subtitle mb-2 text-muted">Age 50</h6>
<p class="card-text">Mobile 0000</p>
<p class="card-text">Place </p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/appointments/patient/edit/15" class="btn btn-primary mr-1">
<i class="fas fa-user-edit"></i>
</a>
<a href="/appointments/patient/calendar/15" class="btn btn-primary mr-1">
<i class="fas fa-calendar"></i>
</a>
<a href="/appointments/patient/appointment/add/15" class="btn btn-primary mr-1">
<i class="fas fa-calendar-plus"></i>
</a>
<a href="/appointments/patient/remove/15" class="btn btn-danger mr-1">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="menu pmd-floating-action pmd-lg" role="navigation">
<a href="/appointments/patient/add" class="pmd-floating-action-btn btn btn-sm pmd-btn-fab pmd-btn-raised pmd-ripple-effect btn-default pmd-lg"
data-title="Add a new patient">
<span class="pmd-floating-hidden"></span>
<i class="material-icons">add</i>
</a>
</div>
<div id="messages">
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
</html>
JSFiddle: JSFiddle
As you can see above, I tried two different approaches. I'm not able to get the closed.bs.alert event to fire.
Replace
$(function () {
$('#srpatalert').on('closed.bs.alert', function () {
console.log('Closed alert');
window.location.href = "/appointments/patients";
});
});
with
$('#navbar').on('close.bs.alert', '#srpatalert', function () {
console.log('Closed alert');
window.location.href = "/appointments/patients";
});
Notice that, besides delegating the event to #navbar, I also changed the event itself (from closed.bs.alert to close.bs.alert) as closed.bs.alert doesn't seem to fire in this example - I don't know why and, since it's working with close.bs.alert, I didn't investigate further.
Here's a working example:
$("document").ready(function() {
$('body').on('click', '#mainsearch', function(event) {
url = window.location.href;
console.log('Clicked');
SearchPatients();
});
$('#navbar').on('close.bs.alert', "#srpatalert", function() {
console.log('Closed alert');
});
// don't mind next line, it's just for SO:
$(document).on('click', 'a', e => e.preventDefault())
});
function makeAlert(category, term) {
return $('<div />', {
id:'srpatalert',
class:'mr-3 alert alert-info alert-dismissible fade show',
role: 'alert'
}).append($('<strong />',{text:'Searching For ' + category + ': '}))
.append($('<span />', {text: term}))
.append($('<button />', {
type:'button',
class:'close',
'data-dismiss':'alert',
'aria-label':'Close',
html: $('<span />',{
'aria-hidden':true,
html:'×'
})
}))
}
function SearchPatients() {
sralmsg = makeAlert('Patients', $("#searchterm").val());
$('#presearch').html(sralmsg);
return true;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div id="navbar">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Patients
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/appointments">Home
<!-- <span class="sr-only">(current)</span> -->
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Doctor
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/appointments/doctors">View Doctors</a>
<a class="dropdown-item" href="/appointments/createdoctor">Add Doctor</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Patients
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/appointments/patients">View Patients</a>
<a class="dropdown-item" href="/appointments/createpatient">Add Patient</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/appointments/getappointment">Appointments
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Welcome, joel
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/accounts/logout/?next=/appointments/patients">Logout</a>
<a class="dropdown-item" href="#">My Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/appointments/myappointments">My Appointments</a>
</div>
</li>
<!-- <li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li> -->
</ul>
<!-- <form class="form-inline my-2 my-lg-0"> -->
<div class="form-inline my-2 my-lg-0">
<div id="presearch"></div>
<input id="searchterm" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button id="mainsearch" type="button" class="btn btn-success">Search</button>
</div>
<!-- </form> -->
</div>
</nav>
</div>
<nav aria-label="breadcrumb">
<ol id="breadcrumb" class="breadcrumb">
<li class="breadcrumb-item">
Home
</li>
<li class="breadcrumb-item">
Patients
</li>
<li class="breadcrumb-item active" aria-current="page">Show Patients</li>
</ol>
</nav>
<div id="containerblock" class="container-fluid">
<div class="row">
<div class="col-sm-3 card-deck">
<div class="card mb-3 mr-3 ml-3 shadow bg-white rounded" style="width: 18rem;">
<div class="card-body">
<div id="id" style="display: none;">13 </div>
<h2 class="card-title">
Epra Peter
</h2>
<h6 class="card-subtitle mb-2 text-muted">Age 45</h6>
<p class="card-text">Mobile 0000</p>
<p class="card-text">Place </p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/appointments/patient/edit/13" class="btn btn-primary mr-1">
<i class="fas fa-user-edit"></i>
</a>
<a href="/appointments/patient/calendar/13" class="btn btn-primary mr-1">
<i class="fas fa-calendar"></i>
</a>
<a href="/appointments/patient/appointment/add/13" class="btn btn-primary mr-1">
<i class="fas fa-calendar-plus"></i>
</a>
<a href="/appointments/patient/remove/13" class="btn btn-danger mr-1">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3 card-deck">
<div class="card mb-3 mr-3 ml-3 shadow bg-white rounded" style="width: 18rem;">
<div class="card-body">
<div id="id" style="display: none;">11 </div>
<h2 class="card-title">
Jeffy Kelly
</h2>
<h6 class="card-subtitle mb-2 text-muted">Age 5</h6>
<p class="card-text">Mobile 0000</p>
<p class="card-text">Place </p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/appointments/patient/edit/11" class="btn btn-primary mr-1">
<i class="fas fa-user-edit"></i>
</a>
<a href="/appointments/patient/calendar/11" class="btn btn-primary mr-1">
<i class="fas fa-calendar"></i>
</a>
<a href="/appointments/patient/appointment/add/11" class="btn btn-primary mr-1">
<i class="fas fa-calendar-plus"></i>
</a>
<a href="/appointments/patient/remove/11" class="btn btn-danger mr-1">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3 card-deck">
<div class="card mb-3 mr-3 ml-3 shadow bg-white rounded" style="width: 18rem;">
<div class="card-body">
<div id="id" style="display: none;">15 </div>
<h2 class="card-title">
Ramu Pillai
</h2>
<h6 class="card-subtitle mb-2 text-muted">Age 50</h6>
<p class="card-text">Mobile 0000</p>
<p class="card-text">Place </p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/appointments/patient/edit/15" class="btn btn-primary mr-1">
<i class="fas fa-user-edit"></i>
</a>
<a href="/appointments/patient/calendar/15" class="btn btn-primary mr-1">
<i class="fas fa-calendar"></i>
</a>
<a href="/appointments/patient/appointment/add/15" class="btn btn-primary mr-1">
<i class="fas fa-calendar-plus"></i>
</a>
<a href="/appointments/patient/remove/15" class="btn btn-danger mr-1">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
</div>
</div>
<div class="menu pmd-floating-action pmd-lg" role="navigation">
<a href="/appointments/patient/add" class="pmd-floating-action-btn btn btn-sm pmd-btn-fab pmd-btn-raised pmd-ripple-effect btn-default pmd-lg" data-title="Add a new patient">
<span class="pmd-floating-hidden"></span>
<i class="material-icons">add</i>
</a>
</div>
<div id="messages">
</div>
</div>
As discussed in comments on the accepted answer above, the closed event does not properly bubble even if you use a delegated event and attach the handler to parent. A bit of discussion on this here.
Also, it's important to note that there is a distinct difference between close and closed, which is that the latter fires after the alert has been removed. In some applications this difference may be significant, such as when you need to resize other elements based on changes to the dom.
With that in mind, if you absolutely need to use the closed event, you must dynamically add your handler anytime the alert is created. This could be done in your example code immediately after:
$('#presearch').html(sralmsg);
You could add your handler so it would look like this:
$('#presearch').html(sralmsg);
$('#srpatalert').off().on('closed.bs.alert', function () {
console.log('Closed alert');
window.location.href = "/appointments/patients";
});
I'm an amateur and I'm practicing. But when I code this I can't get the margin right for menu items.
This is my project:
body {
background: #f5f5f5;
}
.top-f{
font-size: .9rem;
}
.h1brand{
color: #0c2e8a;
font-size: 2.8rem;
}
.logo h1{
margin: 10px 0;
}
.nav-icon{
margin: 0 0;
}
.logo span{
color: #50d8af;
}
.logo:hover{
text-decoration: none;
}
.nav-menu ul li a{
color: #555;
font-weight: 600;
font-size: 1.05rem;
}
.dropdown-menu{
min-width: 15rem;
}
.dropdown-menu a:hover{
background: #9fcdff;
}
.background-img{
background-size: cover;
width: 100%;
min-height: 65vh;
max-height: auto;
background-repeat: no-repeat;
opacity: .4;
position: absolute;
}
.headcolor{
color: #0c2e8a;
}
.headcolor2{
color: #50d8af;
}
.btn{
border-radius: 0px;
}
.mc{
text-align: center;
align-content: center;
}
.navbar-toggler{
border: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ"
crossorigin="anonymous">
</head>
<body>
<body>
<div class="container-fluid">
<div class="row border-bottom top-f">
<div class="container">
<div class="row">
<!--email and phonenumber-->
<div class="col-lg-5 col-md-8 d-lg-inline d-md-inline d-sm-none d-none">
<ul class="list-inline mt-3 mb-3 text">
<li class="list-inline-item mr-3 border-right pr-3">
<i class="fa fa-phone text-secondary"></i>
<span class="ml-2 text-secondary">09905645285</span>
</li>
<li class="list-inline-item mr-3">
<i class="fas fa-envelope text-secondary"></i>
<span class="ml-2 text-secondary">parsaking#example.com</span>
</li>
</ul>
</div>
<!--social media-->
<div class="col-lg-7 col-md-4 d-lg-inline d-md-inline d-sm-none d-none">
<ul class="list-inline mb-3 mt-3 text-secondary float-lg-right">
<li class="list-inline-item pl-2 pr-2 text-secondary">
<i class="fab fa-twitter"></i>
</li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary">
<i class="fab fa-facebook-f"></i>
</li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary">
<i class="fab fa-instagram"></i>
</li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary">
<i class="fab fa-google-plus-g"></i>
</li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary">
<i class="fab fa-linkedin-in"></i>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="container">
<nav class="navbar navbar-expand-md navbar-light ">
<div class="row">
<!-- Brand -->
<a href="#" class="display-4 font-weight-bold logo col-xl-6 col-lg-6 float-left">
<h1 class="h1brand ">Reve
<span>al</span>
</h1>
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon nav-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse col-xl-6 col-lg-6 " id="collapsibleNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#"> HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> TUTORIAL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> TUTORIAL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> DROPDOWN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> CONTACT</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<!--start section offer-->
<div class="container-fluid">
<div class="row">
<img src="img/3.jpg" class="background-img">
<div class="col-12 mc mt-5">
<h2 class="display-3 font-weight-bold headcolor">making
<span class="headcolor2">your ideas </span>
<br>happen</h2>
</div>
<div class="col-12 mc mt-5">
<button class=" btn btn-lg btn-primary">Get GetSarted</button>
<button class="btn btn-lg btn-secondary ml-4">Our Projects</button>
</div>
</div>
</div>
<!--scripts-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
Can you help me to make xl and lg float right and responsive, please?
I tried everything to solve this problem but I failed every time.
And it's reveral theme, made with bootstrap.
It wants more text from me and I'm not very good in English. Oh, how can I tell?
I don't know much about CSS and HTML and this is a disaster.
Thanks a lot.
I have made some changes in your structure to make it aligned. As of now your navbar is aligned. Please confirm if it solves your problem.
body {
background: #f5f5f5;
}
.top-f {
font-size: .9rem;
}
.h1brand {
color: #0c2e8a;
font-size: 2.8rem;
}
.logo h1 {
margin: 10px 0;
}
.nav-icon {
margin: 0 0;
}
.logo span {
color: #50d8af;
}
.logo:hover {
text-decoration: none;
}
.nav-menu ul li a {
color: #555;
font-weight: 600;
font-size: 1.05rem;
}
.dropdown-menu {
min-width: 15rem;
}
.dropdown-menu a:hover {
background: #9fcdff;
}
.background-img {
background-size: cover;
width: 100%;
min-height: 65vh;
max-height: auto;
background-repeat: no-repeat;
opacity: .4;
position: absolute;
}
.headcolor {
color: #0c2e8a;
}
.headcolor2 {
color: #50d8af;
}
.btn {
border-radius: 0px;
}
.mc {
text-align: center;
align-content: center;
}
.navbar-toggler {
border: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
</head>
<body>
<body>
<div class="container-fluid">
<div class="row border-bottom top-f">
<div class="container">
<div class="row">
<!--email and phonenumber-->
<div class="col-lg-5 col-md-8 d-lg-inline d-md-inline d-sm-none d-none">
<ul class="list-inline mt-3 mb-3 text">
<li class="list-inline-item mr-3 border-right pr-3"><i class="fa fa-phone text-secondary"></i><span class="ml-2 text-secondary">09905645285</span></li>
<li class="list-inline-item mr-3"><i class="fas fa-envelope text-secondary"></i><span class="ml-2 text-secondary">parsaking#example.com</span></li>
</ul>
</div>
<!--social media-->
<div class="col-lg-7 col-md-4 d-lg-inline d-md-inline d-sm-none d-none">
<ul class="list-inline mb-3 mt-3 text-secondary float-lg-right">
<li class="list-inline-item pl-2 pr-2 text-secondary"><i class="fab fa-twitter"></i></li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary"><i class="fab fa-facebook-f"></i></li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary"><i class="fab fa-instagram"></i></li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary"><i class="fab fa-google-plus-g"></i></li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary"><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<nav class="navbar navbar-expand-md navbar-light ">
<!-- Brand -->
<a href="#" class="display-4 font-weight-bold logo">
<h1 class="h1brand ">Reve<span>al</span></h1>
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-expanded="true">
<span class="navbar-toggler-icon nav-icon"></span>
</button>
<!-- Navbar links -->
<div class="navbar-collapse collapse show" id="collapsibleNavbar" style="">
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
<li class="nav-item">
<a class="nav-link" href="#"> HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> TUTORIAL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> TUTORIAL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> DROPDOWN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> CONTACT</a>
</li>
</ul>
</div>
</nav>
</div>
<!--start section offer-->
<div class="container">
<div class="row">
<img src="img/3.jpg" class="background-img">
<div class="col-12 mc mt-5">
<h2 class="display-3 font-weight-bold headcolor">making <span class="headcolor2">your ideas </span><br>happen</h2>
</div>
<div class="col-12 mc mt-5">
<button class=" btn btn-lg btn-primary">Get GetSarted</button>
<button class="btn btn-lg btn-secondary ml-4">Our Projects</button>
</div>
</div>
</div>
<!--scripts-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
I'm trying to add a delay for the bootstrap dropdown.
I have already added css to make the dropdown show on hover.
You can test it here http://www.bootply.com/YcVBzvXqrR
Here is my HTML:
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="category-box">
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-bullhorn fa-3x"></i>
<h5>CATEGORY 1</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 1
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-car fa-3x"></i>
<h5>CATEGORY 2</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 2
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-file-text fa-3x"></i>
<h5>CATEGORY 3</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 3
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-home fa-3x" style="margin-bottom: -20px; margin-top: -11px; font-size: 4em;"></i>
<h5>CATEGORY 4</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 4
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-cogs fa-3x"></i>
<h5>CATEGORY 5</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 5
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-users fa-3x"></i>
<h5>CATEGORY 6</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 6
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-heart fa-3x"></i>
<h5>CATEGORY 7</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 7
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-briefcase fa-3x"></i>
<h5>CATEGORY 8</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 8
</div>
</div>
</div>
</div>
</div>
</div>
And here is my CSS:
.dropdown:hover .dropdown-menu {
display: block;
}
.category-overlay{
width:1190px;
height:90px;
background:#ddd;
margin-top:30px;
}
I need to know how to make the dropdown appear with after a small delay.
Two changes I would recommend
Add the below Jquery code to add delay:
jQuery('div.dropdown').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
Remove the css
/.dropdown:hover .dropdown-menu {
display: block;
}/
This is the fiddle I have modified
http://www.bootply.com/YcVBzvXqrR#