Main Menu is not displaying properly? - javascript

In my blogger website second line of main menu is not displaying correctly.First line is working fine, second line is also working fine but not displaying correctly when i moves mouse pointer on second line buttons than they displays but in general looks completely white.
My website link - Click Here
HTML codes-
.social-text .snapchat a:after {
content: "Snapchat"
}
.social-text .email a:after {
content: "Email"
}
.social-text .external-link a:after {
content: "WebSite"
}
#header-wrap {
position: relative;
margin: 0
}
.header-header {
background-color: #fff;
width: 100%;
height: 90px;
position: relative;
overflow: hidden;
padding: 30px 0
}
.header-header .container {
position: relative;
margin: 0 auto;
padding: 0
}
.header-logo {
position: relative;
float: left;
width: auto;
max-width: 120px;
max-height: 100px;
margin: 0;
padding: 0px 0
}
.header-logo .header-image-wrapper {
display: block
}
.header-logo img {
max-width: 120%;
max-height: 150px;
margin: 0;
margin-left: 70px
}
.header-logo h1 {
color: $(title.color);
font-size: 36px;
line-height: 60px;
margin: 0
}
.header-logo p {
font-size: 12px;
margin: 5px 0 0
}
.header-ads {
position: relative;
float: right
}
.header-ads .widget>.widget-title {
display: none
}
.header-ads .widget {
max-width: 100%
}
.header-ads .widget .widget-content {
width: 728px;
max-width: 100%;
max-height: 90px;
line-height: 1
}
.header-menu {
position: relative;
width: 100%;
height: 46px;
z-index: 10;
font-size: 13px;
margin: 0;
background-color: $(main.dark.color);
border-top: 2px solid $(main.color)
}
.header-menu .container {
position: relative;
margin: 0 auto;
padding: 0
}
#main-menu .widget,
#main-menu .widget>.widget-title {
display: none
}
#main-menu .show-menu {
display: block
}
#main-menu {
position: relative;
height: 46px;
z-index: 15
}
#main-menu ul>li {
float: left;
position: relative;
margin: 0;
padding: 0;
transition: background .17s
}
#main-menu #main-menu-nav>li:hover,
#main-menu #main-menu-nav>li.li-home {
background-color: $(main.color)
}
#main-menu ul>li>a {
position: relative;
color: #fff;
font-size: 13px;
font-weight: 400;
line-height: 46px;
display: inline-block;
margin: 0;
padding: 0 15px;
transition: color .17s ease
}
#main-menu #main-menu-nav>li>a {
text-transform: uppercase;
font-weight: 700
}
#main-menu ul>li:hover>a {
color: #fff
}
#main-menu ul>li>ul {
position: absolute;
float: left;
left: 0;
top: 46px;
width: 180px;
background-color: $(main.dark.color);
z-index: 99999;
margin-top: 0;
padding: 0;
border-top: 2px solid $(main.color);
visibility: hidden;
opacity: 0
}
#main-menu ul>li>ul>li>ul {
position: absolute;
float: left;
top: 0;
left: 100%;
margin: -2px 0 0
}
#main-menu ul>li>ul>li {
display: block;
float: none;
position: relative
}
#main-menu ul>li>ul>li:hover {
background-color: $(main.color)
}
#main-menu ul>li>ul>li a {
display: block;
height: 36px;
font-size: 13px;
color: #fff;
line-height: 36px;
box-sizing: border-box;
margin: 0;
padding: 0 15px;
border: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: all .17s ease
}
#main-menu ul>li>ul>li:hover>a {
color: #fff
}
#main-menu ul>li.has-sub>a:after {
content: '\f107';
float: right;
font-family: FontAwesome;
font-size: 12px;
font-weight: 400;
margin: 0 0 0 5px
}
#main-menu ul>li>ul>li.has-sub>a:after {
content: '\f105';
float: right;
margin: 0
}
#main-menu .mega-menu {
position: static!important
}
#main-menu .mega-menu>ul {
width: 100%;
box-sizing: border-box;
padding: 20px 10px
}
#main-menu .mega-menu>ul.mega-menu-inner {
overflow: hidden
}
#main-menu ul>li:hover>ul,
#main-menu ul>li>ul>li:hover>ul {
visibility: visible;
opacity: 1
}
#main-menu ul ul {
transition: all .25s ease
}
.mega-menu-inner .mega-item {
float: left;
width: 20%;
box-sizing: border-box;
padding: 0 10px
}
.mega-menu-inner .mega-content {
position: relative;
width: 100%;
overflow: hidden;
padding: 0
}
.mega-content .post-image-wrap {
width: 100%;
height: 120px
}
.mega-content .post-image-link {
width: 100%;
height: 100%;
z-index: 1;
display: block;
position: relative;
overflow: hidden;
padding: 0
}
.mega-content .post-title {
position: relative;
font-size: 13px;
font-weight: 700;
line-height: 1.5em;
margin: 7px 0 5px;
padding: 0
}
.mega-content .post-title a {
display: block;
color: #fff;
transition: color .17s
}
.mega-content .post-title a:hover {
color: $(title.hover)
}
.mega-content .post-meta {
font-size: 11px
}
.no-posts {
float: left;
width: 100%;
height: 100px;
line-height: 100px;
text-align: center
}
.mega-menu .no-posts {
line-height: 60px;
color: $(title.color)
}
.show-search,
.hide-search {
position: absolute;
right: 0;
top: 0;
display: block;
width: 46px;
height: 46px;
background-color: $(main.color);
line-height: 46px;
z-index: 20;
color: #fff;
font-size: 15px;
text-align: center;
cursor: pointer;
padding: 0;
transition: background .17s ease
}
.show-search:before {
content: "\f002";
font-family: FontAwesome;
font-weight: 400
}
.hide-search:before {
content: "\f00d";
font-family: FontAwesome;
font-weight: 400
}
#nav-search {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 46px;
z-index: 99;
background-color: $(main.dark.color);
box-sizing: border-box;
padding: 0
}
#nav-search .search-form {
width: 100%;
height: 46px;
background-color: rgba(0, 0, 0, 0);
line-height: 46px;
overflow: hidden;
padding: 0
}
#nav-search .search-input {
width: 100%;
height: 46px;
font-family: inherit;
color: #fff;
}

1, you have more menu items right, so you have to reduce font-size, padding from (#main-menu ul > li > a).
2, Or otherwise you can go for a inner scroll.

.header-menu {
position: relative;
width: 100%;
/* height: 46px; */
z-index: 10;
font-size: 13px;
margin: 0;
background-color: #384a5f;
border-top: 2px solid #ffd012;
}
#main-menu {
position: relative;
/* height: 46px; */
z-index: 15;
}
#main-menu ul{
display:flex;
flex-wrap:wrap;
}
replace this code in your css for each element! i just removed the height for both header and main menu so that the div can expand with the height of her child! added display:flexfor ul to make height adjust depending on child

