Javascript Botton navigation is overlapping side nav - javascript

I have a navigation bar which is located at the bottom of the screen. on the bottom navigation I have a button called Add, once clicked it will open a modal. I had to use the Z-index style so that when the modal is open It's not possible to open the Top navigation menu.
I'm trying to figure out how to stop the Bottom navigation overlapping the Top navigation side menu once it is active.
// Materialize Initialization Nav Drop Down.
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems);
});
// ----------------Models Materialize Framework----------------
document.addEventListener('DOMContentLoaded', function() {
let elems = document.querySelectorAll('.modal');
let instances = M.Modal.init(elems);
});
.nav-padding{
margin-top: 60px;
}
nav {
position: fixed;
z-index: 1001;
}
.trashbin {
padding-right: 30px !important;
padding-left: 30px !important;
}
/* */
body {
margin: 0 0 55px 0;
}
.bottom_nav {
position: fixed;
bottom: 0;
width: 100%;
height: 55px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
background-color: #ffffff;
display: flex;
overflow-x: auto;
z-index: 1002;
}
.nav__link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-grow: 1;
min-width: 50px;
overflow: hidden;
white-space: nowrap;
font-family: sans-serif;
font-size: 13px;
color: #444444;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.1s ease-in-out;
}
.nav__link:hover {
background-color: #eeeeee;
}
.nav__link--active {
color: #009578;
}
.nav__icon {
font-size: 18px;
}
<!-- Google icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<nav class="nav-wraper black">
<ul>
<li class="right"><a href="#" class="white-text">Sign In
</a>
</li>
</ul>
<!-- Side Navagation -->
<ul id="slide-out" class="sidenav">
<li>
<li><a><i class="material-icons">fitness_center</i>
<p class="">Templates</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>Bill</p>
</a></li>
<li></li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>&</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect ">
<p>Ben</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>The</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>Flower​Pot</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>Men</p>
</a></li>
<li>
<div class="divider"></div>
</li>
</ul>
<i class="material-icons">menu</i>
</nav>
<footer class="bottom_nav">
<a href="#" class="nav__link">
<i class="material-icons nav__icon">dashboard</i>
<span class="nav__text">Dashboard</span>
</a>
<a href="#" class="nav__link nav__link--active">
<i class="material-icons nav__icon">person</i>
<span class="nav__text">Profile</span>
</a>
<a href="#add_exercise_column" class="nav__link modal-trigger">
<i class="material-icons nav__icon">add_box</i>
<span class="nav__text">Add</span>
</a>
<div class="modal modal-position" id="add_exercise_column">
<div class="valign-wrapper center-align">
<div class="row">
<form class="col s12 valign-wrapper center-align">
<div class="input-field">
<div class="remove_label">
<label><h6>Add</h6></label>
</div>
<div class="removebtn-padding">
<input id="delete" class="del-exercise-btn modal-close btn black" type="submit" value="Submit">
</div>
</div>
</form>
</div>
</div>
</div>
<a href="#" class="nav__link">
<i class="material-icons nav__icon">lock</i>
<span class="nav__text">Privacy</span>
</a>
<a href="#" class="nav__link">
<i class="material-icons nav__icon">settings</i>
<span class="nav__text">Settings</span>
</a>
</nav>
</footer>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- app.JavaScript -->
<script src="app.js"></script>


