jQuery scroll down buttons won't work - javascript

I'm new to jQuery and I'm wondering why my scroll down button won't work. I have been looking at several forum feeds but I can't seem to figure out how to make it work. Here I'd like for the link-button with id="this_button" to make a smooth jump to id="group2".
The script to make the smooth scroll is pretty basic and has already been seen multiple times, so I can't figure out what I did wrong. If any of you has an idea of how to solve this, it'd be grateful (Does the parallax layers influence badly ?). Also, if something is not clear, don't hesitate to ask.
div = document.getElementById("div1").clientHeight;
list = document.getElementsByClassName("else");
for (var i = 0; i < list.length; i++) {
list[i].style.lineHeight=div-14+"px";
}
$(document).ready(function(){
$("a").on('click', function(event){
if (this.hash !== ""){
event.preventDefault();
var hash = this.hash;
$('html, body').animate({scrollTop: $(hash).offset().top}, 800, function(){
window.location.hash = hash;
});
}
});
});
body{
font-family: 'Dosis';font-size: 19px;
margin: 0;
padding: 0;
}
header{
background-color: white;
position:fixed;
top:0;
left:0;
width:100%;
z-index:1000;
}
header div{
margin:auto;
width:100%;
overflow: auto;
/*border:1px solid black;*/
}
header div ul{
list-style-type: none;
margin:auto;
width:100%;
}
header div ul li{
float:left;
/*border: .5px solid red;*/
}
header div ul li a{
display:block;
text-decoration: none;
color:black;
text-align:center;
transition: color .3s;
}
header div ul li a.first{
margin-left:100px;
margin-right:30px;
}
header div ul li a.else{
margin-left:20px;
margin-right:20px;
}
header div ul li a.active{
color:tomato;
}
#h2title{
margin-bottom:0px;
padding-bottom:0px;
margin-top: 0;
padding-top: 0;
}
header div ul li a:hover:not(.active){
color:tomato;
}
/*===========================================================================*/
.parallax {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 300px;
perspective: 300px;
font-size: 200%;
}
.parallax__group {
position: relative;
height: 150vh;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 50vh 0;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
border:1px solid black;
}
.parallax__layer--back {
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
}
/* centre the content in the parallax layers */
.title {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
color:white;
}
.huge{
font-size: 400%;
}
#group1{
z-index: 2;
}
#group1 .parallax__layer--back{
background-color:black;
}
#group2{
z-index: 5;
}
#group2 .parallax__layer--base{
background-color: white;
}
.button{
background-color: white;
color: black;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border: none;
padding: 11px 25px;
position:absolute;
left: 50%;
top: 72%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
outline:2px solid black;
transition: .4s;
}
.button:hover{
background-color: rgb(255,99,71,0.3);
outline: 2px solid white;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div id="div1">
<ul>
<li style="position:relative; top:10px;">
<a class="first" href="sthenos.html">
<h2 id=h2title>STHENOS MOVEMENT</h2>
<p style="margin-top:0px; padding-top:0px; margin-bottom:0; padding-bottom:0;">Lausanne</p>
</a>
</li>
<li><p>Accueil</p></li>
<li><p>Toi dans tout ça</p></li>
<li><p>Services entreprises/autorités</p></li>
<li><p>À propos</p></li>
<li><p>Contact</p></li>
</ul>
</div>
</header>
<body>
<div class="parallax">
<div id="group1" class="parallax__group">
<div class="parallax__layer parallax__layer--back"></div>
<div class="parallax__layer parallax__layer--base">
<div class="title">MASTER YOUR <span style="color:tomato">BODY</span>.</div>
<div class="huge title">STHENOS MOVEMENT</div>
<div>
Découvrir l'association
</div>
</div>
</div>
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">BIEN</div>
</div>
</div>
</div>
</body>


It's just about hash property you use it's not functional with query, so instead you can do something like that
// I have commented that part because it's not related to the question
/*var div = document.getElementById("div1").clientHeight;
list = document.getElementsByClassName("else");
for (var i = 0; i < list.length; i++) {
list[i].style.lineHeight=div-14+"px";
}*/
$(document).ready(function(){
$("a").on('click', function(event){
if ($(this).attr('href') != ""){
event.preventDefault();
var hash = this.hash;
$('html, body').animate({scrollTop: $(this).offset().top}, 800, function(){
window.location.hash = hash;
});
}
});
});
<!DOCTYPE html>
<html>
<head>
<title>Animation</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div id="div1">
<ul>
<li style="position:relative; top:10px;">
<a class="first" href="sthenos.html">
<h2 id=h2title>STHENOS MOVEMENT</h2>
<p style="margin-top:0px; padding-top:0px; margin-bottom:0; padding-bottom:0;">Lausanne</p>
</a>
</li>
<li><p>Accueil</p></li>
<li><p>Toi dans tout ça</p></li>
<li><p>Services entreprises/autorités</p></li>
<li><p>À propos</p></li>
<li><p>Contact</p></li>
</ul>
</div>
</header>
<body>
<div class="parallax">
<div id="group1" class="parallax__group">
<div class="parallax__layer parallax__layer--back"></div>
<div class="parallax__layer parallax__layer--base">
<div class="title">MASTER YOUR <span style="color:tomato">BODY</span>.</div>
<div class="huge title">STHENOS MOVEMENT</div>
<div>
Découvrir l'association
</div>
</div>
</div>
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">BIEN</div>
</div>
</div>
</div>
</body>
</html>


Try this, it is working.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a").click(function() {
scrollToAnchor(this.name);
});
});
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('.parallax').animate({scrollTop: aTag.offset().top},5000);
}
</script>

