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><linkrel="stylesheet"href="path/to/font-awesome/css/font-awesome.min.css"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"><metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /><scriptsrc="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;
}
.contenth1{
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: 13px15px;
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><navclass="nav"id="navs"><navclass="img1"id="imgg" ><spanid="span">0 533 295 42 35</span><spanid="span">blabla@gmail.com</span></nav><divclass="as"><divclass="sag"id="sag2"><aclass="a"id="abir">sad</a><aclass="a"id="aiki">sad</a></div><divclass="sol"id="sol"><aclass="a"id="auc">sad</a><aclass="a"id="adort">sad</a></div></div></nav><divclass="slider"><divid="firstcontent"class="slide current"><divclass="content"><h1>Slide One</h1><p>Slide One's paraghrap</p></div></div><divclass="slide"><divclass="content"><h1>Slide Two</h1><p>Slide Two's paraghrap</p></div></div><divclass="slide"><divclass="content"><h1>Slide Third</h1><p>Slide Third's paraghrap</p></div></div><divclass="slide"><divclass="content"><h1>Slide Four</h1><p>Slide Four's paraghrap</p></div></div><divclass="slide"><divclass="content"><h1>Slide Five</h1><p>Slide Five's paraghrap</p></div></div></div><divclass="button"><buttonclass="buttons"id="prev"><iclass="fa fa-arrow-left"></i></button><buttonclass="buttons"id="next"><iclass="fa fa-arrow-right"></i></button></div><script>window.onscroll = function() {scrollFunction()};
functionscrollFunction() {
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;
functionnextslide(){
//Get current classconst current = document.querySelector('.current');
//Remove current class
current.classList.remove('current')
//Check for next slideif(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'));
}
functionprevslide(){
//Get current classconst current = document.querySelector('.current');
//Remove current class
current.classList.remove('current')
//Check for previous slideif(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);
}
});
//autoplayif(auto){
slideInterval = setInterval(nextslide, invervalTime);
}
</script></body></html>Solution 2:
you need to define script after page load
<html><head><linkrel="stylesheet"href="path/to/font-awesome/css/font-awesome.min.css"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"><metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /><scriptsrc="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;
}
.contenth1{
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: 13px15px;
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><navclass="nav"id="navs"><navclass="img1"id="imgg" ><spanid="span">0 533 295 42 35</span><spanid="span">blabla@gmail.com</span></nav><divclass="as"><divclass="sag"id="sag2"><aclass="a"id="abir">sad</a><aclass="a"id="aiki">sad</a></div><divclass="sol"id="sol"><aclass="a"id="auc">sad</a><aclass="a"id="adort">sad</a></div></div></nav><divclass="slider"><divid="firstcontent"class="slide current"><divclass="content"><h1>Slide One</h1><p>Slide One's paraghrap</p></div></div><divclass="slide"><divclass="content"><h1>Slide Two</h1><p>Slide Two's paraghrap</p></div></div><divclass="slide"><divclass="content"><h1>Slide Third</h1><p>Slide Third's paraghrap</p></div></div><divclass="slide"><divclass="content"><h1>Slide Four</h1><p>Slide Four's paraghrap</p></div></div><divclass="slide"><divclass="content"><h1>Slide Five</h1><p>Slide Five's paraghrap</p></div></div></div><divclass="button"><buttonclass="buttons"id="prev"><iclass="fa fa-arrow-left"></i></button><buttonclass="buttons"id="next"><iclass="fa fa-arrow-right"></i></button></div></body><script>window.onscroll = function() {scrollFunction()};
functionscrollFunction() {
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;
functionnextslide(){
//Get current classconst current = document.querySelector('.current');
//Remove current class
current.classList.remove('current')
//Check for next slideif(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'));
}
functionprevslide(){
//Get current classconst current = document.querySelector('.current');
//Remove current class
current.classList.remove('current')
//Check for previous slideif(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);
}
});
//autoplayif(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"