I use codeigniter php frame work for my project I am able to refreah / reload my selected divs
<script type="text/javascript">
$('#button-refresh').on('click', function(e) {
e.preventDefault();
});
$(document).ready(function() {
var refresh = function () {
$("#newtotalinbox").load(window.location.href + " #newtotalinbox");
$('#menu_unread').load(window.location.href + " #menu_unread");
}
setInterval(refresh, 60 * 1000);
refresh();
});
</script>
How ever there seems to be a few seconds delay between the two.
It does not change at the same time.
Question how to make sure the refresh / reload of both divs done at the same time?
Here is my dashboard view
<div class="content-wrapper">
<div class="container-fluid">
<ol class="breadcrumb">
<li class="breadcrumb-item">
Dashboard
</li>
<li class="breadcrumb-item active">My Dashboard</li>
</ol>
<div class="row">
<div class="col-sm-12 mb-3">
<button class="btn btn-dark btn-lg" id="button-refresh"><i class="fa fa-refresh" aria-hidden="true"></i></button>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="card text-white bg-primary o-hidden h-100" id="inbox-dashbord">
<div class="card-body" id="total_inbox">
<div class="card-body-icon">
<i class="fa fa-fw fa-comments"></i>
</div>
<div class="mr-5" id="newtotalinbox"><?php echo $total_inbox;?> New Messages</div>
</div>
<a class="card-footer text-white clearfix small z-1" href="<?php echo base_url('mail/inbox');?>">
<span class="float-left">View Inbox</span>
<span class="float-right">
<i class="fa fa-angle-right"></i>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
Here is my Menu view
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<a class="navbar-brand" href="index.html"></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav navbar-sidenav" id="exampleAccordion">
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url('dashboard');?>">
<i class="fa fa-fw fa-dashboard"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-danger text-white" id="compose-button">
<span class="nav-link-text">Compose</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url('mail/inbox');?>">Inbox <span id="menu_unread" class="text-white"><?php echo $menu_unread;?></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url('mail/sent');?>">
<span class="nav-link-text">Sent</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url('mail/drafts');?>">Drafts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url('mail/spam');?>">Spam
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url('mail/trash');?>">Trash
</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseExamplePages" data-parent="#exampleAccordion">Events
</a>
<ul class="sidenav-second-level collapse" id="collapseExamplePages">
<li>
Create Event
</li>
<li>
View All Events
</li>
</ul>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url('logout');?>">
<i class="fa fa-fw fa-sign-out"></i>Logout</a>
</li>
</ul>
</div>
</nav>
Related
I use bootstrap 5, i want when a sidebar item is clicked it will be active and when a sub sidebar item is clicked it will also be active
And when reloading the item that was selected earlier it is still stored
Here my code
<div class="row row-offcanvas row-offcanvas-left vh-100" style="width: 1700px">
<div class="col-md-3 col-lg-2 sidebar-offcanvas h-100 overflow-auto bg-light pl-0" id="sidebar" role="navigation">
<ul class="nav flex-column sticky-top pl-2 mt-0">
<li>
<a href="/home">
<i class="nc-icon nc-bank"></i>
<p>Dashboard</p>
</a>
</li>
{{-- Menu Manajemen Karyawan --}}
<li>
<a class="nav-link" href="#submenu1" data-toggle="collapse" data-target="#submenu1">
<i class="nc-icon nc-tile-56"></i>
Manajemen Karyawan
</a>
<ul class="sub-menu list-unstyled flex-column collapse pl-2" id="submenu1" aria-expanded="false">
<li style="margin-top: -15px">
<a href="{{ route('karyawan.index') }}">
<i class="nc-icon nc-badge"></i>
<p>Karyawan </p>
<p></p>
</a>
</li>
<li style="margin-top: -15px">
<a href="#">
<i class="nc-icon nc-ruler-pencil"></i>
<p>Pengkinian Data </p>
<p></p>
</a>
</li>
<li class="dropdown" style="margin-top: -15px">
<a href="" data-toggle="dropdown" aria-expanded="false">
<i class="nc-icon nc-chart-bar-32"></i>
<p class="dropdown-toggle" id="navbarDropdownMenuLink">Pergerakan Karir </p>
<p></p>
</a>
<div class="dropdown-menu dropdown-primary dropdown-menu-right">
<a class="dropdown-item" href="{{ route('mutasi.index') }}">Mutasi</a>
<a class="dropdown-item" href="{{ route('demosi.index') }}">Demosi</a>
<a class="dropdown-item" href="{{ route('promosi.index') }}">Promosi</a>
<a class="dropdown-item" href="{{ route('karyawan.penonaktifan') }}">Penonaktifan</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
can anyone help ?
I have a nav menu with dropdown lists. When running locally and clicking the element the dropdown menu list appears perfect. When actually attempting on a mobile device it does nothing. Any suggestions why this maybe happening and how to fix?
I have figured that the script injecting the header.html is breaking the toggle? If I put the entire header.html code in index.html the dropdown works on mobile .... any suggestions / alternatives to how I am injecting the header.html code, other than PHP.
Html (index.html)
<!-- Header -->
<header id="main-header" class="header-main header-dark fixed-top header-fluid">
<script>
fetch('/includes/header.html')
.then(response => response.text())
.then(value => {
document.getElementById('main-header').innerHTML = value
});
</script>
</header>
<!-- Header End -->
Worth noting I am injecting the header via JQuery - see screenshot below
Feel free to demo at http://credit.fleetfactors.co.uk, try on desktop, mobile and desktop (inspect as mobile device)...
Scripts
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="static/js/jquery-3.5.1.min.js"></script>
<script src="static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="static/vendor/counter/jquery.countTo.js"></script>
<!-- typed -->
<script src="static/vendor/typed/typed.js"></script>
<!-- owl-carousel -->
<script src="static/vendor/owl-carousel/js/owl.carousel.min.js"></script>
<!-- magnific -->
<script src="static/vendor/magnific/jquery.magnific-popup.min.js"></script>
<script src="static/vendor/isotope/isotope.pkgd.min.js"></script>
<!-- svg-injector -->
<script src="static/vendor/svginjector/svg-injector.min.js"></script>
<!-- jarallax -->
<script src="static/vendor/jarallax/jarallax-all.js"></script>
<!-- count-down -->
<script src="static/vendor/count-down/jquery.countdown.min.js"></script>
<!-- working form -->
<script src="static/vendor/mail/js/form.min.js"></script>
<script src="static/vendor/mail/js/script.js"></script>
JQuery
CRE.MegaMenu = function() {
var mDropdown = $(".px-dropdown-toggle")
mDropdown.on("click", function() {
$(this).parent().toggleClass("open-menu-parent");
$(this).next('.dropdown-menu').toggleClass("show");
$(this).toggleClass("open");
});
}
Includes (header.html)
<div class="header-top header-border-bottom small">
<div class="container">
<div class="d-flex justify-content-between align-items-center">
<!-- Left -->
<div class="d-flex align-items-center justify-content-center d-none d-lg-block">
<ul class="nav">
<li class="nav-item me-3 text-white">
<span>
<i class="fa fa-envelope me-2"></i>
Email: sales#fleetfactors.co.uk
</span>
</li>
<li class="nav-item">
<a href="#" class="navbar-link text-white">
<i class="fas fa-headset me-2"></i>
Call: 01642 770 664
</a>
</li>
</ul>
</div>
<!-- Right -->
<div class="d-flex align-items-center justify-content-center w-100 w-lg-auto">
<!-- Language -->
<div class="dropdown ms-0 ms-lg-3">
<a class="dropdown-toggle text-white" href="#" role="button" id="dropdown_language" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa-fw me-2 bi bi-globe"></i>Global</a>
<div class="dropdown-menu mt-2 shadow" aria-labelledby="dropdown_language" style="margin: 0px;">
<span class="dropdown-item-text">Select Site</span>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="fa-fw me-2 bi bi-cart4"></i> Fleet Shop</a>
<a class="dropdown-item" href="#"><i class="fa-fw me-2 bi bi-upc-scan"></i> E-Cat</a>
</div>
</div>
<!-- Top link -->
<ul class="nav ms-auto ms-lg-3">
<li class="nav-item">
Contact
</li>
<li class="nav-item">
<i class="fa-solid fa-folder-open me-2"></i>Downloads
</li>
</ul>
<!-- Top social -->
<div class="nav header-social justify-content-end d-none d-lg-block">
<a class="h-social-link" href="#"><i class="bi bi-facebook"></i></a>
<a class="h-social-link" href="#"><i class="bi bi-twitter"></i></a>
<a class="h-social-link" href="#"><i class="bi bi-linkedin"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- End Top Header -->
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<!-- Logo -->
<a class="navbar-brand" href="index.html">
<img class="logo-dark" src="/static/img/fleet-logo-dark.svg" width="160px" title="" alt="">
<img class="logo-light" src="/static/img/fleet-logo-light.svg" width="160px" title="" alt="">
</a>
<!-- Logo -->
<!-- Mobile Toggle -->
<button class="navbar-toggler ms-auto me-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- End Mobile Toggle -->
<!-- Menu -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav m-auto">
<li class="nav-item">
<a href="https://fleetfactors.co.uk" class="nav-link">
Home
</a>
</li>
<li class="dropdown nav-item">
Company
<label class="px-dropdown-toggle mob-menu"></label>
<ul class="dropdown-menu left list-unstyled">
<li><a class="dropdown-item" href="/company/about-us.html">About Us</a></li>
<li><a class="dropdown-item" href="/company/team.html">Our Team</a></li>
<li><a class="dropdown-item" href="/company/corporate-social-values.html">Corporate Social Values</a></li>
<li><a class="dropdown-item" href="/company/qhse.html">QHSE</a></li>
<li><a class="dropdown-item" href="/careers.html">Careers</a></li>
<li><a class="dropdown-item" href="/news.html">News & Events</a></li>
</ul>
</li>
<li class="dropdown nav-item">
Services
<label class="px-dropdown-toggle mob-menu"></label>
<ul class="dropdown-menu left list-unstyled">
<li><a class="dropdown-item" href="/brands.html">Brands</a></li>
<li><a class="dropdown-item" href="/services/stores-management.html">Stores Management</a></li>
<li><a class="dropdown-item" href="/services/commercial-parts.html">Bus, Truck & Trailer Parts</a></li>
<li><a class="dropdown-item" href="/services/consumables.html">Consumables</a></li>
<li><a class="dropdown-item" href="/services/lubricants.html">Lubricant Products</a></li>
<li><a class="dropdown-item" href="/services/refinish.html">Refinish Products</a></li>
<li><a class="dropdown-item" href="/services/ppe.html">PPE Products & Embroidery</a></li>
<li><a class="dropdown-item" href="/services/janitorial.html">Janitorial Products</a></li>
</ul>
</li>
<li class="dropdown nav-item">
Resources
<label class="px-dropdown-toggle mob-menu"></label>
<ul class="dropdown-menu left list-unstyled">
<li><a class="dropdown-item" href="/resources/brand-guidelines.html">Brand Guidelines</a></li>
<li><a class="dropdown-item" href="/resources/promotions.html">Promotions</a></li>
<li><a class="dropdown-item" href="/resources/brochures.html">Brochures</a></li>
<li><a class="dropdown-item" href="/resources/accreditations.html">Accreditations</a></li>
</ul>
</li>
<li class="dropdown nav-item">
Support
<label class="px-dropdown-toggle mob-menu"></label>
<ul class="dropdown-menu left list-unstyled">
<li><a class="dropdown-item" href="/support/returns-policy.html">Returns</a></li>
<li><a class="dropdown-item" href="/support/delivery-policy.html">Delivery</a></li>
<li><a class="dropdown-item" href="/branch-locator.html">Branch Locator</a></li>
<li><a class="dropdown-item" href="/contact-us.html">Contact Us</a></li>
</ul>
</li>
</ul>
</div>
<!-- End Menu -->
<div class="nav flex-nowrap align-items-center">
<!-- Nav Search-->
<div class="nav-item">
<a class="nav-link pe-0 collapsed display-7 py-0 me-3" data-bs-toggle="collapse" href="javascript:void(0)" data-bs-target="#search-open" aria-expanded="false">
<i class="bi bi-search display-8"> </i>
</a>
</div>
<!-- Nav Button -->
<div class="nav-item d-none d-xl-block">
Login to Fleet Shop<i class="bi bi-arrow-right-short ms-2"></i>
</div>
</div>
</div>
</nav>
I have a dropdown menu on my site that works on my computer but on mobile, the moment you open the dropdown menu the main menu closes... the site is currently live on https://www.devtechprojects.co.za.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<header id="main-header" class="header-fancy">
<div class="container">
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="index.html">
<img class="img-fluid" src="https://via.placeholder.com/50" alt="#">
</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="ion-navicon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto justify-content-end">
<li class="nav-item">
<a class="nav-link " href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Services
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="webdev.php">Web Development</a>
<a class="dropdown-item" href="internet.php">Internet Services</a>
<a class="dropdown-item" href="designing.php">Designing</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php">Contact</a>
</li>
</ul>
<ul class="info-share">
<li><i class="fa fa-phone"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-envelope"></i></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<nav id="mynav" class="navbar navbar-expand-lg navbar-light sticky-top">
<div id="mainnav" class="container-fluid" >
<a class="navbar-brand pt-0 pb-0" href="index.html">
<img src="./assets/pranav logo1 (1).png" class="img-fluid d-inline-block align-top logo" alt="" loading="lazy">
</a>
<button class="navbar-toggler mr-5" id="mynavbtn" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse mob" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link js-scroll-trigger" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="about.html">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="services.html" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item js-scroll-trigger" href="services.html">Web Designing</a>
<a class="dropdown-item js-scroll-trigger" href="services.html">Software Development</a>
<a class="dropdown-item js-scroll-trigger" href="services.html">Digital Marketing</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="contact-us.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
$(document).ready(function(){
var backScroll =window.pageYOffset;
window.onscroll = function (){
var currentScroll = window.pageYOffset;
if(backScroll >currentScroll) {
document.getElementById("mynav").style.top="0";
}else{
document.getElementById("mynav").style.top="-100px";
}
backScroll = currentScroll;
}
});
(Wrong Output)The navbar is hidden (top:-100px)
Expected Output
On desktop code works properly when downward scroll is detected navbar is hidden (top:100px) and when upward scroll is detected navbar will be display but In mobile device When I clicked on hamburger menu it collapse but also hiding logo and hamberger section.
I uploaded please you will get it.
this is my code on bootstrap for navbar but it is not getting fit proper as u can see in png
it is coming at the center of the page i want it to cover the whole page .enter image description here
Brand
<div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
<div class="navbar-nav">
Home
Profile
<div class="nav-item dropdown">
Messages
<div class="dropdown-menu">
Inbox
Sent
Drafts
</div>
</div>
</div>
<form class="form-inline">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" />
<div class="input-group-append">
<button type="button" class="btn btn-secondary"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
<div class="navbar-nav">
Login
</div>
</div>
</nav>
Here is an example.
In the example below I use container-fluid with a margin of 0 and padding of 0.
(You can do it without container-fluid wrapping your navbar, it is your choice for the sake of an example I will leave it in the snippet.)
Then if you want to put content inside of the navbar inside of the container. You can put div with a class of a container after starting the nav tag.
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<style>
body {
background: #121212;
}
</style>
</head>
<body>
<div class="container-fluid m-0 p-0">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Brand</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="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</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">
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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</div>
</body>