Related

Vertical navigation scroll effect modification

I got this pen: https://codepen.io/janmez/pen/gryoKG but would like it to work more like on this site: https://rallyinteractive.com/. Not the background change, just list on the left. My js knowledge is not sufficient, can you help?
I tried achieving this with css but no success.
Edit: I added the full code and now what I want to achieve. I don't care about background animation, just wanted to make the nav and .content-section work more like on the site I mentioned above. Pen code does some of what I want: nav items get selected while scrolling to the relevant section. What I want to do is to have active nav elements always centered vertically and scroll together with sections. The example site (rallyinteractive.com) does exactly what I need.
$(document).ready(function(){
var contentSection = $('.content-section');
var navigation = $('nav');
//when a nav link is clicked, smooth scroll to the section
navigation.on('click', 'a', function(event){
event.preventDefault(); //prevents previous event
smoothScroll($(this.hash));
});
//update navigation on scroll...
$(window).on('scroll', function(){
updateNavigation();
})
//...and when the page starts
updateNavigation();
/////FUNCTIONS
function updateNavigation(){
contentSection.each(function(){
var sectionName = $(this).attr('id');
var navigationMatch = $('nav a[href="#' + sectionName + '"]');
if( ($(this).offset().top - $(window).height()/2 < $(window).scrollTop()) &&
($(this).offset().top + $(this).height() - $(window).height()/2 > $(window).scrollTop()))
{
navigationMatch.addClass('active-section');
}
else {
navigationMatch.removeClass('active-section');
}
});
}
function smoothScroll(target){
$('body,html').animate({
scrollTop: target.offset().top
}, 800);
}
});
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
#import url(https://fonts.googleapis.com/css?family=Lato);
html{
height: 100%;
font-family: 'Open Sans', sans-serif;
background-color: #E9E8E2;
}
body{
height: 100%;
}
nav{
width: 15%;
height: 400px;
position: fixed;
top: auto;
bottom: auto;
z-index: 10;
scroll-snap-type: y mandatory;
overflow-y: hidden;
}
ul{
list-style: none;
padding: 0;
text-align:center;
valign:center;
}
li{
padding: 40px 0;
scroll-snap-align: center;
}
span{
display: inline-block;
position:relative;
}
nav a{
display: inline-block;
color: #272727;
text-decoration: none;
font-size: 1em;
}
.circle{
height: 10px;
width: 10px;
left: -10px;
border-radius: 50%;
background-color: #272727;
}
.rect{
height: 3px;
width: 0px;
left: 0;
bottom: 4px;
background-color: #272727;
-webkit-transition: -webkit-transform 0.6s, width 1s;
-moz-transition: -webkit-transform 0.6s, width 1s;
transition: transform 0.6s, width 1s;
}
nav a:hover, nav .active-section{
color: #9b59b6;
}
nav a:hover span, nav .active-section span{
background-color: #9b59b6;
}
nav .active-section .rect{
width: 40px;
}
.content-section{
position: relative;
width: 80%;
height: 90%;
left: 50%;
background-color: #ecf1f1;
text-align: center;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.content-section h1{
position: relative;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
color:#9b59b6;
font-size: 3em;
}
/*CREDITS*/
.about{
position: fixed;
bottom:0;
left: 1%;
}
.about a{
text-decoration: none;
font-size: 1.5em;
}
.about a:visited, .about a:active, .about a:link{
color:#000;
}
.about a:hover{
color: red;
}
<nav>
<ul>
<li>
<a href="#section1">
<span class="rect"></span>
<span class="circle"></span>
ONE
</a>
</li>
<li>
<a href="#section2">
<span class="rect"></span>
<span class="circle"></span>
TWO
</a>
</li>
<li>
<a href="#section3">
<span class="rect"></span>
<span class="circle"></span>
THREE
</a>
</li>
<li>
<a href="#section4">
<span class="rect"></span>
<span class="circle"></span>
FOUR
</a>
</li>
<li>
<a href="#section5">
<span class="rect"></span>
<span class="circle"></span>
FIVE
</a>
</li>
</ul>
</nav>
<section id="section1" class="content-section">
<h1>SECTION ONE</h1>
</section>
<section id="section2" class="content-section">
<h1>SECTION TWO</h1>
</section>
<section id="section3" class="content-section">
<h1>SECTION THREE</h1>
</section>
<section id="section4" class="content-section">
<h1>SECTION FOUR</h1>
</section>
<section id="section5" class="content-section">
<h1>SECTION FIVE</h1>
</section>
<div class="about">♡</div>
</div>

How to add multiple slider support to a simple jquery slider?

I have a very simple slider with jquery; it supports only one slider, and I want to make it support multiple sliders on the same page.
Example: Slider 1, Slider 2, Slider 3 etc. on the same page.
A working snippet is here working example.
I know I have to use each function—and I did—but it stopped working. I don't know where I am going wrong. This is what I tried; the code was too long, so I shortened it:
$('#slider').each(function() {
var current_slider = $(this);
//slider codes in here
});
Here is my complete code:
$(function(){
var Slider = 0;
$.Slider = function(total){
$("#indicator li").removeClass("active");
$("#image li").hide();
if (Slider < total -1){
Slider++;
$("#indicator li:eq("+Slider+")").addClass("active");
$("#image li:eq("+Slider+")").fadeIn("slow");
}else {
$("#indicator li:first").addClass("active");
$("#image li:first").fadeIn("slow");
Slider = 0;
}
}
var totalLi = $("#indicator li").length;
var interval = setInterval('$.Slider('+totalLi+')',5000);
$("#slider").hover(function(){
clearInterval(interval);
},function(){
interval = setInterval('$.Slider('+totalLi+')',5000);
});
$("#indicator li:first").addClass("active");
$("#image li").hide();
$("#image li:first").show();
$("#indicator li").hover(function(){
var indicators = $(this).index();
$("#indicator li").removeClass("active");
$(this).addClass("active");
$("#image li").hide();
$("#image li:eq("+indicators+")").fadeIn("slow");
Slider = indicators;
return true;
});
});
I don't want to repeat the same code for each slider.
I want it to support multiple sliders like this example; that example uses each function to get all the sliders, but it doesn't have mouseenter and mouseleave and indicators in it.

Simply use .closest() and .find() method to traverse through the current element which is hover . Then , you can use each loop to iterate through slider and get the index of current active li and depending on the position make next li active .
Demo Code :
$(function() {
$.Slider = function(total) {
//loop through all slider
$(".slider-holder").each(function() {
var index = $(this).find(".carousel-indicators .active").index() + 1; //get index of active ..class + 1
$(this).find(".carousel-indicators li").removeClass("active");
$(this).find(".image-slide li").hide();
if (index < total) {
$(this).find(".carousel-indicators li:eq(" + index + ") ").addClass("active");
$(this).find(".image-slide li:eq(" + index + ")").fadeIn("slow");
} else {
$(this).find(".carousel-indicators li:eq(0)").addClass("active");
$(this).find(".image-slide li:eq(0)").fadeIn("slow");
}
})
}
var totalLi = $(".slider-holder:eq(0) .carousel-indicators li").length;
var interval = setInterval('$.Slider(' + totalLi + ')', 5000);
$(".slider-holder").hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval('$.Slider(' + totalLi + ')', 5000);
});
$(".carousel-indicators li").hover(function() {
var indicators = $(this).index();
var selector = $(this); //current li hover...
selector.closest(".carousel-indicators").find("li").removeClass("active"); // to add clas..
selector.addClass("active");
selector.closest(".slider-holder").find(" .image-slide > li").hide();
selector.closest(".slider-holder").find(".image-slide > li:eq(" + indicators + ")").fadeIn("slow");
return true;
});
});
body {
font-family: system-ui;
background: #f06d06;
color: white;
text-align: center;
}
.slider-holder {
width: 50%;
height: 300px;
float: left;
position: relative;
margin: 0 auto;
overflow: hidden;
border-radius: 5px;
background-color: #000;
}
.slider-holder ul,
li {
padding: 0;
margin: 0;
list-style: none;
}
.slider-holder .content {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
.carousel-prev {
position: absolute;
top: 50%;
left: 30px;
margin-top: -15px;
z-index: 10;
font-size: 30px;
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
}
.carousel-next {
position: absolute;
top: 50%;
right: 30px;
margin-top: -15px;
z-index: 10;
font-size: 30px;
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
}
.carousel-indicators {
position: absolute;
right: 0;
top: 0;
left: 0;
z-index: 2;
display: flex;
justify-content: flex-start;
padding: 0;
margin-right: 1%;
margin-bottom: 10px;
margin-left: 1%;
list-style: none;
}
.carousel-indicators li {
box-sizing: content-box;
flex: 0 1 auto;
width: 30px;
height: 30px;
padding: 0;
margin-right: 3px;
margin-left: 3px;
color: #fff;
font-size: 14px;
text-align: center;
line-height: 30px;
text-indent: 0;
cursor: pointer;
background-color: rgba(15, 15, 20, 0.7);
background-clip: padding-box;
border: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
opacity: 0.9;
transition: opacity 0.6s ease;
}
.carousel-indicators li:hover,
.carousel-indicators li.active {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="slider-holder" id="slider">
<ul class="image-slide" id="image">
<li>
<div class="img-fluid" style="background-image:url(https://cdn.pixabay.com/photo/2018/03/13/22/53/puzzle-3223941__480.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2016/10/07/13/57/puzzle-1721619__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2016/10/07/14/13/puzzle-1721635__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2020/03/18/20/01/frankfurt-4945405__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2014/04/05/11/19/internet-315132__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
</ul>
<ul class="carousel-indicators" id="buton">
<li class="active"><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
</div>
<h1> Second slider </h1>
<div class="slider-holder" style="width: 40%;float:right;">
<ul class="image-slide">
<li>
<div class="img-fluid" style="background-image:url(https://cdn.pixabay.com/photo/2018/03/13/22/53/puzzle-3223941__480.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2016/10/07/13/57/puzzle-1721619__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2016/10/07/14/13/puzzle-1721635__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2020/03/18/20/01/frankfurt-4945405__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2014/04/05/11/19/internet-315132__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
</ul>
<ul class="carousel-indicators">
<li class="active"><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
</div>

<html>
<head>
<title>Your slider in a simple web page</title>
<style>
body { background-color: #fff; color: #000; padding: 0; margin: 0; }
.container { width: 900px; margin: auto; padding-top: 1em; }
.container .ism-slider { margin-left: auto; margin-right: auto; }
</style>
<link rel="stylesheet" href="ism/css/my-slider.css"/>
<script src="ism/js/ism-2.2.min.js"></script>
</head>
<body>
<div class='container'>
<div class="ism-slider" id="my-slider">
<ol>
<li>
<img src="ism/image/slides/flower-729514_1280.jpg">
<div class="ism-caption ism-caption-0">My slide caption text</div>
</li>
<li>
<img src="ism/image/slides/beautiful-701678_1280.jpg">
<div class="ism-caption ism-caption-0">My slide caption text</div>
</li>
<li>
<img src="ism/image/slides/summer-192179_1280.jpg">
<div class="ism-caption ism-caption-0">My slide caption text</div>
</li>
</ol>
</div>
<p class="ism-badge" id="my-slider-ism-badge"><a class="ism-link"
href="http://imageslidermaker.com" rel="nofollow">generated with ISM</a></p>
<section><h1>Your slider in a simple web page</h1>
<p>This is a working example of your slider.</p>
<p>To get your slider working in your web page add <em>my-slider.css</em>,
<em>ism-2.2.min.js</em> and the slide images to your project directory and paste
the markup into your HTML.</p>
<p>Please see README.txt for more detailed instructions.</p>
<p>* If your slider is not displayed correctly, please first make sure you have
fully extracted the contents of the zip file.</p>
</section></div>
</body>
</html>
You can download css / images and javascript from here
note : select slow download when you download the files for free download

here is the working demo but it still needs some update I keep working on code may this help you.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body {
font-family: system-ui;
background: #f06d06;
color: white;
text-align: center;
}
.slider-holder {
width: 50%;
height: 300px;
float: left;
position: relative;
margin: 0 auto;
overflow: hidden;
border-radius: 5px;
background-color: #000;
}
.slider-holder ul, li {
padding:0;
margin:0;
list-style:none;
}
.slider-holder .content {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
.carousel-prev {
position: absolute;
top: 50%;
left: 30px;
margin-top: -15px;
z-index: 10;
font-size: 30px;
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
}
.carousel-next {
position: absolute;
top: 50%;
right: 30px;
margin-top: -15px;
z-index: 10;
font-size: 30px;
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
}
.carousel-indicators {
position: absolute;
right: 0;
top: 0;
left: 0;
z-index: 2;
display: flex;
justify-content: flex-start;
padding: 0;
margin-right: 1%;
margin-bottom: 10px;
margin-left: 1%;
list-style: none;
}
.carousel-indicators li {
box-sizing: content-box;
flex: 0 1 auto;
width: 30px;
height: 30px;
padding: 0;
margin-right: 3px;
margin-left: 3px;
color: #fff;
font-size: 14px;
text-align: center;
line-height: 30px;
text-indent: 0;
cursor: pointer;
background-color: rgba(15, 15, 20, 0.7);
background-clip: padding-box;
border: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
opacity: 0.9;
transition: opacity 0.6s ease;
}
.carousel-indicators li:hover, .carousel-indicators li.active {
background-color: red;
}
.carousel-indicators1 {
position: absolute;
right: 0;
top: 0;
left: 0;
z-index: 2;
display: flex;
justify-content: flex-start;
padding: 0;
margin-right: 1%;
margin-bottom: 10px;
margin-left: 1%;
list-style: none;
}
.carousel-indicators1 li {
box-sizing: content-box;
flex: 0 1 auto;
width: 30px;
height: 30px;
padding: 0;
margin-right: 3px;
margin-left: 3px;
color: #fff;
font-size: 14px;
text-align: center;
line-height: 30px;
text-indent: 0;
cursor: pointer;
background-color: rgba(15, 15, 20, 0.7);
background-clip: padding-box;
border: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
opacity: 0.9;
transition: opacity 0.6s ease;
}
.carousel-indicators1 li:hover, .carousel-indicators1 li.active {
background-color: red;
}
</style>
</head>
<body>
<div class="slider-holder" id="slider">
<ul class="image-slide" id="image" >
<li>
<div class="img-fluid" style="background-image:url(https://cdn.pixabay.com/photo/2018/03/13/22/53/puzzle-3223941__480.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2016/10/07/13/57/puzzle-1721619__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2016/10/07/14/13/puzzle-1721635__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2020/03/18/20/01/frankfurt-4945405__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2014/04/05/11/19/internet-315132__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
</ul>
<ul class="carousel-indicators" id="buton">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
</div>
<h1> Second slider </h1>
<div class="slider-holder" id="slider1" style="width: 40%;float:right;">
<ul class="image-slide" id="image1" >
<li>
<div class="img-fluid" style="background-image:url(https://cdn.pixabay.com/photo/2018/03/13/22/53/puzzle-3223941__480.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2016/10/07/13/57/puzzle-1721619__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2016/10/07/14/13/puzzle-1721635__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2020/03/18/20/01/frankfurt-4945405__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2014/04/05/11/19/internet-315132__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
</ul>
<ul class="carousel-indicators1" id="buton">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
</div>
<script>
$(function(){
var Slider = 0;
$.Slider = function(total){
$(".carousel-indicators li").removeClass("active");
$("#image li").hide();
if (Slider < total -1){
Slider++;
$(".carousel-indicators li:eq("+Slider+")").addClass("active");
$("#image li:eq("+Slider+")").fadeIn("slow");
}else {
$(".carousel-indicators li:first").addClass("active");
$("#image li:first").fadeIn("slow");
Slider = 0;
}
}
var totalLi = $(".carousel-indicators li").length;
var interval = setInterval('$.Slider('+totalLi+')',5000);
$("#slider").hover(function(){
clearInterval(interval);
},function(){
interval = setInterval('$.Slider('+totalLi+')',5000);
});
$(".carousel-indicators li:first").addClass("active");
$("#image li").hide();
$("#image li:first").show();
$(".carousel-indicators li").hover(function(){
var indicators = $(this).index();
$(".carousel-indicators li").removeClass("active");
$(this).addClass("active");
$("#image li").hide();
$("#image li:eq("+indicators+")").fadeIn("slow");
Slider = indicators;
return true;
});
var Slider1 = 0;
$.Slider = function(total1){
$(".carousel-indicators1 li").removeClass("active");
$("#image1 li").hide();
if (Slider1 < total1 -1){
Slider1++;
$(".carousel-indicators1 li:eq("+Slider1+")").addClass("active");
$("#image1 li:eq("+Slider1+")").fadeIn("slow");
}else {
$(".carousel-indicators1 li:first").addClass("active");
$("#image1 li:first").fadeIn("slow");
Slider1 = 0;
}
}
var totalLi = $(".carousel-indicators1 li").length;
var interval = setInterval('$.Slider('+totalLi+')',5000);
$("#slider1").hover(function(){
clearInterval(interval);
},function(){
interval = setInterval('$.Slider('+totalLi+')',5000);
});
$(".carousel-indicators1 li:first").addClass("active");
$("#image1 li").hide();
$("#image1 li:first").show();
$(".carousel-indicators1 li").hover(function(){
var indicators1 = $(this).index();
$(".carousel-indicators1 li").removeClass("active");
$(this).addClass("active");
$("#image1 li").hide();
$("#image1 li:eq("+indicators1+")").fadeIn("slow");
Slider1 = indicators1;
return true;
});
});
</script>
</body>
</html>

wrong modal popup on click (html, css, js)

i'm having trouble figuring out how to have each example have a modal with it's own content. currently, if i click EXAMPLE2, the content from EXAMPLE1 still pops up. i also am not sure why the icons or the modals don't work on here, but i'm hoping someone can at least give pointers based on the code here. i tried changing the IDs to be unique, but i don't think i'm doing it correctly? thank you in advance
function togglePopup(){
document.getElementById("popup-1").classList.toggle("active");
}
function togglePopup(){
document.getElementById("popup-2").classList.toggle("active");
}
.icon-inner {
width: 120px;
/*height: 40vh;*/
float: left;
padding-right: 20px;
text-align: center;
/*position: relative;*/
border-radius: 50%;
position: relative;
display: inline-block;
}
/*.icon-inner span {
float: left;
padding-left: 20px;
text-align: center;
position: relative;
border-radius: 50%;
display: inline-block;
}*/
.icon-inner span:before {
margin-left: 0;
font-size: 40px;
}
.icon-inner span:hover {
margin-left: 0;
font-size: 40px;
color: #4FC1E9;
cursor: pointer;
}
.icon-inner-info span:before {
height: 15px;
width: 20px;
margin-left: 0;
padding-left: 2px;
padding-right: 5px;
font-size: 12px;
/*float: flex;*/
position: relative;
}
.icon-inner-info span:hover {
margin-left: 0;
cursor: help;
position: relative;
padding-right: 5px;
}
.icon-inner-info .tooltiptext {
visibility: hidden;
width: 400px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 110%;
}
.icon-inner-info .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.icon-inner-info:hover .tooltiptext {
visibility: visible;
}
.popup .overlay {
position:fixed;
top:0px;
left:0px;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.7);
z-index:1;
display:none;
}
.popup .content-pop {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0);
background:#fff;
width:500px;
height:250px;
z-index:2;
text-align:center;
padding:20px;
box-sizing:border-box;
font-family:"Open Sans",sans-serif;
}
.popup .close-btn {
cursor:pointer;
position:absolute;
right:20px;
top:20px;
width:30px;
height:30px;
background:#222;
color:#fff;
font-size:25px;
font-weight:600;
line-height:30px;
text-align:center;
border-radius:50%;
}
.popup.active .overlay {
display:block;
}
.popup.active .content-pop {
transition:all 300ms ease-in-out;
transform:translate(50%,-50%) scale(1);
}
#media(max-width: 750px) {
.popup.active .content-pop {
transform:translate(-10%,-50%) scale(1);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=devide-width, initialpscale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- link for back to top button -->
<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> -->
<link rel="stylesheet" href="font/flaticon.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- -->
</head>
<body>
<div class="icon-inner">
<span class="flaticon-statistics" onclick="togglePopup()"></span>
<p>TITLE1</p>
<!-- <p class="tooltiptext">Interviewing, notetaking, storytelling</p> -->
<div class="popup" id="popup-1">
<div class="overlay"></div>
<div class="content-pop">
<div class="close-btn" onclick="togglePopup()">×</div>
<h1>Title1</h1>
<p>example1</p>
</div>
</div>
</div>
<div class="icon-inner">
<span class="flaticon-statistics" onclick="togglePopup()"></span>
<p>TITLE2</p>
<!-- <p class="tooltiptext">Interviewing, notetaking, storytelling</p> -->
<div class="popup" id="popup-2">
<div class="overlay"></div>
<div class="content-pop">
<div class="close-btn" onclick="togglePopup()">×</div>
<h1>Title2</h1>
<p>example2</p>
</div>
</div>
</div>

Initially your problem was duplicate IDs. However, after changing them the problem became having the same name for two different functions.
The simplest solution is to pass to the function the ID that you want to open:
For testing purposes, I removed all of your CSS because the popup wasn't aligning correctly.
The word OPEN in my example is your open icon. It works the same, just doesn't have the icon.
function togglePopup(id){
document.getElementById(id).classList.toggle("active");
}
.popup{display:none;}
.active{display:block;}
<div class="icon-inner">
<span class="flaticon-statistics" onclick="togglePopup('popup-1')">OPEN</span>
<p>TITLE1</p>
<!-- <p class="tooltiptext">Interviewing, notetaking, storytelling</p> -->
<div class="popup" id="popup-1">
<div class="overlay"></div>
<div class="content-pop">
<div class="close-btn" onclick="togglePopup('popup-1')">×</div>
<h1>Title1</h1>
<p>example1</p>
</div>
</div>
</div>
<div class="icon-inner">
<span class="flaticon-statistics" onclick="togglePopup('popup-2')">OPEN</span>
<p>TITLE2</p>
<!-- <p class="tooltiptext">Interviewing, notetaking, storytelling</p> -->
<div class="popup" id="popup-2">
<div class="overlay"></div>
<div class="content-pop">
<div class="close-btn" onclick="togglePopup('popup-2')">×</div>
<h1>Title2</h1>
<p>example2</p>
</div>
</div>
</div>

Overlap issue in html card

In my website, there are three columns using bootstrap which hold images. Each image has button center of the image. I have added a dialog which I want to show when a user clicks on a button in an image. But the dialog window explores on the backside of columns that is images. I want to show dialog over my contents on the whole page. Please, any one help me to fix this.
Here I have attached my codes
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel = "stylesheet" type = "text/css" href = "hover.css">
<link rel = "stylesheet" type = "text/css" href = "dialogue.css">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
margin:43px;
height:70%
}
.img {
height:350px;
width:100%;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/7aam.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text">
<span class="button fa fa-play fa-2x"></span>
<div>surya, shruti hasan</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/1000il.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Karthi, Andriya</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/NK.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Arya</div>
</div>
</div>
</div>
</div>
</div>
</div> <!--row div-->
</br>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/bahu.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Prabas, Anushka</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/raam.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Jeeva, Saranya</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/sivaji.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Rajini, Shreya</div>
</div>
</div>
</div>
</div>
</div>
</div> <!--row div-->
</div> <!--container div-->
</body>
</html>
Dialogue.css
body {
font-family: Arial, sans-serif;
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
Hover.css
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
max-width: 100%;
height: auto;
}
.hvrbox img {
max-width: 100%;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 18px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
preview on Plunker

Your problem is z-index issue just increase it for .overlay like below:
.overlay {
z-index: 999;
}
Here is a working JSfiddle.

Adding multiple pages with a single HTML document

I am attempting to implement a multi-page site with a single HTML document.
I want to display 'home', 'about', 'projects', and 'contact' when a user clicks on a certain link in my sidebar.
I have the following code written:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
function diff(A, B) {
return A.filter(function (a) {
return B.indexOf(a) == -1;
});
}
function show(shown) {
var all = ['home', 'about', 'projects', 'contact'];
var hide_these = diff(all, shown);
var hidden;
document.getElementById(shown).style.display='block';
for(hidden in hide_these)
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>
<div id="home">
<div class="header">
<div class="menu-btn"></div>
<h1>
Hello, World!
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<p><br><br><br><br>Home</p>
</div>
<div class="footer">
</div>
</div>
<div id="about" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
Hello, World!
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<p><br><br><br><br>About</p>
</div>
<div class="footer">
</div>
</div>
<div id="projects" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
Hello, World!
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<p><br><br><br><br>Projects</p>
</div>
<div class="footer">
</div>
</div>
<div id="contact" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
Hello, World!
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<p><br><br><br><br>Contact</p>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
css/main.css
html,body {
padding: 0;
margin: 0;
font-family: arial;
}
html, body, #home{
width: 100%;
height:100%;
}
a {
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
#home{
min-height:100%;
position:relative;
}
body .sidebar {
display:block;
}
body.loaded .sidebar {
display:none;
}
.header {
background-color: black;
height: 80px;
width: 100%;
font-family: cursive;
text-align: center;
line-height: 2;
color: white;
display:flex; align-items: center;
z-index: 1;
position:relative;
}
.menu-btn {
background-image: url("../images/menu.png");
height: 48px;
width: 44px;
margin-left:50px;
}
.header h1 {
opacity: 0;
width:100%;
margin:0;
padding:0;
}
.sidebar {
position: absolute;
width: 200px;
top: 80px;
bottom: 0;
padding-top: 10px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE 5-7 */
-moz-opacity: 0.5; /* Netscape */
-khtml-opacity: 0.5; /* Safari 1.x */
opacity: 0.5; /* Good browsers */
}
.sidebar li {
color: black;
list-style-type: none;
margin-top: 10px;
width: 100%;
}
.sidebar li a {
text-decoration: none;
margin-left: 30px;
background-color: #9da1a4;
width: 100px;
padding: 8px;
border: 1px solid silver;
border-radius: 5px;
display: block;
}
.sidebar li a:hover {
background-color: #ebebeb;
}
.content {
margin-top: -80px; /* Header height */
background-image:url("../images/arbor.jpeg");
background-size: cover;
min-height: 100%;
min-width: 100%;
}
.content h1 {
color: black;
}
.footer {
width:100%;
height:30px;
text-align: center;
color: white;
background-color: black;
padding-top: 10px;
bottom:0;
left:0;
position:absolute;
}
.footer a img {
position: relative;
top: -5px;
}
but when I click on an option, it gives an expected problem: the 'page' that should be hidden isn't being hidden and only part of the requested page is being shown.
The jsfiddle found here shows my problem.
Why isn't this working? The javascript in the head is meant to find the difference between all the pages and the page requested, show the requested page and hide the rest.
Thanks in advance,
erip

See the fiddle
Replace
for (hidden in hide_these) {
document.getElementById(hidden).style.display = 'none';
}
with
for (hidden in hide_these) {
document.getElementById(hide_these[hidden]).style.display = 'none';
}
The problem with your code was that document.getElementById() was returning null because the values for the variable hidden was actually 0,1,2 etc.
you actually had to get the ids from the array hide_these
UPDATE
Add this in your CSS
The messing up of the background image is because you are missing the below given css. add them to solve the issue..
#about, #projects, #contact {
width: 100%;
height:100%;
}

Categories

Resources