I am creating a portfolio by watching this tutorial - https://www.youtube.com/watch?v=27JtRAI3QO8&list=WL&index=12 (I am stuck at 1:12:13)
I have created a qualification section. there are two division that is education and work.
By default it shows education tab. when I click on the work tab it shows content in the work tab. But when I click back on the education tab it doesn't show the content of the education tab.
actually i am beginner to js. i am unable to get the error in the js file.
my Html code is
<section class="qualification section">
<h2 class="section_title">Qualification</h2>
<span class="section_subtitle">My personal journey</span>
<div class="q_container container">
<div class="q_tabs">
<div class="q_btn btn-flex q_active " data-target ='#education'>
<i class="uil uil-graduation-cap q_icon"></i>Education
</div>
<div class="q_btn btn-flex " data-target ='#work'>
<i class="uil uil-briefcase-alt q_icon"></i>Work
</div>
</div>
<div class="q_section">
<!--==================== QUALIFICATION c1====================-->
<div class="q_content q_active " data-content id="Education">
<!--==================== QUALIFICATION --1====================-->
<div class="q_data">
<div>
<h3 class="q_title">Electronics and communication Engineer</h3>
<span class="q_subtitle">M. S Ramaiah University of Applied Sciences</span>
<div class="q_cale">
<i class="uil uil-calendar-alt"></i>2018-2022
</div>
</div>
<div>
<span class="q_round"></span>
<span class="q_line"></span>
</div>
</div>
<!--==================== QUALIFICATION --2====================-->
<div class="q_data">
<div></div>
<div>
<span class="q_round"></span>
<span class="q_line"></span>
</div>
<div>
<h3 class="q_title">PUC</h3>
<span class="q_subtitle">Gurukula independent PU college of science</span>
<div class="q_cale">
<i class="uil uil-calendar-alt"></i>2016-2018
</div>
</div>
</div>
<!--==================== QUALIFICATION --3====================-->
<div class="q_data">
<div>
<h3 class="q_title">SSLC</h3>
<span class="q_subtitle">Sardar Vallabhbhai Patel Memorial H.S</span>
<div class="q_cale">
<i class="uil uil-calendar-alt"></i>2006-2016
</div>
</div>
<div>
<span class="q_round"></span>
<span class="q_line"></span>
</div>
</div>
</div>
<!--==================== QUALIFICATION c2====================-->
<div class="q_content " data-content id="work">
<!--==================== QUALIFICATION --1====================-->
<div class="q_data">
<div>
<h3 class="q_title">Computer Communication Network and Digital Switching</h3>
<span class="q_subtitle">RTTC BSNL Mysore</span>
<div class="q_cale">
<i class="uil uil-calendar-alt"></i>08/07/2019- 13/07/2019
</div>
</div>
<div>
<span class="q_round"></span>
<span class="q_line"></span>
</div>
</div>
<!--==================== QUALIFICATION --2====================-->
<div class="q_data">
<div></div>
<div>
<span class="q_round"></span>
<span class="q_line"></span>
</div>
<div>
<h3 class="q_title">IOT and Computer vision</h3>
<span class="q_subtitle">The Sparks Foundation</span>
<div class="q_cale">
<i class="uil uil-calendar-alt"></i>26/07/2021- 21/08/2021
</div>
</div>
</div>
<!--==================== QUALIFICATION --3====================-->
<div class="q_data">
<div>
<h3 class="q_title">Electric vehicles</h3>
<span class="q_subtitle">Elite Techno Group</span>
<div class="q_cale">
<i class="uil uil-calendar-alt"></i>18/08/2021- 18/09/2021
</div>
</div>
<div>
<span class="q_round"></span>
<span class="q_line"></span>
</div>
</div>
</div>
</div>
</div>
</section>
Here is my CSS code
.skills__container{
row-gap: 0;
}
.skills__header{
display: flex;
align-items: center;
margin-bottom: var(--mb-2-5);
cursor: pointer;
}
.skills__icon,
.skills__arrow{
font-size: 2rem;
color: var(--first-color);
}
.skills__icon{
margin-right: var(--mb-0-75);
}
.skills__title{
font-size: var(--h3-font-size);
}
.skills__subtitle{
font-size: var(--small-font-size);
color: var(--text-color-light);
}
.skills__arrow{
margin-left: auto;
transition: .4s;
}
.skills__list{
row-gap: 1.5rem;
padding-left: 2.7rem;
}
.skills__title{
display: flex;
justify-content: space-between;
margin-bottom: var(--mb-0-5);
}
.skills__name{
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
}
.skills__bar,
.skills__percentage{
height: 5px;
border-radius: .25rem;
}
.skills__bar{
background-color: hsl(250, 92%, 85%);
}
.skills__percentage{
display: block;
background-color: hsl(250, 69%, 61%);
}
.skills__html{ width: 90%;}
.skills__css{ width: 70%;}
.skills__bootstrap{ width: 80%;}
.skills__Angular{ width: 20%;}
.skills__java{ width: 70%;}
.skills__python{ width: 70%;}
.skills__php{ width: 5%;}
.skills__git{ width: 70%;}
.skills__sql{ width: 40%;}
.skills__agile{ width: 10%;}
.skills_close .skills__list{
height: 0;
overflow: hidden;
}
.skills_open .skills__list{
height: max-content;
margin-bottom: var(--mb-2-5);
}
.skills_open .skills__arrow{
transform: rotate(-180deg);
}
/*==================== QUALIFICATION ====================*/
.q_tabs{
display: flex;
justify-content: space-evenly;
margin-bottom: var(--mb-2);
}
.q_btn{
font-size: var(--h3-font-size);
font-weight: var(--font-medium);
cursor: pointer;
}
.q_btn:hover{
color: var(--first-color);
}
.q_icon{
font-size: 1.8rem;
margin-left: var(--mb-0-25);
}
.q_data{
display: grid;
grid-template-columns: 1fr max-content 1fr;
column-gap: 1.5rem;
}
.q_title{
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
}
.q_subtitle{
display: inline-block;
font-size: var(--small-font-size);
margin-bottom: var(--mb-1);
}
.q_cale{
font-size: var(--smaller-font-size);
color: var(--text-color-light);
}
.q_round{
display: inline-block;
width: 13px;
height: 13px;
background-color: var(--first-color);
border-radius: 50%;
}
.q_line{
display: block;
width: 1.9px;
height: 100%;
background-color: var(--first-color);
transform: translate(6px, -7px);
}
.q_content[data-content]{
display: none;
}
.q_active[data-content]{
display: block;
}
.q_btn.q_active{
color: var(--first-color);
}
Here is my js code
const tabs = document.querySelectorAll('[data-target]'),
tabc = document.querySelectorAll('[data-content]');
tabs.forEach(tab =>{
tab.addEventListener('click', () =>{
const target = document.querySelector(tab.dataset.target);
tabc.forEach(tabct =>{
tabct.classList.remove('q_active');
});
target.classList.add('q_active');
tabs.forEach(tab =>{
tab.classList.remove('q_active');
});
target.classList.add('q_active');
});
});
data-target and id need to be exactly the same. You used id="Education" but data-target ='#education'. Hope this will solve your problem.
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
});
});
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 1 year ago.
I have 3 component and every component have 3 element (i,h4,p),I want when I hover to one of these components to change the color of h4 using the array in JavaScript... How can i do it?
I'm new here and I didn't know how to add the code, so you can see the intended part through the bottom link, the last part
.services {
width: 80%;
margin: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.s-title {
width: 100%;
}
.s-items {
display: flex;
}
.s-item {
width: 30%;
text-align: center;
flex: 1;
margin: 20px;
transition: ease 0.5s;
}
.s-item:hover {
box-shadow: 4px 4px 10px #00bfb2;
transform: scale(1.05, 1.05);
}
<section class="services">
<div class="s-title">
<h1>MY SERVICES</h1>
<p>A LOAD UI/UX </p>
</div>
<div class="s-items">
<div class="s-item">
<i class="fa fa-paint-brush"></i>
<h4>Website Design </h4>
<p>As a leading designer</p>
</div>
<div class="s-item">
<i class="fa fa-code"></i>
<h4>Website Development </h4>
<p>As a developer.</p>
</div>
<div class="s-item">
<i class="fa fa-american-sign-language-interpreting"></i>
<h4>24x7 Support </h4>
<p>I offer experienced</p>
</div>
</div>
</section>
You don't need JavaScript for this. Just add this to your CSS:
.s-item:hover h4 {
color: red;
}
Example:
.services {
width: 80%;
margin: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.s-title {
width: 100%;
}
.s-items {
display: flex;
}
.s-item {
width: 30%;
text-align: center;
flex: 1;
margin: 20px;
transition: ease 0.5s;
}
.s-item:hover {
box-shadow: 4px 4px 10px #00bfb2;
transform: scale(1.05, 1.05);
}
.s-item:hover h4 {
color: red;
}
<section class="services">
<div class="s-title">
<h1>MY SERVICES</h1>
<p>A LOAD UI/UX </p>
</div>
<div class="s-items">
<div class="s-item">
<i class="fa fa-paint-brush"></i>
<h4>Website Design </h4>
<p>As a leading designer</p>
</div>
<div class="s-item">
<i class="fa fa-code"></i>
<h4>Website Development </h4>
<p>As a developer.</p>
</div>
<div class="s-item">
<i class="fa fa-american-sign-language-interpreting"></i>
<h4>24x7 Support </h4>
<p>I offer experienced</p>
</div>
</div>
</section>
How do I creating a voting system that uses checkboxes for 1 star, 2 stars, 3 stars, 4 stars and 5 stars. According to what the user picks it will generate an average user rating from the given votes and display the number of stars required.
I am not sure where exactly to start in terms of gathering the input from the user etc...This is all the code I have for now
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
margin: 0 auto; /* Center website */
max-width: 800px; /* Max width */
padding: 20px;
}
.heading {
font-size: 25px;
margin-right: 25px;
}
.fa {
font-size: 25px;
}
.checked {
color: orange;
}
/* Three column layout */
.side {
float: left;
width: 15%;
margin-top:10px;
}
.middle {
margin-top:10px;
float: left;
width: 70%;
}
/* Place text to the right */
.right {
text-align: right;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The bar container */
.bar-container {
width: 100%;
background-color: #f1f1f1;
text-align: center;
color: white;
}
/* Individual bars */
.bar-5 {width: 60%; height: 18px; background-color: #4CAF50;}
.bar-4 {width: 30%; height: 18px; background-color: #2196F3;}
.bar-3 {width: 10%; height: 18px; background-color: #00bcd4;}
.bar-2 {width: 4%; height: 18px; background-color: #ff9800;}
.bar-1 {width: 15%; height: 18px; background-color: #f44336;}
/* Responsive layout - make the columns stack on top of each other instead of next to each other */
#media (max-width: 400px) {
.side, .middle {
width: 100%;
}
.right {
display: none;
}
}
</style>
</head>
<body>
<span class="heading">User Rating</span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<p>4.1 average based on 254 reviews.</p>
<hr style="border:3px solid #f1f1f1">
<div class="row">
<div class="side">
<div>5 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar-5"></div>
</div>
</div>
<div class="side right">
<div>150</div>
</div>
<div class="side">
<div>4 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar-4"></div>
</div>
</div>
<div class="side right">
<div>63</div>
</div>
<div class="side">
<div>3 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar-3"></div>
</div>
</div>
<div class="side right">
<div>15</div>
</div>
<div class="side">
<div>2 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar-2"></div>
</div>
</div>
<div class="side right">
<div>6</div>
</div>
<div class="side">
<div>1 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar-1"></div>
</div>
</div>
<div class="side right">
<div>20</div>
</div>
</div>
</body>
</html>
Usually a 5-star polling system will require a database and a backend programming language. i.e. Mysql and PHP.
Here is an example:
https://www.script-tutorials.com/how-to-create-own-voting-system/
The banner should stay close to the info buttons like in this example:
I want to move this "Ads by Google" label left away from the buttons.
function removeHeader() {
var list = document.getElementById("main");
list.removeChild(list.childNodes[0]);
}
body {
margin: 100px;
}
.banner-buttons {
display: inline-block;
position: relative;
font-size: 14px;
width: 50px;
overflow: hidden;
}
.showme {
display: none;
font-size: 10px;
}
.infoLink:hover .showme {
display: inline-block;
float: left;
}
.closeBtn {
cursor: pointer;
display: inline-block;
}
i:hover {
color: #d075f4;
}
<div id="main">
<div class="nanoSaturnBanner">
<p>teteasdasdasdsadasds sad asdasdasdasdasdas</p>
<div class="banner-buttons">
<label class="showme">Ads by Google</label>
<a class="infoLink" href="https://support.google.com/adsense/#topic=3373519" target="_blank">
<i class="fas fa-info-circle"></i>
</a>
<div class="closeBtn" onclick="removeHeader()">
<i class="far fa-window-close"></i>
</div>
</div>
</div>
HTML code: Here is the html, you will find the two buttons and icons there. If there is something missing just ask and I will update the post.
Try changing your p to a div and moving it after the other stuff. Then adding CSS to move the ad part:
<div id="main">
<div class="nanoSaturnBanner">
<div class="banner-buttons">
<label class="showme">Ads by Google</label>
<a class="infoLink"
href="https://support.google.com/adsense/#topic=3373519"
target="_blank">
<i class="fas fa-info-circle"></i>
</a>
<div class="closeBtn" onclick="removeHeader()">
<i class="far fa-window-close"></i>
</div>
</div>
<div id="text">teteasdasdasdsadasds sad asdasdasdasdasdas</div>
</div>
then add this to the new div class
float: right;
margin-right: 50%;
How to make a range item inside bootstrap popover? I want to make it the exact same as the google app launch button as the following image:
I played around CSS and Try to get it as close as possible, but it seems I am doing it in a wrong way. https://jsfiddle.net/ueskyj1u/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
#import "compass/css3";
.popover-content {
overflow-y: scroll;
height: 200px;
}
.popover-footer {
margin: 0;
padding: 8px 14px;
font-size: 14px;
font-weight: 400;
line-height: 18px;
background-color: #F7F7F7;
border-bottom: 1px solid #EBEBEB;
border-radius: 5px 5px 0 0;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.flex-item {
background: tomato;
/* padding: 13px;*/
width: 74px;
;
height: 83px;
margin-top: 2px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
/*---------------------*/
#General {
background: #383a35;
}
#sale {
background: #ffde6b;
}
#Servicing {
background: #762963;
}
#Purchasing {
background: #22d65b;
}
#Billing {
background: #67a0e1;
}
#Accounts {
background: #a22ee3;
}
#GST {
background: #39c5ac;
}
#StockControl {
background: #ef5836;
}
#System {
background: #69cbf5;
}
</style>
<body>
<div>
<!-- <div class="flex-container">
<div id="General" class="flex-item"> 1
<div class="glyphicon glyphicon-envelope"> </div>
</div>
<div id="sale" class="flex-item">
<div class=" glyphicon glyphicon-ok"> </div> 2</div>
<div id="Servicing" class="flex-item">
<div class="glyphicon glyphicon-globe "> </div> 3</div>
<div id="Purchasing" class="flex-item">
<div class="glyphicon glyphicon-envelope"> </div> 4</div>
<div id="Billing" class="flex-item">
<div class=" glyphicon glyphicon-usd"> </div> 5</div>
<div id="Accounts" class="flex-item">
<div class=" glyphicon glyphicon-user"> </div> 6</div>
<div id="GST" class="flex-item">
<div class=" glyphicon glyphicon-stats"> </div> 7</div>
<div id="StockControl" class="flex-item">
<div class="glyphicon glyphicon-envelope"> </div> 8</div>
<div id="StockControl" class="flex-item">
<div class="glyphicon glyphicon-cog"> </div> 8</div>
</div>
-->
</div>
click me to see popover
<script type="text/javascript">
$("[rel=details]").popover({
trigger: 'click',
placement: 'bottom',
html: 'true',
content: '<div class="flex-container"><div id="General" class="flex-item"> 1<div class="glyphicon glyphicon-envelope"></div></div><div id="sale" class="flex-item"><div class=" glyphicon glyphicon-ok"> </div> 2</div><div id="Servicing" class="flex-item"><div class="glyphicon glyphicon-globe "> </div> 3</div><div id="Purchasing" class="flex-item"><div class="glyphicon glyphicon-envelope"></div>4</div><div id="Billing" class="flex-item"><div class=" glyphicon glyphicon-usd"> </div> 5</div><div id="Accounts" class="flex-item"><div class=" glyphicon glyphicon-user"> </div>6</div><div id="GST" class="flex-item"><div class=" glyphicon glyphicon-stats"> </div>7</div><div id="StockControl" class="flex-item"><div class="glyphicon glyphicon-envelope"></div> 8</div><div id="StockControl" class="flex-item"><div class="glyphicon glyphicon-cog"> </div> 8</div></div>',
template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
});
</script>
</body>
</html>
Do changes in popup template
<div class="popover">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
<div class="footer">
<center>
<a href="" >more</a>
</center>
</div>
</div>
add class
.footer{
width: 101%;
margin-left: -0.5%;
background-color:rgba(128, 128, 128, 0.48);
margin-bottom:-1%;
border-bottom-right-radius: 16%;
border-bottom-left-radius: 16%;
}
https://jsfiddle.net/ueskyj1u/1/