Related

Links in footer wont display inline

I'm trying to put some links in a footer next to each other, separated by the character "|". But I have a navbar whose styles interferes with the footer's links.
I need something like this :
This is my code (it doesn't display perfectly, but you get the gist):
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500&display=swap');
* {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
body {
/*background-color: #e0eafc;*/
background: linear-gradient( to right,#ff0000,#0000ff);
margin: 0;
}
p {
color:#ffffff;
font-size:20px;
padding: 10px;
}
.heading {
margin: 20px;
font-size: 50px;
text-align: center;
color: black;
}
a {
text-decoration: none;
}
.favcolorcontainer {
border: 2px solid black;
border-radius: 4px;
width: auto;
padding: 5px;
background: white;
display: inline-flex;
}
.colorpicker {
border:none;
background: white;
display: inline-flex;
}
.favcolor {
font-family: verdana;
margin-top: 3px;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 3%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99;
border: none;
outline: none;
background-color: #0000d1;
color: white;
cursor: pointer;
border-radius: 100px;
font-size: 45px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #0101bb;
}
.progress-container {
padding: 10px;
}
.header-logo {
margin: 10px;
float: left;
}
.header {
background-color: #303030;
overflow: hidden;
width: 100%;
}
.desktop-nav {
float: right;
margin-right: 20px;
}
.desktop-nav a {
margin: 20px 30px 0 30px;
padding: 0 0 20px;
display: block;
color: white;
}
.desktop-nav a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav li {
float: left;
list-style: none;
}
.menu-button {
display: block;
margin: 15px;
font-size:25px;
cursor:pointer;
color:white
}
.menu-button:hover {
cursor: pointer;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #303030;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 15px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
:root {
color-scheme: dark;
}
<html>
<head>
<title>Home</title>
<link rel="icon" type="image/x-icon" href="https://imgur.com/dFEoiLv">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
<body>
<div class="header">
<img src="https://imgur.com/JntIYPP" width="150px" title="Aeron" alt="logo" class="header-logo">
<ul class="desktop-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Demo</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
<li><span class="menu-button" onclick="openNav()">☰</span></li>
</ul>
<div id="mySidenav" class="sidenav">
×
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" width="150px" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron Corporation</p>
About Us
<p>|</p>
Policy
<p>|</p>
Contact Us
</footer>
<button onclick="topFunction()" id="return" title="Return To Top">^</button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mySidenav").style.width = "25%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
As you can see the links aren't displaying inline. How can I fix this?
Wrap the links in a div with a class (I gave it footer-links) and give it the following styles:
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500&display=swap');
* {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
body {
/*background-color: #e0eafc;*/
background: linear-gradient( to right,#ff0000,#0000ff);
margin: 0;
}
p {
color:#ffffff;
font-size:20px;
padding: 10px;
}
.heading {
margin: 20px;
font-size: 50px;
text-align: center;
color: black;
}
a {
text-decoration: none;
}
.favcolorcontainer {
border: 2px solid black;
border-radius: 4px;
width: auto;
padding: 5px;
background: white;
display: inline-flex;
}
.colorpicker {
border:none;
background: white;
display: inline-flex;
}
.favcolor {
font-family: verdana;
margin-top: 3px;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 3%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99;
border: none;
outline: none;
background-color: #0000d1;
color: white;
cursor: pointer;
border-radius: 100px;
font-size: 45px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #0101bb;
}
.progress-container {
padding: 10px;
}
.header-logo {
margin: 10px;
float: left;
}
.header {
background-color: #303030;
overflow: hidden;
width: 100%;
}
.desktop-nav {
float: right;
margin-right: 20px;
}
.desktop-nav a {
margin: 20px 30px 0 30px;
padding: 0 0 20px;
display: block;
color: white;
}
.desktop-nav a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav li {
float: left;
list-style: none;
}
.menu-button {
display: block;
margin: 15px;
font-size:25px;
cursor:pointer;
color:white
}
.menu-button:hover {
cursor: pointer;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #303030;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 15px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
:root {
color-scheme: dark;
}
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
.footer-links p {
margin: 0;
}
<html>
<head>
<title>Home</title>
<link rel="icon" type="image/x-icon" href="https://imgur.com/dFEoiLv">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
<body>
<div class="header">
<img src="https://imgur.com/JntIYPP" width="150px" title="Aeron" alt="logo" class="header-logo">
<ul class="desktop-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Demo</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
<li><span class="menu-button" onclick="openNav()">☰</span></li>
</ul>
<div id="mySidenav" class="sidenav">
×
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" width="150px" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron Corporation</p>
<div class="footer-links">
About Us
<p>|</p>
Policy
<p>|</p>
Contact Us
</div>
</footer>
<button onclick="topFunction()" id="return" title="Return To Top">^</button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mySidenav").style.width = "25%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>

charts with rounded div on mask

I wanted to achieve this bar charts displays under the rounded circle as per the attached image.
I am able to display the bar charts but not able to bring the rounded/circle div on top of the charts or bring the charts inside the circle so, that charts will display within circle. I have attached the code.
Any help would be appreciated.
$(function() {
$("#bars li .bar").each( function( key, bar ) {
var percentage = $(this).data('percentage');
$(this).animate({
'height' : percentage + '%'
}, 1000);
});
});
#import url(https://fonts.googleapis.com/css?family=Roboto:400+700);
body {
background: #30303A;
font-family: Roboto;
}
#chart {
width: 250px;
height: 200px;
margin: 30px auto 0;
display: block;
}
#chart #numbers {
width: 50px;
height: 100%;
margin: 0;
padding: 0;
display: inline-block;
float: left;
}
#chart #numbers li {
text-align: right;
padding-right: 1em;
list-style: none;
height: 29px;
border-bottom: 1px solid #444;
position: relative;
bottom: 30px;
}
#chart #numbers li:last-child {
height: 30px;
}
#chart #numbers li span {
color: #eee;
position: absolute;
bottom: 0;
right: 10px;
}
#chart #bars {
display: inline-block;
background: rgba(0, 0, 0, 0.2);
width: 200px;
height: 200px;
padding: 0;
margin: 0;
box-shadow: 0 0 0 1px #444;
}
#chart #bars li {
display: table-cell;
width: 100px;
height: 200px;
margin: 0;
text-align: center;
position: relative;
}
#chart #bars li .bar {
display: block;
width: 70px;
margin-left: 15px;
background: #49E;
position: absolute;
bottom: 0;
z-index: 1;
}
#chart #bars li .bar:before {
color: white;
content: attr(data-percentage) '%';
position: relative;
bottom: 25px;
}
#chart #bars li .bar:hover {
background: #5AE;
cursor: pointer;
}
#chart #bars li span {
color: #eee;
width: 100%;
position: absolute;
bottom: -3em;
left: 0;
text-align: center;
}
#chart #bars li .bar.bar-1 {
background: #cd9581 ;
}
#chart #bars li .bar.bar-2 {
background: #002f54 ;
}
#chart #bars li .bar.bar-3 {
background: #f5e0b8 ;
}
#mask {
border: 1px solid #fff;
border-radius: 50%;
background: #fff;
position: absolute;
z-index: 0;
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chart">
<div id="mask">
<ul id="bars">
<li><div data-percentage="56" class="bar bar-1"></div><span>Russian Federation</span></li>
<li><div data-percentage="33" class="bar bar-2"></div><span>All 50 countries</span></li>
</ul>
</div>
</div>
Here, the shape of this looks like the one in your picture , I hope this is useful for you
Removed margin-left:15px; from #chart #bars li .bar , added overflow:hidden; to #mask and added width:100%; to #chart #bars li .bar.bar-1 and #chart #bars li .bar.bar-2
$(function() {
$("#bars li .bar").each( function( key, bar ) {
var percentage = $(this).data('percentage');
$(this).animate({
'height' : percentage + '%'
}, 1000);
});
});
#import url(https://fonts.googleapis.com/css?family=Roboto:400+700);
body {
background: #30303A;
font-family: Roboto;
}
#chart {
width: 250px;
height: 200px;
margin: 30px auto 0;
display: block;
}
#chart #numbers {
width: 50px;
height: 100%;
margin: 0;
padding: 0;
display: inline-block;
float: left;
}
#chart #numbers li {
text-align: right;
padding-right: 1em;
list-style: none;
height: 29px;
border-bottom: 1px solid #444;
position: relative;
bottom: 30px;
}
#chart #numbers li:last-child {
height: 30px;
}
#chart #numbers li span {
color: #eee;
position: absolute;
bottom: 0;
right: 10px;
}
#chart #bars {
display: inline-block;
background: rgba(0, 0, 0, 0.2);
width: 200px;
height: 200px;
padding: 0;
margin: 0;
box-shadow: 0 0 0 1px #444;
}
#chart #bars li {
display: table-cell;
width: 100px;
height: 200px;
margin: 0;
text-align: center;
position: relative;
}
#chart #bars li .bar {
display: block;
width: 70px;
background: #49E;
position: absolute;
bottom: 0;
z-index: 1;
}
#chart #bars li .bar:before {
color: white;
content: attr(data-percentage) '%';
position: relative;
bottom: 25px;
}
#chart #bars li .bar:hover {
background: #5AE;
cursor: pointer;
}
#chart #bars li span {
color: #eee;
width: 100%;
position: absolute;
bottom: -3em;
left: 0;
text-align: center;
}
#chart #bars li .bar.bar-1 {
background: #cd9581 ;
width:100%;
}
#chart #bars li .bar.bar-2 {
background: #002f54 ;
width:100%;
}
#chart #bars li .bar.bar-3 {
background: #f5e0b8 ;
}
#mask {
overflow:hidden;
border: 1px solid #fff;
border-radius: 50%;
background: #fff;
position: absolute;
z-index: 0;
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chart">
<div id="mask">
<ul id="bars">
<li><div data-percentage="56" class="bar bar-1"></div><span>Russian Federation</span></li>
<li><div data-percentage="33" class="bar bar-2"></div><span>All 50 countries</span></li>
</ul>
</div>
</div>
Add overflow: hidden; to #mask

