What is making my navigation bar sticking on top while scrolling?

What is making my navigation bar sticking on top while scrolling? - javascript

I am wondering what is making my nav bar sticking to the top while scrolling since I have just basic html and css code? Last time I was not able to do so without javascript. Thanks in advance
Here is JSFiddle link: https://jsfiddle.net/tw03egpc/
body {
background-color: black;
}
#heder {
background-color: blue;
color: aqua;
}
#wrap {
z-index: 1;
margin: 0;
padding: 0;
position: fixed;
left: 0;
top: 0;
width: 100%;
}
#navWrap {
height: 30px;
opacity: 0.7;
filter: alpha(opacity=80);
}
#nav {
height: 95px;
padding: 5px;
background: #999;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav li {
float: left;
padding: 3px 8px;
background-color: grey opacity: 0.5;
margin: 0;
color: #f00;
list-style-type: none;
}
#nav li a {
color: black;
text-decoration: none;
margin: 10 px;
-webkit-transition: 0.2s 0.2s;
}
#nav li a:hover {
color: red;
}
br.clearLeft {
clear: : left;
}
#positionli {
position: absolute;
top: 70px;
left: 10pX;
}
.image {
width: 1000px;
height: 725px;
opacity: 0.3;
filter: alpha(opacity=30);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: ass 1s ease;
transition: : ass 1s ease;
}
.image:hover {
width: 1100px;
height: 800px;
opacity: 0.9;
filter: alpha(opacity=100);
}
.imageframe {
border: 3px solid #fff;
width: 1000px;
height: 725px;
margin: 0px;
overflow: hidden;
-webkit-box-shadow: 5px 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
}
#positionimage {
position: absolute;
top: 108px;
left: 2;
}
#div {
width: 580;
height: 678;
overflow: scroll;
border: 1px solid white;
padding: 25;
margin: 25px;
position: absolute;
right: 100px;
top: 84px;
left: 988px;
}
.p {
color: white;
}
#h1 {
color: white;
display: flex;
align-items: center;
justify-content: center;
position: relative;
top: 837;
}
p {
width: 700px;
color: aliceblue;
padding: 20px;
margin: 10px;
position: absolute;
top: 1100px;
}
#h11 {
color: white;
position: relative;
top: 1070;
margin: 10px;
}
<body>
<div id="wrap">
<div id="header">
<div id="navWrap">
<div id="nav">
<div id="positionli">
<ul>
<li> Demo Link 1</li>
<li> Demo Link 2</li>
<li> Demo Link 3</li>
<li> Demo Link 4</li>
</ul>
</div>
<br class="clearLeft" />
</div>
</div>
</div>
</div>
<div id="positionimage">
<div class="imageframe">
<img class="image" src="https://www.qdtricks.net/wp-content/uploads/2016/05/hd-road-wallpaper.jpg">
</div>
</div>
<div id="div">
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FInfinitiv%2Fposts%2F1250296021672270&width=500" width="500" height="475" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FInfinitiv%2Fvideos%2F1266500823385123%2F&show_text=0&width=400" width="500" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"
allowFullScreen="true"></iframe>
</div>
<!-- <h1> _____Videos_____ </h1>-->
<!-- <h1 id="h11"> About us </h1> -->
<p> Infinitiv je troclani sastav nastao u Pozarevcu krajem 2010. koji danas radi i stvara u Beogradu. 2012. su izdali svoj prvi EP pod nazivom ,,Deep inside''. Posle dosta svirki sirom Srbije i ucesca na festivalima i takmicenjima(BDFL 2013, Majska gitarijada
2012), bend krajem 2013. objavljuje svoj prvi album ''U beskraj'', sa opcijom free download-a preko Nocturne magazine-a. Nakon toga, bend zapocinje koncertnu promociju pesama sa prvog albuma, kao i izradu i promociju pesama koje ce se naci na drugom
albumu cije je objavljivanje planirano za 2017 godinu. U julu 2016. bend osvaja prvo mesto na Kursumlijskoj gitarijadi
</p>
<br/>
</body>

