Animate script and styling issue in jQuery

Animate script and styling issue in jQuery - javascript

I have an issue with a jQuery script or maybe its combination with styling, but if you look at this jsfiddle: http://jsfiddle.net/mdLtvrpk/3/
Here is my script:
$('.holdingbox').hover(function() {
var rightbox = $('.rightbox', this);
var leftbox = $('.leftbox', this);
if (rightbox.hasClass('active')) {
rightbox.stop().animate({
width: '0px',
}, 500).removeClass('active');
leftbox.stop().delay(500).animate({
width: '100%',
left: '0px'
}, 1000).removeClass('hover');
} else {
rightbox.stop().delay(500).animate({
width: '80px',
float:'right'
}, 500).addClass('active');
leftbox.stop().animate({
left: '-90px',
width: '90%'
}, 500).addClass('hover');
}
});
})
And you can find the css and html through the jsfiddle link, I just figured it would be easier for anyone viewing just to see the code in action altogether.
You'll see that when you hover over each "Shipment Created" notification block, you'll see that it slides over and allows a "button" on the right to appear, but the problem is after the "button" grows past a certain width, it moves beneath the "Shipment Created" block, rather than next to it.
How can I get this to work next to each other, rather than opening a block beneath it?

If you change the widths of your 2 divs, you will find that it works. In your else statement, set the width of the rightbox to 19% and the leftbox to 79%. You can also remove the position of the leftbox ie left:-90px; To make it behave a little better, I also set the leftbox width in the if statement to 90%.
$(document).ready(function() {
$('.holdingbox').hover(function() {
var rightbox = $('.rightbox', this);
var leftbox = $('.leftbox', this);
if (rightbox.hasClass('active')) {
rightbox.stop().animate({
width: '0px',
}, 500).removeClass('active');
leftbox.stop().delay(500).animate({
width: '90%',
left: '0px'
}, 1000).removeClass('hover');
} else {
rightbox.stop().delay(500).animate({
width: '19%',
float: 'right'
}, 500).addClass('active');
leftbox.stop().animate({
width: '79%'
}, 500).addClass('hover');
}
});
})
ul.menu {
list-style-type: none;
}
.holdingbox {
position: relative;
top: 0;
width: 100%;
height: 50px;
}
.holdingbox .leftbox {
position: relative;
width: 90%;
top: 0;
left: 0;
display: inline-block;
padding: 1px;
}
.holdingbox .rightbox {
position: relative;
display: inline-block;
overflow: hidden;
width: 0;
height: 42px;
vertical-align: top;
margin-right: 0;
background-color: lightgray;
}
.holdingbox .rightbox .content1 {
width: 100px;
position: absolute;
height: 40px;
left: 0;
top: 0;
right: 0;
padding-left: 1px;
}
.leftbox.hover {
width: 200px;
display: inline-block;
}
.rightbox.active {
float: none;
display: inline-block;
}
.rightbox {
float: right;
}
.holdingbox .rightbox .content1 {
width: 100% !important;
}
.leftbox.hover {
background-color: #F3F3F3;
}
//Menu Edit
.menu li a div img {
margin: auto 10px auto auto;
width: 40px;
height: 40px;
}
.menu li a h4 {
padding: 0;
margin: 0 0 0 45px;
color: #444444;
font-size: 14px;
position: relative;
}
.menu li a p {
margin: 0 0 0 45px;
font-size: 11px;
color: #888888;
}
.menu li a h4 small {
color: #999999;
font-size: 10px;
position: absolute;
top: 0;
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul class="menu">
<li class="holdingbox">
<!-- start message -->
<!-- <a href="#">/shipments/i/{'url_string']-->
<div class="leftbox" style="width: 100%; left: 0px; overflow: hidden;">
<a href="http://192.168.1.178:8000/notifications/4d798673-fe2e-4294-81dd-49969df0dff6">
<div class="pull-left">
<!-- User Image -->
<img src="/images/clipboard.png" class="img-circle" alt="Shipment">
</div>
<!-- Message title and timestamp -->
<h4>
Shipment Created
<small><i class="fa fa-clock-o"></i> 2 hours ago</small>
</h4>
<!-- The message -->
<p>Pro Number - 214439</p>
</a>
</div>
<div class="rightbox" style="width: 0px; overflow: hidden;">
<div class="content1">Mark Read<br><img src="https://upload.wikimedia.org/wikipedia/commons/2/28/White_X_in_red_background.svg" width="10px" height="10px">
</div>
</div>
</li>
<li class="holdingbox">
<!-- start message -->
<!-- <a href="#">/shipments/i/{'url_string']-->
<div class="leftbox" style="width: 100%; left: 0px; overflow: hidden;">
<a href="http://192.168.1.178:8000/notifications/c7e7add5-eaa2-4b3c-84fe-062322567d5f">
<div class="pull-left">
<!-- User Image -->
<img src="/images/clipboard.png" class="img-circle" alt="Shipment">
</div>
<!-- Message title and timestamp -->
<h4>
Shipment Created
<small><i class="fa fa-clock-o"></i> 2 weeks ago</small>
</h4>
<!-- The message -->
<p>Pro Number - 2102000003</p>
</a>
</div>
<div class="rightbox" style="width: 0px; overflow: hidden;">
<div class="content1">Mark Read<br><img src="https://upload.wikimedia.org/wikipedia/commons/2/28/White_X_in_red_background.svg" width="10px" height="10px">
</div>
</div>
</li>
<li class="holdingbox">
<!-- start message -->
<!-- <a href="#">/shipments/i/{'url_string']-->
<div class="leftbox" style="overflow: hidden; width: 100%; left: 0px;">
<a href="http://192.168.1.178:8000/notifications/1c578226-f735-4d62-be19-7deab4c08dbe">
<div class="pull-left">
<!-- User Image -->
<img src="/images/clipboard.png" class="img-circle" alt="Shipment">
</div>
<!-- Message title and timestamp -->
<h4>
Shipment Created
<small><i class="fa fa-clock-o"></i> 2 weeks ago</small>
</h4>
<!-- The message -->
<p>Pro Number - 2102000002</p>
</a>
</div>
<div class="rightbox" style="width: 0px; overflow: hidden;">
<div class="content1">Mark Read<br><img src="https://upload.wikimedia.org/wikipedia/commons/2/28/White_X_in_red_background.svg" width="10px" height="10px">
</div>
</div>
</li>
<li class="holdingbox">
<!-- start message -->
<!-- <a href="#">/shipments/i/{'url_string']-->
<div class="leftbox" style="overflow: hidden; width: 100%; left: 0px;">
<a href="http://192.168.1.178:8000/notifications/c975030e-64e9-4481-8fd0-0004242515d8">
<div class="pull-left">
<!-- User Image -->
<img src="/images/clipboard.png" class="img-circle" alt="Shipment">
</div>
<!-- Message title and timestamp -->
<h4>
Shipment Created
<small><i class="fa fa-clock-o"></i> 2 weeks ago</small>
</h4>
<!-- The message -->
<p>Pro Number - 2102000001</p>
</a>
</div>
<div class="rightbox" style="width: 0px;">
<div class="content1">Mark Read<br><img src="https://upload.wikimedia.org/wikipedia/commons/2/28/White_X_in_red_background.svg" width="10px" height="10px">
</div>
</div>
</li>
<li class="holdingbox">
<!-- start message -->
<!-- <a href="#">/shipments/i/{'url_string']-->
<div class="leftbox" style="overflow: hidden; width: 100%; left: 0px;">
<a href="http://192.168.1.178:8000/notifications/6721dd8c-4f45-422f-81d0-80fa4fe128f9">
<div class="pull-left">
<!-- User Image -->
<img src="/images/clipboard.png" class="img-circle" alt="Shipment">
</div>
<!-- Message title and timestamp -->
<h4>
Shipment Created
<small><i class="fa fa-clock-o"></i> 3 weeks ago</small>
</h4>
<!-- The message -->
<p>Pro Number - 212222</p>
</a>
</div>
<div class="rightbox" style="width: 0px;">
<div class="content1">Mark Read<br><img src="https://upload.wikimedia.org/wikipedia/commons/2/28/White_X_in_red_background.svg" width="10px" height="10px">
</div>
</div>
</li>
<li class="holdingbox">
<!-- start message -->
<!-- <a href="#">/shipments/i/{'url_string']-->
<div class="leftbox">
<a href="http://192.168.1.178:8000/notifications/48780be4-52af-4278-b67a-6544eda95aae">
<div class="pull-left">
<!-- User Image -->
<img src="/images/clipboard.png" class="img-circle" alt="Shipment">
</div>
<!-- Message title and timestamp -->
<h4>
Shipment Created
<small><i class="fa fa-clock-o"></i> 4 weeks ago</small>
</h4>
<!-- The message -->
<p>Pro Number - 2010</p>
</a>
</div>
<div class="rightbox">
<div class="content1">Mark Read<br><img src="https://upload.wikimedia.org/wikipedia/commons/2/28/White_X_in_red_background.svg" width="10px" height="10px">
</div>
</div>
</li>
<li class="holdingbox">
<!-- start message -->
<!-- <a href="#">/shipments/i/{'url_string']-->
<div class="leftbox">
<a href="http://192.168.1.178:8000/notifications/ca2583eb-5146-471d-b285-5178c35ab0a1">
<div class="pull-left">
<!-- User Image -->
<img src="/images/clipboard.png" class="img-circle" alt="Shipment">
</div>
<!-- Message title and timestamp -->
<h4>
Shipment Created
<small><i class="fa fa-clock-o"></i> 4 weeks ago</small>
</h4>
<!-- The message -->
<p>Pro Number - 210200000</p>
</a>
</div>
<div class="rightbox">
<div class="content1">Mark Read<br><img src="https://upload.wikimedia.org/wikipedia/commons/2/28/White_X_in_red_background.svg" width="10px" height="10px">
</div>
</div>
</li>
<li class="holdingbox">
<!-- start message -->
<!-- <a href="#">/shipments/i/{'url_string']-->
<div class="leftbox">
<a href="http://192.168.1.178:8000/notifications/1e23de34-d699-4e3a-9110-e02ab5ce000b">
<div class="pull-left">
<!-- User Image -->
<img src="/images/clipboard.png" class="img-circle" alt="Shipment">
</div>
<!-- Message title and timestamp -->
<h4>
Shipment Created
<small><i class="fa fa-clock-o"></i> 4 weeks ago</small>
</h4>
<!-- The message -->
<p>Pro Number - 250006</p>
</a>
</div>
<div class="rightbox">
<div class="content1">Mark Read<br><img src="https://upload.wikimedia.org/wikipedia/commons/2/28/White_X_in_red_background.svg" width="10px" height="10px">
</div>
</div>
</li>
<li class="holdingbox">
<!-- start message -->
<!-- <a href="#">/shipments/i/{'url_string']-->
<div class="leftbox">
<a href="http://192.168.1.178:8000/notifications/da74371c-2aa2-45ef-9b5d-28210c3816bb">
<div class="pull-left">
<!-- User Image -->
<img src="/images/clipboard.png" class="img-circle" alt="Shipment">
</div>
<!-- Message title and timestamp -->
<h4>
Shipment Created
<small><i class="fa fa-clock-o"></i> 1 month ago</small>
</h4>
<!-- The message -->
<p>Pro Number - 214050</p>
</a>
</div>
<div class="rightbox">
<div class="content1">Mark Read<br><img src="https://upload.wikimedia.org/wikipedia/commons/2/28/White_X_in_red_background.svg" width="10px" height="10px">
</div>
</div>
</li>
<!-- end notification -->
</ul>

Related

Why is my website's grid collapsing the first time it's loaded?

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
});
});

