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()">
Related
I currently have a significant amount of HTML inside a div which is generated within an iteration from a GET request to my .net core server.
Some of the values in the HTML is dynamic data returned from the server.
I've added a button to my website, which when pressed, makes an AJAX call to the server to return a JSON object representing the dynamic values for the next iteration.
So, I would like the JavaScript to add a new div to the DOM, which is the same, and has my dynamic values populated based on the JSON response.
For context, the DIV looks like this (which is from a bootstrap template I purchased):
<div class="card">
<!-- Card header START -->
<div class="card-header border-0 pb-0">
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<!-- Avatar -->
<div class="avatar me-2">
<img class="avatar-img rounded-circle" src="#post.ProfileImageUrl" alt="profile picture">
</div>
<!-- Info -->
<div>
<div class="nav nav-divider">
<h6 class="nav-item card-title mb-0"> #post.ProfileName </h6>
<span class="nav-item small"> #post.PostTime</span>
</div>
</div>
</div>
<!-- Card feed action dropdown START -->
<div class="dropdown">
<a href="#" class="text-secondary btn btn-secondary-soft-hover py-1 px-2" id="cardFeedAction" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots"></i>
</a>
<!-- Card feed action dropdown menu -->
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="cardFeedAction">
<li><a class="dropdown-item" href="#"> <i class="bi bi-bookmark fa-fw pe-2"></i>Save post</a></li>
<li><a class="dropdown-item" href="#"> <i class="bi bi-person-x fa-fw pe-2"></i>Unfollow lori ferguson </a></li>
<li><a class="dropdown-item" href="#"> <i class="bi bi-x-circle fa-fw pe-2"></i>Hide post</a></li>
<li><a class="dropdown-item" href="#"> <i class="bi bi-slash-circle fa-fw pe-2"></i>Block</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#"> <i class="bi bi-flag fa-fw pe-2"></i>Report post</a></li>
</ul>
</div>
<!-- Card feed action dropdown END -->
</div>
</div>
<!-- Card header END -->
<!-- Card body START -->
<div class="card-body">
<p><strong>#post.PostBody</strong></p>
<!-- Card img -->
<img class="card-img img-fluid" src="#post.PostImageUrl" alt="Post">
<!-- Feed react START -->
<ul class="nav nav-stack py-3 small">
<li class="nav-item">
<a class="nav-link active" href="#!"> <i class="bi bi-hand-thumbs-up-fill pe-1"></i>Liked (56)</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#!"> <i class="bi bi-chat-fill pe-1"></i>Comments (12)</a>
</li>
<!-- Card share action START -->
<li class="nav-item dropdown ms-sm-auto">
<a class="nav-link mb-0" href="#" id="cardShareAction" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-reply-fill flip-horizontal ps-1"></i>Share (3)
</a>
<!-- Card share action dropdown menu -->
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="cardShareAction">
<li><a class="dropdown-item" href="#"> <i class="bi bi-envelope fa-fw pe-2"></i>Send via Direct Message</a></li>
<li><a class="dropdown-item" href="#"> <i class="bi bi-bookmark-check fa-fw pe-2"></i>Bookmark </a></li>
<li><a class="dropdown-item" href="#"> <i class="bi bi-link fa-fw pe-2"></i>Copy link to post</a></li>
<li><a class="dropdown-item" href="#"> <i class="bi bi-share fa-fw pe-2"></i>Share post via …</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#"> <i class="bi bi-pencil-square fa-fw pe-2"></i>Share to News Feed</a></li>
</ul>
</li>
<!-- Card share action END -->
</ul>
</div>
<!-- Card body END -->
<!-- Card footer START -->
<div class="card-footer border-0 pt-0">
<!-- Load more comments -->
<a href="#!" role="button" class="btn btn-link btn-link-loader btn-sm text-secondary d-flex align-items-center" data-bs-toggle="button" aria-pressed="true">
<div class="spinner-dots me-2">
<span class="spinner-dot"></span>
<span class="spinner-dot"></span>
<span class="spinner-dot"></span>
</div>
Load more comments
</a>
</div>
<!-- Card footer END -->
</div>
<!-- Card feed item END -->
Question:
There's a lot of HTML here. What's the best way to build this out in Javascript? Is it just a case of biting the bullet and writing all of the JS code to create each element/class?
Would this be the best practice? Because it effectively means I'm maintaining the HTML markup in two places..
Thank you..!
I usually save the html of the template to be rendered inside an hidden element. Then I can always access it using that element.innerHTML. You could use specialized script tag instead. But the innerHTML part is the same.
After having the HTML as string you have 2 options
build the string with the values you want to populate, then add that as innerHTML to the target container.
but a better approach is to create an element from that html (see function below) then append it and manipulate it otherwise.
// render 5 cards
for (var i = 0; i < 5; i++) {
var html = document.querySelector("#card-template").innerHTML;
var elem = elemFromString(html)
// change something
elem.querySelector(".card-body>p strong").innerText = "card " + i
// append
document.querySelector("#container").append(elem)
}
// usefull utility
function elemFromString(html) {
var dummy = document.createElement("div");
dummy.innerHTML = html.trim();
if (dummy.children.length > 1) {
console.error("expecting one wrapping element for html. will return only firstChild")
}
var result = dummy.firstChild;
result.parentNode.removeChild(result)
return result;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div id="container">
</div>
<div id="card-template" style="display:none">
<div class="card">
<!-- Card header START -->
<div class="card-header border-0 pb-0">
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<!-- Avatar -->
<div class="avatar me-2">
<img class="avatar-img rounded-circle" src="#post.ProfileImageUrl" alt="profile picture">
</div>
<!-- Info -->
<div>
<div class="nav nav-divider">
<h6 class="nav-item card-title mb-0"> #post.ProfileName </h6>
<span class="nav-item small"> #post.PostTime</span>
</div>
</div>
</div>
<!-- Card feed action dropdown START -->
<div class="dropdown">
<a href="#" class="text-secondary btn btn-secondary-soft-hover py-1 px-2" id="cardFeedAction" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots"></i>
</a>
<!-- Card feed action dropdown menu -->
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="cardFeedAction">
<li>
<a class="dropdown-item" href="#"> <i class="bi bi-bookmark fa-fw pe-2"></i>Save post</a>
</li>
<li>
<a class="dropdown-item" href="#"> <i class="bi bi-person-x fa-fw pe-2"></i>Unfollow lori ferguson </a>
</li>
<li>
<a class="dropdown-item" href="#"> <i class="bi bi-x-circle fa-fw pe-2"></i>Hide post</a>
</li>
<li>
<a class="dropdown-item" href="#"> <i class="bi bi-slash-circle fa-fw pe-2"></i>Block</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="#"> <i class="bi bi-flag fa-fw pe-2"></i>Report post</a>
</li>
</ul>
</div>
<!-- Card feed action dropdown END -->
</div>
</div>
<!-- Card header END -->
<!-- Card body START -->
<div class="card-body">
<p><strong>#post.PostBody</strong></p>
<!-- Card img -->
<img class="card-img img-fluid" src="#post.PostImageUrl" alt="Post">
<!-- Feed react START -->
<ul class="nav nav-stack py-3 small">
<li class="nav-item">
<a class="nav-link active" href="#!"> <i class="bi bi-hand-thumbs-up-fill pe-1"></i>Liked (56)</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#!"> <i class="bi bi-chat-fill pe-1"></i>Comments (12)</a>
</li>
<!-- Card share action START -->
<li class="nav-item dropdown ms-sm-auto">
<a class="nav-link mb-0" href="#" id="cardShareAction" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-reply-fill flip-horizontal ps-1"></i>Share (3)
</a>
<!-- Card share action dropdown menu -->
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="cardShareAction">
<li>
<a class="dropdown-item" href="#"> <i class="bi bi-envelope fa-fw pe-2"></i>Send via Direct Message</a>
</li>
<li>
<a class="dropdown-item" href="#"> <i class="bi bi-bookmark-check fa-fw pe-2"></i>Bookmark </a>
</li>
<li>
<a class="dropdown-item" href="#"> <i class="bi bi-link fa-fw pe-2"></i>Copy link to post</a>
</li>
<li>
<a class="dropdown-item" href="#"> <i class="bi bi-share fa-fw pe-2"></i>Share post via …</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="#"> <i class="bi bi-pencil-square fa-fw pe-2"></i>Share to News Feed</a>
</li>
</ul>
</li>
<!-- Card share action END -->
</ul>
</div>
<!-- Card body END -->
<!-- Card footer START -->
<div class="card-footer border-0 pt-0">
<!-- Load more comments -->
<a href="#!" role="button" class="btn btn-link btn-link-loader btn-sm text-secondary d-flex align-items-center" data-bs-toggle="button" aria-pressed="true">
<div class="spinner-dots me-2">
<span class="spinner-dot"></span>
<span class="spinner-dot"></span>
<span class="spinner-dot"></span>
</div>
Load more comments
</a>
</div>
<!-- Card footer END -->
</div>
<!-- Card feed item END -->
</div>
i am trying to figure out how i can make my sidecart to close when i click outside of it, here is my scirpt:
const toggler = document.getElementById('menu-toggle');
const cartWrapper = document.getElementById('wrapper');
var crossButton = document.getElementById('closeCart');
// Displaying Menu Cart
document.addEventListener('DOMContentLoaded', () => {
toggler.addEventListener('click', toggleCart);
crossButton.addEventListener('click',closeCart);
function toggleCart(){
cartWrapper.classList.toggle('menuDisplayed');
cartWrapper.classList.toggle('menuDisplayedBgColor');
}
function closeCart(){
cartWrapper.classList.toggle('menuDisplayed');
cartWrapper.classList.toggle('menuDisplayedBgColor');
}
});
toggler is button that opens sidecart
cartWrapper is the sidecart
and crossButton the cross button that close the sidecart
Here is my sidecart:
If you want more information about my code i would appreciate it if you tell me, Thank you!
My html code:
<!-- Sidebar Cart-->
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<div class="container">
<div class="row">
<div class="col-md-6 mt-auto titleCart">
<h2 class="titleText">YOUR CART</h2>
</div>
<div class="col-md-2" style="left:30%">
<div class="crossIcon" id="closeCart">
<span class="iconify closeIcon" data-icon="zmdi:close"></span>
</div>
</div>
</div>
</div>
<ul class="sidebar-nav">
<li class="cart-item">
<div class="cart-item-img">
<img src="imgProducts/guitar1.jpg" alt="">
</div>
<div class="cart-item-txt">
<a class = "cart-item-name" href="#">Miyiagi Guitar</a>
<span class="cart-item-price-qty">
1 x 16.00
</span>
</div>
<button class="button deleteBtn"><i class="fa fa-trash-o" style="position:relative;font-size:24px; left:0;"></i></button>
</li>
</ul>
<div class="col-md-12" style="margin-top:4em;">
<hr class="dividerLineCart">
<div class="cart-total">
<h2 class="cartTotal">Total: $0.00</h2>
</div>
</div>
<div class="col-md-12 d-flex buttonsCartDiv">
View Cart
Check Out
</div>
</div>
</div>
My navbar that includes the button that toggle my sidecart:
<nav class="navbar fixed-top navbar-expand-md py-3 navbar-dark" style="background-color: rgba(41, 56, 61,0.65);font-family: Helvetica Neue,Helvetica,Arial,sans-serif;">
<a class="navbar-brand" href="index.php">
<img src="Images/charman logo white-trans.png" alt="Logo" style="height:50px;">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
<ul class="navbar-nav">
<li><hr class="dropdown-divider"></li>
<li class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="shop.php">Shop</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="guitars.php" id="navbarDropdownMenuLink" role="button" aria-haspopup="true" aria-expanded="false">
Guitars
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="electrical-type.php">Electrical</a>
<a class="dropdown-item" href="acoustic-type.php">Acoustic</a>
<a class="dropdown-item" href="basses-type.php">Basses</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" id="has-divider" href="#" data-target="#modalRegister" data-toggle="modal">Sign Up
<span class ="glyphicon glyphicon-user" aria-hidden="true" style="float:left;padding-right:0.4em;"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="has-divider2" href="#" data-target="#modalLogin" data-toggle="modal">Login
<span class="glyphicon glyphicon-log-in" aria-hidden="true" style="float:left;padding-right:0.4em;"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="menu-toggle"><span id="cart-text">Cart</span>
<span class="glyphicon glyphicon-shopping-cart" style="transform: scaleX(-1)" aria-hidden="true"></span>
<span class="badge badge-notify">0</span>
</a>
</li>
</ul>
</div>
</nav>
Well you can just click EventListener to the elements opening outside the sideCart.... ! Btw one question here where you want to get clicked.... you just need to add click event listener outside of this cart thing.. and you are pretty much good to go... !
if (cartWrapper.hasClass("menuDisplayed")) {
$("body").on("click", function() {
closeCart();
});
cartWrapper.on("click", function(event) {
event.stopPropagation();
});
});
Hope this Code will help you.
<script>
let sidebar = document.getElementById('sidebar-wrapper');
let navbarTogglerButton = document.getElementById('toggler-button');
window.document.addEventListener('click', (e) => {
let clickedArea = e.path[e.path.length-6]
if ( clickedArea == sidebar || e.path[0] == navbarTogglerButton) {
cartWrapper.classList.toggle('menuDisplayed');
cartWrapper.classList.toggle('menuDisplayedBgColor');
}
else {
cartWrapper.classList.toggle('menuDisplayed');
cartWrapper.classList.toggle('menuDisplayedBgColor');
}
});
</script>
So, I'm working on a website and I'm using PHP templates to do it.
I found many tutorials about this but none of them talked about PHP templates.
This is my navigation template:
</script>
<!--Main Navigation-->
<header>
<!-- Sidebar -->
<nav id="sidebarMenu" class="collapse d-lg-block sidebar collapse bg-dark">
<div class="position-sticky">
<div class="list-group list-group-flush mx-3 mt-4">
<a
href="index.php"
class="list-group-item list-group-item-action py-2 ripple bg-button"
aria-current="true"
>
<i class="fas fa-address-card fa-fw me-3"></i><span>About us</span></a
>
<a href="team.php" class="list-group-item list-group-item-action py-2 ripple bg-button">
<i class="fas fa-users fa-fw me-3"></i><span>Our team</span></a
>
<a href="positions.php" class="list-group-item list-group-item-action py-2 ripple bg-button"
><i class="fas fa-laptop-code fa-fw me-3"></i><span>Open positions</span></a
>
<a href="associates.php" class="list-group-item list-group-item-action py-2 ripple bg-button"
><i class="fas fa-handshake fa-fw me-3"></i><span>Associates</span></a
>
<a href="commissions.php" class="list-group-item list-group-item-action py-2 ripple bg-button"
><i class="fas fa-coins fa-fw me-3"></i><span>Commissions</span></a
>
<a href="pingernos.php" class="list-group-item list-group-item-action py-2 ripple bg-button"
><i class="fas fa-server fa-fw me-3"></i><span>Pingernos</span></a
>
<a href="network.php" class="list-group-item list-group-item-action py-2 ripple bg-button ntw-item-head"
><i class="fas fa-network-wired fa-fw me-3"></i><span>Network</span><i class="fas fa-sort-down"></i></a
>
<a href="badwolf.php" class="list-group-item list-group-item-action py-2 ripple bg-button ntw-item">
<i class="fas fa-paw fa-fw me-3"></i><span>Bad Wolf</span></a
>
<a href="mg.php" class="list-group-item list-group-item-action py-2 ripple bg-button ntw-item">
<i class="fas fa-cubes fa-fw me-3"></i><span>MinecraftGolden</span></a
>
<a href="cabin.php" class="list-group-item list-group-item-action py-2 ripple bg-button ntw-item">
<i class="fas fa-heartbeat fa-fw me-3"></i><span>The Cabin</span></a
>
<a href="haven.php" class="list-group-item list-group-item-action py-2 ripple bg-button ntw-item">
<i class="fas fa-code fa-fw me-3"></i><span>The Haven</span></a
>
<a href="credit.php" class="list-group-item list-group-item-action py-2 ripple bg-button"
><i class="fas fa-award fa-fw me-3"></i><span>Credit</span></a
>
<a href="legal.php" class="list-group-item list-group-item-action py-2 ripple bg-button"
><i class="fas fa-balance-scale fa-fw me-3"></i><span>Legal</span></a
>
<!--
<a href="#" class="list-group-item list-group-item-action py-2 ripple"
><i class="fas fa-money-bill fa-fw me-3"></i><span>Sales</span></a
> -->
</div>
</div>
</nav>
<!-- Sidebar -->
<!-- Navbar -->
<nav id="main-navbar" class="navbar navbar-expand-lg navbar-light bg-dark fixed-top">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-toggle="collapse"
data-mdb-target="#sidebarMenu"
data-target="#collapseOne"
aria-controls="sidebarMenu"
aria-expanded="true"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<!-- data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> -->
<!-- Brand -->
<a class="navbar-brand" href="index.php">
<img
src="assets/PsychOpsTransparent.png"
class="navbar-ps"
height="25"
alt=""
loading="lazy"
/>
</a>
<!-- Right links -->
<ul class="navbar-nav ms-auto d-flex flex-row">
<!-- Icon -->
<li class="nav-item me-3 me-lg-0">
<a class="nav-link" href="https://github.com/PsychOps" target="_blank">
<i class="fab fa-github bg-button fa-2x" aria-hidden="true"></i>
</a>
</li>
</ul>
</nav>
<!-- Navbar -->
</header>
<!--Main Navigation-->
<!--Main layout-->
<main style="margin-top: 58px;">
<div class="container pt-4"></div>
</main>
<!--Main layout-->
How would I be able to highlight the current page?
If anyone knows how to do it, please reply, any suggestions are much appreciated.
Use REQUEST_URI or SCRIPT_NAME key of $_SERVER to get current URL, file and check if it is matched with your link.
Option1: Exact match.
First get current URL, file name. Put this code before your menu.
<?php
$thisFile = (isset($_SERVER['REQUEST_URI']) ? $_SERVER['REQUEST_URI'] : (isset($_SERVER['SCRIPT_NAME']) ? $_SERVER['SCRIPT_NAME'] : null));
$thisFile = pathinfo($thisFile, PATHINFO_BASENAME);
// $thisFile maybe xxx.php one of your file or URL.
?>
Next check with your link. This example will use team.php, check current URL with that.
<a href="team.php" class="list-group-item list-group-item-action py-2 ripple bg-button<?php if (stripos($thisFile, 'team.php') !== false) {echo ' current-menu active';} ?>">
The code above will be check for current URL contain team.php. If it is true then classes current-menu and active will be added.
Option 2: Exact match and match file in sub directory.
If your menu have 2 items that use same file name. Example team.php and support/team.php then use the code below.
<?php
$thisUrl = (isset($_SERVER['REQUEST_URI']) ? $_SERVER['REQUEST_URI'] : (isset($_SERVER['SCRIPT_NAME']) ? $_SERVER['SCRIPT_NAME'] : null));
$thisFile = pathinfo($thisUrl , PATHINFO_BASENAME);
?>
<!-- exact match file.php -->
...
<!-- match /path/file.php -->
...
For both options, you can choose just one CSS class to use as currently active menu item (current-menu, active) or use your own.
Add supported CSS.
This is about CSS only. To make your active/current in styled you have to created CSS for them.
Example:
.current-menu {
border-left: 5px solid #blue;
}
See it in action
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 have a problem in my burger menu. It is not hiding after I click on the menu. I'm a beginner and I don't know where the problem is?
I need your help please. If you need any other information about my code feel free to ask me.
<nav id="navbar" class="navbar default">
<div class="container mob-logo">
<div class="navbar-header col-sm-2 tablet-logo">
<button type="button" class="navbar-toggle mob-menu" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar nature"></span>
<span class="icon-bar nature"></span>
<span class="icon-bar nature"></span>
</button>
<div class="mobile-sidebar">
<span class="sidebar-btn btn fa-bar-hide" data-action="toggle" data-side="right" >
<i class="fa fa-bars"></i>
</span>
</div>
</div>
<div class="collapse navbar-collapse " id="myNavbar" >
<ul class="nav navbar-nav pull-right ">
<li class="active">
<a href="#accueil" data-du-smooth-scroll data-du-scrollspy>Accueil</a>
</li>
<li class="active">
<a href="#home" data-du-smooth-scroll data-du-scrollspy>Groupe</a>
</li>
<li>
<a href="#Competences" data-du-smooth-scroll data-du-scrollspy>Competences</a>
</li>
<li>
<a href="#Services" data-du-smooth-scroll data-du-scrollspy>Services</a>
</li>
<li>
<a href="#References" data-du-smooth-scroll data-du-scrollspy>References</a>
</li>
<li>
<a href="#contact" data-du-smooth-scroll data-du-scrollspy>Contact</a>
</li>
</ul>
</div>
</div>
</nav>
$(document).ready(function(){
$(".mob-menu").click(function(){
$(this).hide();
});
});