Why is my page loading without any css?

So this problem has been bugging me for a few days now. I've been trying to get a working nightmode switch on my site. I've asked on here before and after what I thought was the solution, using help from this site and stack exchange, I started experiencing an annoying problem.
Here is a video of my problem: https://ryan-simms.com/problem
The problem only occurs when nightmode is enabled and I don't understand what the actual problem is. I've tried all sorts of different JavaScript codes with the same result everytime. Also before anyone says it's because of the DOMContentLoaded bit, I have already tried removing it on only using it when adding the EventListeners on my buttons.
Also I tried to change the way getCookie() works with a few different methods.
Are cookies the right way or is there a better way?
Here is my HTML stripped down to the basics:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Ryan Simms</title>
<link id ="pageStyle" rel="stylesheet" href='css/lightStyle.css' type='text/css'>
<script src="scripts/lightSwitch.js"></script>
<script src="scripts/cookie.js"></script>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto' type='text/css'>
</head>
<body>
<script src="lightSwitch.js"></script> <!-- Loads LightSwitch Script -->
<button type="button" id="lightSwitchOn">Turn On Night Mode</button>
<button type="button" id="lightSwitchOff">Turn Off Night Mode</button>
</body>
</html>
Here is my JavaScript:
document.addEventListener("DOMContentLoaded", handleDocumentLoad);
function handleDocumentLoad() {
var style = document.getElementById("pageStyle");
var offSwitch = document.getElementById("lightSwitchOff");
var onSwitch = document.getElementById("lightSwitchOn");
offSwitch.addEventListener('click', lightsOn);
onSwitch.addEventListener('click', lightsOff);
function lightsOff() {
document.cookie = "lights = off; expires = Fri, 31 Dec 9999 23:59:59 GMT";
style.setAttribute('href', 'css/darkStyle.css');
}
function lightsOn() {
document.cookie = "lights = on; expires = Fri, 31 Dec 9999 23:59:59 GMT";
style.setAttribute('href', 'css/lightStyle.css');
}
function getCookie( name ) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
var end = null;
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
end = document.cookie.indexOf(";", begin);
} else {
begin += 2;
end = document.cookie.indexOf(";", begin);
if (end == -1) {
end = dc.length;
}
}
return decodeURI(dc.substring(begin + prefix.length, end) ).replace(/"/g, '');
}
function checkCookie() {
var nightmode = getCookie("lights");
if (nightmode == "off") {
lightsOff();
} else {
lightsOn();
}
}
checkCookie();
}
Here is my default CSS:
/*Layout for phones and tablets e.g. iPhone 5 and iPad*/
/*webpage fades in*/
html {
animation: fadein 2s;
position: relative;
min-height: 100%;
}
/*animation*/
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/*main colour settings for page*/
body {
font-family: 'Roboto';
font-size: 22px;
color: #1C1C1C;
background-color: #FFF;
margin: 0 0 100px;
padding: 25px;
}
/*List in nav*/
li {
list-style-type: none;
display: inline;
}
/*Navigation*/
nav {
width: 100%;
background-color: #D8D8D8;
padding-top: 10px;
padding-bottom: 10px;
}
ol {
text-align: center;
margin-right: 10px;
}
/*Links*/
a, a:link, a:visited, a:hover {
color: #1C1C1C;
text-decoration: none;
}
/*Main heading*/
h1 {
position: relative;
margin: 0 auto;
text-align: center;
}
/*Images*/
img {
border: solid 0px #1C1C1C;
border-radius: 5px;
margin: 0 auto;
text-align: center;
}
label {
display: block;
margin-bottom: 10px;
margin-top: 10px;
}
textarea {
width: 300px;
height: 200px;
margin-bottom: 10px;
padding: 10px;
border: solid 1px #1C1C1C;
border-radius: 2px;
resize: none;
}
input {
border: solid 1px #1C1C1C;
border-radius: 2px;
padding: 5px;
}
#logo {
border: 0px;
display: inline;
position: absolute;
top: 40px;
left: 30px;
margin-left: 10px;
font-size: 40px;
}
#enter {
margin-top: 40px;
max-width: 90%;
max-height: 90%;
}
video {
max-width: 80%;
margin: 0 auto;
display: block;
}
/*Footer*/
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow: hidden;
text-align: center;
}
/*Main Body*/
#mainContent {
padding: 10px;
background-color: #D8D8D8;
margin-top: 10px;
}
#mainContent img {
display: inline;
max-width: 375px;
max-height: 375px;
float: right;
margin-right: 10px;
margin-left: 10px;
}
/*Light Switches*/
#lightSwitchOn {
display: inline;
position: absolute;
top: 40px;
right: 30px;
margin-right: 10px;
font-size: 40px;
}
#lightSwitchOff {
display: none;
position: absolute;
top: 40px;
right: 30px;
margin-right: 10px;
font-size: 40px;
}
#cookies {
position: fixed;
left: 0;
bottom: 0;
height: 8%;
width: 100%;
background-color: #D8D8D8;
padding-left: 30px;
}
/*Layout for device with a min-width of 1024px*/
#media only screen and (min-width: 1024px) {
#enter {
max-width: 60%;
max-height: 60%;
}
}
/*Layout for desktop with a min-width of 1280px (720p HD)*/
#media only screen and (min-width: 1280px) {
#enter {
max-width: 40%;
max-height: 40%;
}
}
/*Layout for desktop with a min-width of 1920px (1080p HD)*/
#media only screen and (min-width: 1920px) {
#enter {
max-width: 40%;
max-height: 40%;
}
}
And my CSS when night mode is enabled:
/*Layout for phones and tablets e.g. iPhone 5 and iPad*/
/*webpage fades in*/
html {
animation: fadein 2s;
position: relative;
min-height: 100%;
}
/*animation*/
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/*main colour settings for page*/
body {
font-family: 'Roboto';
font-size: 22px;
color: #FFF;
background-color: black;
margin: 0 0 100px;
padding: 25px;
}
/*List in nav*/
li {
list-style-type: none;
display: inline;
}
/*Navigation*/
nav {
width: 100%;
background-color: #1C1C1C;
padding-top: 10px;
padding-bottom: 10px;
}
ol {
text-align: center;
margin-right: 10px;
}
/*Links*/
a, a:link, a:visited, a:hover {
color: #FFF;
text-decoration: none;
}
/*Main heading*/
h1 {
position: relative;
margin: 0 auto;
text-align: center;
}
/*Images*/
img {
max-width: 100%;
max-height: 100%;
border: solid 0px #FFF;
border-radius: 5px;
margin: 0 auto;
text-align: center;
}
label {
display: block;
margin-bottom: 10px;
margin-top: 10px;
}
textarea {
max-width: 100%;
max-height: 100%;
width: 300px;
height: 200px;
margin-bottom: 10px;
padding: 10px;
border: solid 1px #FFF;
border-radius: 2px;
resize: none;
}
input {
border: solid 1px #FFF;
border-radius: 2px;
padding: 5px;
}
#logo {
border: 0px;
display: inline;
position: absolute;
top: 40px;
left: 30px;
margin-left: 10px;
font-size: 40px;
}
#enter {
margin-top: 40px;
max-width: 90%;
max-height: 90%;
}
video {
max-width: 80%;
margin: 0 auto;
display: block;
}
/*Footer*/
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow: hidden;
text-align: center;
}
/*Main Body*/
#mainContent {
padding: 10px;
background-color: #1C1C1C;
margin-top: 10px;
}
#mainContent img {
display: inline;
max-width: 375px;
max-height: 375px;
float: right;
margin-right: 10px;
margin-left: 10px;
}
/*Light Switches*/
#lightSwitchOn {
display: none;
position: absolute;
top: 40px;
right: 30px;
margin-right: 10px;
font-size: 20px;
}
#lightSwitchOff {
display: inline;
position: absolute;
top: 40px;
right: 30px;
margin-right: 10px;
font-size: 20px;
}
#cookies {
position: fixed;
left: 0;
bottom: 0;
height: 8%;
width: 100%;
background-color: #1C1C1C;
padding-left: 30px;
}
/*Layout for device with a min-width of 1024px*/
#media only screen and (min-width: 1024px) {
#enter {
max-width: 60%;
max-height: 60%;
}
}
/*Layout for desktop with a min-width of 1280px (720p HD)*/
#media only screen and (min-width: 1280px) {
#enter {
max-width: 40%;
max-height: 40%;
}
}
/*Layout for desktop with a min-width of 1920px (1080p HD)*/
#media only screen and (min-width: 1920px) {
#enter {
max-width: 40%;
max-height: 40%;
}
}
Are cookies the right way or is there a better way?
Since you don't care about the cookie on the server side, prefer localStorage. You can replace all of your cookie code with things like
localStorage.setItem('lights', 'off');
if(localStorage.getItem('lights') === 'off') { ... }
Instead of loading a new stylesheet for your night mode, consider adding a .dark class to your body if night mode is on and incorporating the appropriate changes in your main stylesheet.
body {
font-family: 'Roboto';
font-size: 22px;
color: #1C1C1C;
background-color: #FFF;
margin: 0 0 100px;
padding: 25px;
}
body.dark {
color: #FFF;
background-color: black;
}
/*Navigation*/
nav {
width: 100%;
background-color: #D8D8D8;
padding-top: 10px;
padding-bottom: 10px;
}
.dark nav {
background-color: #1C1C1C;
}