How can I add <li> to <ul> for chat application?

function addMessageToBody(chat)
{
var htmlSTR = "";
htmlSTR = "<p>another paragaraph</p>";
//htmlSTR += "<li class="left"><span class="username">Doruk</span>";
//alert(htmlSTR);
//$("#message-lists").html(main);
}
<body background="Orange.png">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<script src="http://91.234.35.26/iwiki-admin/v1.0.0/admin/js/jquery.nicescroll.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-white border-top-green">
<div class="panel-body chat">
<div class="row chat-wrapper">
<div class="col-md-4">
<div class="compose-area">
</div>
<div>
<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 550px;">
<div class="chat-list-wrapper" style="overflow-y: auto; width: auto; height: 550px;">
<ul class="chat-list" id="olasimesajlar">
<li class="text-center">
Olası Mesajlar </li>
<li>Liste Numara 2 </li>
<li>Liste Numara 3 </li>
<li>Liste Numara 4</li>
<li>Liste Numara 5</li>
<li>Liste Numara 6</li>
<li>Liste Numara 7</li>
<li>Liste Numara 8</li>
<li>Liste Numara 9</li>
<li>Liste Numara 10</li>
<li>Liste Numara 11</li>
<li>Liste Numara 12</li>
<li>Liste Numara 13</li>
<li>Liste Numara 14</li>
</ul>
</div><div class="slimScrollBar" style="width: 7px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 478.639px; background: rgb(0, 0, 0);"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div></div>
</div>
</div>
<div class="col-md-8">
<div>
<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 452px;">
<div class="message-list-wrapper" style="overflow: hidden; width: auto; height: 452px;">
<ul class="message-list" id="message-lists">
<li class="text-center">
<a href="javascript:void(0);" class="btn btn-default" >Load More Messages</a>
<!-- <button id="loadmoremessages" onclick="loadMoreMessages()">Load More Messages</button> -->
</li>
<li class="left">
<span class="username">Ozan</span>
<small class="timestamp">
<i class="fa fa-clock-o"></i>3 mins ago
</small>
<span class="avatar available tooltips" data-toggle="tooltip " data-placement="right" data-original-title="Yanique Robinson">
<img src="https://pbs.twimg.com/profile_images/597340997157298176/2XUqrs3R.jpg" alt="avatar" class="img-circle">
</span>
<div class="body">
<div class="message well well-sm" id="mesajleft">
..........
</div>
<div class="clearfix"></div>
<div class="message well well-sm">
<p>.... .........</p>
</div>
</div>
</li>
<li class="right" id="rightside">
<span class="username">Rasim Ozan</span>
<small class="timestamp">
<i class="fa fa-clock-o"></i>3 secs ago
</small>
<span class="avatar tooltips" data-toggle="tooltip " data-placement="left" data-original-title="Kevin Mckoy">
<img src="https://pbs.twimg.com/profile_images/597340997157298176/2XUqrs3R.jpg" alt="avatar" class="img-circle">
</span>
<div class="body">
<div id="mesajright" class="message well well-sm">
Czczczczczczczczccz
</div>
</div>
</li>
</ul>
</div><div class="slimScrollBar" style="width: 7px; position: absolute; top: 265px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 187.092px; background: rgb(0, 0, 0);"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div></div>
<div class="compose-box">
<div class="row">
<div class="col-xs-12 mg-btm-10">
<textarea name="messageinput" id="btn-input" class="form-control input-sm" placeholder="Type your message here..."></textarea>
</div>
<div class="col-xs-4" id="deneme">
</div>
<div class="col-xs-12">
<button id="sendbutton" onclick="myFunction()" class="btn btn-green btn-sm pull-right">
<i class="fa fa-location-arrow"></i> Send
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have this HTML and JavaScript code. This is a kind of chat application. So every time when button pressed I want to add messages to screen. My css is complex so I want to do that as passing HTML code into it via JavaScript. LİKE
<li class="left">
<span class="username">Ozan</span>
<small class="timestamp">
<i class="fa fa-clock-o"></i>3 mins ago
</small>
<span class="avatar available tooltips" data-toggle="tooltip " data-placement="right" data-original-title="Yanique Robinson">
<img src="https://pbs.twimg.com/profile_images/597340997157298176/2XUqrs3R.jpg" alt="avatar" class="img-circle">
</span>
<div class="body">
<div class="message well well-sm" id="mesajleft">
..........
</div>
<div class="clearfix"></div>
<div class="message well well-sm">
<p>.... .........</p>
</div>
</div>
</li>
adding/append this HTML code via JavaScript dynamically to ul section.
How can I do that ?