Probably just need to change:
z-index: 1002;
to
z-index: 1000;
and move the modal outside of the footer.
// Materialize Initialization Nav Drop Down.
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems);
});
// ----------------Models Materialize Framework----------------
document.addEventListener('DOMContentLoaded', function() {
let elems = document.querySelectorAll('.modal');
let instances = M.Modal.init(elems);
});
.nav-padding{
margin-top: 60px;
}
nav {
position: fixed;
z-index: 1001;
}
.trashbin {
padding-right: 30px !important;
padding-left: 30px !important;
}
/* */
body {
margin: 0 0 55px 0;
}
.bottom_nav {
position: fixed;
bottom: 0;
width: 100%;
height: 55px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
background-color: #ffffff;
display: flex;
overflow-x: auto;
z-index: 1000;
}
.nav__link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-grow: 1;
min-width: 50px;
overflow: hidden;
white-space: nowrap;
font-family: sans-serif;
font-size: 13px;
color: #444444;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.1s ease-in-out;
}
.nav__link:hover {
background-color: #eeeeee;
}
.nav__link--active {
color: #009578;
}
.nav__icon {
font-size: 18px;
}
<!-- Google icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<nav class="nav-wraper black">
<ul>
<li class="right"><a href="#" class="white-text">Sign In
</a>
</li>
</ul>
<!-- Side Navagation -->
<ul id="slide-out" class="sidenav">
<li>
<li><a><i class="material-icons">fitness_center</i>
<p class="">Templates</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>Bill</p>
</a></li>
<li></li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>&</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect ">
<p>Ben</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>The</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>Flower​Pot</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>Men</p>
</a></li>
<li>
<div class="divider"></div>
</li>
</ul>
<i class="material-icons">menu</i>
</nav>
<footer class="bottom_nav">
<a href="#" class="nav__link">
<i class="material-icons nav__icon">dashboard</i>
<span class="nav__text">Dashboard</span>
</a>
<a href="#" class="nav__link nav__link--active">
<i class="material-icons nav__icon">person</i>
<span class="nav__text">Profile</span>
</a>
<a href="#add_exercise_column" class="nav__link modal-trigger">
<i class="material-icons nav__icon">add_box</i>
<span class="nav__text">Add</span>
</a>
<a href="#" class="nav__link">
<i class="material-icons nav__icon">lock</i>
<span class="nav__text">Privacy</span>
</a>
<a href="#" class="nav__link">
<i class="material-icons nav__icon">settings</i>
<span class="nav__text">Settings</span>
</a>
</nav>
</footer>
<div class="modal modal-position" id="add_exercise_column">
<div class="valign-wrapper center-align">
<div class="row">
<form class="col s12 valign-wrapper center-align">
<div class="input-field">
<div class="remove_label">
<label><h6>Add</h6></label>
</div>
<div class="removebtn-padding">
<input id="delete" class="del-exercise-btn modal-close btn black" type="submit" value="Submit">
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- app.JavaScript -->
<script src="app.js"></script>

Related

BOOTSTRAP 5 Head and NAV Divs not extending fully to screen size properly

I am quite new to BOOTSTRAP and web development in general. So I was once again hoping someone could help me as I can't find the solution. I've started making a simple website to practice and it looks fine in my browser size; however, when I switch to mobile my created divs seem to be smaller or not keeping the specified size; this also appears to be in turn, breaking my nav bar while in mobile mode. Any help would be grand!
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<style type="text/css">
#logo-space {
background-color: #0f2471;
width: auto;
height: auto;
}
#logo {
width: 300px;
height: 110px;
padding: 15px;
margin-left: 5rem;
}
#FMS-BTN {
width: 12rem;
position: relative;
top: 2rem;
left: 20rem;
}
#nav-bar{
background-color: #16377e;
height: auto;
}
#nav-bar a{
color: white;
font-weight: bold;
font-size: 20px;
padding: 5px;
position: relative;
top: 5px;
}
.navbar-text{
text-align: right !important;
position: relative;
font-size: 20px;
bottom: 5px;
padding: 5px;
right: 5rem;
}
.nav-move{
position: relative;
left: 5rem;
}
.navbar {
height: 55px !important; /*i assume your navbar size 100px*/
}
</style>
</head>
<body>
<div class=".container-fluid">
<div id="logo-space" class="row">
<div class="col">
<img id="logo" src="img/logo.png" alt="">
</div>
<div class="col">
</div>
<div class="col">
<a id="FMS-BTN" href="#" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true">
<img src="" alt="">Head to FMS</a>
</div>
</div>
<div id="nav-area">
<nav id="nav-bar" class="navbar navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-xs-0">
<li class="nav-item">
<a class="nav-link active nav-move" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link nav-move" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link nav-move" href="#">DIVISIONS</a>
</li>
<li class="nav-item">
<a class="nav-link nav-move" href="#">APPEALS</a>
</li>
<li class="nav-item">
<a class="nav-link nav-move" href="#">FEED</a>
</li>
</ul>
<span class="navbar-text">
<a id="apply-link" class="nav-link" href="#">APPLY NOW</a>
</span>
</div>
</div>
</nav>
</div>
</div>
</body>
</html>

Making menu icon moveless and full width dropdown menu in bootstrap 4

