Copy link to clipboard
Copied
Good morning, I would like to put the slideshow with the photos and the first part works well. But I would also like to put 3 more parts and it does not work well for slides. Do I have to change the JAVASCRIPT? However I put here HTML code and JAVASCRIPT ok?
JAVASCRIPT // JavaScript Document function openModal() { document.getElementById('myModal').style.display = "block"; } function closeModal() { document.getElementById('myModal').style.display = "none"; } var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function currentDiv(n) { showDivs(slideIndex = n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); var captionText = document.getElementById("caption"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x.style.display = "none"; } for (i = 0; i < dots.length; i++) { dots.className = dots.className.replace(" w3-opacity-off", ""); } x[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " w3-opacity-off"; captionText.innerHTML = dots[slideIndex-1].alt; } I await your answer. Thank you.
Basically what I was explaining is you will have to duplicate the slideshow html code and the slideshow <script></script> and go through the code and add _2, _3, _4 to the function names and css if you want 4 seperate slide shows.
The below code shows an example of 2 slideshows: (I've identified in red what you need to add to the css'html code and where in the duplicated <script> you need to change the function names)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Slideshow</title>
<style
...Copy link to clipboard
Copied
Normally you should not touch the CSS and JS. If you want to change styles, then you should use an overriding stylesheet.
Please upload the site and give us a link to the site so that we can help you.
Copy link to clipboard
Copied
BenPleysier ha scritto
Normally you should not touch the CSS and JS. If you want to change styles, then you should use an overriding stylesheet.
Please upload the site and give us a link to the site so that we can help you.
I did not mean to change styles. I intended to put the photos in four parts on the same page as OSGOOD said.
Maybe I'll put the site's link here but unfortunately it's not ready yet they have not yet given me the ok to publish. If the site already publishes and surely I put it here link no problem. Unfortunately.
Anyway thanks.
Copy link to clipboard
Copied
teodoro8590 wrote
Good morning, I would like to put the slideshow with the photos and the first part works well. But I would also like to put 3 more parts and it does not work well for slides.
What do you mean you would like to include 3 more parts? Do you mean you want 4 individual slideshows on the same page?
The script you are using is obviously taken from:
Copy link to clipboard
Copied
osgood_ ha scritto
What do you mean you would like to include 3 more parts? Do you mean you want 4 individual slideshows on the same page?
The script you are using is obviously taken from:
Yes i mean want 4 individual slideshows on the same page?
Copy link to clipboard
Copied
Sorry I can not find you wrote to me yesterday, did you delete it?
Copy link to clipboard
Copied
Basically what I was explaining is you will have to duplicate the slideshow html code and the slideshow <script></script> and go through the code and add _2, _3, _4 to the function names and css if you want 4 seperate slide shows.
The below code shows an example of 2 slideshows: (I've identified in red what you need to add to the css'html code and where in the duplicated <script> you need to change the function names)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Slideshow</title>
<style>
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides, .mySlides_2 {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
</style>
</head>
<body>
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides_2 fade">
<div class="numbertext">1 / 3</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides_2 fade">
<div class="numbertext">2 / 3</div>
<img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides_2 fade">
<div class="numbertext">3 / 3</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides_2(-1)">❮</a>
<a class="next" onclick="plusSlides_2(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide_2(1)"></span>
<span class="dot" onclick="currentSlide_2(2)"></span>
<span class="dot" onclick="currentSlide_2(3)"></span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides.style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots.className = dots.className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
<script>
var slideIndex_2 = 1;
showSlides_2(slideIndex_2);
// Next/previous controls
function plusSlides_2(n) {
showSlides_2(slideIndex_2 += n);
}
// Thumbnail image controls
function currentSlide_2(n) {
showSlides_2(slideIndex_2 = n);
}
function showSlides_2(n) {
var i;
var slides = document.getElementsByClassName("mySlides_2");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex_2 = 1}
if (n < 1) {slideIndex_2 = slides.length}
for (i = 0; i < slides.length; i++) {
slides.style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots.className = dots.className.replace(" active", "");
}
slides[slideIndex_2-1].style.display = "block";
dots[slideIndex_2-1].className += " active";
}
</script>
</body>
</html>
Copy link to clipboard
Copied
osgood_ ha scritto
Basically what I was explaining is you will have to duplicate the slideshow html code and the slideshow <script></script> and go through the code and add _2, _3, _4 to the function names and css if you want 4 seperate slide shows.
The below code shows an example of 2 slideshows: (I've identified in red what you need to add to the css'html code and where in the duplicated <script> you need to change the function names)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Slideshow</title>
<style>
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides, .mySlides_2 {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
</style>
</head>
<body>
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides_2 fade">
<div class="numbertext">1 / 3</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides_2 fade">
<div class="numbertext">2 / 3</div>
<img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides_2 fade">
<div class="numbertext">3 / 3</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides_2(-1)">❮</a>
<a class="next" onclick="plusSlides_2(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide_2(1)"></span>
<span class="dot" onclick="currentSlide_2(2)"></span>
<span class="dot" onclick="currentSlide_2(3)"></span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides.style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots.className = dots.className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
<script>
var slideIndex_2 = 1;
showSlides_2(slideIndex_2);
// Next/previous controls
function plusSlides_2(n) {
showSlides_2(slideIndex_2 += n);
}
// Thumbnail image controls
function currentSlide_2(n) {
showSlides_2(slideIndex_2 = n);
}
function showSlides_2(n) {
var i;
var slides = document.getElementsByClassName("mySlides_2");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex_2 = 1}
if (n < 1) {slideIndex_2 = slides.length}
for (i = 0; i < slides.length; i++) {
slides.style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots.className = dots.className.replace(" active", "");
}
slides[slideIndex_2-1].style.display = "block";
dots[slideIndex_2-1].className += " active";
}
</script>
</body>
</html>
I received, excellent. Thank you... It works well but I ask you one thing if I can also do that LIGHTBOX style that I put before in the code, is it possible? I mean I have to edit it in the script with the number 2, right? It can be done? Or that LIGHTBOX model is not suitable?
Copy link to clipboard
Copied
osgood_ ha scritto
Basically what I was explaining is you will have to duplicate the slideshow html code and the slideshow <script></script> and go through the code and add _2, _3, _4 to the function names and css if you want 4 seperate slide shows.
The below code shows an example of 2 slideshows: (I've identified in red what you need to add to the css'html code and where in the duplicated <script> you need to change the function names)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Slideshow</title>
<style>
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides, .mySlides_2 {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
</style>
</head>
<body>
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides_2 fade">
<div class="numbertext">1 / 3</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides_2 fade">
<div class="numbertext">2 / 3</div>
<img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides_2 fade">
<div class="numbertext">3 / 3</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides_2(-1)">❮</a>
<a class="next" onclick="plusSlides_2(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide_2(1)"></span>
<span class="dot" onclick="currentSlide_2(2)"></span>
<span class="dot" onclick="currentSlide_2(3)"></span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides.style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots.className = dots.className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
<script>
var slideIndex_2 = 1;
showSlides_2(slideIndex_2);
// Next/previous controls
function plusSlides_2(n) {
showSlides_2(slideIndex_2 += n);
}
// Thumbnail image controls
function currentSlide_2(n) {
showSlides_2(slideIndex_2 = n);
}
function showSlides_2(n) {
var i;
var slides = document.getElementsByClassName("mySlides_2");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex_2 = 1}
if (n < 1) {slideIndex_2 = slides.length}
for (i = 0; i < slides.length; i++) {
slides.style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots.className = dots.className.replace(" active", "");
}
slides[slideIndex_2-1].style.display = "block";
dots[slideIndex_2-1].className += " active";
}
</script>
</body>
</html>
Hello, I copied everything you did and it works fine but there is only one problem. When I click a menu where I put that slideshow and do not immediately appear a picture so I have to click the "dot" and opens the photo, strange. Do I have something wrong?
Copy link to clipboard
Copied
teodoro8590 wrote
Hello, I copied everything you did and it works fine but there is only one problem. When I click a menu where I put that slideshow and do not immediately appear a picture so I have to click the "dot" and opens the photo, strange. Do I have something wrong?
What menu are you clicking?
If you can upload your page some where and link to it that would be helpful as we can see what is actually happening.
Copy link to clipboard
Copied
osgood_ ha scritto
teodoro8590 wrote
Hello, I copied everything you did and it works fine but there is only one problem. When I click a menu where I put that slideshow and do not immediately appear a picture so I have to click the "dot" and opens the photo, strange. Do I have something wrong?
What menu are you clicking?
If you can upload your page some where and link to it that would be helpful as we can see what is actually happening.
Maybe I explained you badly, however, finally it is published on the site but it is still temporary. Meanwhile, I write here the name of the site is http://www.deafcruise2018.com/index_fr.html. Then go to the "tickets" menu and go underneath where I put slideshows and you do not see the photo. You try to click "DOT" and you open the photo, it's weird.
Then another thing I tried to remove on css "min-height: 100%;" but it remains the same that flows along even if it is empty. Why?
Copy link to clipboard
Copied
teodoro8590 wrote
Maybe I explained you badly, however, finally it is published on the site but it is still temporary. Meanwhile, I write here the name of the site is http://www.deafcruise2018.com/index_fr.html. Then go to the "tickets" menu and go underneath where I put slideshows and you do not see the photo. You try to click "DOT" and you open the photo, it's weird.
Then another thing I tried to remove on css "min-height: 100%;" but it remains the same that flows along even if it is empty. Why?
Move your slideshow.js file link to just before the closing </body></html> tags, as shown below......
<script type="text/javascript" title="slideshow" src="js/slideshow.js"></script>
</body>
</html>
Copy link to clipboard
Copied
osgood_ ha scritto
teodoro8590 wrote
Maybe I explained you badly, however, finally it is published on the site but it is still temporary. Meanwhile, I write here the name of the site is http://www.deafcruise2018.com/index_fr.html. Then go to the "tickets" menu and go underneath where I put slideshows and you do not see the photo. You try to click "DOT" and you open the photo, it's weird.
Then another thing I tried to remove on css "min-height: 100%;" but it remains the same that flows along even if it is empty. Why?
Move your slideshow.js file link to just before the closing </body></html> tags, as shown below......
<script type="text/javascript" title="slideshow" src="js/slideshow.js"></script>
</body>
</html>
It works well, I really did not know this thing. Thanks so much.
There is another problem to scroll as I wrote before, I tried to remove in the css "min-height: 100%;" because it is not nice to run along even if it is empty. Try to see on "Accueil" or "Programe" or "Contacts" you scroll down with empty, it's not nice. I tried to remove it "min-height: 100%;" and always remains the same as flowing too much, it's strange. I remember you advised me to add "min-height: 100%;" to scroll along.
Copy link to clipboard
Copied
Did you do something wrong? I meant to say it's to scroll down I'm too much. For the transition is fine as well as before. I was just talking to scroll down I'm too much. I want to block the page from flowing down.
Copy link to clipboard
Copied
teodoro8590 wrote
Did you do something wrong? I meant to say it's to scroll down I'm too much. For the transition is fine as well as before. I was just talking to scroll down I'm too much. I want to block the page from flowing down.
Remove the orginal jquery script and try the one below.
<script>
$(document).ready(function(){
// MAIN NAVIGATION
$('.navigation a').css('cursor' , 'pointer').click(function(){
var navItem = $(this).attr('navItem');
$('.close').css({'right' : '-100%', 'transition' : '1.5s'}).show(function(){
$('.close').hide();
$(navItem).show();
});
if(navItem === ".home") {
$('.home').show().css({'right' : '0', 'transition' : '1s'});
}
else {
$(navItem).css({'right' : '0', 'transition' : '1s'});
}
});
});
</script>
Also add the class 'close' to the home section:
<div class="home close">