You are using jQuery, so you can simply do it like
$("#message-lists").append(htmlSTR);
But if the html of your message rows (li-s) are big and difficult you should rather do it with JSON responses and build the message rows on client side with js (based on the received data). Also I would recommend using some javascript template engine like Mustache or Handlebars.

One option is to use innerHTML:
var element = document.getElementById('message-lists');
element.innerHTML = element.innerHTML + "<p>another paragaraph</p><li
class='left'><span class='username'>Doruk</span>";

Add an event listener for your button.
In your event handler function, append your htmlSTR. This gets run every time your button gets clicked.
As you seem to be using jQuery, you can do this:
$(function(){
var htmlSTR = "<li><p>another paragaraph</p></li>";
var $ul = $('#olasimesajlar');
var $button = $('#id_of_your_button');
$button.click(buttonClickHandler);
function buttonClickHandler(){
$ul.append(htmlSTR);
}
});

menus overlapped on slider

Menus are getting hided due to slider overlapping on the menus .unable to see my menus.menu - lessons are not visible. im using jssora22l which is getting overlapped on my menu 'Lessons' under the tab of Courses. tried with z index 1000 but still im not getting the menus.
code
https://codepen.io/krishnakernel/pen/YNzppX
<header class="headerpart">
<div class="container">
<div class="logo">
<a href="#">
<img class="abc" src="images-Logo.png" alt="krishnamohan" height="50" width="235" />
</a>
</div>
<div class="menu" >
<nav>
<ul>
<li>Home</li>
<li>
Courses
<ul>
<li>Lesson</li>
<li>Practicals</li>
<li>Projects</li>
</ul>
</li>
<li>Contact</li>
<li>login</li>
<li>Sign up</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden; visibility: hidden;">
<!-- Loading Screen -->
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;">
<div data-p="225.00">
<img data-u="image" src="img/red.jpg" />
<div style="position:absolute;top:30px;left:30px;width:480px;height:120px;z-index:0;font-size:50px;color:#ffffff;line-height:60px;">TOUCH SWIPE SLIDER</div>
<div style="position:absolute;top:300px;left:30px;width:480px;height:120px;z-index:0;font-size:30px;color:#ffffff;line-height:38px;">Build your slider with anything, includes image, content, text, html, photo, picture</div>
<div data-u="caption" data-t="0" style="position:absolute;top:120px;left:650px;width:470px;height:220px;z-index:0;">
<img style="position:absolute;top:0px;left:0px;width:470px;height:220px;z-index:0;" src="img/c-phone-horizontal.png" />
<div style="position:absolute;top:4px;left:45px;width:379px;height:213px;z-index:0; overflow: hidden;">
<img data-u="caption" data-t="1" style="position:absolute;top:0px;left:0px;width:379px;height:213px;z-index:0;" src="img/c-slide-1.jpg" />
<img data-u="caption" data-t="2" style="position:absolute;top:0px;left:379px;width:379px;height:213px;z-index:0;" src="img/c-slide-3.jpg" />
</div>
<img style="position:absolute;top:4px;left:45px;width:379px;height:213px;z-index:0;" src="img/c-navigator-horizontal.png" />
<img data-u="caption" data-t="3" style="position:absolute;top:740px;left:1600px;width:257px;height:300px;z-index:0;" src="img/c-finger-pointing.png" />
</div>
</div>
<div data-p="225.00" style="display: none;">
<img data-u="image" src="img/purple.jpg" />
</div>
<div data-p="225.00" data-po="80% 55%" style="display: none;">
<img data-u="image" src="img/blue.jpg" />
</div>
<a data-u="any" href="" style="display:none">Full Width Slider</a>
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb05" style="bottom:16px;right:16px;" data-autocenter="1">
<!-- bullet navigator item prototype -->
<div data-u="prototype" style="width:16px;height:16px;"></div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora22l" style="top:0px;left:8px;width:40px;height:58px;" data-autocenter="2"></span>
<span data-u="arrowright" class="jssora22r" style="top:0px;right:8px;width:40px;height:58px;" data-autocenter="2"></span>
</div>
https://codepen.io/krishnakernel/pen/YNzppX
screen shot