Your nav bar is sticking to the top because of position: fixed defined in #wrap.
position: fixed will fix the element and it's children to the specified position.
To know more about HTML positioning.
https://developer.mozilla.org/en/docs/Web/CSS/position
https://www.w3schools.com/cssref/pr_class_position.asp (Check the Play It ›› )
body {
background-color: black;
}
#heder {
background-color: blue;
color: aqua;
}
#wrap {
z-index: 1;
margin: 0;
padding: 0;
/* comment below line "position: fixed;" to get the default behaviour */
position: fixed;
left: 0;
top: 0;
width: 100%;
}
#navWrap {
height: 30px;
opacity: 0.7;
filter: alpha(opacity=80);
}
#nav {
height: 95px;
padding: 5px;
background: #999;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav li {
float: left;
padding: 3px 8px;
background-color: grey opacity: 0.5;
margin: 0;
color: #f00;
list-style-type: none;
}
#nav li a {
color: black;
text-decoration: none;
margin: 10 px;
-webkit-transition: 0.2s 0.2s;
}
#nav li a:hover {
color: red;
}
br.clearLeft {
clear: : left;
}
#positionli {
position: absolute;
top: 70px;
left: 10pX;
}
.image {
width: 1000px;
height: 725px;
opacity: 0.3;
filter: alpha(opacity=30);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: ass 1s ease;
transition: : ass 1s ease;
}
.image:hover {
width: 1100px;
height: 800px;
opacity: 0.9;
filter: alpha(opacity=100);
}
.imageframe {
border: 3px solid #fff;
width: 1000px;
height: 725px;
margin: 0px;
overflow: hidden;
-webkit-box-shadow: 5px 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
}
#positionimage {
position: absolute;
top: 108px;
left: 2;
}
#div {
width: 580;
height: 678;
overflow: scroll;
border: 1px solid white;
padding: 25;
margin: 25px;
position: absolute;
right: 100px;
top: 84px;
left: 988px;
}
.p {
color: white;
}
#h1 {
color: white;
display: flex;
align-items: center;
justify-content: center;
position: relative;
top: 837;
}
p {
width: 700px;
color: aliceblue;
padding: 20px;
margin: 10px;
position: absolute;
top: 1100px;
}
#h11 {
color: white;
position: relative;
top: 1070;
margin: 10px;
}
<body>
<div id="wrap">
<div id="header">
<div id="navWrap">
<div id="nav">
<div id="positionli">
<ul>
<li> Demo Link 1</li>
<li> Demo Link 2</li>
<li> Demo Link 3</li>
<li> Demo Link 4</li>
</ul>
</div>
<br class="clearLeft" />
</div>
</div>
</div>
</div>
<div id="positionimage">
<div class="imageframe">
<img class="image" src="https://www.qdtricks.net/wp-content/uploads/2016/05/hd-road-wallpaper.jpg">
</div>
</div>
<div id="div">
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FInfinitiv%2Fposts%2F1250296021672270&width=500" width="500" height="475" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FInfinitiv%2Fvideos%2F1266500823385123%2F&show_text=0&width=400" width="500" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"
allowFullScreen="true"></iframe>
</div>
<!-- <h1> _____Videos_____ </h1>-->
<!-- <h1 id="h11"> About us </h1> -->
<p> Infinitiv je troclani sastav nastao u Pozarevcu krajem 2010. koji danas radi i stvara u Beogradu. 2012. su izdali svoj prvi EP pod nazivom ,,Deep inside''. Posle dosta svirki sirom Srbije i ucesca na festivalima i takmicenjima(BDFL 2013, Majska gitarijada
2012), bend krajem 2013. objavljuje svoj prvi album ''U beskraj'', sa opcijom free download-a preko Nocturne magazine-a. Nakon toga, bend zapocinje koncertnu promociju pesama sa prvog albuma, kao i izradu i promociju pesama koje ce se naci na drugom
albumu cije je objavljivanje planirano za 2017 godinu. U julu 2016. bend osvaja prvo mesto na Kursumlijskoj gitarijadi
</p>
<br/>
</body>

Like #Sreenath already said: you use 'position: fixed' for your #wrap.
Try to use this:
#wrap {
z-index: 1;
margin: 0;
padding: 0;
position: relative;
left: 0;
top:0;
width: 100%;
}
Unless you want other behaviour, then you'll have to clearly mention what you want to achieve.

Related

My dropdown from nav bar goes behind the slideshow. Could someone help me figure it out?

