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.
Related
I'm sorry for dropping so much code here, but I've been playing with this for over a week and I just can't figure it out.
So I am working on my personal website, and the problem is that the images in the the body's grid system overlap sometimes on the first load of the site. If you refresh it, it seems to work ok (most of the time). You can try yourself: tylerteacher.com . The strange thing is that the site works in the compatibility viewers in chrome and firefox.
I have tried adding margins and using the 'space-between' function in the css. I have double checked the html to make sure everything is properly linked to the css page, and I have also played with Javascript page and the slides per view functions.
I really appreciate the help!
let toggle = document.querySelector("#header .toggle-button");
let collapse = document.querySelectorAll("#header .collapse");
toggle.addEventListener('click' , function(){
collapse.forEach(col => col.classList.toggle("collapse-toggle"));
})
// with masonry
new Masonry("#posts .grid", {
itemSelector : '.grid-item',
gutter : 20
});
// swiper libray initialization
new Swiper('.swiper-container', {
direction : 'horizontal',
loop : true,
slidesPerView : 6,
autoplay : {
delay : 0
},
// responsive breakpoints
breakpoints : {
'#0' : {
slidesPerView : 2
},
// 888px
'#1.00' : {
slidesPerView : 3
},
// 1110px
'#1.25' : {
slidesPerView : 4
},
// 1330px
'#1.50' : {
slidesPerView: 5
}
}
})
// Sticky Navigation
window.onscroll = function(){ myFunction()};
// get the current value
let navbar = document.getElementById("header");
// get the navbar position
let sticky = navbar.offsetTop;
// sticky function
function myFunction(){
if(window.pageYOffset >= sticky){
navbar.classList.add("sticky");
}else{
navbar.classList.remove("sticky");
}
}
#import url('https://fonts.googleapis.com/css2?family=DM+Sans&family=Poppins&family=Roboto&display=swap');
/* root styling */
:root{
--light : #f8f9fa;
--secondary: #adb5bd;
--dark: #343a40;
--primary-color: #f15bb5;
--secondary-color: #2ec4b6;
--border : #e9ecef;
}
body{
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
}
a{
text-decoration: none;
}
* > *{
box-sizing: border-box;
}
/* global styling */
.text-light{
color: var(--light);
}
.text-secondary{
color: var(--secondary);
}
.text-dark{
color: var(--dark);
}
.text-primary{
color: var(--primary-color);
}
.bg-light{
background-color: var(--light);
}
.container{
max-width: 1200px;
padding: 0 15px;
margin: auto;
}
.img-fluid{
width: 100%;
}
.text-title{
font-family: 'DM Sans', sans-serif;
font-weight: bold;
}
.secondary-title{
font-family: 'Poppins' , sans-serif;
}
.display-1{
font-size: 22px;
}
.display-2{
font-size: 16px;
}
.display-3{
font-size: 14px;
}
.text-center{
text-align: center;
}
.text-right{
text-align: right;
}
.btn{
padding: 15px 20px;
border: none;
}
.btn-primary{
border-radius: 4px;
background-color: var(--secondary-color);
}
.object-fit{
max-height: 120px;
height: 80px;
width: 80px;
object-fit: fill;
justify-content: space-between;
}
.d-flex{
display: flex;
}
.flex-wrap{
flex-wrap: wrap;
}
.justify-content-center{
justify-content: center;
}
.justify-content-between{
justify-content: space-between;
}
.mt-2{
margin-top: 10px;
}
.mt-3{
margin-top: 50px;
}
.mb-3{
margin-bottom: 30px;
}
.m-0{
margin: 0;
}
.px-1{
padding-left: 5px;
padding-right: 5px;
}
.px-2{
padding-left: 20px;
padding-right: 20px;
}
.py-1{
padding-top: 10px;
padding-bottom: 10px;
}
.py-2{
padding-top: 20px;
padding-bottom: 20px;
}
.py-3{
padding-top: 30px;
padding-bottom: 30px;
}
.thumbnail{
width: 100%;
height: 500px;
object-fit: cover;
}
.rounded{
height: 120px;
width: 120px;
object-fit: fill;
border-radius: 99px;
}
.shadow{
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
/* section styling */
/* ------- Navigation Menu ---------- */
.navbar{
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10px;
}
.nav-brand{
font-family: 'DM Sans', sans-serif;
font-weight: bold;
align-self: center;
font-size: 32px;
}
.collapse{
align-self: center;
}
.nav-link{
font-size: 18px;
margin: 12px;
color: var(--dark);
font-family: 'Poppins', sans-serif;
}
.nav-link:hover{
color: var(--primary-color);
}
.search-box{
display: inline;
border-right: 1px solid var(--secondary);
padding-right: 12px;
margin-right: 10px;
}
.toggle-button{
font-size: 21px;
background-color: transparent;
border: none;
position: absolute;
right: 0;
margin: 8px 10px;
display: none;
}
.toggle-button:focus{
outline: none;
}
/* ------- .Navigation Menu ---------- */
/* ----------- Main Section ---------- */
#site-main{
margin-top: 4em;
}
#posts{
margin-bottom: 5em;
}
.grid{
margin: 1 auto;
row-gap: 20px;
}
.grid .grid-item{
width: calc(33.3333% - 20px);
margin-bottom: 3em;
}
/* ----------- .Main Section ---------- */
/* ----------- sticky ------- */
.sticky{
position: fixed;
top: 0;
z-index: 99;
width: 100%;
}
.sticky + .content{
padding-top: 60px;
}
/* ----------- .sticky ------- */
/* Media Query */
.row{
display: flex;
}
.col-3{
flex: 0 0 33.3333%;
max-width: 33.3333%;
padding-right: 35px;
}
.col-8{
flex: 0 0 70%;
max-width: 70%;
}
.col-4{
flex: 0 0 30%;
max-width: 30%;
}
#media (max-width : 1024px){
.row{
flex-wrap: wrap;
}
.col-3{
flex: 0 0 50%;
max-width: 50%;
}
.col-8{
flex: 0 0 100%;
max-width: 100%;
}
.col-4{
flex: 0 0 100%;
max-width: 100%;
}
}
#media (max-width : 992px){
.navbar{
flex-direction: column;
}
#site-main{
margin-top: 14em;
}
}
#media (max-width : 768px){
.grid .grid-item{
width: calc(50% - 20px);
border-top: 1px solid #dfdfdf;
}
.col-3{
flex: 0 0 100%;
max-width: calc(100% - 50px);
padding-top: 40px;
}
}
#media (max-width : 574px){
.toggle-button{
display: initial;
}
.collapse{
max-height: 0;
overflow: hidden;
transition: all 0.8s cubic-bezier(0.51,-0.15, 0, 0.98);
}
.collapse .nav-link{
display: block;
text-align: center;
}
.search-box{
border-right: none;
}
.collapse-toggle{
max-height: 500px;
}
.grid .grid-item{
width: calc(100% - 20px);
border-top: 1px solid #dfdfdf;
}
#site-main{
margin-top: 6em;
justify-content: space-around;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TylerTeacher</title>
<!-- font awesome icons cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
crossorigin="anonymous" />
<!-- swiper slider css file -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.css"
integrity="sha512-m3pAvNriL711NMlhkZHK6K4Tu2/RjtrzyjxZU8mlAbxxoDoURy27KajN1LGTLeEEPvaN12mKAgSCrYEwF9y0jA=="
crossorigin="anonymous" />
<!-- custom style.css file -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Header -->
<header id="header" class="shadow bg-light">
<nav class="container navbar">
<a href="/index.html" class="nav-brand text-dark">
TylerTeacher
</a>
<!-- toggle button -->
<button class="toggle-button">
<span><i class="fas fa-bars"></i></span>
</button>
<!-- collapse on toggle button click -->
<div class="collapse">
<ul class="navbar-nav">
Home
Resources
Classes
Testimonials
Contact
</ul>
</div>
<!-- collapse on toggle button click -->
<div class="collapse">
<ul class="navbar-nav">
<div class="search-box">
<i class="fas fa-search"></i>
</div>
<i class="fab fa-facebook-f"></i>
<a href="#" class="https://www.youtube.com/channel/UCDN9p8e-UAaPxtzfoVJnLMw"><i
class="fab fa-youtube"></i></a>
<a href="https://www.instagram.com/tyler.s.teacher/" class="nav-link"><i
class="fab fa-instagram"></i></a>
<i class="fab fa-tiktok"></i>
</ul>
</div>
</nav>
</header>
<!-- .Header -->
<!--main site-->
<main id="site-main">
<!-- Blog Post Section -->
<section id="posts">
<div class="container">
<div class="grid">
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin:auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/inspirational-word_EXZZBXPUS6.jpg" class="img-fluid" alt="">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
Welcome to TylerTeacher.com
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around; ">
<div class="card" style="margin: auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/grandmother-1822560_960_720.jpg" class="img-fluid" alt="">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
Why online education is the future
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto" >
<div class="overflow-img">
<a href="#">
<img src="./Assets/inspirational-word_EXZZBXPUS6.jpg" class="img-fluid" alt="">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
How to overcome language anxiety
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/laptop-red-cup-coffee-notebook-pen-satchel-freephotoscc-thumb-2.jpg"
class="img-fluid" alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
Podcasts are a great tool for language learners
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto" >
<div class="overflow-img">
<a href="#">
<img src="./Assets/man_studying_online.jpg" class="img-fluid"
alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
What makes some people better at learning languages?
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/negative-space-picnic-city-river-sunset-ben-duchac-thumb-1.jpg"
class="img-fluid" alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
Tips for becoming a more confident communicator in English
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/listen-1702648_960_720.jpg" class="img-fluid"
alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
How listening can make you better at speaking English
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/Man_studying.jpg" class="img-fluid" alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
How to use online classes effectively
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin:auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/education_tiles.jpg" class="img-fluid"
alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
Coming soon
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
</div>
<div class="text-center">
<button class="btn btn-primary secondary-title text-light">Load More Posts...</button>
</div>
</div>
</section>
<!-- .Blog Post Section -->
<!-- masonry libray for horizontal grid -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"
integrity="sha512-JRlcvSZAXT8+5SQQAvklXGJuxXTouyq8oIMaYERZQasB8SBDHZaUbeASsJWpk0UUrf89DP3/aefPPrlMR1h1yQ=="
crossorigin="anonymous"></script>
<!-- swiper slider cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.js"
integrity="sha512-1LlEYE0qExJ/GUfAJ0k2K2fB5sIvMv/q6ueo3syohvQ3ElWDQVSMUOf39cxaDWHtNu7M6lF6ZC1H6A1m3SvheA=="
crossorigin="anonymous"></script>
<!-- custom javascript main.js file -->
<script src="main.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>
It is caused by the Masonry. You have to let the page finish loading before you initialize it. This worked for me
window.addEventListener('load', function(){
new Masonry("#posts .grid", {
itemSelector : '.grid-item',
gutter : 20
});
// remove preload if added
});
Optional: Whiles the page loads, you can add a preloader to hide the page's disorganised stucture.
What you're experiencing is due to the Masonry script calculating the dimensions of the grid based on its content. While loading the page your images don't have a width and height because the browser doesn't know what they look like. Masonry doesn't wait and will render your grid anyway.
A fix for this is to let the browser know in advance what the dimensions of the image will be. You can do this by adding a width and height attribute to your img tag containing the width and height in pixels.
<img src="your-image.jpg" class="img-fluid" width="480" height="720" alt="" />
Alternatively you could wait for all images in your grid to load before initializing the Masonry script.
// Loads a single image.
const loadImage = src => new Promise(resolve => {
const image = new Image();
image.onload = () => resolve();
image.src = src;
});
// Get the container with all images.
// Loop over each image and wait for all of them to load.
async function allImagesLoaded(selector) {
const container = document.querySelector(selector);
if (container === null) {
return;
}
const images = container.querySelectorAll('img');
return Promise.all([...images].map(
src => loadImage(src)
));
}
// Load all images inside #posts .grid.
allImagesLoaded('#posts .grid').then(() => {
new Masonry("#posts .grid", {
itemSelector : '.grid-item',
gutter : 20
});
});
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>FlowerPot</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>FlowerPot</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>
I have a list of li tags having same class and and i want to change
their styles and their children elements styles when ever a user hover
over each the li which is the container, below is the code I have
tried. I used getElementsByClassName to get the node list of all li
tags, now, what I want to do is add event listener to each one of them
and manipulate the style of each when ever a user triggers a mouseover
event
function doFirst(){
var playList = document.getElementsByClassName("list");
var play = document.getElementsByClassName("play");
var plus = document.getElementsByClassName("plus");
var title = document.getElementsByClassName("title");
function songHover (e){
playList[0].style.backgroundColor = "#ccc";
play[0].style.display = "block";
plus[0].style.display = "block";
title[0].style.width = "50%";
}
function songHoverOut (e){
playList[0].style.backgroundColor = "#fff";
play[0].style.display = "none";
plus[0].style.display = "none";
title[0].style.width = "auto";
}
playList[0].addEventListener("mouseover", songHover, false);
playList[0].addEventListener("mouseleave", songHoverOut, false);
}
window.addEventListener("load", doFirst, false);
content .song-list{
width: 100%;
height: auto;
}
content .song-list ul{
margin-bottom:4%;
display: flex;
flex-direction: column;
}
content .song-list ul > p{
width: 100%;
padding: 6% 0 1% 0;
font-size: 140%;
color: #2b32b2;
}
content .song-list ul li{
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
height: 10%;
margin-bottom: 6%;
padding: 2%;
}
.title{
border: 0px solid red;
flex:1;
max-width: 80%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.title h4{
font-weight: normal!important;
font-size: 98%;
white-space: nowrap;
overflow: hidden;
margin-bottom: 4px;
width: 100%;
}
.title p{
font-size: 85%;
white-space: nowrap;
overflow: hidden;
margin-right: 8px;
}
.title p:first-child{
flex:1;
}
.title p:last-child{
max-width: 50%;
}
content .song-list ul li i{
display: none;
border: 0px solid red;
width: 15%;
text-align: center;
padding: 3.8% 0;
}
.play{
}
.plus{
}
.duration{
display: block;
border: 0px solid red;
margin-left: auto;
width: 20%;
text-align: right;
padding: 3.8% 0;
}
<div class="song-list">
<ul>
<p>A</p>
<li class="list">
<span class="title">
<h4>A Sky Full Of Stars</h4>
<p>Coldplay</p>
<p>Ghost Stories</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">4:28</span>
</li>
<li class="list">
<span class="title">
<h4>The A Team (george.ortha#ferialaw.com)</h4>
<p>Ed Sheeran</p>
<p>+</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">4:18</span>
</li>
<li class="list">
<span class="title">
<h4>Adore You</h4>
<p>miley Cyrus</p>
<p>bangerz</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">4:38</span>
</li>
<li class="list">
<span class="title">
<h4>Adorn (george.ortha#ferialaw.com)</h4>
<p>Miguel</p>
<p>Kaleidoscope Dream</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">3:13</span>
</li>
<li class="list">
<span class="title">
<h4>Again</h4>
<p>Fetty Wrap</p>
<p>Billboard Hot 100 Singles Chart</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">5:12</span>
</li>
</ul>
<ul>
<p>B</p>
<li class="list">
<span class="title">
<h4>
Back to December (george.ortha#ferialaw.com)
</h4>
<p>Tailor Swift</p>
<p>2011 Billboard Chart</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">4:43</span>
</li>
<li class="list">
<span class="title">
<h4>Bad (george.ortha#ferialaw.com)</h4>
<p>Wale</p>
<p>The Gifted</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">4:14</span>
</li>
<li class="list">
<span class="title">
<h4>Bad Blood</h4>
<p>Tailor Swift</p>
<p>2011 Billboard Chart</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">5:12</span>
</li>
<li class="list">
<span class="title">
<h4>Bartender</h4>
<p>Lady Antebellum</p>
<p>747</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">5:12</span>
</li>
<li class="list">
<span class="title">
<h4>Believe Me</h4>
<p>Lil Wayne</p>
<p>Believe Me</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">5:12</span>
</li>
</ul>
</div>
I think that simpler solution is css :hover pseudo class (change styles when user hovers element with cursor).
Example: .parent:hover .some-child {hover styles}.
You seem to be a bit confused about the "addEventListener". You do not have to add an event listener to the window to initialize the code. Simply wrap it in a (function(){ // Your code })(); and it will execute as soon as possible.
But here you have an jsfiddle about how you could go about it: https://jsfiddle.net/g59x59rr/12/
Though, I used "querySelectorAll" instead of "getElementsByClassName". But I hope my solution will make sense to you. :)
(function() {
var lielem = document.querySelectorAll(".li"), i;
for (i = 0; i < lielem.length; i++) {
lielem[i].addEventListener('mouseover', function() {
this.style.color = 'red';
this.addEventListener('mouseout', function(){
this.style.color = 'black';
});
});
}
})();
<ul>
<li class="li">First Li</li>
<li class="li">Second Li</li>
<li class="li">Third Li</li>
</ul>
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.
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;
}