This is likely a z-index issue as many people have pointed out, you should add the following to your css:
.headerpart {
position: relative;
z-index: 1;
}
The menu div needs a higher z-index and either position: relative; or position: absolute; in order for the z-index to work.
.headerpart .menu {
z-index: 2; /* higher z-index for the menu div */
}
I also noticed from your codepen that > .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av has a value of overflow: hidden; which could also be potentially causing the issue. You might need to change that to overflow: visible; OR overflow: auto;
The codepen provided does not help much as you have not added the styles for your menu HTML.

<header class="headerpart" style="z-index:9999;position:relative;">
<div class="container">
<div class="logo">
<a href="#">
<img class="abc" src="images-Logo.png" alt="krishnamohan" height="50" width="235" />
</a>
</div>
<div class="menu" >
<nav>
<ul>
<li>Home</li>
<li>
Courses
<ul>
<li>Lesson</li>
<li>
<a href="#">
Practicals
</a>
</li>
<li>Projects</li>
</ul>
</li>
<li>Contact</li>
<li>
login
</li>
<li>Sign up</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden; visibility: hidden;">
<!-- Loading Screen -->
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;">
<div data-p="225.00">
<img data-u="image" src="img/red.jpg" />
<div style="position:absolute;top:30px;left:30px;width:480px;height:120px;z-index:0;font-size:50px;color:#ffffff;line-height:60px;">TOUCH SWIPE SLIDER</div>
<div style="position:absolute;top:300px;left:30px;width:480px;height:120px;z-index:0;font-size:30px;color:#ffffff;line-height:38px;">Build your slider with anything, includes image, content, text, html, photo, picture</div>
<div data-u="caption" data-t="0" style="position:absolute;top:120px;left:650px;width:470px;height:220px;z-index:0;">
<img style="position:absolute;top:0px;left:0px;width:470px;height:220px;z-index:0;" src="img/c-phone-horizontal.png" />
<div style="position:absolute;top:4px;left:45px;width:379px;height:213px;z-index:0; overflow: hidden;">
<img data-u="caption" data-t="1" style="position:absolute;top:0px;left:0px;width:379px;height:213px;z-index:0;" src="img/c-slide-1.jpg" />
<img data-u="caption" data-t="2" style="position:absolute;top:0px;left:379px;width:379px;height:213px;z-index:0;" src="img/c-slide-3.jpg" />
</div>
<img style="position:absolute;top:4px;left:45px;width:379px;height:213px;z-index:0;" src="img/c-navigator-horizontal.png" />
<img data-u="caption" data-t="3" style="position:absolute;top:740px;left:1600px;width:257px;height:300px;z-index:0;" src="img/c-finger-pointing.png" />
</div>
</div>
<div data-p="225.00" style="display: none;">
<img data-u="image" src="img/purple.jpg" />
</div>
<div data-p="225.00" data-po="80% 55%" style="display: none;">
<img data-u="image" src="img/blue.jpg" />
</div>
<a data-u="any" href="" style="display:none">Full Width Slider</a>
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb05" style="bottom:16px;right:16px;" data-autocenter="1">
<!-- bullet navigator item prototype -->
<div data-u="prototype" style="width:16px;height:16px;"></div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora22l" style="top:0px;left:8px;width:40px;height:58px;" data-autocenter="2"></span>
<span data-u="arrowright" class="jssora22r" style="top:0px;right:8px;width:40px;height:58px;" data-autocenter="2"></span>
</div>