I already tried to mess up the position of each elements(gallery container, aka slideshow and navbar), but im not getting any result. Could you help me figure out what kind of property could i use to get a different result? Thanks alot in advance for whom help me.
A screenshot of my dropdown navbar behind the slideshow
// FUNCAO RELOGIO
function time() {
today=new Date();
now=new Date();
hours=today.getHours();
minutes=today.getMinutes();
seconds=today.getSeconds();
if(hours < 10) {
hours = "0" + hours;
}
if(minutes < 10) {
minutes = "0" + minutes;
}
if(seconds < 10) {
seconds = "0" + seconds;
}
document.getElementById('tempoActual').innerHTML=now.getDate() + "/" + (now.getMonth()+1) + "/" + now.getFullYear()+" "+ hours + ":" + minutes + ":" + seconds;
setTimeout('time()',500);
}
// FUNCAO TOOGLE
function toggle(ID){
var element = document.getElementById(ID);
if(element.style.display === "none"){
element.style.display = "block";
} else {
element.style.display = "none";
}
}
// FUNCOES SLIDESHOW
var slideIndex,slides,dots,captionText;
function initGallery(){
slideIndex = 0;
slides=document.getElementsByClassName("imageHolder");
slides[slideIndex].style.opacity=1;
captionText=document.querySelector(".captionTextHolder .captionText");
captionText.innerText=slides[slideIndex].querySelector(".captionText").innerText;
//disable nextPrevBtn if slide count is one
if(slides.length<2){
var nextPrevBtns=document.querySelector(".leftArrow,.rightArrow");
nextPrevBtns.style.display="none";
for (i = 0; i < nextPrevBtn.length; i++) {
nextPrevBtn[i].style.display="none";
}
}
//add dots
dots=[];
var dotsContainer=document.getElementById("dotsContainer"),i;
for (i = 0; i < slides.length; i++) {
var dot=document.createElement("span");
dot.classList.add("dots");
dotsContainer.append(dot);
dot.setAttribute("onclick","moveSlide("+i+")");
dots.push(dot);
}
dots[slideIndex].classList.add("active");
}
initGallery();
function plusSlides(n) {
moveSlide(slideIndex+n);
}
function moveSlide(n){
var i;
var current,next;
var moveSlideAnimClass={
forCurrent:"",
forNext:""
};
var slideTextAnimClass;
if(n>slideIndex) {
if(n >= slides.length){n=0;}
moveSlideAnimClass.forCurrent="moveLeftCurrentSlide";
moveSlideAnimClass.forNext="moveLeftNextSlide";
slideTextAnimClass="slideTextFromTop";
}else if(n<slideIndex){
if(n<0){n=slides.length-1;}
moveSlideAnimClass.forCurrent="moveRightCurrentSlide";
moveSlideAnimClass.forNext="moveRightPrevSlide";
slideTextAnimClass="slideTextFromBottom";
}
if(n!=slideIndex){
next = slides[n];
current=slides[slideIndex];
for (i = 0; i < slides.length; i++) {
slides[i].className = "imageHolder";
slides[i].style.opacity=0;
dots[i].classList.remove("active");
}
current.classList.add(moveSlideAnimClass.forCurrent);
next.classList.add(moveSlideAnimClass.forNext);
dots[n].classList.add("active");
slideIndex=n;
captionText.style.display="none";
captionText.className="captionText "+slideTextAnimClass;
captionText.innerText=slides[n].querySelector(".captionText").innerText;
captionText.style.display="block";
}
}
var timer=null;
function setTimer(){
timer=setInterval(function () {
plusSlides(1) ;
},3000);
}
setTimer();
function playPauseSlides() {
var playPauseBtn=document.getElementById("playPause");
if(timer==null){
setTimer();
playPauseBtn.style.backgroundPositionY="0px"
}else{
clearInterval(timer);
timer=null;
playPauseBtn.style.backgroundPositionY="-33px"
}
}
body {
/*background-image: url(../images/ilhas.jpg);*/
background-color: #3f4043;
background-repeat: no-repeat;
background-size: 100%;
/*max-width: 100%;
height: 100%
width: 100%;
height: 100%;*/
font-family: Verdana, sans-serif;
margin:0;
}
/*TITULO*/
#barNav {
margin-top: 3%;
width:100%;
}
header{
background-image: url(../images/banner1.png);
background-repeat: no-repeat;
height: 20%;
width: 100%;
position: absolute;
z-index: auto;
text-decoration: none;
text-align: left;
}
header .logo{
float: left;
width: 3.5%;
min-width: 40px;
margin-top: 0.2%;
margin-left: 28%;
margin-right: 2%;
}
#tituloPrincipal {
color: lightgray;
text-decoration: none;
}
#tituloAzores {
padding: 30px;
text-align: center;
background: lightblue;
color: black;
font-size: 30px;
}
#tituloSantaMaria {
padding: 30px;
text-align: center;
background: rgba(223, 201, 11, 0.952);
color: black;
font-size: 30px;
}
ul {
margin-left: 1.2%;
padding: 0px;
list-style: none;
font-family: arial;
}
ul li {
float: left;
width: 11%;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
/* CORES BARRA NAV PARA CADA ILHA */
#ilhaSantaMaria {
background:#efef32;
color:#3f4043;
}
#ilhaSantaMaria a:hover {
background:#e4d637;
color: #3f4043;
}
#ilhaSaoMiguel {
background:#4cd33d;
color:#fff;
}
#ilhaSaoMiguel a:hover {
background:#3fbf34;
color:#fff;
}
#ilhaTerceira {
background:#c66ca0;
color:#fff;
}
#ilhaTerceira a:hover {
background:#ad5788;
color:#fff;
}
#ilhaGraciosa {
background:#fbfbfb;
color:#333;
}
#ilhaGraciosa a:hover {
background:#dadada;
color:#333;
}
#ilhaSaoJorge {
background:#f4949b;
color:#fff;
}
#ilhaSaoJorge a:hover {
background:#d6878d;
color:#fff;
}
#ilhaPico {
background:#7c837a;
color:#fff;
}
#ilhaPico a:hover {
background:#666c64;
color:#fff;
}
#ilhaFaial {
background:#317eb2;
color:#fff;
}
#ilhaFaial a:hover {
background:#296a95;
color:#fff;
}
#ilhaFlores {
background:#84e275;
color:#fff;
}
#ilhaFlores a:hover {
background:#74cc67;
color:#fff;
}
#ilhaCorvo {
background:#7a6148;
color:#fff;
}
#ilhaCorvo a:hover {
background:#654f39;
color:#fff;
}
/* FIM CORES BARRA NAV PARA CADA ILHA */
ul li ul li{
display: none;
}
ul li:hover ul li {
display: block;
width:100%;
}
/* SLIDESHOW */
html,body{
padding: 10px 0 0 0;
margin: 0;
}
.galleryContainer{
width: 100%;
height: 500px;
max-width: 1000px;
margin: auto;
user-select: none;
box-shadow: 0px 0px 3px 1px #00000078;
padding: 10px;
box-sizing: border-box;
}
.galleryContainer .slideShowContainer{
width: 100%;
height: 90%;
overflow: hidden;
background-color: gainsboro;
position: relative;
}
.galleryContainer .slideShowContainer #playPause{
width: 32px;
height: 32px;
position: absolute;
background-image: url("../icons/playPause.png");
background-repeat: no-repeat;
z-index: 5;
background-size: cover;
margin: 5px;
cursor: pointer;
}
.galleryContainer .slideShowContainer #playPause:hover{
opacity: .7;
}
.galleryContainer .slideShowContainer .imageHolder{
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
}
.galleryContainer .slideShowContainer .imageHolder img{
width: 100%;
height: 100%;
}
.galleryContainer .slideShowContainer .imageHolder .captionText{
display: none;
}
.galleryContainer .slideShowContainer .leftArrow,.galleryContainer .slideShowContainer .rightArrow{
width: 50px;
background: #00000036;
position: absolute;
left: 0;
z-index: 1;
transition: background 0.5s;
height: 72px;
top: 50%;
transform: translateY(-50%);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.galleryContainer .slideShowContainer .rightArrow{
left: auto;
right: 0;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.galleryContainer .slideShowContainer .leftArrow:hover,.galleryContainer .slideShowContainer .rightArrow:hover{
background: #000000a8;
cursor: pointer;
}
.galleryContainer .arrow{
display: inline-block;
border: 3px solid white;
width: 10px;
height: 10px;
border-left: none;
border-bottom: none;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.galleryContainer .arrow.arrowLeft{
transform: rotateZ(-135deg);
}
.galleryContainer .arrow.arrowRight{
transform: rotateZ(45deg);
}
.galleryContainer .slideShowContainer>.captionTextHolder {
position: absolute;
bottom: 0;
z-index: 1;
color: white;
font-family: sans-serif;
font-size: 20px;
text-align: center;
width: 100%;
background: none;
height: 50px;
line-height: 50px;
overflow: hidden;
}
.galleryContainer .slideShowContainer>.captionTextHolder>.captionText{
margin: 0;
}
.galleryContainer #dotsContainer{
width: 100%;
height: 10%;
text-align: center;
padding-top: 20px;
box-sizing: border-box;
}
.galleryContainer #dotsContainer .dots{
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
margin-left: 5px;
background-color: #bbb;
cursor: pointer;
transition:background-color 0.5s;
}
.galleryContainer #dotsContainer .dots:first-child{
margin-left: 0;
}
.galleryContainer #dotsContainer .dots:hover,.galleryContainer #dotsContainer .dots.active{
background-color: #717171;;
}
.galleryContainer .moveLeftCurrentSlide{
animation-name: moveLeftCurrent;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
.galleryContainer .moveLeftNextSlide{
animation-name: moveLeftNext;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
#keyframes moveLeftCurrent {
from {margin-left: 0;opacity: 1;}
to {margin-left: -100%;opacity: 1;}
}
#keyframes moveLeftNext {
from {margin-left: 100%;opacity: 1;}
to {margin-left: 0%;opacity: 1;}
}
.galleryContainer .moveRightCurrentSlide{
animation-name: moveRightCurrent;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
.galleryContainer .moveRightPrevSlide{
animation-name: moveRightPrev;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
#keyframes moveRightCurrent {
from {margin-left: 0;opacity: 1;}
to {margin-left: 100%;opacity: 1;}
}
#keyframes moveRightPrev {
from {margin-left: -100%;opacity: 1;}
to {margin-left: 0%;opacity: 1;}
}
.slideTextFromBottom {
animation-name: slideTextFromBottom;
animation-duration: 0.7s;
animation-timing-function: ease-out;
}
#keyframes slideTextFromBottom {
from {opacity: 0;margin-top: 100px}
to {opacity: 1;margin-top: 0px;}
}
.slideTextFromTop {
animation-name: slideTextFromTop;
animation-duration: 0.7s;
animation-timing-function: ease-out;
}
#keyframes slideTextFromTop {
from {opacity: 0;margin-top: -100px}
to {opacity: 1;margin-top: 0px;}
}
/* FIM SLIDESHOW */
/*Toogle */
#botaoUpDown {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: orange;
margin-top: 20px;
}
/*Fim Toogle */
/*Paginas com click drop*/
.h2_drop {
margin-bottom: 0;
}
.click_and_drop {
margin-top: 5%;
margin-left: 10%;
margin-right: 10%;
}
.click_and_drop li {
list-style: none;
font-family: 'Courier New', Courier, monospace;
font-size: 5vmin;
border-top: solid rgb(189, 189, 189);
margin-left: -4.1%;
display: block;
}
.elementoLista {
padding: 1%;
overflow: auto;
display: block;
position: relative;
}
.title {
float: left;
}
.seta {
float: right;
margin-right: 0%;
}
.pEscondido {
text-align: left;
float: left;
margin-left: 1%;
width: 50%
}
.mapaEscondido {
float: right;
width: 400px;
height: 350px;
border: 0;
}
.esconde {
font-size: 3vmin;
display: none;
overflow: auto;
}
h5 {
font-size: 4vmin;
font-family: 'Courier New', Courier, monospace;
margin-bottom: -3%;
margin-top: 0%;
}
.estrelas {
margin-left: 5%;
}
/*FIM Paginas click drop*/
/*FOOTER*/
footer {
background: rgba(255, 255, 255, 0.74);
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
width: 100%;
height: 60px;
bottom: 0;
position: relative;
clear: both;
}
/*FIM FOOTER*/
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="João Lopes, Wilson Lima, Cristina Santos">
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" lang="pt">
<meta name="viewport" content="width=device-width" initial-scale="1.0">
<meta name="description" content="O que conhecer e fazer no arquipelago dos Açores">
<meta name="keywords" content="Açores, Gastronomia, Transportes..."> <!--TODO-->
<link rel="stylesheet" type="text/css" href="CSS/styles.css">
<link rel="shortcut icon" type="image/jpeg" href="icons/azoresIcon.jpeg"/>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<title>Ilha de Santa Maria</title>
</head>
<body onload="time()">
<main id="topo">
<header>
<img src="icons/azoresIcon.png" class="logo"/><h1 id="tituloPrincipal">Santa Maria</h1>
</header>
<br><br><br><br><br>
<!--BARRA NAVEGAÇÃO-->
<div id="barNav">
<ul>
<li id="ilhaSantaMaria">Santa Maria
<ul>
<li>Alojamento</li>
<li>Gastronomia</li>
<li>Transportes</li>
<li>Animação</li>
</ul>
</li>
<li id="ilhaSaoMiguel">São Miguel
<ul>
<li>Alojamento</li>
<li>Gastronomia</li>
<li>Transportes</li>
<li>Animação</li>
</ul>
</li>
<li id="ilhaTerceira">Terceira
<ul>
<li>Alojamento</li>
<li>Gastronomia</li>
<li>Transportes</li>
<li>Animação</li>
</ul>
</li>
<li id="ilhaGraciosa">Graciosa
<ul>
<li>Alojamento</li>
<li>Gastronomia</li>
<li>Transportes</li>
<li>Animação</li>
</ul>
</li>
<li id="ilhaSaoJorge">São Jorge
<ul>
<li>Alojamento</li>
<li>Gastronomia</li>
<li>Transportes</li>
<li>Animação</li>
</ul>
</li>
<li id="ilhaPico">Pico
<ul>
<li>Alojamento</li>
<li>Gastronomia</li>
<li>Transportes</li>
<li>Animação</li>
</ul>
</li>
<li id="ilhaFaial">Faial
<ul>
<li>Alojamento</li>
<li>Gastronomia</li>
<li>Transportes</li>
<li>Animação</li>
</ul>
</li>
<li id="ilhaFlores">Flores
<ul>
<li>Alojamento</li>
<li>Gastronomia</li>
<li>Transportes</li>
<li>Animação</li>
</ul>
</li>
<li id="ilhaCorvo">Corvo
<ul>
<li>Alojamento</li>
<li>Gastronomia</li>
<li>Transportes</li>
<li>Animação</li>
</ul>
</ul>
</div>
<!--FIM BARRA NAVEGAÇÃO-->
<!--SLIDESHOW-->
<div class="galleryContainer">
<div class="slideShowContainer">
<div id="playPause" onclick="playPauseSlides()"></div>
<div onclick="plusSlides(-1)" class="nextPrevBtn leftArrow"><span class="arrow arrowLeft"></span></div>
<div onclick="plusSlides(1)" class="nextPrevBtn rightArrow"><span class="arrow arrowRight"></span></div>
<div class="captionTextHolder"><p class="captionText slideTextFromTop"></p></div>
<div class="imageHolder">
<img src="images/smaria1.jpg">1366X768
<p class="captionText"></p>
</div>
<div class="imageHolder">
<img src="images/smaria2.jpg">
<p class="captionText"></p>
</div>
<div class="imageHolder">
<img src="images/smaria3.jpg">
<p class="captionText"></p>
</div>
</div>
<div id="dotsContainer"></div>
</div>
<!--FIM SLIDESHOW-->
<!--TOOGLE-->
<button id="botaoUpDown" onclick="toggle('alojamento')">ALOJAMENTO</button>
<div id="alojamento">
ALOJAMENTO
</div>
<br>
<button id="botaoUpDown" onclick="toggle('gastronomia')">GASTRONOMIA</button id="botaoUpDown">
<div id="gastronomia">
GASTRONOMIA
</div>
<br>
<button id="botaoUpDown" onclick="toggle('transporte')">TRASNPORTE</button id="botaoUpDown">
<div id="transporte">
TRASNPORTE
</div>
<br>
<button id="botaoUpDown" onclick="toggle('animacao')">ANIMAÇÃO</button>
<div id="animacao">
ANIMAÇÃO
</div>
<br>
<!--
<button id="botaoUpDown" onclick="toogle()">ALOJAMENTO</button>
<div class="gaveta">
Pousada de Viseu
<br>
Rua do Hospital
<br>
3500-161 Viseu
<br>
Portugal
<br>
<br>
Email: guest#pousadas.pt
<br>
Telefone:(+351) 232 457 320
<br>
Fax: (+351) 232 421 128
<br>
<br>
Website: www.pousadadeviseu.com
</p>
</div>
<button id="botaoUpDown" onclick="toogle()">GASTRONOMIA</button>
<div class="gaveta">
Pousada de Viseu
<br>
Rua do Hospital
<br>
3500-161 Viseu
<br>
Portugal
<br>
<br>
Email: guest#pousadas.pt
<br>
Telefone:(+351) 232 457 320
<br>
Fax: (+351) 232 421 128
<br>
<br>
Website: www.pousadadeviseu.com
</div>
-->
<footer>
<br><br>
contactos
<a id="tempoActual" style="float: right; font-size: 1.6vmin; line-height: 0; margin-top: -1%; margin-right: 2%;"></a>
</footer>
</main>
<script type="text/javascript" src="js/javascript.js"></script>
</body>
</html>
.

