Codes Work In Codepen But Don't Work In My Computer
Guys recently I have opened a question here: Why My Javascript Slideshow Doesnt Work Properly And in code snippet my codes work fine in stackoverflow and codepen but in my computer
Solution 1:
After some testing, I figured it out. By having the javascript ABOVE the html, querySelector wasn't seeing your next/prev buttons so the variables that held them were actually set as null. Simply moving the javascript to the bottom fixed this for me.
Or wrapping your javascript in window.onload = function() also will solve it.
<html>
<head>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.nav{
width: 100%;
position: fixed;;
left: 0;
height:15%;
top:0px;
font-size:15px;
z-index:1000;
}
.a{
position: relative;
top:70%;
font-size: 20px;
text-decoration: none;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color:rgb(90, 76, 76);
}
.a:hover{
text-decoration: none;
border-bottom: 2px red solid;
color:rgb(129, 74, 129);
}
#aiki{
margin:3%;
}
#auc{
border-right: 30px solid transparent;
}
#adort{
border-left: 10px solid transparent;
}
#abir{
margin:3%;
}
.sag2{
position: absolute;
}
.sol{
position: absolute;
top:-5%;
margin-left:70%;
}
.as{
position: relative;
top:70%;
font-size: 20px;
text-decoration: none;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
margin-left:15%;
color:white;
}
.a:hover{
text-decoration: none;
color:rgb(129, 74, 129);
}
.img1{
background-color: rgb(155, 151, 151);
position: absolute;
width: 100%;
height: 25%;
}
@media (max-width: 1000px) {
.a{
display: none;
}
}
#span{
color:white;
margin: 5%;
}
.slider{
position:relative;
overflow:hidden;
height: 100vh;
width: 100vw;
}
.slide{
position:absolute;
top:0;
left:0;
width: 100%;
height:100%;
opacity:0;
transition: opacity 0.4s ease-in-out;
}
.slide.current{
opacity:1;
}
.slide.current .content{
opacity: 1;
left:0;
transition: all 0.7s ease-in-out 0.3s;
}
.content{
position: absolute;
bottom: 70px;
left:-600px;
opacity:0;
width:600px;
background-color: rgb(255, 255, 255, 0.8);
color: #333333;
padding:35px;
}
.content h1{
margin-bottom: 10px;
}
#next{
position:absolute;
top:200px;
right:15px;
}
#prev{
position:absolute;
top:200px;
left:15px;
}
.buttons{
border: 2px solid #ffffff;
background-color: transparent;
color:#ffffff;
cursor:pointer;
padding: 13px 15px;
border-radius: 50%;
outline: none;
transition: 1.5s;
}
.buttons:hover{
background-color: white;
color:black;
transition: 1.5s;
}
@media (max-width: 800px) {
.slide .content{
bottom:-300px;
left:0;
width:100%;
}
.slide.current .content{
transform: translateY(-300px);
}
}
.slide:first-child{
background-image:url("https://www.gladsos.com.tr/wp-content/uploads/2019/01/gladsos-slider-vr.jpg") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
.slide:nth-child(2){
background-image:url("https://source.unsplash.com/RyRpq9SUwAU/1600x900") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
.slide:nth-child(3){
background-image:url("https://www.gladsos.com.tr/wp-content/uploads/2019/01/gladsos-slider-vr.jpg") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
.slide:nth-child(4){
background-image:url("https://www.gladsos.com.tr/wp-content/uploads/2019/01/gladsos-slider-vr.jpg") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
.slide:nth-child(5){
background-image:url("https://source.unsplash.com/RyRpq9SUwAU/1600x900") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<nav class="nav" id="navs">
<nav class="img1" id="imgg" ><span id="span">0 533 295 42 35</span><span id="span">blabla@gmail.com</span></nav>
<div class="as">
<div class="sag" id="sag2">
<a class="a" id="abir">sad</a>
<a class="a" id="aiki">sad</a>
</div>
<div class="sol" id="sol">
<a class="a" id="auc">sad</a>
<a class="a" id="adort">sad</a>
</div>
</div>
</nav>
<div class="slider">
<div id="firstcontent"class="slide current">
<div class="content">
<h1>Slide One</h1>
<p>Slide One's paraghrap</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Two</h1>
<p>Slide Two's paraghrap</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Third</h1>
<p>Slide Third's paraghrap</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Four</h1>
<p>Slide Four's paraghrap</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Five</h1>
<p>Slide Five's paraghrap</p>
</div>
</div>
</div>
<div class="button">
<button class="buttons"id="prev"><i class="fa fa-arrow-left"></i></button>
<button class="buttons"id="next"><i class="fa fa-arrow-right"></i></button>
</div>
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
document.getElementById("navs").style.transition = "2s";
document.getElementById("navs").style.height = "20%";
document.getElementById("sag2").style.transition = "2s";
document.getElementById("sag2").style.marginLeft = "20%";
document.getElementById("navs").style.backgroundColor = "white";
document.getElementById("sol").style.transition = "2s";
document.getElementById("sol").style.marginLeft = "40%";
//document.getElementById("sag2").style.left = "20%";
}else{
document.getElementById("navs").style.height = "15%";
document.getElementById("sag2").style.transition = "2s";
document.getElementById("sag2").style.marginLeft = "0%";
document.getElementById("navs").style.backgroundColor = "transparent";
document.getElementById("sol").style.transition = "2s";
document.getElementById("sol").style.marginLeft = "70%";
}
}
const slides = document.querySelectorAll(".slide");
const next = document.querySelector("#next");
const prev = document.querySelector("#prev");
const auto = true;
const invervalTime = 5000;
let slideInterval;
function nextslide(){
//Get current class
const current = document.querySelector('.current');
//Remove current class
current.classList.remove('current')
//Check for next slide
if(current.nextElementSibling){
//Add current to nextElementSibling
current.nextElementSibling.classList.add('current');
}else{
//Add current to start
slides[0].classList.add('current');
}
setTimeout(() => current.classList.remove('current'));
}
function prevslide(){
//Get current class
const current = document.querySelector('.current');
//Remove current class
current.classList.remove('current')
//Check for previous slide
if(current.previousElementSibling){
//Add current to previousElementSibling
current.previousElementSibling.classList.add('current');
}else{
//Add current to last
slides[slides.length - 1].classList.add('current')
}
setTimeout(() => current.classList.remove('current'));
}
//button events
next.addEventListener('click', e =>{
nextslide();
if(auto){
clearInterval(slideInterval)
slideInterval = setInterval(nextslide, invervalTime);
}
});
prev.addEventListener('click', e =>{
prevslide();
if(auto){
clearInterval(slideInterval)
slideInterval = setInterval(nextslide, invervalTime);
}
});
//autoplay
if(auto){
slideInterval = setInterval(nextslide, invervalTime);
}
</script>
</body>
</html>
Solution 2:
you need to define script after page load
<html>
<head>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<style>
.nav{
width: 100%;
position: fixed;;
left: 0;
height:15%;
top:0px;
font-size:15px;
z-index:1000;
}
.a{
position: relative;
top:70%;
font-size: 20px;
text-decoration: none;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color:rgb(90, 76, 76);
}
.a:hover{
text-decoration: none;
border-bottom: 2px red solid;
color:rgb(129, 74, 129);
}
#aiki{
margin:3%;
}
#auc{
border-right: 30px solid transparent;
}
#adort{
border-left: 10px solid transparent;
}
#abir{
margin:3%;
}
.sag2{
position: absolute;
}
.sol{
position: absolute;
top:-5%;
margin-left:70%;
}
.as{
position: relative;
top:70%;
font-size: 20px;
text-decoration: none;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
margin-left:15%;
color:white;
}
.a:hover{
text-decoration: none;
color:rgb(129, 74, 129);
}
.img1{
background-color: rgb(155, 151, 151);
position: absolute;
width: 100%;
height: 25%;
}
@media (max-width: 1000px) {
.a{
display: none;
}
}
#span{
color:white;
margin: 5%;
}
.slider{
position:relative;
overflow:hidden;
height: 100vh;
width: 100vw;
}
.slide{
position:absolute;
top:0;
left:0;
width: 100%;
height:100%;
opacity:0;
transition: opacity 0.4s ease-in-out;
}
.slide.current{
opacity:1;
}
.slide.current .content{
opacity: 1;
left:0;
transition: all 0.7s ease-in-out 0.3s;
}
.content{
position: absolute;
bottom: 70px;
left:-600px;
opacity:0;
width:600px;
background-color: rgb(255, 255, 255, 0.8);
color: #333333;
padding:35px;
}
.content h1{
margin-bottom: 10px;
}
#next{
position:absolute;
top:200px;
right:15px;
}
#prev{
position:absolute;
top:200px;
left:15px;
}
.buttons{
border: 2px solid #ffffff;
background-color: transparent;
color:#ffffff;
cursor:pointer;
padding: 13px 15px;
border-radius: 50%;
outline: none;
transition: 1.5s;
}
.buttons:hover{
background-color: white;
color:black;
transition: 1.5s;
}
@media (max-width: 800px) {
.slide .content{
bottom:-300px;
left:0;
width:100%;
}
.slide.current .content{
transform: translateY(-300px);
}
}
.slide:first-child{
background-image:url("https://www.gladsos.com.tr/wp-content/uploads/2019/01/gladsos-slider-vr.jpg") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
.slide:nth-child(2){
background-image:url("https://source.unsplash.com/RyRpq9SUwAU/1600x900") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
.slide:nth-child(3){
background-image:url("https://www.gladsos.com.tr/wp-content/uploads/2019/01/gladsos-slider-vr.jpg") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
.slide:nth-child(4){
background-image:url("https://www.gladsos.com.tr/wp-content/uploads/2019/01/gladsos-slider-vr.jpg") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
.slide:nth-child(5){
background-image:url("https://source.unsplash.com/RyRpq9SUwAU/1600x900") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
</style>
<body>
<nav class="nav" id="navs">
<nav class="img1" id="imgg" ><span id="span">0 533 295 42 35</span><span id="span">blabla@gmail.com</span></nav>
<div class="as">
<div class="sag" id="sag2">
<a class="a" id="abir">sad</a>
<a class="a" id="aiki">sad</a>
</div>
<div class="sol" id="sol">
<a class="a" id="auc">sad</a>
<a class="a" id="adort">sad</a>
</div>
</div>
</nav>
<div class="slider">
<div id="firstcontent"class="slide current">
<div class="content">
<h1>Slide One</h1>
<p>Slide One's paraghrap</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Two</h1>
<p>Slide Two's paraghrap</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Third</h1>
<p>Slide Third's paraghrap</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Four</h1>
<p>Slide Four's paraghrap</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Five</h1>
<p>Slide Five's paraghrap</p>
</div>
</div>
</div>
<div class="button">
<button class="buttons"id="prev"><i class="fa fa-arrow-left"></i></button>
<button class="buttons"id="next"><i class="fa fa-arrow-right"></i></button>
</div>
</body>
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
document.getElementById("navs").style.transition = "2s";
document.getElementById("navs").style.height = "20%";
document.getElementById("sag2").style.transition = "2s";
document.getElementById("sag2").style.marginLeft = "20%";
document.getElementById("navs").style.backgroundColor = "white";
document.getElementById("sol").style.transition = "2s";
document.getElementById("sol").style.marginLeft = "40%";
//document.getElementById("sag2").style.left = "20%";
}else{
document.getElementById("navs").style.height = "15%";
document.getElementById("sag2").style.transition = "2s";
document.getElementById("sag2").style.marginLeft = "0%";
document.getElementById("navs").style.backgroundColor = "transparent";
document.getElementById("sol").style.transition = "2s";
document.getElementById("sol").style.marginLeft = "70%";
}
}
const slides = document.querySelectorAll(".slide");
const next = document.querySelector("#next");
const prev = document.querySelector("#prev");
const auto = true;
const invervalTime = 5000;
let slideInterval;
function nextslide(){
//Get current class
const current = document.querySelector('.current');
//Remove current class
current.classList.remove('current')
//Check for next slide
if(current.nextElementSibling){
//Add current to nextElementSibling
current.nextElementSibling.classList.add('current');
}else{
//Add current to start
slides[0].classList.add('current');
}
setTimeout(() => current.classList.remove('current'));
}
function prevslide(){
//Get current class
const current = document.querySelector('.current');
//Remove current class
current.classList.remove('current')
//Check for previous slide
if(current.previousElementSibling){
//Add current to previousElementSibling
current.previousElementSibling.classList.add('current');
}else{
//Add current to last
slides[slides.length - 1].classList.add('current')
}
setTimeout(() => current.classList.remove('current'));
}
//button events
next.addEventListener('click', e =>{
nextslide();
if(auto){
clearInterval(slideInterval)
slideInterval = setInterval(nextslide, invervalTime);
}
});
prev.addEventListener('click', e =>{
prevslide();
if(auto){
clearInterval(slideInterval)
slideInterval = setInterval(nextslide, invervalTime);
}
});
//autoplay
if(auto){
slideInterval = setInterval(nextslide, invervalTime);
}
</script>
</html>
Solution 3:
Yes, Always is Recommend put all the Javascript code Before the **</body>** tag in the HTML, 1) The reason behind this is as the Head gets loaded before the body. Any dynamic javascript code that gets executed in the body on load will execute correctly. If you have javascript that is just before the tag then any javascript calls made to functions by your page as it loads will error.
all the code working
Post a Comment for "Codes Work In Codepen But Don't Work In My Computer"