Set a z-index to the header. Don't forget to add a relative position to header for z-index work.
.headerpart{z-index:9999;position:relative}

This is z-index issue give z-index value high to the menubar try the below z-index value to menu class
.menu
{
z-index:9999;
position:relative
}

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.

Header not staying in place

I've positioned the header of my page to be always at the top by using
position:fixed;
This works perfectly fine, but not on Chrome on my android devices. The header get's pushed away by something and is placed where it shouldn't be: a few 100 pixels from the top instead of 0 pixels from the top.
My guess is that it's caused because of some javascript i'm using. The first piece of javascript is when a user presses an icon a menu shows up, this is the code:
<script type="text/javascript">
$(document).ready(function() {
$('#toggle').click(function(){
$('div.showhide').toggle();
});
});
</script>
The second code is when a user scrolls away from the header the header closes:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(window).scroll(function() { $('.showhide').fadeOut("fast");
});
});//]]>
</script>
This is my page code:
<div class="showhide">
<div class="menubg">
<div class="menu">
<div class="container">
<div class="item">
<div class="img">
<a href="conv.cfm" style="color: white; text-decoration: none;"><img style="margin-top: 8px;" src="img/conversations.png" alt="conversations" />
</div>
<p>Gesprekken</a></p>
</div>
<div class="item">
<div class="img">
<a href="home.cfm" style="color: white; text-decoration: none;"> <img src="img/high_res.png" alt="notifications" style="height: 38px; margin-left: 23px;" class="nav left" />
</div>
<p>Vrienden</a></p>
</div>
<div class="item">
<div class="img">
<a href="profile.cfm" style="color: white; text-decoration: none;"><img src="img/hoofd.png" alt="me" />
</div>
<p>Ik</a></p>
</div>
<div class="clear"></div>
<div class="item">
<div class="img">
<img src="img/HC.gif" alt="reception" />
</div>
<p>Receptie</p>
</div>
<div class="item">
<div class="img">
<a href="settings.cfm" style="color: white; text-decoration: none;"><img src="img/wrench.gif" alt="settings" />
</div>
<p>Instellingen</p></a>
</div>
</div>
</div>
</div>
</div>
<div class="headbg">
<div class="header">
<a href="#">
<img src="img/conversations.png" alt="conversations" class="nav left" />
</a>
<a href="#">
<img src="img/high_res.png" alt="notifications" style="height: 38px; margin-top: -1px;" class="nav left" />
</a>
<a href="#">
<img src="img/habbobtn.png" alt="habbologo" class="nav right" id="toggle" />
</a>
</div>
</div>
<div class="content">
</div>
// Page continues after this but it isn't causing the problem
Forgot to add it, but this is my css code:
.menubg {
width: 100%;
background-color: #201d19;
}
.menu {
width: 320px;
height: 190px;
margin: 0 auto;
overflow: hidden;
}
.showhide {
display: none;
}
.container {
width: 290px;
height: 160px;
background-color: #201c18;
border: 1px solid #282420;
border-radius: 5px;
position: absolute;
padding: 5px;
margin: 10px;
}
// This is not all the css, if it's needed i'll add it
If anyone could help me out with this problem i would appreciate it!

I've created a sample fiddle with header and content div.
#header
{
position:fixed;
...
top:0;
left:0;
}
#content
{
margin-top:set your header height;
}

Develop Reference

JavaScript is the programming language of the Web.

Animate script and styling issue in jQuery - javascript

Related

Why is my website's grid collapsing the first time it's loaded?

How can I add <li> to <ul> for chat application?

menus overlapped on slider

Display popup on click of a box

Header not staying in place

Categories

Resources