CSS Animation not working on IE11

I have a mouse over / mouse out animation on a couple of divs that is running great in Firefox and Chrome. However in IE it just won't work. Does anyone has any ideas why as this was working before?
var actual = 1;
var over = 0;
var over2 = 0;
function scrollleft() {
if (actual == 1) {
$("#vidstrip").animate({
left: "-1060"
});
actual = 2;
return;
}
if (actual == 2) {
$("#vidstrip").animate({
left: "0"
});
actual = 1;
return;
}
stopAllYT();
}
function scrollright() {
if (actual == 2) {
$("#vidstrip").animate({
left: "+0"
});
actual = 1;
return;
}
if (actual == 1) {
$("#vidstrip").animate({
left: "-1060"
});
actual = 2;
return;
}
stopAllYT();
}
$("#vidstop").on({
'mouseenter': function() {
overme();
}
});
$("#vidstop").on({
'mouseleave': function() {
outme();
}
});
//ARROWS OUT
function outme() {
if (over == 1) {
$(".leftnav").removeClass("lnavchange");
$(".rightnav").removeClass("lnavchange2");
$(".leftnav").toggleClass("lnavout");
$(".rightnav").toggleClass("lnavout2");
over = 0;
//alert(over);
//alert(over);
}
//alert('MouseOut');
// handle mouse event here!
}
//ARROWS IN
function overme() {
if (over == 0) {
//remove old class
$(".leftnav").removeClass("lnavout");
$(".rightnav").removeClass("lnavout2");
//add class
$(".leftnav").toggleClass("lnavchange");
$(".rightnav").toggleClass("lnavchange2");
over = 1;
//alert(over);
}
}
#subheader {
font-family: verdana;
text-align: center;
font-size: 28px;
font-weight: bold;
color: #000;
text-transform: capitalize;
}
#subcopy {
font-family: verdana;
text-align: center;
font-size: 14px;
font-weight: normal;
color: #000;
text-transform: capitalize;
}
#titlei {
font-family: verdana;
text-align: center;
font-size: 46px;
font-weight: bold;
color: #000;
text-transform: capitalize;
}
hr.undertitle {
background: #bfbfbf;
width: 150px;
border: 0;
height: 2px;
margin: 0 auto;
}
#subcopy {
line-height: 21px;
font-size: 14px;
text-align: center;
font-family: verdana;
}
#subhead {
line-height: 21px;
font-weight: bold;
font-size: 22px;
text-align: center;
font-family: verdana;
}
#Stage {
text-align: center;
width: 1060px;
margin-left: auto;
margin-right: auto;
}
#slidercontainer {
width: 1060px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
#vidspeephole {
width: 724px;
height: 407px;
overflow: hidden;
float: left;
margin-left: 4px;
}
#vidsholder {
width: 2896px;
height: 407px;
position: relative;
float: left;
}
.vids {
width: 724px;
height: 407px;
float: left;
overflow: hidden;
}
#rightpromos {
height: 407px;
width: 208px;
position: relative;
float: left;
margin-left: 8px;
}
#rightarrow {
height: 407px;
width: 54px;
position: relative;
float: left;
top: 50%;
bottom: 50%;
margin-left: 3px;
cursor: pointer;
}
#leftarrow {
height: 407px;
width: 54px;
position: relative;
float: left;
top: 50%;
bottom: 50%;
cursor: pointer;
}
.featuredpages {
width: 208px;
height: 133px;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
}
.paging {
top: 10px;
position: relative;
height: 15px;
margin-left: auto;
margin-right: auto;
width: 100px;
}
.pbutton {
float: left;
background: #F0F0F0;
cursor: pointer;
width: 15px;
height: 15px;
display: block;
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.35);
border-radius: 30px;
text-decoration: none !important;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
zoom: 1;
text-align: -webkit-match-parent;
list-style: none;
text-align: center;
}
.paging a.active {
background: #999 !important;
}
.paging a:hover {
background: #000 !important;
}
#row1 {
position: relative;
width: 1060px;
overflow: hidden;
height: 440px;
}
#row2 {
position: relative;
width: 1060px;
overflow: hidden;
height: 60px;
}
promocopy1 {
height: 31px;
padding: 5px;
color: #fff;
background-color: rgba(52, 52, 52, 0.85);
position: relative;
top: -41px;
font-family: Verdana, Geneva, sans-serif;
}
#stack {
height: 114px;
width: 1060px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.edgeLoad-EDGE-1207420 {
visibility: hidden;
}
#mainvidcontainer {
width: 1060px;
height: 698px;
overflow: hidden;
position: relative;
}
#vidstrip {
height: 626px;
width: 2120px;
position: relative;
}
#vidstop {
height: 626px;
width: 1060px;
position: relative;
overflow: hidden;
z-index: 0;
}
.thevids {
position: relative;
width: 1060px;
float: left;
height: 596px;
}
.vidscopy {
width: 1060px;
font-family: Verdana, Geneva, sans-serif;
color: #fff;
background-color: #999;
height: 30px;
text-align: center;
vertical-align: middle;
padding-top: 4px;
}
#navis {
z-index: 9;
width: 1060px;
height: 30px;
position: relative;
}
.leftnav {
position: absolute;
top: 300px;
left: -60px;
height: 54px;
width: 54px;
background-color: #666;
z-index: 1;
border: #FFF;
border: 1px;
cursor: pointer;
}
.rightnav {
position: absolute;
top: 300px;
right: -60px;
height: 54px;
width: 54px;
background-color: #666;
z-index: 1;
border: #FFF;
border: 1px;
cursor: pointer;
}
.pagingtop {
top: 8px;
position: relative;
height: 15px;
margin-left: auto;
margin-right: auto;
width: 40px;
z-index: 2;
}
.pbuttontop {
margin-left: 50%;
margin-right: 50%;
text-align: center;
float: left;
background: #F0F0F0;
cursor: pointer;
width: 15px;
height: 15px;
display: block;
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.35);
border-radius: 30px;
text-decoration: none !important;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
zoom: 1;
text-align: -webkit-match-parent;
list-style: none;
text-align: center;
}
.pagingtop a.active {
background: #999 !important;
}
.pagingtop a:hover {
background: #000 !important;
}
.lnavchange {
animation-name: example;
animation-duration: 0.3s;
animation-fill-mode: forwards;
-webkit-animation-name: example;
-webkit-animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
-ms-transform-origin: left: 100px;
}
#keyframes example {
0% {
left: -10px;
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
left: 22px;
opacity: 1;
}
}
.lnavchange2 {
animation-name: example2;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes example2 {
0% {
right: -10px;
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
right: 22px;
opacity: 1;
}
}
.lnavout {
animation-name: example3;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes example3 {
0% {
left: 22px;
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
left: -80px;
opacity: 0;
}
}
.lnavout2 {
animation-name: example4;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes example4 {
0% {
right: 22px;
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
right: -80px;
opacity: 0;
}
}
<div id="mainvidcontainer">
<div id="vidstop">
<div class="leftnav" onclick="scrollleft()"></div>
<div class="rightnav" onclick="scrollright()"></div>
<div id="vidstrip">
<div class="thevids">
<iframe id="player" width="1060" height="596" src="https://www.youtube.com/embed/kf03Z7iiIk?rel=0&controls=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<div class="vidscopy">Test Copy1</div>
</div>
<div class="thevids">
<iframe id="player" width="1060" height="596" src="https://www.youtube.com/embed/8a05WugVHFs?rel=0&controls=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<div class="vidscopy">Test Copy 2</div>
</div>
</div>
</div>
<div id="navis">
<div class="pagingtop">
<a class="pbuttontop" id="b1" onclick="anitop1(1)"></a>
<a class="pbuttontop" id="b2" onclick="anitop1(2)" style="margin-left:10px;"></a>
</div>
</div>
</div>
Edit: all good now it was just the youtube video that was being overlayed in Internet Explorer.
Thank you
Nuno
Got it!
It was the youtube video that was in front of the nav arrows.
In order to fix this for IE I had to add the wmode property to the youtube url:
wmode=opaque
Thank you all!
Hope this helps other people!

jquery Magnific Popup won't work - js-newbie

what am I doing wrong? this is the easiest variation from magnific popup, but I just can't get this running for hours. I'm a newbie to JS, but other things worked out pretty well?!
i used the JS-File from here https://raw.github.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.min.js
from that stackoverflow post: Magnific-popup doesn't work at all
#charset "utf-8";
/* CSS Document */
#some-button, #some-button2 {padding:20px}
.white-popup {
position: relative;
background: black;
padding: 40px;
width: 2000px;
max-width: 2000px;
margin: 20px auto;
text-align: center;
}
/* Magnific Popup CSS */
.mfp-bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1042;
overflow: hidden;
position: fixed;
background: #0b0b0b;
opacity: 0.8;
filter: alpha(opacity=80); }
.mfp-wrap {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1043;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden; }
.mfp-container {
text-align: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.mfp-container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle; }
.mfp-align-top .mfp-container:before {
display: none; }
.mfp-content {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 1045; }
.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
width: 100%;
cursor: auto; }
.mfp-ajax-cur {
cursor: progress; }
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: -moz-zoom-out;
cursor: -webkit-zoom-out;
cursor: zoom-out; }
.mfp-zoom {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in; }
.mfp-auto-cursor .mfp-content {
cursor: auto; }
.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none; }
.mfp-loading.mfp-figure {
display: none; }
.mfp-hide {
display: none !important; }
.mfp-preloader {
color: #CCC;
position: absolute;
top: 50%;
width: auto;
text-align: center;
margin-top: -0.8em;
left: 8px;
right: 8px;
z-index: 1044; }
.mfp-preloader a {
color: #CCC; }
.mfp-preloader a:hover {
color: #FFF; }
.mfp-s-ready .mfp-preloader {
display: none; }
.mfp-s-error .mfp-content {
display: none; }
button.mfp-close, button.mfp-arrow {
overflow: visible;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
display: block;
outline: none;
padding: 0;
z-index: 1046;
-webkit-box-shadow: none;
box-shadow: none; }
button::-moz-focus-inner {
padding: 0;
border: 0; }
.mfp-close {
width: 44px;
height: 44px;
line-height: 44px;
position: absolute;
right: 0;
top: 0;
text-decoration: none;
text-align: center;
opacity: 0.65;
filter: alpha(opacity=65);
padding: 0 0 18px 10px;
color: #FFF;
font-style: normal;
font-size: 28px;
font-family: Arial, Baskerville, monospace; }
.mfp-close:hover, .mfp-close:focus {
opacity: 1;
filter: alpha(opacity=100); }
.mfp-close:active {
top: 1px; }
.mfp-close-btn-in .mfp-close {
color: #333; }
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
color: #FFF;
right: -6px;
text-align: right;
padding-right: 6px;
width: 100%; }
.mfp-counter {
position: absolute;
top: 0;
right: 0;
color: #CCC;
font-size: 12px;
line-height: 18px;
white-space: nowrap; }
.mfp-arrow {
position: absolute;
opacity: 0.65;
filter: alpha(opacity=65);
margin: 0;
top: 50%;
margin-top: -55px;
padding: 0;
width: 90px;
height: 110px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.mfp-arrow:active {
margin-top: -54px; }
.mfp-arrow:hover, .mfp-arrow:focus {
opacity: 1;
filter: alpha(opacity=100); }
.mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
margin-top: 35px;
margin-left: 35px;
border: medium inset transparent; }
.mfp-arrow:after, .mfp-arrow .mfp-a {
border-top-width: 13px;
border-bottom-width: 13px;
top: 8px; }
.mfp-arrow:before, .mfp-arrow .mfp-b {
border-top-width: 21px;
border-bottom-width: 21px;
opacity: 0.7; }
.mfp-arrow-left {
left: 0; }
.mfp-arrow-left:after, .mfp-arrow-left .mfp-a {
border-right: 17px solid #FFF;
margin-left: 31px; }
.mfp-arrow-left:before, .mfp-arrow-left .mfp-b {
margin-left: 25px;
border-right: 27px solid #3F3F3F; }
.mfp-arrow-right {
right: 0; }
.mfp-arrow-right:after, .mfp-arrow-right .mfp-a {
border-left: 17px solid #FFF;
margin-left: 39px; }
.mfp-arrow-right:before, .mfp-arrow-right .mfp-b {
border-left: 27px solid #3F3F3F; }
.mfp-iframe-holder {
padding-top: 40px;
padding-bottom: 40px; }
.mfp-iframe-holder .mfp-content {
line-height: 0;
width: 100%;
max-width: 900px; }
.mfp-iframe-holder .mfp-close {
top: -40px; }
.mfp-iframe-scaler {
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%; }
.mfp-iframe-scaler iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #000; }
/* Main image in popup */
img.mfp-img {
width: auto;
max-width: 100%;
height: auto;
display: block;
line-height: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 40px 0 40px;
margin: 0 auto; }
/* The shadow behind the image */
.mfp-figure {
line-height: 0; }
.mfp-figure:after {
content: '';
position: absolute;
left: 0;
top: 40px;
bottom: 40px;
display: block;
right: 0;
width: auto;
height: auto;
z-index: -1;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #444; }
.mfp-figure small {
color: #BDBDBD;
display: block;
font-size: 12px;
line-height: 14px; }
.mfp-figure figure {
margin: 0; }
.mfp-bottom-bar {
margin-top: -36px;
position: absolute;
top: 100%;
left: 0;
width: 100%;
cursor: auto; }
.mfp-title {
text-align: left;
line-height: 18px;
color: #F3F3F3;
word-wrap: break-word;
padding-right: 36px; }
.mfp-image-holder .mfp-content {
max-width: 100%; }
.mfp-gallery .mfp-image-holder .mfp-figure {
cursor: pointer; }
#media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
/**
* Remove all paddings around the image on small screen
*/
.mfp-img-mobile .mfp-image-holder {
padding-left: 0;
padding-right: 0; }
.mfp-img-mobile img.mfp-img {
padding: 0; }
.mfp-img-mobile .mfp-figure:after {
top: 0;
bottom: 0; }
.mfp-img-mobile .mfp-figure small {
display: inline;
margin-left: 5px; }
.mfp-img-mobile .mfp-bottom-bar {
background: rgba(0, 0, 0, 0.6);
bottom: 0;
margin: 0;
top: auto;
padding: 3px 5px;
position: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.mfp-img-mobile .mfp-bottom-bar:empty {
padding: 0; }
.mfp-img-mobile .mfp-counter {
right: 5px;
top: 3px; }
.mfp-img-mobile .mfp-close {
top: 0;
right: 0;
width: 35px;
height: 35px;
line-height: 35px;
background: rgba(0, 0, 0, 0.6);
position: fixed;
text-align: center;
padding: 0; }
}
#media all and (max-width: 900px) {
.mfp-arrow {
-webkit-transform: scale(0.75);
transform: scale(0.75); }
.mfp-arrow-left {
-webkit-transform-origin: 0;
transform-origin: 0; }
.mfp-arrow-right {
-webkit-transform-origin: 100%;
transform-origin: 100%; }
.mfp-container {
padding-left: 6px;
padding-right: 6px; }
}
.mfp-ie7 .mfp-img {
padding: 0; }
.mfp-ie7 .mfp-bottom-bar {
width: 600px;
left: 50%;
margin-left: -300px;
margin-top: 5px;
padding-bottom: 5px; }
.mfp-ie7 .mfp-container {
padding: 0; }
.mfp-ie7 .mfp-content {
padding-top: 44px; }
.mfp-ie7 .mfp-close {
top: 0;
right: 0;
padding-top: 0; }
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="css/magnific-popup.css">
<script src="js/jquery.magnific-popup.js"></script>
<script>
// Example with multiple objects
$('#some-button').magnificPopup({
items: [
{
src: 'pic.jpg'
},
{
src: 'http://vimeo.com/123123',
type: 'iframe' // this overrides default type
},
{
src: $('<div>Dynamically created element</div>'), // Dynamically created element
type: 'inline'
},
{
src: '<div>HTML string</div>',
type: 'inline'
},
{
src: '#my-popup', // CSS selector of an element on page that should be used as a popup
type: 'inline'
}
],
gallery: {
enabled: true
},
type: 'image' // this is default type
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<button id="some-button">Popup</button>
<div id="my-popup" class="mfp-hide white-popup">Inline popup</div>
<!-- also tried to implement JScripts here -->
</body>
</html>
thanks for your help!
Try wrapping it in a function
$(function () {
$('#some-button').magnificPopup({
items: [
{
src: 'pic.jpg'
},
{
src: 'http://vimeo.com/123123',
type: 'iframe' // this overrides default type
},
{
src: $('<div>Dynamically created element</div>'), // Dynamically created element
type: 'inline'
},
{
src: '<div>HTML string</div>',
type: 'inline'
},
{
src: '#my-popup', // CSS selector of an element on page that should be used as a popup
type: 'inline'
}
],
gallery: {
enabled: true
},
type: 'image' // this is default type
});
});
Thanks Karl-André Gagnon:
it worked like this:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="css/magnific-popup.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script>
// Example with multiple objects
$(document).ready(function() {
$('#some-button').magnificPopup({
items: [
{
src: 'pic.jpg'
},
{
src: 'http://vimeo.com/123123',
type: 'iframe' // this overrides default type
},
{
src: $('<div>Dynamically created element</div>'), // Dynamically created element
type: 'inline'
},
{
src: '<div>HTML string</div>',
type: 'inline'
},
{
src: '#my-popup', // CSS selector of an element on page that should be used as a popup
type: 'inline'
}
],
gallery: {
enabled: true
},
type: 'image' // this is default type
});
});
</script>
</head>
<body>
<button id="some-button">Popup</button>
<div id="my-popup" class="mfp-hide white-popup">Inline popup</div>
<!-- also tried to implement JScripts here -->
</body>
</html>
#charset "utf-8";
/* CSS Document */
#some-button, #some-button2 {padding:20px}
.white-popup {
position: relative;
background: black;
padding: 40px;
width: 2000px;
max-width: 2000px;
margin: 20px auto;
text-align: center;
}
/* Magnific Popup CSS */
.mfp-bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1042;
overflow: hidden;
position: fixed;
background: #0b0b0b;
opacity: 0.8;
filter: alpha(opacity=80); }
.mfp-wrap {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1043;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden; }
.mfp-container {
text-align: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.mfp-container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle; }
.mfp-align-top .mfp-container:before {
display: none; }
.mfp-content {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 1045; }
.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
width: 100%;
cursor: auto; }
.mfp-ajax-cur {
cursor: progress; }
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: -moz-zoom-out;
cursor: -webkit-zoom-out;
cursor: zoom-out; }
.mfp-zoom {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in; }
.mfp-auto-cursor .mfp-content {
cursor: auto; }
.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none; }
.mfp-loading.mfp-figure {
display: none; }
.mfp-hide {
display: none !important; }
.mfp-preloader {
color: #CCC;
position: absolute;
top: 50%;
width: auto;
text-align: center;
margin-top: -0.8em;
left: 8px;
right: 8px;
z-index: 1044; }
.mfp-preloader a {
color: #CCC; }
.mfp-preloader a:hover {
color: #FFF; }
.mfp-s-ready .mfp-preloader {
display: none; }
.mfp-s-error .mfp-content {
display: none; }
button.mfp-close, button.mfp-arrow {
overflow: visible;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
display: block;
outline: none;
padding: 0;
z-index: 1046;
-webkit-box-shadow: none;
box-shadow: none; }
button::-moz-focus-inner {
padding: 0;
border: 0; }
.mfp-close {
width: 44px;
height: 44px;
line-height: 44px;
position: absolute;
right: 0;
top: 0;
text-decoration: none;
text-align: center;
opacity: 0.65;
filter: alpha(opacity=65);
padding: 0 0 18px 10px;
color: #FFF;
font-style: normal;
font-size: 28px;
font-family: Arial, Baskerville, monospace; }
.mfp-close:hover, .mfp-close:focus {
opacity: 1;
filter: alpha(opacity=100); }
.mfp-close:active {
top: 1px; }
.mfp-close-btn-in .mfp-close {
color: #333; }
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
color: #FFF;
right: -6px;
text-align: right;
padding-right: 6px;
width: 100%; }
.mfp-counter {
position: absolute;
top: 0;
right: 0;
color: #CCC;
font-size: 12px;
line-height: 18px;
white-space: nowrap; }
.mfp-arrow {
position: absolute;
opacity: 0.65;
filter: alpha(opacity=65);
margin: 0;
top: 50%;
margin-top: -55px;
padding: 0;
width: 90px;
height: 110px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.mfp-arrow:active {
margin-top: -54px; }
.mfp-arrow:hover, .mfp-arrow:focus {
opacity: 1;
filter: alpha(opacity=100); }
.mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
margin-top: 35px;
margin-left: 35px;
border: medium inset transparent; }
.mfp-arrow:after, .mfp-arrow .mfp-a {
border-top-width: 13px;
border-bottom-width: 13px;
top: 8px; }
.mfp-arrow:before, .mfp-arrow .mfp-b {
border-top-width: 21px;
border-bottom-width: 21px;
opacity: 0.7; }
.mfp-arrow-left {
left: 0; }
.mfp-arrow-left:after, .mfp-arrow-left .mfp-a {
border-right: 17px solid #FFF;
margin-left: 31px; }
.mfp-arrow-left:before, .mfp-arrow-left .mfp-b {
margin-left: 25px;
border-right: 27px solid #3F3F3F; }
.mfp-arrow-right {
right: 0; }
.mfp-arrow-right:after, .mfp-arrow-right .mfp-a {
border-left: 17px solid #FFF;
margin-left: 39px; }
.mfp-arrow-right:before, .mfp-arrow-right .mfp-b {
border-left: 27px solid #3F3F3F; }
.mfp-iframe-holder {
padding-top: 40px;
padding-bottom: 40px; }
.mfp-iframe-holder .mfp-content {
line-height: 0;
width: 100%;
max-width: 900px; }
.mfp-iframe-holder .mfp-close {
top: -40px; }
.mfp-iframe-scaler {
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%; }
.mfp-iframe-scaler iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #000; }
/* Main image in popup */
img.mfp-img {
width: auto;
max-width: 100%;
height: auto;
display: block;
line-height: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 40px 0 40px;
margin: 0 auto; }
/* The shadow behind the image */
.mfp-figure {
line-height: 0; }
.mfp-figure:after {
content: '';
position: absolute;
left: 0;
top: 40px;
bottom: 40px;
display: block;
right: 0;
width: auto;
height: auto;
z-index: -1;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #444; }
.mfp-figure small {
color: #BDBDBD;
display: block;
font-size: 12px;
line-height: 14px; }
.mfp-figure figure {
margin: 0; }
.mfp-bottom-bar {
margin-top: -36px;
position: absolute;
top: 100%;
left: 0;
width: 100%;
cursor: auto; }
.mfp-title {
text-align: left;
line-height: 18px;
color: #F3F3F3;
word-wrap: break-word;
padding-right: 36px; }
.mfp-image-holder .mfp-content {
max-width: 100%; }
.mfp-gallery .mfp-image-holder .mfp-figure {
cursor: pointer; }
#media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
/**
* Remove all paddings around the image on small screen
*/
.mfp-img-mobile .mfp-image-holder {
padding-left: 0;
padding-right: 0; }
.mfp-img-mobile img.mfp-img {
padding: 0; }
.mfp-img-mobile .mfp-figure:after {
top: 0;
bottom: 0; }
.mfp-img-mobile .mfp-figure small {
display: inline;
margin-left: 5px; }
.mfp-img-mobile .mfp-bottom-bar {
background: rgba(0, 0, 0, 0.6);
bottom: 0;
margin: 0;
top: auto;
padding: 3px 5px;
position: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.mfp-img-mobile .mfp-bottom-bar:empty {
padding: 0; }
.mfp-img-mobile .mfp-counter {
right: 5px;
top: 3px; }
.mfp-img-mobile .mfp-close {
top: 0;
right: 0;
width: 35px;
height: 35px;
line-height: 35px;
background: rgba(0, 0, 0, 0.6);
position: fixed;
text-align: center;
padding: 0; }
}
#media all and (max-width: 900px) {
.mfp-arrow {
-webkit-transform: scale(0.75);
transform: scale(0.75); }
.mfp-arrow-left {
-webkit-transform-origin: 0;
transform-origin: 0; }
.mfp-arrow-right {
-webkit-transform-origin: 100%;
transform-origin: 100%; }
.mfp-container {
padding-left: 6px;
padding-right: 6px; }
}
.mfp-ie7 .mfp-img {
padding: 0; }
.mfp-ie7 .mfp-bottom-bar {
width: 600px;
left: 50%;
margin-left: -300px;
margin-top: 5px;
padding-bottom: 5px; }
.mfp-ie7 .mfp-container {
padding: 0; }
.mfp-ie7 .mfp-content {
padding-top: 44px; }
.mfp-ie7 .mfp-close {
top: 0;
right: 0;
padding-top: 0; }
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="css/magnific-popup.css">
<script src="js/jquery.magnific-popup.js"></script>
<script>
// Example with multiple objects
$('#some-button').magnificPopup({
items: [
{
src: 'pic.jpg'
},
{
src: 'http://vimeo.com/123123',
type: 'iframe' // this overrides default type
},
{
src: $('<div>Dynamically created element</div>'), // Dynamically created element
type: 'inline'
},
{
src: '<div>HTML string</div>',
type: 'inline'
},
{
src: '#my-popup', // CSS selector of an element on page that should be used as a popup
type: 'inline'
}
],
gallery: {
enabled: true
},
type: 'image' // this is default type
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<button id="some-button">Popup</button>
<div id="my-popup" class="mfp-hide white-popup">Inline popup</div>
<!-- also tried to implement JScripts here -->
</body>
</html>
Everyone here's correct, I just want to make it clear.
You are trying to act on an element that has not loaded. Both Jquery and the actual DOM elements you're manipulating won't have loaded by the time your 3rd party JS is executed.
Without JQuery, your included script is gibberish to the browser and unless the DOM is ready, the JS will simply return an error.
Include your Jquery before the 3rd party plugin.
Do this by either including your script in an external file at the bottom AFTER the Jquery include, or shift Jquery up above the include. Then wrap your actual function in a 'onready' function:
As mvargos points out, you can wrap the JS in a
$(function(){}).
This is JQuery short hand for
$(document).ready(function(){});
Document.ready means only run after the DOM has loaded and all your elements actually exist for the JS to act on.
read this SO question to know more.

Categories