I recently implemented an automatic slider code for my slider in my website, however, it's not working for some reason. The code for the slider animation in the CSS style sheet is near the bottom. I was wondering if anybody could help me in solving the problem with my code.
Here is a picture of my slider, just want the images of the bikes to move automatically.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Croydon Cycles</title>
<link rel="stylesheet" href="shop-style.css">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
</head>
<!DOCTYPE html>
<html lang="en">
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Location</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<div class="slider">
<div class="slideshow-container">
<div class="myslides fade">
<div class="numbers">1 / 4</div>
<div class="slider-pic"><img class="Fit" src="images/slider-1.jpg"></div>
<div class="caption">Kona Lanai 27.5" 2018 Mountain bike</div>
</div>
<div class="myslides fade">
<div class="numbers">2 / 4</div>
<div class="slider-pic"><img class="Fit" src="images/slider-2.jpg"></div>
<div class="caption">Decathlon B'twin Rockrider 520S Full Suspension Mountain Bike</div>
</div>
<div class="myslides fade">
<div class="numbers">3 / 4</div>
<div class="slider-pic"><img class="Fit" src="images/slider-3.jpg"></div>
<div class="caption">Ribble Aero 883 Carbon Road Bike - Matte Black</div>
</div>
<div class="myslides fade">
<div class="numbers">4 / 4</div>
<div class="slider-pic"><img class="Fit" src="images/slider-4.jpg"></div>
<div class="caption">Lapierre Overvolt AM700i</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dots" onclick="currentSlide(1)"></span>
<span class="dots" onclick="currentSlide(2)"></span>
<span class="dots" onclick="currentSlide(3)"></span>
<span class="dots" onclick="currentSlide(4)"></span>
</div>
<script type="text/javascript">
var slideIndex = 1;
showSlide(slideIndex);
function plusSlides(n){
showSlide(slideIndex += n);
}
function currentSlide(n) {
showSlide(slideIndex = n);
}
function showSlide(n){
var i;
var slides = document.getElementsByClassName("myslides");
var dots = document.getElementsByClassName("dots");
if (n > slides.length) { slideIndex = 1};
if (n < 1) { slideIndex = slides.length};
for (i=0;i<slides.length;i++) {
slides[i].style.display = "none";
};
for (i=0;i<dots.length;i++) {
dots[i].className = dots[i].className.replace(" active","");
};
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
<div class="content">
</div>
</div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
</script>
</body>
</html>
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
font-family: verdana,sans-serif;
margin: 0;
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
}
header {
width: 100%;
height: 60px;
background: url(hero.jpg) no-repeat 50% 50%;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index:2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
body{
font-family: verdana,sans-serif;
margin: 0;
}
.slideshow-container{
width: 100%;
position: relative;
margin: auto;
}
.numbers{
position: absolute;
top: 0;
color: #f2f2f2;
padding: 8px 12px;
font-size: 12px;
}
.myslides{
display: none;
}
.prev , .next{
position: absolute;
top: 50%;
font-size: 18px;
font-weight: bold;
padding: 16px;
margin-top: -22px;
border-radius: 0 3px 3px 0;
color: black;
cursor: pointer;
}
.next{
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,.next:hover{
background-color: rgba(0,0,0,0.8);
}
.caption{
text-align: center;
position: absolute;
bottom: 8px;
width: 100%;
color: black;
font-size: 15px;
padding: 8px 22px;
left:-2%;
}
.dots{
width: 13px;
height: 13px;
background: gray;
display: inline-block;
border-radius: 50%;
cursor: pointer;
}
.fade{
animation-name:fade;
animation-duration:1.5s;
}
#keyframes fade{
from {opacity: 0.4;}
to {opacity: 1;}
}
.active, .dot:hover {
background-color: #333;
}
.slider-pic {
display: grid;
height: 100%;
z-index:0;
}
.Fit {
max-width: 100%;
max-height: 100vh;
margin: auto;
z-index:0;
}
#keyframes slider{
0%{
left: 0;
}
20%{
left: 0;
}
25%{
left: -100%;
}
45%{
left: -100%;
}
50%{
left: -200%;
}
70%{
left: -200%;
}
75%{
left: -300%;
}
95%{
left: -300%;
}
100%{
left: -400%;
}
}
#slider {
overflow: hidden;
}
#slider figure img {
width:20%;
float: left;
}
#slider figure {
position: relative;
width: 500%;
margin:0;
left:0;
animation: 20s slider infinite
}
Add this instruction in your JS code:
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
// add this instruction !
setTimeout(function() {plusSlides(1) }, 1000)
})
Herem the method slidePlus is called every 1000ms
Related
I am trying to embed google maps in the website using iframes. I need this map to be fullscreen on any device when the map is shown. I can't figure out a way to do this, tried setting width and height to 100% which made it look like this ):
But right now my website looks like this:
Any way of making the map fullscreen?
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
height:100%;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
z-index:1;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
z-index: 0;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="location-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div class="box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11180.547025315635!2d-0.1158441147859454!3d51.38130328678796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876072fde46e81d%3A0x8d9bd9aaec99a20!2sLondon+Rd%2C+Croydon+CR0+2RE!5e0!3m2!1sen!2suk!4v1535311898666" width="720" height="550px" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</body>
</html>
sorry i cant really get into adjusting your css right now but here is a little something i came up with when i need to output YouTube videos in iframes. try it out
<style>
#mediaPlayer{
position: relative;
height: auto;
padding-bottom: 56.25%;
padding-top: 1.875em;
overflow: hidden;
border: 0.1875em double #185875;
background-image:url('../video_loading.gif');
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: center;
background-attachment: fixed;
/*to adjust the height and width*/
margin-right: 20%;
margin-left: 20%;
margin-top: 20%;
margin-bottom: 20%;
/*or you can use it in single line*/
margin:20%;
/*or if you want different margins for different sides in a single line*/
margin: 20% 20% 20% 20%;
/* the above means margin: top right bottom left; */
}
#mediaPlayer iframe{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 100%;
max-height: 100%;
}
</style>
/*instead of using margin just add a div and specify the exact height and width you want*/
<div style="height: 50%; width:50%;">
<center>
<div id="mediaPlayer">
<iframe id="play_now" width="100%" height="100%" src="" value="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</center>
</div>
The video_loading.gif background is usually a good idea for users with slow network to have something in the background while your iframe content is loading
but you have to find your own unique gif file/image and set it's location in the background-image:url('../file-location-here.gif');
just replace your <div class="box"></div> with the code above let me know how it turns out.
How about the following example. The solution came from Responsive iframe (google maps) and weird resizing. By tweaking padding-top and padding-bottom you can change the size.
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
.box {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
overflow: hidden;
}
.box iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
height:100%;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
z-index:1;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
z-index: 0;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="location-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div class="box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11180.547025315635!2d-0.1158441147859454!3d51.38130328678796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876072fde46e81d%3A0x8d9bd9aaec99a20!2sLondon+Rd%2C+Croydon+CR0+2RE!5e0!3m2!1sen!2suk!4v1535311898666" allowfullscreen></iframe>
</div>
</div>
</body>
</html>
You can also try and use CSS variables:
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
let events = ['load', 'resize'];
let googleMaps = document.querySelector('.box iframe');
events.forEach( event => {
window.addEventListener(event, () => {
googleMaps.style.setProperty('--google-maps-height', `${window.innerHeight}px`);
});
});
.box {
height: 100%;
}
.box iframe {
width: 100%;
height: var(--google-maps-height);
border: none;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
height:100%;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
z-index:1;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
z-index: 0;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="location-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div class="box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11180.547025315635!2d-0.1158441147859454!3d51.38130328678796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876072fde46e81d%3A0x8d9bd9aaec99a20!2sLondon+Rd%2C+Croydon+CR0+2RE!5e0!3m2!1sen!2suk!4v1535311898666" allowfullscreen></iframe>
</div>
</body>
</html>
Are you looking for something like this? Add the following code to your css and see if it does the trick.
iframe {
height: 100vh;
width: 100vw;
box-sizing: border-box;
}
Take a look at using viewport percentage
I try to make navigation menu in hamburger style...I made html, css and JS and everything is ok, but when I click link in menu, so menu doesn't hide and still is open. I need to hide menu when I click on link link
Really don't have idea why it doesn't work because for example toggle on cross is ok.
Here is CODE. HTML + JS are together:
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
background: #1d1d1d;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
.container {
width: 100%;
margin: 0 auto;
padding: 0;
}
header {
color: #EBEBD3;
padding: 1em 0;
position: fixed;
width: 100%
}
header::after {
content: '';
clear: both;
display: block;
}
.logo {
float: left;
font-size: 1rem;
margin: 0;
position: relative;
left: 5%;
text-transform: uppercase;
font-weight: 700;
}
.logo span {
font-weight: 400;
}
.site-nav {
position: absolute;
background-color: #1d1d1d;
top: 100%;
right: 0;
height: 0px;
overflow: hidden;
transition: .5s ease-in-out;
opacity: 0;
width: 100%;
}
.site-nav--open {
height: auto;
opacity: 100;
}
.site-nav ul {
padding: 0;
list-style: none;
margin: 0;
}
.site-nav li {
width: 100%;
text-align: center;
/* border-bottom: 1px solid #575766;*/
}
.site-nav li:last-child {
/* border-bottom: none; */
}
.site-nav a {
font-weight: 800;
font-size: 40px;
color: #9E9E9E;
text-decoration: none;
display: block;
padding: 2em;
text-transform: uppercase;
}
.site-nav a:hover,
.site-nav a:focus {
color: white;
}
.menu-toggle {
position: fixed;
padding: 1em;
position: absolute;
right: .75em;
top: .75em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background-color: #ebebbd;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: .5s ease-in-out;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after {
transform: translateY(-3px) rotate(90deg);
}
.open .hamburger {
transform: rotate(45deg);
}
#particles-js {
height: 100vh;
background-color: #1d1d1d;
}
#about {
height: 100vh;
background-color: green;
}
#portfolio {
height: 100vh;
background-color: blue;
}
#contact {
height: 100vh;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Doplniť neskôr">
</head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<body>
<header>
<div class="container">
<h1 class="logo">Try <span>it</span></h1>
<nav class="site-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
<div id="particles-js"></div>
<div id="about"></div>
<div id="portfolio"></div>
<div id="contact"></div>
<script src="js/particles.js"></script>
<script src="js/app.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
})
</script>
</body>
</html>
I hope it will help you !
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
background: #1d1d1d;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
.container {
width: 100%;
margin: 0 auto;
padding: 0;
}
header {
color: #EBEBD3;
padding: 1em 0;
position: fixed;
width: 100%
}
header::after {
content: '';
clear: both;
display: block;
}
.logo {
float: left;
font-size: 1rem;
margin: 0;
position: relative;
left: 5%;
text-transform: uppercase;
font-weight: 700;
}
.logo span {
font-weight: 400;
}
.site-nav {
position: absolute;
background-color: #1d1d1d;
top: 100%;
right: 0;
height: 0px;
overflow: hidden;
transition: .5s ease-in-out;
opacity: 0;
width: 100%;
}
.site-nav--open {
height: auto;
opacity: 100;
}
.site-nav ul {
padding: 0;
list-style: none;
margin: 0;
}
.site-nav li {
width: 100%;
text-align: center;
/* border-bottom: 1px solid #575766;*/
}
.site-nav li:last-child {
/* border-bottom: none; */
}
.site-nav a {
font-weight: 800;
font-size: 40px;
color: #9E9E9E;
text-decoration: none;
display: block;
padding: 2em;
text-transform: uppercase;
}
.site-nav a:hover,
.site-nav a:focus {
color: white;
}
.menu-toggle {
position: fixed;
padding: 1em;
position: absolute;
right: .75em;
top: .75em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background-color: #ebebbd;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: .5s ease-in-out;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after{
transform: translateY(-3px) rotate(90deg);
}
.open .hamburger {
transform: rotate(45deg);
}
#particles-js {
height: 100vh;
background-color: #1d1d1d;
}
#about {
height: 100vh;
background-color: green;
}
#portfolio {
height: 100vh;
background-color: blue;
}
#contact {
height: 100vh;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Doplniť neskôr">
</head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<body>
<header>
<div class="container">
<h1 class="logo">Try <span>it</span></h1>
<nav class="site-nav">
<ul>
<li><a class="menu-link" href="#particles-js">Home</a></li>
<li><a class="menu-link" href="#about">About</a></li>
<li><a class="menu-link" href="#portfolio">Portfolio</a></li>
<li><a class="menu-link" href="#contact">Contact</a></li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
<div id="particles-js"></div>
<div id="about"></div>
<div id="portfolio"></div>
<div id="contact"></div>
<script src="js/particles.js"></script>
<script src="js/app.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
});
$('.menu-link').click(function(){
$('.site-nav').toggleClass('close site-nav--open');
$('.menu-toggle').toggleClass('open')
});
</script>
</body>
</html>
I added new function which closes menu on .menu-link click.
I believe it solves your problem.
Snippet
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
background: #1d1d1d;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
.container {
width: 100%;
margin: 0 auto;
padding: 0;
}
header {
color: #EBEBD3;
padding: 1em 0;
position: fixed;
width: 100%
}
header::after {
content: '';
clear: both;
display: block;
}
.logo {
float: left;
font-size: 1rem;
margin: 0;
position: relative;
left: 5%;
text-transform: uppercase;
font-weight: 700;
}
.logo span {
font-weight: 400;
}
.site-nav {
position: absolute;
background-color: #1d1d1d;
top: 100%;
right: 0;
height: 0px;
overflow: hidden;
transition: .5s ease-in-out;
opacity: 0;
width: 100%;
}
.site-nav--open {
height: auto;
opacity: 100;
}
.site-nav ul {
padding: 0;
list-style: none;
margin: 0;
}
.site-nav li {
width: 100%;
text-align: center;
/* border-bottom: 1px solid #575766;*/
}
.site-nav li:last-child {
/* border-bottom: none; */
}
.site-nav a {
font-weight: 800;
font-size: 40px;
color: #9E9E9E;
text-decoration: none;
display: block;
padding: 2em;
text-transform: uppercase;
}
.site-nav a:hover,
.site-nav a:focus {
color: white;
}
.menu-toggle {
position: fixed;
padding: 1em;
position: absolute;
right: .75em;
top: .75em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background-color: #ebebbd;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: .5s ease-in-out;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after {
transform: translateY(-3px) rotate(90deg);
}
.open .hamburger {
transform: rotate(45deg);
}
#particles-js {
height: 100vh;
background-color: #1d1d1d;
}
#about {
height: 100vh;
background-color: green;
}
#portfolio {
height: 100vh;
background-color: blue;
}
#contact {
height: 100vh;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Doplniť neskôr">
</head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<body>
<header>
<div class="container">
<h1 class="logo">Try <span>it</span></h1>
<nav class="site-nav">
<ul>
<li><a class="menu-link" href="#particles-js">Home</a></li>
<li><a class="menu-link" href="#about">About</a></li>
<li><a class="menu-link" href="#portfolio">Portfolio</a></li>
<li><a class="menu-link" href="#contact">Contact</a></li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
<div id="particles-js"></div>
<div id="about"></div>
<div id="portfolio"></div>
<div id="contact"></div>
<script src="js/particles.js"></script>
<script src="js/app.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
})
$('.menu-link').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$('.menu-toggle').toggleClass('open');
})
</script>
</body>
</html>
So I'm having a bit of an issue with my image gallery. I want my images to fade to the next or previous image when I press the prev/next buttons. But I also have a toggle feature that when you click on the image, it changes to a different one.
The toggle works for the first two images, but I lost the fade in transition. What can I do so I can have both the toggle and the fade in?
If I change the javascript code from
slides[i].style.display = "none"; slides[slideIndex-1].style.display = "block"
to
slides[i].style.opacity = "0"; slides[slideIndex-1].style.opacity = "1";
the fade in transition works, but I lose the toggle effect.
Here's the codepen: https://codepen.io/GabriellaFarfan/pen/VBYQGy.
var slideIndex = 1;
showSlide(slideIndex);
function plusSlides(n){
showSlide(slideIndex += n);
}
function currentSlide(n) {
showSlide(slideIndex = n);
}
function showSlide(n){
var i;
var slides = document.getElementsByClassName("myslides");
if (n > slides.length) { slideIndex = 1};
if (n < 1) { slideIndex = slides.length};
for (i=0;i<slides.length;i++) {
slides[i].style.display = "none";
};
slides[slideIndex-1].style.display = "block";
}
function toggleImage(id) {
var image = document.getElementById(id);
image.style.display = image.style.display == "none" ? "block" : "none";
}
function toggleBoth() {
toggleImage('image1')
toggleImage('image2')
toggleImage('image3')
toggleImage('image4')
}
$(document).ready(function(){
$(".next").click(function(){
$("")
});
});
* {
margin: 0;
padding: 0;
list-style-type:none;
}
body{
margin: 0;
font-size: 100%;
background-color: #232324;
height: 100vh;
}
.header {
overflow: auto;
background-color: #ECAAAC;
}
.logo {
float: left;
padding-top: 1em;
width: 20%;
text-align: center;
font-family: 'Allerta', sans-serif;
text-transform: uppercase;
font-weight: 700;
}
.logo a {
text-decoration: none;
font-size: 1em;
color: black;
}
.nav {
background-color: #232324;
padding-top: 1em;
padding-bottom: 1em;
width: 80%;
float: right;
}
li {
display: inline-block !important;
border-right: 1px solid #656568;
padding-right: 1.5em;
padding-left: 1.5em;
}
li:last-child{
border-right: none;
}
li a {
text-decoration: none;
text-align: center;
color: white;
font: normal 62.5% "proxima-nova-alt", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
}
li a:hover {
color: #ECAAAC;
}
.text {
background-color: black;
padding: .75em 0 .75em 0;
}
p {
color: #656568;
text-align: center;
font-size: 1em;
font: italic 80% "proxima-nova-alt", Helvetica, Arial, sans-serif;
}
#slideshow-container{
position: relative;
margin: auto;
background-color: black;
overflow: hidden;
padding-bottom: 2.5em;
height: 1000px !important;
}
#slideshow-container img{
display: block;
margin: 0 auto;
max-width: 100%;
position: relative;
height: 960px;
}
.myslides {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
opacity: 1;
-webkit-transition: opacity .5s ease;
transition: opacity .5s ease;
}
.prev , .next{
position: absolute;
top: 50%;
font-size: 30px;
font-weight: bold;
padding: 16px;
margin-top: -22px;
color: #fff;
cursor: pointer;
z-index: 1;
}
.next{
right: 0;
}
.prev:hover,.next:hover{
/* color: #b0d5d0 ; */
/* background-color: rgba(0,0,0,0.8); */
}
.caption{
text-align: center;
position: absolute;
width: 100%;
color: #f2f2f2;
text-shadow: 2px 2px 4px black;
font: normal 62.5% "proxima-nova-alt", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
padding-top: 1.25em;
}
#media(max-width: 798px) {
#slideshow-container {
height: 640px !important;
}
#slideshow-container img {
max-height: 600px !important;
display: block;
margin: 0 auto;
max-width: 100%;
}
.nav {
width: 75%;
}
.logo {
width: 25%;
text-align: center;
}
.logo a {
font-size: .75em;
}
li {
padding-right: .75em !important;
padding-left: .75em !important;
}
}
#media(max-width: 468px) {
#slideshow-container {
height: 440px !important;
}
#slideshow-container img{
max-height: 400px !important;
display: block;
margin: 0 auto;
max-width: 100%;
}
.nav {
width: 65%;
}
.logo {
width: 35%;
text-align: center;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!---Images not owned by me --->
<link href="https://fonts.googleapis.com/css?family=Allerta" rel="stylesheet">
<div class="header">
<div class="logo">
Gabriella Farfan
</div>
<div class="nav">
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="slideshow-container">
<div class="text">
<p>Click on the image to see the before and after</p>
</div>
<div class="myslides fade">
<div>
<img id="image1" onclick="toggleBoth()" src="http://www.hestetika.it/wp-content/uploads/2016/10/stevemccurry_5.jpg">
<img id="image2" onclick="toggleBoth()" style="display:none;" src="https://static.boredpanda.com/blog/wp-content/uploads/2014/12/Top-10-photographers-for-travel-portraits27__700.jpg">
</div>
<div class="caption">Text 1</div>
</div>
<div class="myslides fade">
<div>
<img id="image3" onclick="toggleBoth()" src="https://i.pinimg.com/736x/2f/7a/33/2f7a33e82f03de319faa0663371e2609--interesting-faces-freckles.jpg">
<img id="image4" onclick="toggleBoth()" style="display:none;" src="http://cdn3.spiegel.de/images/image-945792-galleryV9-buud-945792.jpg">
</div>
<div class="caption">Text 2</div>
</div>
<div class="myslides fade">
<div>
<img src="https://media.discordapp.net/attachments/327123793040637952/436369548996902913/nwts_ariana.jpg?width=1050&height=1050">
</div>
<div class="caption">Text 3</div>
</div>
<div class="myslides fade">
<div>
<img src="http://jmacpratt.weebly.com/uploads/1/2/0/1/12013129/portrait2_orig.jpg">
</div>
<div class="caption">Text 4</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
Apart from making display none and display block try using visibility visible and hidden with transition:0.5s and opacity 0 / 1
My Jquery works just fine in text editors like fiddle and snippets on StackOverflow but once I put it in Brackets or even open it on Github, the navbar scroll down animation doesn't work. Here is a link to the fiddle, where I used the exact same code I used in Brackets and Github Pages. (I just used a random background image).
$(document).ready(function() {
$(window).scroll(function() {
if ($(document).scrollTop() > 10) {
$('#nav').addClass('shrink');
} else {
$('#nav').removeClass('shrink');
}
});
});
/**********BODY GENERAL**********/
body {
margin: 0;
height: 2500px;
/* just to demonstrate how it will looks with content */
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
/* Fix this one day */
.bg-img {
background: url('https://orig00.deviantart.net/2106/f/2012/329/0/e/untitled_drawing_by_walktheinch-d5m49xe.png') no-repeat center center;
background-size: cover;
height: 100vh;
}
strong {
font-weight: bold;
}
/*********NAVIGATION*********/
#media screen and (max-width: 900px) {
nav {
grid-template-columns: 100%;
grid-template-rows: auto;
grid-gap: 1em;
}
}
.menu1 {
grid-column: 1;
}
.menu2 {
grid-column: 2;
}
.logo {
grid-column: 3;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
font-size: 28px;
width: 500px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 7vh;
margin-bottom: 25px;
color: #000;
text-transform: uppercase;
letter-spacing: 3px;
}
.menu3 {
grid-column: 4;
}
.menu4 {
grid-column: 5;
}
/**************HOVER ANIMATION**************/
div>a {
font-family: 'Raleway';
text-transform: uppercase;
text-decoration: none;
color: #000;
position: relative;
font-size: 0.8rem;
}
div>a:hover {
color: #000;
}
div>a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: -4px;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
div>a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/**********MAIN HEADER***********/
header {
color: white;
justify-content: center;
align-content: center;
top: 0;
bottom: 0;
left: 0;
}
/**********BODY*****************/
.Minfo {
color: red;
width: 100%;
padding-top: 100px;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
}
.subtitle {
padding-left: 4em;
padding-top: 29em;
font-size: 100%;
color: #fff;
}
.title {
font-size: 3em;
text-align: left;
color: #FFF;
padding-bottom: 0px;
}
.subtext {
padding-top: 0px;
color: #FFF;
}
/************* NAV TRASPARENT TO OPAQUE ANIMATION *************/
nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 1em;
grid-auto-rows: auto;
text-align: center;
align-items: center;
background: transparent;
*/ z-index: 100;
transition: all ease .5s;
height: 70px;
position: relative;
}
/*============= NEW CSS RULES ============*/
#nav {
position: relative;
}
#nav .logo p {
margin: 10px 0;
}
#nav .background {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: #ededed;
height: 0;
transition: height 800ms ease;
}
#nav.shrink .background {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Centennial It's Academic</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
<!-- Linking Jquery/Javascript -->
</head>
<body>
<div class="bg-img">
<header>
<div id="nav">
<!---- NEW BACKGROUND ELEMENT HERE ---->
<div class="background"></div>
<nav class="container">
<div class="menu1">
<a id="navLinks" href="#home">Home</a>
</div>
<div class="menu2">
<a id="navLinks" href="#upcoming">Tournaments</a>
</div>
<div class="logo">
<p>It's Academic</p>
</div>
<div class="menu3">
<a id="navLinks" href="#history">History</a>
</div>
<div class="menu4">
<a id="navLinks" href="#faq">Contact Info</a>
</div>
</nav>
<!-- This cluster of info -->
</div>
</header>
<div class="Minfo">
<div class="subtitle">
CENTENNIAL<br>
<div class="title">
It's Academic
</div>
<br>
<div class="subtext">
Meets every Tuesday in Room 506
</div>
</div>
</div>
</div>
</body>
</html>
Here is a PR: https://github.com/killerchef732/ItsAcademic/pull/2
Basically you didn't include the script tag (<script src="script.js"></script>) in your page and you also had some junk (÷ ,) at the end of your script.js file.
First I noticed your page didn't even have the script code in it.
Then once I added it in, the chrome developer console showed me it encountered errors.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am trying to code a modal image gallery. I found an html code for one, that includes a little JS, but it doesn't come with any CSS. So when I click on the image, (currently only the top left one is linked up) the modal shows up at the bottom. I know nothing about JS or modals, could someone help me with what sort of code I would need to make the modal pop up over top of everything? Thanks in advance!
#font-face {
font-family: Gudea;
src: url(https://www.google.com/fonts#UsePlace:use/Collection:Gudea:400,400italic,700);
}
h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 0;
}
p {
margin: 0 0 1em 0;
font-size: 93%;
line-height: 1.5em;
}
body {
font-family: Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
background-image: url(http://oi68.tinypic.com/9tzv4n.jpg);
}
img {
max-width: 100%;
height: auto;
margin: 0 0 10px 0;
}
/* Section Inner */
div.section-inner {
max-width: 1100px;
padding: 0 25px;
margin: 0 auto;
}
/* Header */
div.header {
background-image: url(http://oi67.tinypic.com/33dfi86.jpg);
margin-top:40px;
height: 30px;
background-color: #E9E9E9;
padding: 40px 0;
}
/*Logo*/
h1 span {
position: absolute;
top: 97px;
left: 50%;
width: 402px;
height: 160px;
margin: -80px 0 0 -201px;
text-indent: -999em;
z-index: 99;
background: url(http://www.cutcodedown.com/for_others/barrelPony/sandmannFarm/images/h1Logo.png);
}
/*Satooth Pattern*/
h2 span {
position: absolute;
top: 140px;
height: 20px;
text-indent: -999em;
z-index: 90;
background: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Sawtooth_zps67oxpl7p.png);
background-repeat: repeat-x;
width: 100%;
}
/*Sawtooth Pattern Two*/
h3 span {
position: absolute;
margin-top: -30px;
height: 40px;
text-indent: -999em;
z-index: 90;
background: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Sawtooth_zps67oxpl7p.png);
background-repeat: repeat-x;
width: 100%;
}
/* Navigation */
#mainMenuCheck {
/* display none breaks this in some browsers, so just slide it out of view */
position:absolute;
left:-999em;
}
#mainMenu {
position:relative; /* depth sort over h1 */
background:#754 url(images/dots.png) top left;
padding:0.40em 0.75em 0.05em;
/* left margin adjusts for uneven menu width, change as needed */
text-align:center;
}
#mainMenu li {
list-style:none;
display:inline;
}
#mainMenu ul:before,
#mainMenu ul:after,
#mainMenu:after,
#mainMenu a {
color:#F0E8E0;
text-shadow:
0 0 2px #000,
2px 2px 2px #000,
2px 2px 3px #000;
}
#mainMenu a {
display:inline-block;
vertical-align:bottom;
text-decoration:none;
color:#F0E8E0;
-webkit-transition:color 0.3s, text-shadow 0.3s;
transition:color 0.3s, text-shadow 0.3s;
}
#mainMenu a.current {
color:#87C6BC;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
color:#87C6BC;
}
#mainMenu a:after {
display:inline-block;
padding:0 0.1em 0 0.5em;
color:#FFF;
}
#mainMenu .lastInSet a:after {
display:none;
}
#mainMenu .setBreak {
padding-right:8em;
}
#mainMenu a:after,
#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
content:"\2605";
font-family:"arial unicode ms","dejavu sans",lastresort,sans-serif;
}
#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
position:absolute;
left:50%;
width:3em;
bottom: 1em;
}
#mainMenu:after {
bottom:0.3em;
font-size:150%;
margin-left:-1.5em;
}
#mainMenu ul:before {
margin-left:-3em;
}
/* Body Content */
div.body-content {
padding: 50px 0;
background-image: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Page_zpscom5uhou.png);
font-family: Gudea;
}
div.center{
width:100%;
}
/*
#heart-header {
width: 50%;
height:auto;
margin-left: auto;
margin-right: auto;
display: block;
}
/*float left*/ .left { float: left; /*left in our text*/ margin: 20px; /*space around the image*/
}
/*float left*/ .right { float: right; margin: 20px; /*space around the image*/
}
#media screen and (max-width: 793px){
.left{
margin:0;
width:100%;
display: block;
float: none;
}
.right{
margin:0 auto;
width:75%;
display: block;
float: none;
}
}
}
/*
div.center h2 {
margin: 0;
font-size: 30px;
font-size: 3.5vw;
font-family: Gudea;
font-weight: bold;
position: absolute;
top:60%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
/* Thirds */
div.thirds {
padding-bottom: 50px;
text-align: center;
font-family: Gudea;
}
div.button1 {
width:90px;
height:40px;
margin-left: 38%;
}
div.one-third {
width: 30%;
float: left;
margin-right: 5%;
text-align: center;
font-family: Gudea;
}
div.button2 {
width:90px;
height:40px;
margin-left: 38%;
}
div.one-third-last {
margin: 0;
text-align: center;
font-family: Gudea;
}
div.button3 {
width:90px;
height:40px;
margin-left: 38%;
}
/*Level Two*/
div.four {
padding-bottom: 50px;
text-align: center;
font-family: Gudea;
}
div.button4 {
width:90px;
height:40px;
margin-left: 38%;
}
div.five {
width: 30%;
float: left;
margin-right: 5%;
text-align: center;
font-family: Gudea;
}
div.button5 {
width:90px;
height:40px;
margin-left: 38%;
}
div.six {
margin: 0;
text-align: center;
font-family: Gudea;
}
div.button6 {
width:90px;
height:40px;
margin-left: 38%;
}
.flex {
padding: 4px;
display: flex;
flex-wrap: wrap;
}
.flex {
padding: 4px;
margin-right: 2%;
display: flex;
flex-wrap: wrap;
}
.item {
width: 30%;
margin-left:3%;
margin-bottom: 20px;
text-align: center;
}
/**/
h2 {
color:#4EB4AC;
font-family: Gudea;
font-size: 20px;
}
/* Main Column */
div.main {
width: 100%;
float: left;
margin-top: -30px;
margin-right: 5%;
text-align: center;
font-family: Gudea;
position: relative;
}
/* Footer */
div.footer {
background-image: url(http://oi67.tinypic.com/33dfi86.jpg);
margin-top: 30px;
margin-bottom: 30px;
color: #FFF;
padding: 15px 0;
text-align: center;
}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/*Mobile Nav*/
#media (min-width:900px) {
.header2 {
display: none;
}
.menu {
display: none;
}
}
#media (max-width:900px) {
body {
z-index: 100;
margin:;
font-family: font:bold 16px/18px arial,helvetica,sans-serif;
background-color: #f4f4f4;
}
a {
color: #F8F4E6;
text-shadow:
0 0 5px #000,
5px 5px 5px #754;
}
.menu a:before,
.menu ul:before,
.menu ul:before {
content:"\2605";
}
/* header */
.header2 {
background-color:#6A4E39;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: relative;
width: 100%;
z-index: 3;
}
.header2 ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-image:none;
}
.header2 li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header2 li a:hover,
.header2 .menu-btn:hover {
background-color:#4EB4AC;
}
.header2 .logo {
display: block;
float: left;
font-size: 15px;
padding: 10px 20px;
margin-top: 15px;
text-decoration: none;
}
/* menu */
.header2 .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header2 .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header2 .menu-icon .navicon {
background: #F8F4E6;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header2 .menu-icon .navicon:before,
.header2 .menu-icon .navicon:after {
background: #F8F4E6;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
margin-top: 7px;
}
.header2 .menu-icon .navicon:before {
top: 03px;
}
.header2 .menu-icon .navicon:after {
top: -2px;
}
/* menu btn */
.header2 .menu-btn {
display: none;
}
.header2 .menu-btn:checked ~ .menu {
max-height: none;
}
.header2 .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header2 .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header2 .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header2 .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header2 .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
}
/* 48em = 768px */
#media (max-width: 899px) {
#mainMenu {
display: none;
justify-content: center;
}
/* section */
.section {
overflow: hidden;
margin: auto;
max-width: 1400px;
}
.section a {
position: relative;
float: left;
width: 100%;
}
.section a img {
width: 100%;
display: block;
}
.section a span {
color: #fff;
position: absolute;
left: 5%;
bottom: 5%;
font-size: 2em;
text-shadow: 1px 1px 0 #000;
}
.section-split a span {
display: none;
}
.section-split a:hover span {
display: block;
}
/* 48em = 768px */
#media (min-width: 48em) {
.section-split a {
width: 50%;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sandmann Farm</title>
<meta name="viewport" content="width=device-width">
<!-- css -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 900px)">
</head>
<body>
<!--Logo-->
<h1>
<a href="/">
<span>-</span>
</a>
</h1>
<!--Sawtooth Pattern-->
<h2>
<a href="/">
<span>-</span>
</a>
</h2>
<!-- Header -->
<div class="header"><div class="section-inner">
</div></div>
<!-- Navigation -->
<div id="container">
<input type="checkbox" id="mainMenuCheck">
<label for="mainMenuCheck"></label>
<div id="mainMenu">
<ul>
<li>Home</li>
<li>About</li>
<li>What We Do</li>
<li class="lastInSet setBreak">Events</li>
<li>Success Stories</li>
<li>Contact</li>
<li>Photos</li>
<li class="lastInSet">Blog</li>
</ul>
</div>
<!--Mobile Navigation-->
<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css" />
<header class="header2">
Navigation
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li> Home</li>
<li> About</li>
<li> What We Do</li>
<li> Events</li>
<li> Success Stories</li>
<li> Contact</li>
<li> Photos</li>
<li> Blog</li>
</ul>
</header>
<!-- Body-Content -->
<div class="body-content"><div class="section-inner">
<div class="flex">
<div class="item">
<div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg" style="width:100%;cursor:pointer"
onclick="onClick(this)" class="w3-hover-opacity"></div>
<div class="button3">
</div>
</div>
<div class="item">
<div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg"></div>
<div class="button3">
</div>
</div>
<div class="item">
<div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg"></div>
<div class="button3">
</div>
</div>
<div class="item">
<div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg"></div>
<div class="button3">
</div>
</div>
<div class="item">
<div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg"></div>
<div class="button3">
</div>
</div>
<div class="item">
<div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg"></div>
</div>
</div>
</div>
<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
<span class="w3-closebtn w3-hover-red w3-text-white w3-xxlarge w3-container w3-display-topright">×</span>
<div class="w3-modal-content w3-animate-zoom">
<img id="img01" style="width:100%">
</div>
</div>
<script>
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
}
</script>
</div></div><!--/body-content-->
<!--Sawtooth Pattern Two-->
<h3>
<a href="/">
<span>-</span>
</a>
</h3>
<!-- Footer -->
<div class="footer"><div class="section-inner">
<p>Footer text placed here.</p>
</div></div>
</body>
</html>
You can just add a bit of CSS:
#modal01 {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
}
See the example on codepen: http://codepen.io/anon/pen/XjJAdw
Let's focus in on what modals exactly are. Take a look at this.
Basically, inside your head tag, add this code.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
On your img tags, add this code.
<img data-toggle="modal" data-target="#myModal" src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg">
This is how to make your modal.
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>