add position: relative; and z-index: 11 to ul.
ul {
margin-left: 1.2%;
padding: 0px;
list-style: none;
font-family: arial;
position: relative;
z-index: 11;
}
I hope this will works for you.
Thank you...

Add this code ul li{position:relative; z-index: 1}

Clicking on an element is triggering all the same class instead of the one clicked on

I am creating a sort-of popup menu that is specific to each .smallCatalogBlock div. The circle you see under the title is the trigger. The issue I am having is that if you click on the blue circle, both popup menus fadeIn, when it should only be that specific one.
The same applies to the popup title. It uses only the first .smallCatalogBlock information, opposed to the one clicked on.
Does anyone know how I can leave this in the dynamic setup I am going for, while populating the specific information for the one clicked on?
var catalogName = $('.smallCatalogBlock').data('fill-specs');
//Filling Circle
$('.catalogSmallCircle').html(
'<div class="catalogSmallCircleIn" data-catalog-name=' + catalogName + '><div class="total-center"><div class="circlePlus"></div></div></div><div class="catalogCircleExpand"><div class="catalogExpandClose">x</div><div class="total-center expandText"><span class="catalogName pdfSubHeader"></span><p class="dGw circleExpandText"></p><button class="catalogDownload downloadButton" name="Profile_Catalog" data-catalog-now="Profile Small Catalog Button" data-catalog-view-name="Profile Catalog">View</button><button class="catalogDownload requestButton" data-catalog-name="Profile Catalog">Request</button></div></div>'
)
//Circle Expand
$('.catalogSmallCircleIn').on('click', function() {
// old $('.catalogSmallCircle').addClass('rectangle').find('.catalogSmallCircleIn').hide();
$(this).closest('.catalogSmallCircle').addClass('rectangle').find('.catalogSmallCircleIn').hide();
// old $('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
//$(this).closest('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
$('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
//Getting Catalog Name
let catalogChoice = $(this).data('catalog-name');
$('.catalogName').html(catalogChoice);
event.stopPropagation();
});
//Close Circle
$('.catalogExpandClose').on('click', function(event) {
$('.catalogSmallCircle').removeClass('rectangle').find('.catalogSmallCircleIn').fadeIn();
$('.catalogCircleExpand').hide().removeClass('rectangle');
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 25%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.smallCatalogButtonWrap {
margin-top: 15px;
width: 100%;
position: relative;
}
.catalogSmallCircle {
background: #225DB8;
width: 70px;
height: 70px;
position: absolute;
margin: 10px auto;
left: 90%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
border-radius: 100%;
box-shadow: 0 0 20px rgba(0, 0, 0, .9);
border: 2px solid #FFF;
webkit-transition: all 1s;
transition: all 1s;
cursor: pointer;
}
.catalogSmallCircle.rectangle {
border-radius: 0;
border: 2px solid #094765;
background: linear-gradient(to bottom right, #225DB8, #4174C2);
width: 400px;
min-height: 200px;
webkit-transition: all 1s;
transition: all 1s;
transform: translate(-45%, -45%);
-webkit-transform: translate(-45%, -45%);
z-index: 1;
cursor: auto;
}
.catalogSmallCircleIn {
width: 100%;
height: 100%;
position: relative;
}
.circlePlus {
background-size: 30px 30px;
width: 30px;
height: 30px;
display: block;
margin: 0 auto;
z-index: 1;
}
.catalogCircleExpand {
height: 0;
display: none;
opacity: 0;
webkit-transition: all .5s;
transition: all .5s;
}
.catalogCircleExpand.rectangle {
opacity: 1;
height: auto;
webkit-transition: all .5s;
transition: all .5s;
transition-delay: .4s;
-webkit-transition-delay: .4s;
padding: 10px 0;
}
.expandText .catalogDownload {
font-size: 1.1rem;
padding: .7em 1.1em;
}
.expandText .pdfSubHeader {
font-size: 1.1rem;
}
.catalogExpandClose {
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
<div class="smallCatalogBlock" data-fill-specs="Catalog">
<span class="smallCatalogTitle">Catalog</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
<div class="smallCatalogBlock" data-fill-specs="Technology">
<span class="smallCatalogTitle">Technology</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
</div>

You have to loop over the smallCatalogBlocks and build them individually, otherwise they will all have the same catalog name. And then in your event handlers, you have to make all your selectors be contextual lookups.
I ran the modified code, and it appears to be building the circles correctly, however for some reason the text is not showing up on them, even though the text is there if you inspect the element. Didn't figure that part out, but this should show you at least how to do the contextual logic and the looping to build the elements.
$('.smallCatalogBlock').each(function(index, catalogBlock){
var catalogName = $(catalogBlock).data('fill-specs');
console.log(catalogName);
//Filling Circle
$('.catalogSmallCircle', catalogBlock).html(
'<div class="catalogSmallCircleIn" data-catalog-name='+ catalogName +'><div class="total-center"><div class="circlePlus"></div></div></div><div class="catalogCircleExpand"><div class="catalogExpandClose">x</div><div class="total-center expandText"><span class="catalogName pdfSubHeader"></span><p class="dGw circleExpandText"></p><button class="catalogDownload downloadButton" name="Profile_Catalog" data-catalog-now="Profile Small Catalog Button" data-catalog-view-name="Profile Catalog">View</button><button class="catalogDownload requestButton" data-catalog-name="Profile Catalog">Request</button></div></div>'
)
});
//Circle Expand
$('.catalogSmallCircleIn').on('click', function(event) {
var $smallCircle = $(this).closest('.catalogSmallCircle');
$smallCircle
.addClass('rectangle')
.find('.catalogSmallCircleIn')
.hide();
$smallCircle
.find('.catalogCircleExpand')
.fadeIn(100)
.addClass('rectangle');
//Getting Catalog Name
let catalogChoice = $(this).data('catalog-name');
console.log(catalogChoice);
$smallCircle.find('.catalogName').html(catalogChoice);
event.stopPropagation();
});
//Close Circle
$('.catalogExpandClose').on('click', function(event) {
var $smallCircle = $(this).closest('.catalogSmallCircle');
$smallCircle
.removeClass('rectangle')
.find('.catalogSmallCircleIn')
.fadeIn();
$smallCircle
.find('.catalogCircleExpand')
.hide()
.removeClass('rectangle');
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 25%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.smallCatalogButtonWrap {
margin-top: 15px;
width: 100%;
position: relative;
}
.catalogSmallCircle {
background: #225DB8;
width: 70px;
height: 70px;
position: absolute;
margin: 10px auto;
left: 90%;
-webkit-transform: translateX(-50%);transform: translateX(-50%);
border-radius: 100%;
box-shadow: 0 0 20px rgba(0,0,0,.9);
border: 2px solid #FFF;
webkit-transition: all 1s;transition: all 1s;
cursor: pointer;
}
.catalogSmallCircle.rectangle {
border-radius: 0;
border: 2px solid #094765;
background: linear-gradient(to bottom right,#225DB8,#4174C2);
width: 400px;
min-height: 200px;
webkit-transition: all 1s; transition: all 1s;transform: translate(-45%, -45%);-webkit-transform: translate(-45%, -45%);
z-index: 1;
cursor: auto;
}
.catalogSmallCircleIn {
width: 100%;
height: 100%;
position: relative;
}
.circlePlus {
background-size: 30px 30px;
width: 30px;
height: 30px;
display: block;
margin: 0 auto;
z-index: 1;
}
.catalogCircleExpand {
height: 0;
display: none;
opacity: 0;
webkit-transition: all .5s;
transition: all .5s;
}
.catalogCircleExpand.rectangle {
opacity: 1;
height: auto;
webkit-transition: all .5s;
transition: all .5s;
transition-delay: .4s;
-webkit-transition-delay: .4s;
padding: 10px 0;
}
.expandText .catalogDownload {
font-size: 1.1rem;
padding: .7em 1.1em;
}
.expandText .pdfSubHeader {
font-size: 1.1rem;
}
.catalogExpandClose {
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
<div class="smallCatalogBlock" data-fill-specs="Catalog">
<span class="smallCatalogTitle">Catalog</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div><div class="smallCatalogBlock" data-fill-specs="Technology">
<span class="smallCatalogTitle">Technology</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
</div>

Velocity.js - triggering animations

I'm currently trying to get rid of a bunch of CSS animations and replace with the Velocity.js (along the way building in new animations).
At present I have a grid Item:
<div class="video-thumbnail">
<img src="http://placehold.it/1280x720" class="imgspacer" alt="{$info['title']}" />
<div class="overlay">
<a href="http://bbc.co.uk" class="thumbnail-link">
<div class="title">
<div class="title-display">
<h5 class="SlideIn">Title One</h5>
<h6 class="SlideIn">Title Two</h6>
</div>
</div>
</a>
</div>
</div>
This is controlled through CSS to fade in the .overlay element. What I then want to do is for the h5 & h6 classes to slide up in.
I've written the following code:
$('.overlay').hover(function(){
$(this).find('.SlideIn').velocity("transition.slideUpIn", {stagger: 100, duration: 500});
});
But nothing seems to be happening. I'm quite new to Javascript so I'm presuming I've made a silly mistake somewhere along the line but can't work out what it is.
I've included a full snippet below and it can also be found here
$('.overlay').hover(function(){
$(this).find('.SlideIn').velocity("transition.slideUpIn", {stagger: 100, duration: 500});
});
#thumbnail-array {
width: 100%;
}
.gutter-sizer {
width: 0.03%;
}
.video-thumbnail {
position: relative;
background-color: #777;
overflow: hidden;
line-height: 0px;
margin: 0px;
}
.video {
position: absolute;
margin-top: none;
left: 0;
right: 0;
bottom: 0;
padding: 0;
width: 100%;
height: 100%;
z-index: 100;
display: none;
}
.overlay {
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
z-index: 50;
}
.thumbnail-link {
display: table;
width: 100%;
height: 100%; /*important, forces to 100% height of parent*/
opacity:0;
-webkit-transition: opacity .5s ease;
-moz-transition: opacity .25s ease;
background: rgba(0, 0, 0, 0.5);
color: #FFFFFF;
text-decoration: none;
}
.title {
display: table-cell;
vertical-align: middle;
text-align: center;
text-decoration: none;
color: #FFFFFF;
font-family: helvetica;
width: 100%;
line-height: 0px;
}
.title-display {
display: block;
width: 100%;
}
.video-thumbnail:hover .thumbnail-link {
text-decoration: none;
opacity:1;
}
.imgspacer {
width: 100%;
max-width:100%;
}
.picturehelper {
display: inline-block;
}
.video-thumbnail:hover .video {
display: inline;
}
h5 {
display: inline-block;
width: 100%;
font-size: 2em;
margin: 0px;
padding: 0px;
line-height: normal;
}
h6 {
display: inline-block;
width: 100%;
font-size: 0.75em;
letter-spacing: 0.3em;
padding: 0px;
margin: 0px;
font-weight: 100;
line-height: normal;
}
<script src="https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.min.js"></script>
<script src="https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.ui.js"></script>
<script src="https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video-thumbnail">
<img src="http://placehold.it/1280x720" class="imgspacer" alt="{$info['title']}" />
<div class="overlay">
<a href="http://bbc.co.uk" class="thumbnail-link">
<div class="title">
<div class="title-display">
<h5 class="SlideIn">Title One</h5>
<h6 class="SlideIn">Title Two</h6>
</div>
</div>
</a>
</div>
</div>

As mentioned by #AldoRomo88 and #jmcgriz there was an issue with the load order of the scripts on the page.
I fixed the issue by simply loading query first up (and hosting the scripts on my own server!)

Toggle Class while removing class from siblings

I have a map where I am toggling a class when you click on a dot/location that pops up a tooltip. The issue I'm running into is that when I click on another dot the other siblings tooltips are not going away. I tried to solve this by removing the class of the siblings on click, but when I do this the toggle stops working and I cannot click the dot again to get rid of the active tooltip.
I need the toggle on the currently active tooltip to still work but I also need the sibling tooltips to disappear as well.
I hope I explained that right. Here is a codepen: http://codepen.io/anon/pen/BzQrLV
$('.dot').click(function() {
$('div.toggle-active').removeClass('toggle-active');
$(this).next().toggleClass('toggle-active');
});
#map {
position: relative;
width: 100%;
max-width: 580px;
}
#map img {
max-width: 100%;
}
/** DOTS **/
.dot {
background-color: #fff;
border: 1px solid #fff;
border-radius: 50%;
cursor: pointer;
display: inline-block;
height: 10px;
position: absolute;
width: 10px;
}
.dot:hover {
background-color: #00A24B;
}
.dot-oregon-greshman {
top: 15%;
left: 11%;
}
.dot-oregon-oregon-city {
top: 16.5%;
left: 11%;
}
/** TOOLTIPS **/
.tooltip::before {
content: "";
height: 0;
width: 0;
border-style: solid;
border-width: 12.5px 21.7px 12.5px 0;
border-color: transparent #01872B transparent transparent;
position: absolute;
top: 50%;
left: -6%;
transform: translateY(-50%);
}
.tooltip {
opacity: 0;
background-color: #01872B;
color: #fff;
padding: 10px 10px 10px 20px;
font-size: 12px;
width: 186px;
position: absolute;
line-height: 14px;
transition: all 300ms ease-in-out;
}
.tooltip.toggle-active {
opacity: 1;
}
.tooltip p {
margin: 3px 0;
}
.tooltip a {
color: #fff;
}
.tooltip a:hover {
color: #c3ecff;
text-decoration: none;
}
.tooltip strong {
color: #fff;
font-size: 14px;
}
.tooltip-oregon-greshman {
top: 10%;
left: 16%;
}
.tooltip-oregon-oregon-city {
top: 11.5%;
left: 17%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="map-section">
<div class="map-container">
<div id="map">
<img src="http://openpathinvestments.com/wp-content/themes/boilerplate/images/map-blue.png" alt="">
<div class="locations">
<div class="dot dot-oregon-greshman"></div>
<div class="tooltip tooltip-oregon-greshman">
<strong>Stark Street Crossings</strong>
<p>Greshman, Oregon 97030</p>
<p>Property Profile | Website
</p>
</div>
<div class="dot dot-oregon-oregon-city"></div>
<div class="tooltip tooltip-oregon-oregon-city">
<strong>The Preserve</strong>
<p>Oregon City, Oregon 97045</p>
<p>Property Profile | Website
</p>
</div>
</div>
</div>
</div>
</div>

Add .not($(this).next()) to your removeClass statement so you don't remove the active class from all the dots, just the dots not being clicked on.
$('.dot').click(function() {
$('div.toggle-active').not($(this).next()).removeClass('toggle-active');
$(this).next().toggleClass('toggle-active');
});
#map {
position: relative;
width: 100%;
max-width: 580px;
}
#map img {
max-width: 100%;
}
/** DOTS **/
.dot {
background-color: #fff;
border: 1px solid #fff;
border-radius: 50%;
cursor: pointer;
display: inline-block;
height: 10px;
position: absolute;
width: 10px;
}
.dot:hover {
background-color: #00A24B;
}
.dot-oregon-greshman {
top: 15%;
left: 11%;
}
.dot-oregon-oregon-city {
top: 16.5%;
left: 11%;
}
/** TOOLTIPS **/
.tooltip::before {
content: "";
height: 0;
width: 0;
border-style: solid;
border-width: 12.5px 21.7px 12.5px 0;
border-color: transparent #01872B transparent transparent;
position: absolute;
top: 50%;
left: -6%;
transform: translateY(-50%);
}
.tooltip {
opacity: 0;
background-color: #01872B;
color: #fff;
padding: 10px 10px 10px 20px;
font-size: 12px;
width: 186px;
position: absolute;
line-height: 14px;
transition: all 300ms ease-in-out;
}
.tooltip.toggle-active {
opacity: 1;
}
.tooltip p {
margin: 3px 0;
}
.tooltip a {
color: #fff;
}
.tooltip a:hover {
color: #c3ecff;
text-decoration: none;
}
.tooltip strong {
color: #fff;
font-size: 14px;
}
.tooltip-oregon-greshman {
top: 10%;
left: 16%;
}
.tooltip-oregon-oregon-city {
top: 11.5%;
left: 17%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
HTML
<div class="map-section">
<div class="map-container">
<div id="map">
<img src="http://openpathinvestments.com/wp-content/themes/boilerplate/images/map-blue.png" alt="">
<div class="locations">
<div class="dot dot-oregon-greshman"></div>
<div class="tooltip tooltip-oregon-greshman">
<strong>Stark Street Crossings</strong>
<p>Greshman, Oregon 97030</p>
<p>Property Profile | Website
</p>
</div>
<div class="dot dot-oregon-oregon-city"></div>
<div class="tooltip tooltip-oregon-oregon-city">
<strong>The Preserve</strong>
<p>Oregon City, Oregon 97045</p>
<p>Property Profile | Website
</p>
</div>
</div>
</div>
</div>
</div>

Updated to check whether the tooltip was already being displayed before displaying it.
$('.dot').click(function() {
var displayed = $(this).next().attr('class').match('toggle-active');
$('div.toggle-active').removeClass('toggle-active');
if(!displayed){
$(this).next().toggleClass('toggle-active');
}
});

Function toggle won't show div's inside the "toggled" div

I'm "required" to make a webpage:
In a page I want a side menu and when clicking each option it shows in the right some content, but without "loading" another page (this would be the easier way, just making a page for each "option" and then just clicking in each button would lead me to that page with the content in the right).
I found this:
<script type="text/javascript">
function toggle(IDS) {
var sel = document.getElementById('pg').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
if (sel[i].id != IDS) { sel[i].style.display = 'none'; }
}
var status = document.getElementById(IDS).style.display;
if (status == 'block') { document.getElementById(IDS).style.display = 'none'; }
else { document.getElementById(IDS).style.display = 'block'; }
return false;
}
</script>
I just added it to the side menu and when each part is clicked it shows what I want :
<div id="sidebar2">
<div>
<h2 class="title">TEXT</h2>
<ul>
<li>TEXT</li>
<li>TEXT2</li>
</ul>
</div>
<div>
And in the content of each "option":
<div id="pg">
<div id="pg0" class="pg">
<h2 class="title">TEXT</h2>
<p><img src="images/test.png" alt=""/></p>
</div>
<div id="pg1" class="pg">
<h2 class="title">TEXT2</h2>
<p><img src="images/test2.png" alt=""/>HERE GOES THE DIV POPUP BUTTON</p>
</div>
I want a button to open a pop up image. It appears toggle() sets everything inside each div to display:none; and when I click only changes to block the outer part. But if I have a div inside, it remains hidden.
I've tried these two codes for the popup:
<div id="test">
<a href="#" class="JesterBox">
<div id="image1"><img src="bg.jpg"></div>
</a>
Image 1
With the corresponding JesterBox definition in CSS:
.JesterBox div {
visibility: hidden;
position: fixed;
top: 5%;
right: 5%;
bottom: 5%;
left: 5%;
z-index: 75;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.JesterBox div:before {
content: '';
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 74;
background-color: rgba(0, 0, 0, 0);
transition: all 0.5s ease-out;
}
.JesterBox div img {
position: relative;
z-index: 77;
max-width: 100%;
max-height: 100%;
margin-left: -9999px;
opacity: 0;
transition-property: all, opacity;
transition-duration: 0.5s, 0.2s;
transition-timing-function: ease-in-out, ease-out;
}
.JesterBox div:target { visibility: visible; }
.JesterBox div:target:before { background-color: rgba(0, 0, 0, 0.7); }
.JesterBox div:target img {
margin-left: 0px;
opacity: 1;
}
And this other:
<div class="box">
<a class="button" href="#popup1">TEXT</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">
TEXT TEXT
</div>
</div>
</div>
With its corresponding CSS:
.box {
width: 20%;
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: absolute;
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%;
}
}
I can't make it work. How could I make, for example, the 2nd option (the div class="box") work inside the div?
<div id="pg1" class="pg">
<h2 class="title">TEXT2</h2>
<p>
<div class="box">
<a class="button" href="#popup1">TEXT</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">
TEXT TEXT
</div>
</div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

What is making my navigation bar sticking on top while scrolling? - javascript

Like #Sreenath already said: you use 'position: fixed' for your #wrap. Try to use this: #wrap { z-index: 1; margin: 0; padding: 0; position: relative; left: 0; top:0; width: 100%; } Unless you want other behaviour, then you'll have to clearly mention what you want to achieve.

Related

My dropdown from nav bar goes behind the slideshow. Could someone help me figure it out?

Clicking on an element is triggering all the same class instead of the one clicked on

Velocity.js - triggering animations

Toggle Class while removing class from siblings

Function toggle won't show div's inside the "toggled" div

Categories

Resources