I have 2 big problems and I don't know how to fix them!
This is my code :
#font-face {
font-family: 'yekani';
src: url("../fonts/yekan.ttf");
}
#font-face {
font-family: 'yekani';
src: url("../fonts/yekan.eot");
}
#font-face {
font-family: 'yekani';
src: url("../fonts/yekan.woff");
}
body{
font-family: yekani;
}
.container-fluid{
padding: 0 6rem;
}
.menu{
}
.links a{
font-size: 1.25rem;
color: #333;
}
.menu{
box-shadow: 0 1px 4px 1px #d0d0d0;
}
.logo img{
width: 120px;
}
.btn-outline-primary{
border-width: 2px;
border-color: #cce1e7;
color: #3dacd9;
}
.navbar-nav .nav-link{
padding-left: 2rem !important;
}
.links i{
color: #f5f5f5;
font-size: 1.2rem;
}
.navbar-toggler i{
font-size: 2rem;
}
.navbar .dropdown {position:static;}
.navbar .dropdown-menu {
width:80rem;
left:0;
right:40rem;
/* height of nav-item */
top:5rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>مثال بوت استرپ</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid menu">
<div class="d-flex ">
<div class="mr-auto ">
<button class="btn btn-outline-primary btn-lg mb-4 mt-4 pt-2 pb-2 ">
<i class="fas fa-arrow-left"></i>
عضویت : ورود
</button>
</div>
<div class="links ">
<nav class=" navbar navbar-expand-xl mb-4 mt-4">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" >
<i class="fas fa-bars text-dark "></i>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav navbar-light">
<li class="nav-item "><a class="nav-link " href="">ارتباط با ما</a></li>
<i class="fas fa-ellipsis-v m-3"></i>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" >
دوره های مجازی
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#" > دوره های مجازی</a>
<a class="dropdown-item" href="#">دوره های مجازی</a>
<a class="dropdown-item" href="#">دوره های مجازی</a>
</div>
</li>
<i class="fas fa-ellipsis-v m-3"></i>
<li class="nav-item "><a class="nav-link" href="">دوره های متخصص</a></li>
<i class="fas fa-ellipsis-v m-3"></i>
<li class="nav-item "><a class="nav-link borderl" href="">محتوا</a></li>
</ul>
</div>
</nav>
</div>
<div class="logo mt-4 mb-4 ml-5 d-none d-xl-block">
<img src="https://s.7learn.com/themes/slt/assets/img/logo.png" alt="">
</div>
</div>
</div>
</body>
</html>
1 is the menu icon! this menu icon moves!is Unbelievable.i cant make my menu icon motionless!
and 2 is i want my drop down full width and i try and i think my codes are right for a full width drop down but its not working and the scope breaks!to right!
something important is :
if you change my code pls tell me what you did.
tanks a lot and sorry about grammatical problems!
im iranian and im not very good in english

Change your structure like this. Keep your left button inside the navbar instead of outside it. Use the bootstrap's navbar-brand class for it.
#font-face {
font-family: 'yekani';
src: url("../fonts/yekan.ttf");
}
#font-face {
font-family: 'yekani';
src: url("../fonts/yekan.eot");
}
#font-face {
font-family: 'yekani';
src: url("../fonts/yekan.woff");
}
body {
font-family: yekani;
}
.container-fluid {
padding: 0 6rem;
}
.menu {}
.links a {
font-size: 1.25rem;
color: #333;
}
.menu {
box-shadow: 0 1px 4px 1px #d0d0d0;
}
.logo img {
width: 120px;
}
.btn-outline-primary {
border-width: 2px;
border-color: #cce1e7;
color: #3dacd9;
}
.navbar-nav .nav-link {
padding-left: 2rem !important;
}
.links i {
color: #f5f5f5;
font-size: 1.2rem;
}
.navbar-toggler i {
font-size: 2rem;
}
.navbar .dropdown {
position: static;
}
.navbar .dropdown-menu {
width: 80rem;
left: 0;
right: 40rem;
/* height of nav-item */
top: 5rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>مثال بوت استرپ</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid menu">
<div class="links ">
<nav class=" navbar navbar-expand-xl mb-4 mt-4">
<button class="btn btn-outline-primary btn-lg mb-4 mt-4 pt-2 pb-2 navbar-brand ">
<i class="fas fa-arrow-left"></i>
عضویت : ورود
</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<i class="fas fa-bars text-dark "></i>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav navbar-light">
<li class="nav-item "><a class="nav-link " href="">ارتباط با ما</a></li>
<i class="fas fa-ellipsis-v m-3"></i>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
دوره های مجازی
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> دوره های مجازی</a>
<a class="dropdown-item" href="#">دوره های مجازی</a>
<a class="dropdown-item" href="#">دوره های مجازی</a>
</div>
</li>
<i class="fas fa-ellipsis-v m-3"></i>
<li class="nav-item "><a class="nav-link" href="">دوره های متخصص</a></li>
<i class="fas fa-ellipsis-v m-3"></i>
<li class="nav-item "><a class="nav-link borderl" href="">محتوا</a></li>
</ul>
</div>
</nav>
</div>
<div class="logo mt-4 mb-4 ml-5 d-none d-xl-block">
<img src="https://s.7learn.com/themes/slt/assets/img/logo.png" alt="">
</div>
</div>
</body>
</html>

Display popup on click of a box

I have a website here. When you click on the team tab, it will take you to the team section.
I am trying to create a popup here.The same pop up should work on clicking any of the points boxes:
points box
Now I am getting the popup below the points box (see in the website)
Code involved (only related to team section to keep the problem relevant):
$(document).ready(function() {
$('.counter col_fourth a').on('click', function(e) {
e.preventDefault();
var _this = $(this);
var block = _this.attr('href');
$(".counter col_fourth").removeClass("active");
_this.parent().addClass("active");
$(".counter col_fourth").hide();
$(block).fadeIn();
});
/**
* Fade in the Popup
*/
$('.counter col_fourth').on('click', function() {
$('#popup').fadeIn();
});
});
body {
font-family: Arial;
padding: 25px;
background-color: #f5f5f5;
color: #808080;
text-align: center;
}
/*-=-=-=-=-=-=-=-=-=-=-=- */
/* Column Grids */
/*-=-=-=-=-=-=-=-=-=-=-=- */
.team-leader-box {
.col_half {
width: 49%;
}
.col_third {
width: 32%;
}
.col_fourth {
width: 23.5%;
}
.col_fifth {
width: 18.4%;
}
.col_sixth {
width: 15%;
}
.col_three_fourth {
width: 74.5%;
}
.col_twothird {
width: 66%;
}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth {
position: relative;
display: inline;
display: inline-block;
float: left;
margin-right: 2%;
margin-bottom: 20px;
}
.end {
margin-right: 0 !important;
}
/* Column Grids End */
.wrapper {
width: 980px;
margin: 30px auto;
position: relative;
}
.counter {
background-color: #808080;
padding: 10px 0;
border-radius: 5px;
}
.count-title {
font-size: 40px;
font-weight: normal;
margin-top: 10px;
margin-bottom: 0;
text-align: center;
}
.count-text {
font-size: 13px;
font-weight: normal;
margin-top: 10px;
margin-bottom: 0;
text-align: center;
}
.fa-2x {
margin: 0 auto;
float: none;
display: table;
color: #4ad1e5;
}
}
.counter.col_fourth {
background-color: #fff;
border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="main-section team" id="team">
<div class="container">
<h2>team</h2>
<h6>Take a closer look into our amazing team. We won’t bite.</h6>
<div class="team-leader-block clearfix">
<div class="team-leader-box">
<div class="team-leader wow fadeInDown delay-03s">
<div class="team-leader-shadow">
</div>
<img src="img/team-leader-pic1.jpg" alt="">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<h2 class="timer count-title" id="count-number" data-to="50" data-speed="1500"></h2>
<p class="count-text ">points</p>
<p1>click to know</p1>
</div>
</div>
</div>
<div class="team-leader-box">
<div class="team-leader wow fadeInDown delay-06s">
<div class="team-leader-shadow">
</div>
<img src="img/team-leader-pic2.jpg" alt="">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<h2 class="timer count-title" id="count-number" data-to="30" data-speed="1500"></h2>
<p class="count-text ">points</p>
</div>
</div>
</div>
<div class="team-leader-box">
<div class="team-leader wow fadeInDown delay-09s">
<div class="team-leader-shadow">
</div>
<img src="img/team-leader-pic3.jpg" alt="">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<h2 class="timer count-title" id="count-number" data-to="10" data-speed="1500"></h2>
<p class="count-text ">points</p>
</div>
</div>
</div>
</div>
<div class="popup" id="popup">
<div class="popup__inner">
<header class="popup__header">
<a onclick="$('#popup').fadeOut()" id="popup-exit">esc</a>
</header>
<img src="http://www.fillmurray.com/124/124" alt="Bart Veneman" width="200" height="200" class="profile__image" />
<section class="profile__details">
<ul class="profile__stats">
<li>
<h3 class="profile_stat__heading">Gold</h3>
<div class="profile_stat__number">17</div>
</li>
<li>
<h3 class="profile_stat__heading">Silver</h3>
<div class="profile_stat__number">8</div>
</li>
<li>
<h3 class="profile_stat__heading">Bronze</h3>
<div class="profile_stat__number">21</div>
</li>
</ul>
<h2 class="profile__name" id="popup-name"></h2>
<h2 class="profile__name">Designation: </h2>
<h2 class="profile__name">Reporting Manager: </h2>
<h2 class="profile__name">Email: </h2>
<h2 class="profile__name">Date of Join: </h2>
<h2 class="profile__name" id="popup-score"></h2>
<h2 class="profile__name">Latest Week Points: </h2>
<h2 class="profile__name">Overall Points: </h2>
<h2 class="profile__name">Medals Rewarded:</h2>
<ul class="social">
<li><i class="fa fa-github"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-bitbucket"></i></li>
<li class="location">
<i class="fa fa-map-marker"></i>
<span>Bangalore, IN</span>
</li>
</ul>
</section>
</div>
</div>
</div>
</section>
I think I am making some mistake with the JavaScript.
I just want to display the same popup on clicking the points boxes as in pic above.

Dropdown menu bootstrap multilevel

I have some question:
How to make navbar text is in the left in Bootstrap?
I'd already make the dropdown menu with bootstrap and jquery-menu-aim. But my dropdown submenu is piled up. This what my goal is.
And this is what I've done..
Can you help me? Thanks in advance. I'm using bootstrap 3.3.4.
HTML file
<header>
<div class="branding">Logo
<h3>Brand</h3>
<!--<div style="clear: both;"></div>--></div>
</header>
<nav role="navigation" class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left"> Product
<ul class="dropdown-menu" role="menu">
<li class="search row-sm-3">
<input type="text" class="form-control" placeholder="Search" />
</li>
<li role="separator" class="divider"></li>
<li data-submenu-id="submenu-mobile"> Mobile Devices
<div id="submenu-mobile" class="popover">
<h3 class="popover-title">Mobile Devices</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Smartphones
</li>
<li>Tablets
</li>
<li>Other Phones
</li>
<li>Accessoris
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-audio"> TV / Audio / Video
<div id="submenu-audio" class="popover">
<h3 class="popover-title">TV / Audio / Video</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Televisions
</li>
<li>Audio and Video
</li>
<li>Accessoris
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-track-trace"> Cameras and Camcorders
<div id="submenu-track-trace" class="popover">
<h3 class="popover-title">Cameras and Camcorders</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Cameras
</li>
<li>Camcorders
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-it"> IT
<div id="submenu-it" class="popover">
<h3 class="popover-title">IT</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Monitor
</li>
<li>Printers
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li class="navbar-left">Apps
</li>
<li class="navbar-left">Support
</li>
</ul>
<ul class="nav navbar-nav navbar-right setting">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Setting
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>
My Profile</a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-inbox"></span>
Messages</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-log-out"></span>
Logout</a>
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
CSS file
.branding h3 {
position: fixed;
float: left;
left: 25%;
top: -5px;
font-weight: bold;
font-size: 18px;
color: #595959;
}
nav {
height: 30px;
float: left;
}
.navbar-fixed-top {
top: 40px;
/*font-size: 13px;*/
font-weight: bold;
background: #D9D9D9;
color: #727272;
}
.nav li a {
text-decoration: none;
color: #727272;
}
.nav li a:hover {
color: blue;
}
.disabled {
top: 15px;
}
.divider {
background: #000;
}
.dropdown-menu {
top: 50px;
border-top-color: #eee;
background: #eee;
/*width: 300px;*/
}
.popover {
background: #eee;
width: 250px;
}
.popover-title {
font-weight: bold;
}
.popover-content {
border: 0;
list-style-type: none;
}
.popover-content ul li a {
list-style-type: none;
color: #727272;
}
.popover-content ul li a:hover {
text-decoration: none;
color: blue;
}
.search {
margin: 10px;
}

change class to active at time of day

I have a schedule that shows what is showing on a live feed by time of day. I have basically no java experience but I need the active div class to change based on the time so people know which segment is showing. I also need the active div to center on the menu.
My HTML is:
<div class="schedule-container">
<div class="schedule-header">
<div class="scheduleLogo"><img style="width: 78px;" src="http://cdn2.hubspot.net/hub/160749/file-778730016-png/InSites/insites-logo-white.png" alt="insites-logo-white" width="78"></div>
<div class="scheduleTime">time</div>
</div>
<div class="schedule-list-container">
<div class="schedule-list-header">Time slot host Interview subject topic</div>
<div class="scrollPanel">
<div class="schedule-list">
<ul>
<li><a href="#">
<div class="time">10:00am</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee "Espen Sivertsen Type A Machines"</div>
<div class="description">Tech - culture & ecosystem</div>
</a></li>
<li><a href="#">
<div class="time">10:15</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole Felix</div>
</a></li>
<li><a href="#">
<div class="time">10:30</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee Cat Casut</div>
<div class="description">"Education - Hackathon Kaiser grantee & intern # Type A</div>
</a></li>
<li><a href="#">
<div class="time">10:45</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole open</div>
</a></li>
<li><a href="#">
<div class="time">11:00am</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee "Sarah Kayle Robot Club"</div>
<div class="description">Education -</div>
</a></li>
<li><a href="#">
<div class="time">11:15</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole</div>
<div class="description">open</div>
</a></li>
<li><a href="#">
<div class="time">11:30</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee Calvin and Noah</div>
<div class="description">Minecraft Tech - programming?</div>
</a></li>
<li><a href="#">
<div class="time">11:45</div>
<span class="divider"> </span>
<div class="eventInfo">"OmNom video Sound Fit video"</div>
</a></li>
<li><a href="#">
<div class="time">12:00noon</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole</div>
</a></li>
<li><a href="#">
<div class="time">12:15</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee</div>
</a></li>
<li><a href="#">
<div class="time">12:30</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole "Barbara Hanna CEO/Founder, Cyant"</div>
<div class="description">Tech-art-nexus</div>
</a></li>
<li><a href="#">
<div class="time">12:45</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee</div>
<div class="description">?</div>
</a></li>
<li><a href="#">
<div class="time">1:00pm</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole Greg DeLaune</div>
</a></li>
<li><a href="#">
<div class="time">1:15</div>
<span class="divider"> </span>
<div class="eventInfo">Sebastian Cabrera Derick Lee</div>
<div class="description">Tech - Mobile Fab Lab</div>
</a></li>
<li><a href="#">
<div class="time">1:30</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole Deborah Acosta</div>
<div class="description">Innovation ecosystem</div>
</a></li>
<li><a href="#">
<div class="time">1:45</div>
<span class="divider"> </span>
<div class="eventInfo">Sebastian Cabrera</div>
<div class="description">Lazer Racing Motorcycle</div>
</a></li>
<li><a href="#">
<div class="time">2:00pm</div>
<span class="divider"> </span>
<div class="eventInfo">Debbie Acosta Corey Mcguire</div>
<div class="description">?</div>
</a></li>
<li><a href="#">
<div class="time">2:15</div>
<span class="divider"> </span>
<div class="eventInfo">Sebastain Cabrera "Kofi and Allejandro last names?</div>
</a></li>
<li><a href="#">
<div class="time">2:30</div>
<span class="divider"> </span>
<div class="eventInfo">Debbie Acosta</div>
<div class="description">Tech - inventing?</div>
</a></li>
<li><a href="#">
<div class="time">2:45</div>
<span class="divider"> </span>
<div class="eventInfo">Sebastain Cabrera</div>
</a></li>
<li><a href="#">
<div class="time">3:00pm</div>
<span class="divider"> </span>
<div class="eventInfo">Debbie Acosta</div>
</a></li>
<li><a href="#">
<div class="time">3:15</div>
<span class="divider"> </span>
<div class="eventInfo">Sebastian Cabrera</div>
</a></li>
<li><a href="#">
<div class="time">3:30</div>
<span class="divider"> </span>
<div class="eventInfo">Debbie Acosta</div>
</a></li>
</ul>
</div>
</div>
</div>
</div>
my CCS:
/* Schedule */
.schedule-container{
width: 100%;
height: 100%;
padding: 3px;
}
.schedule-header{
background: #999;
padding: 5px;
height: 20px;
}
.scheduleLogo{
float: left;
vertical-align: top;
text-align: left;
}
.scheduleTime{
float: left;
text-align: right;
}
.schedule-list-container{
background: #666;
padding: 5px;
color: #fff;
font-size: .75em;
}
.schedule-list-header{
background: #666;
color: #999;
white-space: nowrap;
}
.scrollPanel{
overflow-x: auto;
overflow-y: scroll;
max-height: 400px;
}
.schedule-list ul{
padding-left: 0px;
}
.schedule-list li{
display: block;
list-style-type: none;
padding-left: 0px;
}
.schedule-list li a{
display: block;
padding: 10px;
color:#fff;
text-decoration: none;
border-top:thin solid #666;
border-bottom:thin solid #999;
background: -webkit-linear-gradient(#999, #666); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#999, #666); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#999, #666); /* For Firefox 3.6 to 15 */
background: linear-gradient(#999, #666); /* Standard syntax */
}
.schedule-list li a:hover{
border-top:thin solid #999;
border-bottom:thin solid #666;
background: -webkit-linear-gradient(#666, #999); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#666, #999); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#666, #999); /* For Firefox 3.6 to 15 */
background: linear-gradient(#666, #999); /* Standard syntax */
}
.active{
background: -webkit-linear-gradient(#99ff66, #999); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#99ff66, #999); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#99ff66, #999); /* For Firefox 3.6 to 15 */
background: linear-gradient(#99ff66, #999); /* Standard syntax */
}
.time{
float: left;
padding-right: 5px;
font-weight: bold;
height: 100%;
width: 20%;
}
.divider{
width: 2px;
border-right: 1px;
border-color: #fff;
}
.event{
float: left;
padding-left:5px;
height: 100%;
width: 80%;
}
.eventInfo{
font-weight: bold;
}
.description{
font-weight: normal;
}

i have added some script and styles to your code, not sure this will help you or not. any how please check..
CSS
/* Schedule */
.schedule-container{
width: 100%;
height: 100%;
padding: 3px;
}
.schedule-header{
background: #999;
padding: 5px;
height: 20px;
}
.scheduleLogo{
float: left;
vertical-align: top;
text-align: left;
}
.scheduleTime{
float: left;
text-align: right;
}
.schedule-list-container{
background: #666;
padding: 5px;
color: #fff;
font-size: .75em;
}
.schedule-list-header{
background: #666;
color: #999;
white-space: nowrap;
}
.scrollPanel{
overflow-x: auto;
overflow-y: scroll;
max-height: 400px;
}
.schedule-list ul{
padding-left: 0px;
}
.schedule-list li{
display: block;
list-style-type: none;
padding-left: 0px;
}
.schedule-list li a{
display: block;
padding: 10px;
color:#fff;
text-decoration: none;
border-top:thin solid #666;
border-bottom:thin solid #999;
background: -webkit-linear-gradient(#999, #666); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#999, #666); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#999, #666); /* For Firefox 3.6 to 15 */
background: linear-gradient(#999, #666); /* Standard syntax */
height: auto;
min-height: 20px;
}
.schedule-list li a:hover{
border-top:thin solid #999;
border-bottom:thin solid #666;
background: -webkit-linear-gradient(#666, #999); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#666, #999); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#666, #999); /* For Firefox 3.6 to 15 */
background: linear-gradient(#666, #999); /* Standard syntax */
}
.active{
background: -webkit-linear-gradient(#99ff66, #999); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#99ff66, #999); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#99ff66, #999); /* For Firefox 3.6 to 15 */
background: linear-gradient(#99ff66, #999); /* Standard syntax */
}
.time{
float: left;
padding-right: 5px;
font-weight: bold;
height: auto;
width: 20%;
}
.divider{
width: 2px;
border-right: 1px;
border-color: #fff;
}
.event{
float: left;
padding-left:5px;
height: 100%;
width: 80%;
}
.eventInfo{
font-weight: bold;
float: left;
}
.description{
font-weight: normal;
}
.active_time {
background: #FFF !important;
color: #000 !important;
margin-left: 0%;
}
HTML
<div class="schedule-container">
<div class="schedule-header">
<div class="scheduleLogo"><img style="width: 78px;" src="http://cdn2.hubspot.net/hub/160749/file-778730016-png/InSites/insites-logo-white.png" alt="insites-logo-white" width="78"></div>
<div class="scheduleTime">time</div>
</div>
<div class="schedule-list-container">
<div class="schedule-list-header">Time slot host Interview subject topic</div>
<div class="scrollPanel">
<div class="schedule-list">
<ul>
<li><a href="#">
<div class="time">10:00 am</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee "Espen Sivertsen Type A Machines"</div>
<div class="description">Tech - culture & ecosystem</div>
</a></li>
<li><a href="#">
<div class="time">10:15 am</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole Felix</div>
</a></li>
<li><a href="#">
<div class="time">10:30 am</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee Cat Casut</div>
<div class="description">"Education - Hackathon Kaiser grantee & intern # Type A</div>
</a></li>
<li><a href="#">
<div class="time">10:45 am</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole open</div>
</a></li>
<li><a href="#">
<div class="time">11:00 am</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee "Sarah Kayle Robot Club"</div>
<div class="description">Education -</div>
</a></li>
<li><a href="#">
<div class="time">11:15 am</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole</div>
<div class="description">open</div>
</a></li>
<li><a href="#">
<div class="time">11:30 am</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee Calvin and Noah</div>
<div class="description">Minecraft Tech - programming?</div>
</a></li>
<li><a href="#">
<div class="time">11:45 am</div>
<span class="divider"> </span>
<div class="eventInfo">"OmNom video Sound Fit video"</div>
</a></li>
<li><a href="#">
<div class="time">12:00 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole</div>
</a></li>
<li><a href="#">
<div class="time">12:15 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee</div>
</a></li>
<li><a href="#">
<div class="time">12:30 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole "Barbara Hanna CEO/Founder, Cyant"</div>
<div class="description">Tech-art-nexus</div>
</a></li>
<li><a href="#">
<div class="time">12:45 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee</div>
<div class="description">?</div>
</a></li>
<li><a href="#">
<div class="time">1:00 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole Greg DeLaune</div>
</a></li>
<li><a href="#">
<div class="time">1:15 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Sebastian Cabrera Derick Lee</div>
<div class="description">Tech - Mobile Fab Lab</div>
</a></li>
<li><a href="#">
<div class="time">1:30 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole Deborah Acosta</div>
<div class="description">Innovation ecosystem</div>
</a></li>
<li><a href="#">
<div class="time">1:45 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Sebastian Cabrera</div>
<div class="description">Lazer Racing Motorcycle</div>
</a></li>
<li><a href="#">
<div class="time">2:00 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Debbie Acosta Corey Mcguire</div>
<div class="description">?</div>
</a></li>
<li><a href="#">
<div class="time">2:15 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Sebastain Cabrera "Kofi and Allejandro last names?</div>
</a></li>
<li><a href="#">
<div class="time">2:30 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Debbie Acosta</div>
<div class="description">Tech - inventing?</div>
</a></li>
<li><a href="#">
<div class="time">2:45 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Sebastain Cabrera</div>
</a></li>
<li><a href="#">
<div class="time">3:00 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Debbie Acosta</div>
</a></li>
<li><a href="#">
<div class="time">3:15 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Sebastian Cabrera</div>
</a></li>
<li><a href="#">
<div class="time">3:30 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Debbie Acosta</div>
</a></li>
</ul>
</div>
</div>
</div>
</div>
and i have added script and jquery library
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var date = new Date();
var formatDate = formatAMPM(date);
var times = $('.time');
$.each(times,function(){
if(formatDate == ($(this).html())) {
$(this).parent().addClass('active_time');
}
});
});
function formatAMPM(date) {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0'+minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
return strTime;
}
</script>
so the active time will add a active class and the background will change.

Categories

Resources