For some reason the arrow buttons (which scroll the body element left and right are not working at all in IE(8 or 11 and possibly other versions) and some of the links on the left (like Company) are not working sometimes (not loading the background images)
http://henrybuiltfurniture.com/
How can I fix these issues?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<style>
.limiter * {
transition:all 1s ease-in-out;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
body{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
html, body{
height:100%;
}
body{
margin:0;
padding:0;
overflow:hidden;
background-color:black;
}
img{
border:0;
}
.wide{
width:5000px;
height:100%;
overflow: hidden;
z-index: 1;
display:none;
}
.wide div.limiter{
overflow: hidden;
position: absolute;
}
.wide .limiter .cont{
position: relative;
height: 100%;
width: 100%;
}
.wide .limiter .data{
position: absolute;
top: 0;
left: 0;
width: 60%;
height: 60%;
padding: 110px 25% 20% 20%;
font-size: 35px;
color: white;
}
.wide .limiter .data div{
width:100%;
height:100%;
text-align: left;
}
.wide .limiter .data div a{
text-decoration: none;
color: white;
}
.wide .limiter .data div a:hover{
color:#666;
}
body {
width: 8000px;
}
.menu{
width: 150px;
position: fixed;
left: -150px;
height: 100%;
z-index: 5;
background-color: rgba(0, 0, 0, .5);
}
.menu .logo{
width:100px;
height:100px;
}
.menu ul{
list-style: none;
}
.menu li{
list-style: none;
}
.menu li a{
color:#FFF;
text-decoration: none;
font-size: 14px;
}
.menu li a.active{
color:#CCC;
}
.menu li a:hover{
color:#CFCFCF;
}
.loading{
width: 100%;
height: 100%;
z-index: 0;
background-color: black;
position: absolute;
top: 0;
left: 0;
display:none;
}
.loading .wrap{
width: 100%;
height: 100%;
position: relative;
}
.loading .center{
margin: auto;
position: absolute;
top: 50%;
width: 800px;
left: 50%;
margin-top: -100px;
margin-left: -400px;
height: 200px;
text-align: center;
color:#999;
}
.loading .navhint{
font-size: 12px;
margin-top:0px;
margin-bottom: 100px;
color:#999;
position: relative;
top:-30px;
}
.loading .scroll{
font-size: 80px;
}
.loading .loadhint{
font-size: 20px;
}
.loadingBar{
position: absolute;
bottom: 0;
height: 15px;
width: 0px;
background-color: #999;
}
.caption{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 60px;
background-color: rgba(0, 0, 0, .3);
display: none;
}
.caption .logo{
float:left;
height:40px;
width:150px;
text-align: left;
position: relative;
top:0px;
}
.caption .logo img{
border:0;
width:150px;
height:60px;
}
.slidehint{
width:100%;
height:10px;
}
.text{
float:left;
width:60%;
height:40px;
font-size: 11px;
margin-left:30px;
position: relative;
}
.textbottom{
position: absolute;
width:100%;
bottom: 3;
color: #e0e0e0;
font-size: 11px;
}
.buttons{
width:120px;
float:right;
height:40px;
position:relative;
top:-3px;
margin-right: 30px;
}
.buttons .left{
float:left;
display: none;
}
.buttons .left:hover{
cursor: pointer;
opacity: 0.7;
}
.buttons .right{
display:none; float:right;
}
.buttons .right:hover{
cursor: pointer;
opacity: 0.7;
}
.menubar{
display: none;
position: fixed;
left: 60px;
top: 50%;
margin-top: -72px;
z-index: 3;
}
.menubar img{
height: 32px;
width: 32px;
}
.br{
height: 15px;
width: 20px;
}
.data div{
font-size: 24px;
}
</style>
<script src="js/jquery.min.js"></script>
<script src="js/mousewheel/jquery.mousewheel.js"></script>
<script src="js/jquery.easing.js"></script>
<script>
var ww;
var wh;
var oldviewing = 0;
var viewing = 1;
var scrolling = 0;
var scrolldir = 0;
var blockdelta = false;
var menu = 0;
var images = 1;
var loaded = false;
var defCaption;
var curCaption;
var captions = [];
var already_visited = false;
window.onresize = function(){
ww = $(window).width()+2;
wh = $(window).height();
resizeImages();
}
$(document).ready(function(){
document.ontouchmove = function(e){
e.preventDefault();
}
$(".menu").css({left:"0px"});
$(".menubar").css({visibility:"none"});
if(!(/Mobile/i.test(navigator.userAgent) && !/ipad/i.test(navigator.userAgent) )){
$(".mobile_css").html("");
}
//window properties
ww = $(window).width()+2;
wh = $(window).height();
defCaption = "";
curCaption = defCaption;
captions[1] = "";
if(captions[1]){
curCaption = captions[1];
$(".textbottom").html(captions[1]);
}else{
curCaption = defCaption;
}
setTimeout(function(){
$(".loading").fadeIn(500);
}, 500)
setInterval(function(){
if(scrolling && scrolldir != 2 && scrolldir != 0){
if(scrolldir == -1){
prev();
}else if(scrolldir == 1){
next();
}
scrolling = 0;
}
if(loaded == false && $("body").scrollLeft() != 0){
$("body").scrollLeft(0);
}
}, .05);
$("body").mousewheel(function(event, delta, deltaX, deltaY) {
if(scrolldir == 2){
blockdelta = true;
}else if(blockdelta == true){
if(Math.abs(deltaX) <= 10 && Math.abs(deltaY) <= 1){
blockdelta = false;
}
}
if(blockdelta == true){
deltaX = 0;
deltaY = 0;
}
if(Math.abs(deltaX) > 10){
if(scrolldir != 2){
scrolling = 1;
scrolldir = 1;
if(event.deltaX < 0){
scrolldir = -1
}
}
}else if(Math.abs(deltaY) > 1){
if(scrolldir != 2){
scrolling = 1;
scrolldir = 1;
if(event.deltaY < 0){
scrolldir = -1
}
}
}
event.preventDefault();
});
$(".caption .buttons .right").click(function(){
next();
});
$(".caption .buttons .left").click(function(){
prev();
});
});
function changeCaption(i){
if(captions[i]){
$(".textbottom").fadeOut(300, function(){
$(".textbottom").html(captions[i]);
$(".textbottom").fadeIn(300);
});
}else if(curCaption != defCaption){
$(".textbottom").fadeOut(300, function(){
$(".textbottom").html(defCaption);
$(".textbottom").fadeIn(300);
});
}
}
function resizeImages(){
$('body')[0].scrollLeft = ww*(viewing-1);
for(i=1; i<=images; i++){
//$("html")[0].scrollLeft(viewing*ww);
//picture properties
pw = $("#img"+i)[0].width;
ph = $("#img"+i)[0].height;
//size calculation
ph = (ww/pw)*ph;
pw = ww;
if(ph < wh){
pw = (wh/ph)*pw;
ph = wh;
}
//image resizage
$("#img"+i).css({width:pw, height:ph, position:"absolute", top:Math.round(-1*(wh - (wh/ph)*wh)/2), left:Math.round(-1*(ww - (ww/pw)*ww)/2)});
$("#limiter"+i).css({width:ww, height:wh, position:"absolute", left:(i-1)*ww});
$(".wide").css({width:images*ww, height:wh});
}
}
var total = 0;
function bump(){
$('body')[0].scrollLeft = 0;
goal = images;
total++;
if(already_visited){
$(".load").html("( loading "+total+" of "+images+" images ... )");
resizeImages();
$(".center").hide()
$(".wide").show();
$(".caption").show();
$(".menubar").show();
loaded = true;
}else{
$(".load").html("( loading "+total+" of "+images+" images ... )");
$(".loadingBar").animate({width: total*$(window).width() / images}, 200, function(){
if(total >= goal){
resizeImages();
setTimeout(function(){
$(".center").fadeOut(700, function(){
$(".wide").fadeIn(500);
$(".caption").fadeIn(500);
$(".menubar").fadeIn(500);
});
loaded = true;
setTimeout(function(){
}, 500);
}, 800);
}
});
}
}
var image_change_speed = 600;
function next(){
if(viewing < images){
scrolldir = 2;
changeCaption(viewing+1);
$('body').animate({scrollLeft: $("#limiter"+(viewing+1)).css("left")}, image_change_speed, 'easeOutCirc', function() {
scrolldir = 0;
viewing++;
if(viewing >= images){
$(".caption .buttons .right").fadeOut(300);
}else{
if($(".caption .buttons .right").css("display") == "none"){
$(".caption .buttons .right").fadeIn(300);
}
}
if(viewing <= 1){
$(".caption .buttons .left").fadeOut(300);
}else{
if($(".caption .buttons .left").css("display") == "none"){
$(".caption .buttons .left").fadeIn(300);
}
}
});
}
}
function prev(){
if(viewing > 1){
scrolldir = 2;
changeCaption(viewing-1);
$('body').animate({scrollLeft: $("#limiter"+(viewing-1)).css("left")}, image_change_speed, 'easeOutCirc', function() {
scrolldir = 0;
viewing--;
if(viewing <= 1){
$(".caption .buttons .left").fadeOut(300);
}else{
if($(".caption .buttons .left").css("display") == "none"){
$(".caption .buttons .left").fadeIn(300);
}
}
if(viewing >= images){
$(".caption .buttons .right").fadeOut(300);
}else{
if($(".caption .buttons .right").css("display") == "none"){
$(".caption .buttons .right").fadeIn(300);
}
}
});
}
}
</script>
</head>
<body>
<div class="loading">
<div class="wrap">
<div class="center">
<div class="scroll">Home</div>
<div class="load">( loading 0 of 1 images ... )</div>
</div>
</div>
<div class="loadingBar"></div>
</div>
<div class="menu">
<div class="logo">
</div>
<ul>
<li>Chair 2</li>
<li>Desk</li>
<li><div class="br"></div></li>
<li>Wave Stool</li>
<li><div class="br"></div></li>
<li>Steel Table 4</li>
<li>Storage Table</li>
<li><div class="br"></div></li>
<li>Wood Table 5</li>
<li>Wood Table 6</li>
<li><div class="br"></div></li>
<li>Wave Bench</li>
<li>Scoop Bench</li>
<li><div class="br"></div></li>
<li>HB Kitchens</li>
<li>HB Opencase</li>
<li><div class="br"></div></li>
<li>Image Archive</li>
<br class="mobile_br" />
<br />
<li><a class="active" href="index.php?p=home"><img src="images/home.png" /></a></li>
<li>The Company</li>
<li>Quality</li>
<li>Contact Us</li>
</ul>
</div>
<div class="wide">
<div id="limiter1" class="limiter">
<div class="cont">
<img src="images/1_1.jpg" id="img1" alt="img1" onload="bump();" class="slideimage"/>
<div class="data">
<div>
</div>
</div>
</div>
</div>
</div>
<div class="caption">
<div class="logo">
<a href="http://henrybuilt.com">
<img src="images/logo.png" alt="henrybuilt"/>
</a>
</div>
<div class="slidehint">
</div>
<div class="text">
<div class="textbottom">
</div>
</div>
<div class="buttons">
<div class="left">
<img src="images/lArrow.png" alt="left"/>
</div>
<div class="right">
<img src="images/rArrow.png" alt="right"/>
</div>
</div>
</div>
<div class="mobile_css">
<style>
.br{
height: 5px;
}
.wide .limiter .data{
font-size: 1em;
}
.wide .limiter .data div{
position: relative;
top: -50px;
}
.caption{
height: 10%;
min-height: 80px;
}
.buttons{
width:300px;
height:100%;
width: auto;
}
.buttons img{
height: 80%;
}
.caption .logo, .caption .logo img{
height: 100%;
width: auto;
}
.caption .logo{
width: auto;
}
.text{
display: none;
}
.menubar{
display: none;
position: fixed;
left: 60px;
top: 50%;
margin-top: -72px;
z-index: 3;
}
.menubar img{
height: 100px;
width: 100px;
}
.menu{
background-color: rgba(0, 0, 0, 0.95);
}
.menu .logo{
width:100px;
height:0px;
}
.menu li a{
position: relative;
top: -10px;
font-size: 0.9em
}
.menu ul{
margin-left: -20px;
}
.data div{
font-size: 36px;
}
.mobile_br{
display: none;
}
</style>
</div>
</body>
</html>
I think i have solution. Thanks to this post and answers! jQuery scrollTop() not working on 'body' element in Firefox
So, add $('html,body') as selector in your prev() and next() functions...
Function next() ->
line 475:
$('html,body').animate({scrollLeft: $("#limiter"+(viewing+1)).css("....
Function prev()
line 504:
$('html,body').animate({scrollLeft: $("#limiter"+(viewing-1)).cs....
Related
How do I get the text that says "this is just some placeholder text that should let you scroll" to be under the title? I thought seeing as there is a <br> tag after the title, the text would go under it?
(in case it's unclear in the snippet, the background image has an arrow pointing down, indicating that the user should scroll down upon arriving at the home page).
$(document ).ready(function(){
var counter = 0;
$('#menuIcon').click(function(){
counter+=1;
if (counter == 3){
}
});
});
var open = false;
function Drop(n) {
var i;
if (open == false) {
for (i = n; i < 5; i++) {
Drp(i)
}
open = true
} else if (open == true) {
for (i = n; i < 5; i++) {
Cls(i)
}
open = false
}
}
function Drp(n) {
var elem = document.getElementsByClassName("menu-con")[n];
var pos = -1 * window.innerHeight - n * 100;
var id = setInterval(frame, 5);
function frame() {
if (pos >= -10) {
clearInterval(id);
elem.style.top = 0 + 'px';
} else {
pos += 10;
elem.style.top = pos + 'px';
}
}
}
function Cls(n) {
var elems = document.getElementsByClassName("menu-con")[n];
var poss = 0;
var ids = setInterval(frames, 5);
function frames() {
if (poss <= -1 * window.innerHeight) {
clearInterval(ids);
elems.style.top = -1 * window.innerHeight + 'px';
} else {
poss += -7 - n * 2;
elems.style.top = poss + 'px';
}
}
}
* {
box-sizing: border-box;
max-width: 100%;
font-family: 'PT Sans Narrow', sans-serif;
font-weight: bold;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
background-color: black;
background-image:url(foo.png);
background-repeat:no-repeat;
background-position: center;
background-size:cover;
background-attachment: fixed;
}
.menuBox {
display: none;
}
.menuBox a {
text-decoration: none;
color: black;
}
.menu-icon {
width: 50px;
height: 50px;
position: fixed;
top: 0;
right: 0;
margin: 10px 15px;
transform: scale(0.8);
padding: 0;
cursor: pointer;
z-index: 20
}
.menu-bar {
width: 50px;
height: 5px;
background: rgb(190, 190, 190);
position: absolute;
transition: all 0.3s;
font-weight: bold;
font-size: 50px
}
.menu-bar1 {
margin-top: 9px
}
.menu-bar2 {
margin-top: 23px
}
.menu-bar3 {
margin-top: 37px
}
.menu-icon.hover .menu-bar1 {
-webkit-transform: rotate(45deg) scaleX(0.7);
margin-top: 22px;
}
.menu-icon.hover .menu-bar2 {
opacity: 0
}
.menu-icon.hover .menu-bar3 {
-webkit-transform: rotate(-45deg) scaleX(0.7);
margin-top: 22px;
}
.menu {
width: 100%;
height: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.menu-con {
-webkit-flex-grow: 1;
flex-basis: 0;
flex-grow: 1;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
position: relative;
top: -100%;
transition: all 0.5s
}
.menu-con a:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
opacity: 1;
background: rgba(0, 0, 0, 0);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.menu-con:hover a:before {
background: rgba(0, 0, 0, 0.2)
}
.menu-con a {
height: 20px;
-webkit-align-self: center;
color: white;
font-size: 25px;
z-index: 2;
cursor: pointer
}
#media screen and (max-width: 600px) {
.menu-con {
min-width: 50%
}
}
#media screen and (max-width: 350px) {
.menu-con {
min-width: 100%
}
}
a {
text-decoration: none;
}
.title {
display:flex;
justify-content: center;
align-items:center;
font-size:50px;
color:white;
}
.homeText {
background-color:darkblue;
display:flex;
justify-content:center;
}
<html class="animated pulse">
<head>
<title>Ben Cohen</title>
<link href=style.css rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet">
<link href="animate.css" rel=stylesheet>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
<link rel=icon href=icon.png>
</head>
<body>
<div class="menu-icon" onclick="this.classList.toggle('hover');Drop(0)" id="menuIcon">
<div class="menu-bar menu-bar1"></div>
<div class="menu-bar menu-bar2"></div>
<div class="menu-bar menu-bar3"></div>
</div>
<div class="menu">
<div class="menu-con" style="background:red;" href="yayitworks.html">
HOME
</div>
<div class="menu-con" style="background:blue" id="hello">
<a>PORTFOLIO</a>
</div>
<div class="menu-con" style="background:darkorange;">
<a>POUS</a>
</div>
<div class="menu-con" style="background:green;">
<a>HOMEWORK</a>
</div>
<div class="menu-con" style="background:white;">
<a style="color:black">TEST PAGE</a>
</div>
</div>
<div class="homeText">
<div class="title">
THIS IS A TITLE.
</div><br>
<p>this is just some placeholder text that should let you scroll</p>
</div>
</body></html>
Remove display: flex; from your .hometext CSS.
.hometext {
background-color:darkblue;
justify-content:center;
}
You can also specify the flex direction:
.hometext {
background-color:darkblue;
justify-content:center;
display: flex;
flex-direction: column;
More info here...
https://www.w3schools.com/Css/css3_flexbox.asp
& here...
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
I want bullets move when i clicked arrow,i tried to think how to code it but my knowledge and experience is still not enough so i really need help from people.
$(document).ready(function () {
$("#mainTopics").click(function (e) {
e.preventDefault();
e.stopPropagation();
$("#sub-topics").toggle();
});
$("html").on('click', function () {
if ($("#sub-topics").is(':visible')) {
$("#sub-topics").toggle();
}
});
});
var sliderImages = document.querySelectorAll('.slide');
var arrowLeft = document.querySelector('#arrow-left');
var arrowRight = document.querySelector('#arrow-right');
var arrowSlide = document.querySelectorAll('.arrow');
var sliderBullets = document.querySelectorAll('.bullets');
var current = 0;
//reset slideimages
function resetSlide() {
for (var i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = 'none';
}
}
//slide left
function slideLeft() {
resetSlide();
sliderImages[current - 1].style.display = 'block';
current--;
}
//slide right
function slideRight() {
resetSlide();
sliderImages[current + 1].style.display = 'block';
current++;
}
//arrow left
arrowLeft.addEventListener('click', function () {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
//arrow right
arrowRight.addEventListener('click', function () {
if (current === sliderImages.length - 1) {
current = -1;
}
slideRight();
});
//start to slideimages
function startSlide() {
resetSlide();
sliderImages[0].style.display = 'block';
}
//called startslide function
startSlide();
body {
margin: 0;
}
li, a{
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#main-menu {
position: relative;
}
#main-menu ul {
margin: 0;
padding: 0;
}
#main-menu li {
display: inline-block;
}
#main-menu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*sub-topics*/
#sub-topics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
#sub-topics ul {
margin: 0;
padding: 0;
}
#sub-topics li {
display: block;
}
#subTopics a {
text-align: left;
}
/*columns*/
#column1, #column2, #column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#main-menu li:hover {
text-decoration: underline;
}
/*slideshow*/
#slideshow {
position: relative;
width: 100%;
height: 100%;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 800px 400px;
width: 800px;
height: 400px;
margin: auto;
margin-top: 40px;
}
.slide-contain {
position: absolute;
left: 50%;
bottom: 50%;
transform: translate3d(-50%,-50%,0);
text-align: center;
}
.slide-contain span {
color: white;
}
/*arrow*/
.arrow {
position: absolute;
cursor: pointer;
top: 200px;
width: 0;
height: 0;
border-style: solid;
}
.arrow:hover {
background-color: #e0dede;
transition: background-color 0.6s ease;
}
/*arrow-left*/
#arrow-left {
position: absolute;
border-width: 30px 40px 30px 0px;
border-color: transparent gray transparent transparent;
left: 0;
margin-left: 300px;
}
/*arrow-right*/
#arrow-right {
border-width: 30px 0px 30px 40px;
border-color: transparent transparent transparent gray;
right: 0;
margin-right: 300px;
}
/*bullets*/
#slidebullet {
position: relative;
top: -30px;
text-align: center;
}
.bullets {
display: inline-block;
background-color: gray;
width: 15px;
height: 15px;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.6s ease;
}
.active, .bullets:hover {
background-color: #e0dede;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<header></header>
<nav>
<div id="main-menu">
<ul>
<li>Logo</li>
<li>Home</li>
<li>
Topics
<div id="sub-topics">
<div id="column1" class="columns">
<ul>
<li>example1</li>
<li>example2</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div id="slideshow">
<div id="arrow-left" class="arrow"></div>
<div id="slide1" class="slide">
<div class="slide-contain">
<span>Image One</span>
</div>
</div>
<div id="slide2" class="slide">
<div class="slide-contain">
<span>Image Two</span>
</div>
</div>
<div id="slide3" class="slide">
<div class="slide-contain">
<span>Image Three</span>
</div>
</div>
<div id="slidebullet">
<div id="bullet1" class="bullets"></div>
<div id="bullet2" class="bullets"></div>
<div id="bullet3" class="bullets"></div>
</div>
<div id="arrow-right" class="arrow"></div>
</div>
<script src="jquery.js"></script>
<script src="index.js"></script>
<script>
</script>
</body>
</html>
Above is the code that i have learned from website asked people and youtube.
My website now the arrows work fine can change to other slides,but the bullets are not moving the same time like arrows.
Your goal can be reached by adding the following javascript code to your js file:
for (var i=0 ;i<sliderBullets.length;i++)
{
bullet=sliderBullets[i];
bullet.addEventListener("click",function(){
var i=this.id;
i=i.replace("bullet","");
current=parseInt(i)-1;
resetSlide();
sliderImages[current].style.display = 'block';
});
}
Try this one , its very easy .
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h
I have an image slider with thumbnails and am having a bit of a problem. When you click on the thumbnail of the last image, the thumbnails below as well as the arrows in the carousel jump down a bit. It doesn't happen to any of the other images. It's a small problem but it's driving me crazy and I don't know why it's happening, since I made sure all the images were the same height. Here's the codepen.
$(document).ready(function(){
$('#imgDetail').animate({
opacity: '1'
},300);
});
$(document).ready(function(){
// get all images loaded
var images = $(".unidoor-class");
// thumbnails containers
var thumbnailContainer = $("#thumbnails");
// generate thumbnail images
generateThumbnails(images, thumbnailContainer);
// listeners for controls arrows
$(".prev-next-button").on("click touchstart", function() {
// get the images
var currentImageIndex = images.index($(".unidoor-class[data-active=true]"));
var isPrevious = $(this).hasClass("previous");
var nextIndex;
if (isPrevious) {
if (currentImageIndex === 0) {
nextIndex = images.length - 1;
}
if (currentImageIndex > 0) {
nextIndex = currentImageIndex - 1;
}
} else {
if (currentImageIndex === images.length - 1) {
nextIndex = 0;
}
if (currentImageIndex < images.length - 1) {
nextIndex = currentImageIndex + 1;
}
}
// remove any active class from images
images.removeClass("active").attr('data-active', "false");
// get the next active image and add active class to that next current image
var $nextImage = $(images[nextIndex]);
if ($nextImage.data('iframe')) {
$(images[nextIndex]).attr('data-active', "true");
$('#sketchfab-iframe').addClass('active').height($nextImage.height());
} else {
$(images[nextIndex]).addClass("active").attr('data-active', "true");
$('#sketchfab-iframe').removeClass('active');
}
});
$(".thumb").on("click touchstart", function(event){
event.preventDefault();
var images = $(".unidoor-class");
var indexSelected = $(this).data("img-index");
var currentShown = images.index($(".unidoor-class[data-active=true]"));
if (currentShown === indexSelected) return false;
images.removeClass("active").attr('data-active', "false");
if ($(this).data('iframe')) {
$(images[indexSelected]).attr('data-active', "true");
$('#sketchfab-iframe').addClass('active').height($(images[indexSelected]).height());
} else {
images.removeClass("active");
$(images[indexSelected]).addClass('active').attr('data-active', "true");;
$('#sketchfab-iframe').removeClass('active');
}
});
function generateThumbnails(images, container) {
var ul = $("<ul>");
images.each(function(index, element){
var currentThumb = $("<img>");
var li = $("<li>");
var src = $(this).attr("src");
currentThumb.attr("src", src);
currentThumb.attr("class", "thumb");
currentThumb.data("img-index", index);
var iframe = $(this).data('iframe');
if (iframe) {
currentThumb.data("iframe", iframe);
}
li.append(currentThumb);
ul.append(li);
});
container.append(ul);
}
});
// window.sr = ScrollReveal({reset: true});
// sr.reveal('.active', {mobile:true});
* {
margin: 0;
padding: 0;
}
body{
margin: 0;
padding:0;
font-size: 100%;
/* line-height: 1.6; */
/* font-family: Arial, Helvetica, sans-serif; */
/* height: 100% !important; */
}
#green-room {
background: #333 !important;
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
#unidoor, .unidoor-class {
position: absolute;
width: 100%;
margin: 0 auto;
display: block;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s;
height: auto;
}
.unidoor-class.active {
position: relative;
opacity: 1;
}
#prev {
position: absolute;
/* font-weight: bold; */
color: black;
/* background-color: #fff; */
/* opacity: 0.5; */
left: 0;
top: 0;
bottom: 0;
}
#next {
position: absolute;
/* font-weight: bold; */
color: black;
/* background-color: #fff; */
/* opacity: 0.5; */
right: 0;
top: 0;
bottom: 0;
}
#prev p,
#next p
{
font-size: 3em;
}
#imgDetail {
position: relative;
width: 90%;
/* width: 900px;
height: 600px; */
margin: 0 auto;
overflow: hidden;
}
#imgDetail a {
text-decoration: none;
display: flex;
/* padding: 8px 16px; */
padding: 3% ;
justify-content: center;
align-items: center;
}
#imgDetail a:hover {
background-color: #333;
color: white;
opacity: 0.5;
}
#imgDetail ul {
margin: 0 auto;
display: block;
/* width: 50%; */
}
#thumbnails {
max-width: 1000px;
width: 100%;
display: inline-block;
text-align: center;
}
.thumb {
width: 21%;
height: auto;
/* margin: 15px 1% 0px 2%; */
margin-top: 15px;
cursor: pointer;
}
#imgDetail li {
display: inline;
/* margin-right: 10px; */
}
#thumbnails ul{
margin: 0 auto;
display: block;
}
#thumbnails li{
display: inline;
padding-right: 2%;
}
#thumbnails li:last-child{
padding-right: 0;
}
#green-room p {
display: block;
margin: 0 auto;
/* font-size: 1em !important; */
}
#green {
padding-top: 15px;
padding-bottom: 30px;
text-align: center;
color: white;
font-family: 'Lato', sans-serif;
margin: 0 auto;
/* width: 100% !important;*/
}
#media(max-width: 767px){
#green-room p {
margin-right: 5% !important;
margin-left: 5% !important;
/* font-size: .75em !important; */
}
#green {
/* font-size: .75em !important; */
}
}
#media(min-width: 768px){
#green-room p {
width: 90% !important;
}
#green {
width: 90% !important;
}
}
.footer {
padding-top: 30px;
background-color: #333;
}
#sketchfab-iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#sketchfab-iframe {
width: 100%;
height: 100%;
opacity: 0;
transition: opacity .5s;
}
#sketchfab-iframe.active {
opacity: 1;
position: relative;
}
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Images not Owned by Me -->
<!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>Daniel Pollack</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body id="green-room">
<div class="slideshow-container">
<div id="imgDetail">
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" class="unidoor-class active" data-active="true" />
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_2.jpg" class="unidoor-class" data-active="false" />
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="unidoor-class" data-active="false" />
<img data-iframe="sketchfab-iframe" src="https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/1243679/300/200/m2/fpnw/wm0/desert_04_01-.jpg?1462519267&s=294388259919b5be6294b07e96cda0b7" class="unidoor-class" data-active="false" />
<iframe id="sketchfab-iframe" width="600" height="400" src="https://sketchfab.com/models/bbea52bd14c84d65b7b5512bae94ceac/embed" frameborder="0" allowvr allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" onmousewheel=""></iframe>
<!--CONTROLS-->
<p>❬</p>
<p>❭</p>
</div>
<!--Thumbnails-->
<div id="thumbnails">
</div>
<p id="green">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non iaculis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="footer">
</div>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script>
window.sr = ScrollReveal({reset: true});
sr.reveal('#unidoor');
</script>
</body>
</html>
iframe by default is an inline element
add style
display:block;
for
#sketchfab-iframe.active {
opacity: 1;
position: relative;
display: block;**
}
Codepen
Read more on https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element
I've picked a slider from codepen.io and made some changes in the code and when I paste it in the embed code of Weebly (the software where I'm working) it doesn't work, because it doesn't stop resizing and getting bigger and bigger. How can I stop it? P.S. I noticed it starts doing that when I insert the JavaScript code...
$(document).ready(function() {
var slide = $('.slide');
var viewWidth = $(window).width();
var viewHeight = $(window).height();
var sliderInner = $('.slider-inner');
var childrenNo = sliderInner.children().length
sliderInner.width(viewWidth * childrenNo);
// ----------- INITIAL -----------
function setWidth() {
slide.each(function() {
$(this).width(viewWidth);
$(this).css('left', viewWidth * $(this).index());
});
}
function setHeight() {
$('.loading').css('height', viewHeight);
$('.loading').css('line-height', $('.loading').css('height'));
$('.slider').css('height', viewHeight);
slide.each(function() {
$(this).css('line-height', $('.slider').css('height'));
});
}
setWidth();
setHeight();
// ----------- /INITIAL -----------
// ----------- RESIZE -----------
$(window).resize(function() {
viewWidth = $(window).width();
viewHeight = $(window).height();
setWidth();
setHeight();
sliderInner.css("transform", "translateX(-" +
$('.slider-nav>div.active').index() *
viewWidth + "px) translateZ(0)");
$('.slider-inner').width(viewWidth * childrenNo);
});
// ----------- /RESIZE -----------
// ----------- SET ACTIVE -----------
function setActive(element) {
var clickedIndex = element.index();
$('.slider-nav .active').removeClass('active');
element.addClass('active');
sliderInner.css("transform", "translateX(-" + clickedIndex * (viewWidth * 0.33) + "px) translateZ(0)");
//translateZ(0)
$('.slider-inner .active').removeClass('active');
$('.slider-inner .slide').eq(clickedIndex).addClass('active');
}
// ON CLICK NAV
$('.slider-nav > div').on('click', function() {
setActive($(this));
});
// LEFT - CLICK
$('.slider-control.left').on('click', function() {
var indexPos = $('.slider-nav>div.active').index();
if (indexPos > 0) {
--indexPos;
} else {
indexPos = childrenNo - 1;
}
setActive($('.slider-nav > div').eq(indexPos));
});
// RIGHT - CLICK
$('.slider-control.right').on('click', function() {
var indexPos = $('.slider-nav>div.active').index();
if (indexPos == childrenNo - 1) {
indexPos = 0;
} else {
++indexPos;
}
setActive($('.slider-nav > div').eq(indexPos));
});
// LOADING
setTimeout(function() {
$(".slider").fadeIn(500);
}, 500);
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Roboto", sans-serif;
font-weight: 300;
}
.head {
position: fixed;
top: 0;
left: 0;
z-index: 9;
padding: 40px;
color: #fff;
}
.head h1 {
font-weight: 300;
font-size: 4em;
}
.head p.author {
text-align: right;
}
.head p.console {
font-size: 10px;
color: #fff;
}
.loading {
background-color: #2ecc71;
width: 100%;
position: absolute;
top: 0;
left: 0;
height: 500px;
line-height: 500px;
text-align: center;
color: #fff;
font-size: 2rem;
}
.slider {
background-color: #fff;
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
display: none;
}
.slider .slider-control {
height: 100%;
width: 100px;
background-color: #fff;
opacity: 0.01;
position: absolute;
top: 0;
z-index: 20;
cursor: pointer;
-webkit-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-delay: 0;
transition-delay: 0;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
.slider .slider-control:hover {
opacity: 0.2;
}
.slider .left {
left: 0;
}
.slider .right {
right: 0;
}
.slider .slider-inner {
position: absolute;
left: 0;
top: 0;
height: 100%;
background-visibility: hidden;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.slider .slider-inner .slide {
position: absolute;
top: 0;
height: 100%;
background-color: #f1c40f;
text-align: center;
line-height: 500px;
font-size: 5rem;
color: #fff;
}
.slider .slider-inner .slide.active {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
.slider .slider-inner .slide:nth-child(2n) {
background-color: #2ecc71;
}
.slider .slider-inner .slide:nth-child(3n) {
background-color: #3498db;
}
.slider .slider-inner .slide:nth-child(4n) {
background-color: #9b50ba;
}
.slider-nav {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
padding: 5px;
padding-bottom: 20px;
text-align: center;
}
.slider-nav>div {
float: left;
width: 20px;
height: 20px;
border: 1px solid #fff;
z-index: 2;
display: inline-block;
margin: 0 15px;
cursor: pointer;
border-radius: 50%;
opacity: 0.5;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
background-color: transparent;
}
.slider-nav>div:hover {
opacity: 1;
}
.slider-nav>div.active {
background-color: white;
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
.long {
height: 2000px;
width: 100%;
background-color: #2ecc71;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="head">
<h1>Gummy Slider</h1>
<p class="console">test console</p>
</div>
<div class="loading">
<p>Loading...</p>
</div>
<div class="slider">
<div class="slider-control left"></div>
<div class="slider-control right"></div>
<div class="slider-inner">
<div class="slide active">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>
<div class="slide">6</div>
<div class="slide">7</div>
<div class="slide">8</div>
</div>
<div class="slider-nav">
<div class="active"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="long"></div>
<script type="text/javascript">
Thanks,
Tom
You forgot a </script> in your code and that is probably the issue here. I tried this myself and it worked great.
Try the following:
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
</head>
<body>
<div class="head">
<h1>Gummy Slider</h1>
<p class="console">test console</p>
</div>
<div class="loading">
<p>Loading...</p>
</div>
<div class="slider">
<div class="slider-control left"></div>
<div class="slider-control right"></div>
<div class="slider-inner">
<div class="slide active">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>
<div class="slide">6</div>
<div class="slide">7</div>
<div class="slide">8</div>
</div>
<div class="slider-nav">
<div class="active"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="long"></div>
<script type="text/javascript">
$(document).ready(function(){
var slide = $('.slide');
var viewWidth = $(window).width();
var viewHeight = $(window).height();
var sliderInner = $('.slider-inner');
var childrenNo = sliderInner.children().length
sliderInner.width( viewWidth * childrenNo);
// ----------- INITIAL -----------
function setWidth() {
slide.each(function(){
$(this).width(viewWidth);
$(this).css('left', viewWidth * $(this).index());
});
}
function setHeight(){
$('.loading').css('height', viewHeight);
$('.loading').css('line-height', $('.loading').css('height'));
$('.slider').css('height', viewHeight);
slide.each(function(){
$(this).css('line-height', $('.slider').css('height'));
});
}
setWidth();
setHeight();
// ----------- /INITIAL -----------
// ----------- RESIZE -----------
$(window).resize(function(){
viewWidth = $(window).width();
viewHeight = $(window).height();
setWidth();
setHeight();
sliderInner.css("transform", "translateX(-" +
$('.slider-nav>div.active').index() *
viewWidth + "px) translateZ(0)");
$('.slider-inner').width( viewWidth * childrenNo);
});
// ----------- /RESIZE -----------
// ----------- SET ACTIVE -----------
function setActive(element) {
var clickedIndex = element.index();
$('.slider-nav .active').removeClass('active');
element.addClass('active');
sliderInner.css("transform", "translateX(-" + clickedIndex * (viewWidth * 0.33) + "px) translateZ(0)");
//translateZ(0)
$('.slider-inner .active').removeClass('active');
$('.slider-inner .slide').eq(clickedIndex).addClass('active');
}
// ON CLICK NAV
$('.slider-nav > div').on('click', function(){
setActive($(this));
});
// LEFT - CLICK
$('.slider-control.left').on('click', function(){
var indexPos = $('.slider-nav>div.active').index();
if (indexPos > 0) { --indexPos;
} else { indexPos = childrenNo-1; }
setActive($('.slider-nav > div').eq(indexPos));
});
// RIGHT - CLICK
$('.slider-control.right').on('click', function(){
var indexPos = $('.slider-nav>div.active').index();
if (indexPos == childrenNo-1) { indexPos = 0;
} else { ++indexPos; }
setActive($('.slider-nav > div').eq(indexPos));
});
// LOADING
setTimeout(function(){
$(".slider").fadeIn(500);
}, 500);
});
</script>
<style type="text/css">
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Roboto", sans-serif;
font-weight: 300;
}
.head {
position: fixed;
top: 0;
left: 0;
z-index: 9;
padding: 40px;
color: #fff;
}
.head h1 {
font-weight: 300;
font-size: 4em;
}
.head p.author {
text-align: right;
}
.head p.console {
font-size: 10px;
color: #fff;
}
.loading {
background-color: #2ecc71;
width: 100%;
position: absolute;
top: 0;
left: 0;
height: 500px;
line-height: 500px;
text-align: center;
color: #fff;
font-size: 2rem;
}
.slider {
background-color: #fff;
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
display: none;
}
.slider .slider-control {
height: 100%;
width: 100px;
background-color: #fff;
opacity: 0.01;
position: absolute;
top: 0;
z-index: 20;
cursor: pointer;
-webkit-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-delay: 0;
transition-delay: 0;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
.slider .slider-control:hover {
opacity: 0.2;
}
.slider .left {
left: 0;
}
.slider .right {
right: 0;
}
.slider .slider-inner {
position: absolute;
left: 0;
top: 0;
height: 100%;
background-visibility: hidden;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.slider .slider-inner .slide {
position: absolute;
top: 0;
height: 100%;
background-color: #f1c40f;
text-align: center;
line-height: 500px;
font-size: 5rem;
color: #fff;
}
.slider .slider-inner .slide.active {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
.slider .slider-inner .slide:nth-child(2n) {
background-color: #2ecc71;
}
.slider .slider-inner .slide:nth-child(3n) {
background-color: #3498db;
}
.slider .slider-inner .slide:nth-child(4n) {
background-color: #9b50ba;
}
.slider-nav {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
padding: 5px;
padding-bottom: 20px;
text-align: center;
}
.slider-nav > div {
float: left;
width: 20px;
height: 20px;
border: 1px solid #fff;
z-index: 2;
display: inline-block;
margin: 0 15px;
cursor: pointer;
border-radius: 50%;
opacity: 0.5;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
background-color: transparent;
}
.slider-nav > div:hover {
opacity: 1;
}
.slider-nav > div.active {
background-color: white;
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
.long {
height: 2000px;
width: 100%;
background-color: #2ecc71;
}
</style>
</body></html>
At the moment my hamburger button works just fine before it transforms, however after the hamburger button tranforms to the red "X" button if you click on any part of the "X" the button will transform, but it will not close the menu like it should. I can not find where I messed up.
Here is jsfiddle: https://jsfiddle.net/ex3z5o8L/
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
font-family: "Verdana";
}
#image {
position: relative;
z-index: -1 ;
height: 100vh;
width: 100%;
}
#content {
position: relative;
height: 100vh;
width: 100%;
background-color:#4d5555;
}
#footer {
position: relative;
width: 100%;
height: 100vh;
background-color:#ffffff;
}
div#header #fullScreenNav{
position:fixed;
height:0px;
width:100%;
background:#000;
top:0px;
left:0px;
overflow:hidden;
z-index:2;
}
#fullScreenNavbtn{
background: #f3f3f3;
padding: 10px;
position: absolute;
z-index: 1 ;
top: 70vh;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
/* ---------------------------------------------------------Start Of Hamburger Button------------------------------------------------------- */
.c-hamburger {
display: block;
position: fixed;
overflow: hidden;
margin: 0;
padding: 0;
width: 64px;
height: 64px;
font-size: 0;
text-indent: -9999px;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
cursor: pointer;
transition: background 0.1s;
border-radius:10px;
background: transparent;
right:5px;
top:5px;
z-index: 3;
}
.c-hamburger:focus {
outline: none;
}
.c-hamburger:hover span,
.c-hamburger:hover span::before,
.c-hamburger:hover span::after
{background: black;}
.c-hamburger span {
display: block;
position: absolute;
top: 28px;
left: 10px;
right: 10px;
height: 8px;
background: #e6e6e6;
border-radius:100px;
}
.c-hamburger span::before,
.c-hamburger span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 8px;
background-color: #e6e6e6;
content: "";
border-radius:100px;
}
.c-hamburger span::before {
top: -15px;
}
.c-hamburger span::after {
bottom: -15px;
}
.c-hamburger--htx {
}
.c-hamburger--htx span {
}
.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
transition-duration: 0.1s, 0.1s;
transition-delay: 0.1s, 0s;
}
.c-hamburger--htx span::before {
transition-property: top, transform;
}
.c-hamburger--htx span::after {
transition-property: bottom, transform;
}
/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
background-color: #cb0032;
}
.c-hamburger--htx.is-active span {
background: none;
}
.c-hamburger--htx.is-active span::before {
top: 0;
transform: rotate(45deg);
background: white;
}
.c-hamburger--htx.is-active span::after {
bottom: 0;
transform: rotate(-45deg);
background: white;
}
.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
transition-delay: 0s, 0.1s;
}
/* ---------------------------------------------------------End of Hamburger Button-------------------------------------------------- */
</style>
</head>
<body>
<div id="header">
<div id="headerBtnHolder">
<img onload="parallex1('image')" src="" id="image" />
<button id="fullScreenNavbt" class="c-hamburger c-hamburger--htx" onclick="toggleNavPanel('fullScreenNav','100vh','fullScreenNavbt')">
<span>toggle menu</span>
</button>
</div>
<div id="fullScreenNav">
<div>
</div>
</div>
</div>
<div id="content"></div>
<div id="footer"></div>
<script>
(function() {
"use strict";
var toggles = document.querySelectorAll(".c-hamburger");
for (var i = toggles.length - 1; i >= 0; i--) {
var toggle = toggles[i];
toggleHandler(toggle);
};
function toggleHandler(toggle) {
toggle.addEventListener( "click", function(e) {
e.preventDefault();
(this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
});
}
})();
</script>
<script>
function toggleNavPanel(dropDivId, height, btnId){
var panel = document.getElementById(dropDivId), maxH= height, nav = btnId;
if(panel.style.height == maxH){
panel.style.height = "0px";
} else {
panel.style.height = maxH;
}
window.addEventListener('mouseup', function(event){
if(event.target != panel && event.target.parentNode !=panel && event.target.id != nav ){
panel.style.height = "0px";
}
});
}
</script>
<script type="text/javascript">
function parallex1(ObjectId){
var ypos, image;
function parallex () {
ypos = window.pageYOffset;
image = document.getElementById(ObjectId);
image.style.top = ypos * .6 + 'px';
}
window.addEventListener('scroll', parallex);}
</script>
</body>
</html>
Your basic problem is that on every click you're adding an eventListener so you re creating an event hell. Remove the onClick and add the event listeners only once to run your methods. Also your checks for toggling the panel are wrong. There's a span inside the button which should toggle as well.