The slide that I turned the opacity to 0 on is still clickable even though I set pointer events to none. Basically I have 2 slides on this slideshow and even if i'm on the first slide when I click on it, it goes to the 2nd slides hyperlink. Image This image shows the code is changing the pointer event and also the opacity correctly but for some reason when I click on the first slide on the website it still sends me to the second slides hyperlink.
//programming slideshow
$(function () {
var slide_index = 1;
displaySlides(slide_index);
function nextSlide() {
displaySlides(slide_index++);
}
function prevslide() {
displaySlides(slide_index--);
}
function displaySlides() {
var i;
var slides = document.getElementsByClassName("programming-slides");
if (slide_index > slides.length) { slide_index = 1 }
if (slide_index < 1) { slide_index = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.opacity = 0;
}
slides[slide_index - 1].style.opacity = 1;
for (var i = 0; i < slides.length; i++) {
// If the slide is not visible, set its pointer-events to none
if (slides[i].style.opacity === '0') {
slides[i].style.pointerEvents = 'none';
} else {
// Otherwise, set its pointer-events to auto
slides[i].style.pointerEvents = 'auto';
}
}
}
var next = document.getElementById('programming-next');
next.addEventListener('click', nextSlide);
var prev = document.getElementById('programming-prev');
prev.addEventListener('click', prevslide);
})
Started to fix it by adding in z index to the code in the slides js and also to some other css elements that fixed the overlapping problem and now all the features are working
for (var i = 0; i < slides.length; i++) {
// If the slide is not visible, set its pointer-events to none
if (slides[i].style.opacity === '0') {
slides[i].style.pointerEvents = 'none';
slides[i].style.zIndex = 0;
} else {
// Otherwise, set its pointer-events to auto
slides[i].style.pointerEvents = 'auto';
slides[i].style.zIndex = 1;
}
Related
I have tried so many method to stop this error but nothing seems to work, here is a link to my codepen: https://codepen.io/T_manuel/pen/PoKMYVx
when the page loads, I call the function but when I resize the page, Javascript seems to do the new logic also with previous logics...
const mediaQuery_1 = '(max-width:601px)';
const mediaQueryList1 = window.matchMedia(mediaQuery_1);
/carousel parent div -- to dynamically load the carousel items
// define media queries
const mediaQuery_1 = '(max-width:601px)';
// add matchMedia
const mediaQueryList1 = window.matchMedia(mediaQuery_1);
if (mediaQueryList1.matches) {
carouselFunc(); // dynamic loaded pictures
LeftArrow.classList.add("displayNone");
let indexOfImg = 0; //to be accessed for the carousel, index for first image
let endofImg = 3; //carousel use, index for next image to be displayed
otherCarouselLogic(indexOfImg, endofImg);
if (carouselPics.length > 3) {
for (i = 3; i < carouselPics.length; i++) {
carouselPics[i].classList.add("displayNone");
}
RightArrow.classList.remove("displayNone");
} else {
RightArrow.classList.add("displayNone");
}
}
else {
carouselFunc(); //dynamic loaded Pictures
LeftArrow.classList.add("displayNone");
let IndexOfImg = 0; //to be accessed for the carousel, index for first image
let EndOfImg = 4; //carousel use, index for next image to be displayed
otherCarouselLogic(IndexOfImg, EndOfImg);
if (carouselPics.length > 3) {
for (i = 4; i < carouselPics.length; i++) {
carouselPics[i].classList.add("displayNone");
}
}
// not to display carousel arrows if pics can be showed at once
if (carouselPics.length <= 4) {
RightArrow.classList.add("displayNone");
}
}
// add event Listener
mediaQueryList1.addEventListener("change", function carouselUx(event) {
if(event.matches) {
document.getElementById("carous").innerHTML = "";
carouselFunc(); //contains dynamic loaded pictures
LeftArrow.classList.add("displayNone");
let indexOfImg = 0; //to be accessed for the carousel, index for first image
let endofImg = 3; //carousel use, index for next image to be displayed
otherCarouselLogic(indexOfImg, endofImg);
if (carouselPics.length > 3) {
for (i = 3; i < carouselPics.length; i++) {
carouselPics[i].classList.add("displayNone");
}
RightArrow.classList.remove("displayNone");
} else {
RightArrow.classList.add("displayNone");
}
}
else {
document.getElementById("carous").innerHTML = "";
carouselFunc();
LeftArrow.classList.add("displayNone");
let IndexOfImg = 0; //to be accessed for the carousel, index for first image
let EndOfImg = 4; //carousel use, index for next image to be displayed
otherCarouselLogic(IndexOfImg, EndOfImg);
if (carouselPics.length > 3) {
for (i = 4; i < carouselPics.length; i++) {
carouselPics[i].classList.add("displayNone");
}
}
// not to display carousel arrows if pics can be showed at once
if (carouselPics.length <= 4) {
RightArrow.classList.add("displayNone");
}
}
})
function otherCarouselLogic(cpF, newImg) {
/* carousel code ends here */
carouselBtn.forEach(function (btns) {
btns.addEventListener("click", function (e) {
clickedArrow = e.currentTarget.id;
if (clickedArrow === "right") {
console.log(newImg);
carouselPics[cpF].classList.add("displayNone");
carouselPics[newImg].classList.remove("displayNone");
LeftArrow.classList.remove("displayNone");
cpF += 1;
newImg += 1;
}
if (clickedArrow === "left") {
cpF -= 1;
newImg -= 1;
carouselPics[newImg].classList.add("displayNone");
carouselPics[cpF].classList.remove("displayNone");
RightArrow.classList.remove("displayNone");
console.log(newImg);
}
// ux purpose, when we get to the last pics in the carousel, the right arrow is hidden
diffR = carouselPics.length - newImg;
// diffL
if (diffR === 0) {
RightArrow.classList.add("displayNone");
}
if (cpF === 0) {
LeftArrow.classList.add("displayNone");
}
});
});
/* carousel code ends here */
}
upon load,
newImg is set to 4 and all seems to work
after resize, it is set to either 3 or 4 depending on the logic, but instead of incrementing that value alone, it gives value for the load and also for the resize.
I am trying to fix some stuff left over by the front-end developer and I am not expert in javascript (not at all).
On our staging system we use a hamburger menu and for reasons unknown to me while the hamburger menu toggles perfectly on opening, upon first closing it doesn't revert back from an "X" to the "Hamburger" subsequent changes instead work flawlessly just that the state is inverted ("X" where there should be a hamburger and hamburger where there should be an "X").
So I did it half right (but only half :D).
My rather not beautyful code:
<script type="text/javascript">
var headerMobile = document.getElementsByClassName('header-mobile')[0];
var openMobileMenuTrigger = document.getElementById('open-mobile-menu');
var closeMobileMenuTrigger = document.getElementById('close-mobile-menu');
var mobileMainMenu = document.getElementById('header-mobile_menu');
var submenus = document.getElementsByClassName('header-mobile_submenu');
var openMobileSubMenuTriggers = document.getElementsByClassName('open-mobile-submenu');
var closeMobileSubMenuTriggers = document.getElementsByClassName('close-mobile-submenu');
var hamburgerHeader = document.getElementById('open-mobile-menu');
var openSearchTrigger = document.getElementById('open-search-field')
function toggleHamburger(){
if (hamburgerHeader.classList.contains('is-active')){
hamburgerHeader.classList.remove('is-active');
} else {
hamburgerHeader.classList.add('is-active');
}
}
function toggleMobileMenu(){
if(mobileMainMenu.classList.contains('is-active') !== true){
if (openSearchTrigger)
{openSearchTrigger.classList.remove('is-active')}
mobileMainMenu.classList.add('is-active');
headerMobile.classList.add('is-active'); //remove shadow
document.getElementsByTagName('html')[0].classList.add('noscroll')// no scroll for html
document.getElementsByTagName('body')[0].classList.add('noscroll')// no scroll for body
} else {
setTimeout(
function(){
// headerMobile.classList.remove('is-active'); // NO MORE SHADOW IF WE KEEP ACTIVE SEARCH MENU
for (var i = submenus.length - 1; i >= 0; i--) {
submenus[i].classList.remove('is-active');
}
},
400
)
if(openSearchTrigger){
openSearchTrigger.classList.add('is-active')
}
hamburgerHeader.classList.remove('is-active')
mobileMainMenu.classList.remove('is-active')
document.getElementsByTagName('html')[0].classList.remove('noscroll')// no scroll for html
document.getElementsByTagName('body')[0].classList.remove('noscroll')// no scroll for body
}
}
function openMobileSubmenu(event){
var submenuId = event.currentTarget.getAttribute('data-submenu');
document.getElementById('header-mobile_submenu-' + submenuId).classList.add('is-active');
}
function closeMobileSubmenu(){
for (var i = submenus.length - 1; i >= 0; i--) {
submenus[i].classList.remove('is-active');
}
}
if (openSearchTrigger){
openSearchTrigger.addEventListener('click', toggleMobileMenu);
}
openMobileMenuTrigger.addEventListener('click', toggleMobileMenu);
// closeMobileMenuTrigger.addEventListener('click', closeMobileMenu);
hamburgerHeader.addEventListener('click', toggleHamburger);
for (var i = openMobileSubMenuTriggers.length - 1; i >= 0; i--) {
openMobileSubMenuTriggers[i].addEventListener('click', openMobileSubmenu);
}
for (var i = closeMobileSubMenuTriggers.length - 1; i >= 0; i--) {
closeMobileSubMenuTriggers[i].addEventListener('click', closeMobileSubmenu);
}
Are you able explain this simple image slider code line by line?
I'm particularly interested in where the n and no values come from in currentSlide(no) + plusSlides(n).
var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");
var interval;
var pauseButton = document.getElementById("pause");
showSlides();
playSlideshow();
function showSlides() {
var i;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
slides[slideIndex - 1].style.display = "block";
}
// Manual control
function currentSlide(no) {
var i;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex = no;
slides[no - 1].style.display = "block";
}
function plusSlides(n) {
var newslideIndex = slideIndex + n;
if (newslideIndex < 6 && newslideIndex > 0) {
currentSlide(newslideIndex);
}
}
Edited to add rest of the code.
// Pause
var playing = true;
function pauseSlideshow() {
var pauseButton = document.getElementById("pause");
pauseButton.innerHTML = "▸";
playing = false;
clearInterval(interval);
}
function playSlideshow() {
pauseButton.innerHTML = "⏸";
playing = true;
interval = setInterval(showSlides, 5000);
}
pauseButton.onclick = function () {
if (playing) {
pauseSlideshow();
} else {
playSlideshow();
}
};
As per the comments, I have added additional code.
Yes, can do!
The first function showSlides is called. It first makes every element with the mySlides class invisible (basically hides all your slides). Then it increments the slide index and checks to see if the index is over the total amount of slides so it can start from the beginning again. Finally it shows the slide that the index is referring to.
The currentSlide function sets the active slide to the index provided in the no argument. First it hides all the slides and then sets the new slide index to what no is and then shows that slide.
Finally plusSlides goes forward (or backwards if using a negative number) n slides. The if statement checks if the index is between 1 and 5. If it is the slide that corresponds with the new index is shown.
A few notes
for loops can be written without a variable declaration preceding it like this
for(let x = 0; x < 100; x++){
console.log(x);
}
In your plusSides function, you check for a specific range, but you could base it off of the amount of slides with slides.length like in showSlides. Also, I would recommend making sure that if the index does happen to fall out of this range to set the index to a default value.
if (newslideIndex < slides.length && newslideIndex > 0) {
currentSlide(newslideIndex);
} else {
currentSlide(1);
}
That is all!
Working on building a library, trying to put in a fading image slider, it shows the first image, but then when it tries to change I get TypeError: document.querySelector(...) is null. Any help would be great!
export let styl = (function() {
let slideIndex = 0;
return {
simpleSlideShow: function() {
//automatic Slider
let i;
let slides = document.getElementsByClassName("mySlides");
console.log("Image change");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
slides[slideIndex - 1].style.display = "block";
},
slideShowImageSetup: function(timeDelay, id, images) {
//Building HTML with given array of images
let i;
for (i = 0; i < images.length; i++) {
let elem = document.createElement("img");
elem.setAttribute("alt", "image");
elem.setAttribute("src", images[i]);
elem.setAttribute("class", "mySlides");
document.querySelector(id).appendChild(elem);
}
setTimeout(styl.simpleSlideShow, 1);
setInterval(styl.simpleSlideShow, timeDelay);
return 1;
},
fadingSlideShow: function(id, images) {
document.querySelector(id).className += "fadeOut";
setTimeout(function() {
document.querySelector(id).src = images[slideIndex];
document.querySelector(id).className = "";
slideIndex++;
if (slideIndex == images.length) {
slideIndex = 0;
}
setTimeout(styl.fadingSlideShow(id, images), 3000);
}, 1000);
},
};
})();
Where I'm calling the function
let images = [
"https://cdn141.picsart.com/297231911148201.jpg?c256x256",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQIfOEjoaYJNDHGmdgRa8EQp50VCicpK0R_0QpZLftE2zzgJky"
];
styl.fadingSlideShow("#slider", images);
<img id="slider"></img>
css that makes the fade effect
#slider {
opacity: 1;
transition: opacity 3s;
}
#slider.fadeOut {
opacity: 0;
}
Your second setTimeout is not sending in the id or images to styl.fadingSlideShow.
setTimeout(function(){styl.fadingSlideShow(id, images)}, 3000);
Also, put the second setTimeout inside the first one.
I have a function attached to a scroll-down event which adds a class one by one to an array of items. I want to now make a function that does the opposite and attach it to a scroll up event. Any help will be met with great praise!
I made a function that when the scroll up event is fired it removes all the classes from the array, but I want to remove them one by one.
var slide = document.querySelectorAll('div.about-slide');
This is the function im using to add the classes to the elements one by one
function addOnScroll() {
for ( var i = 0; i < slide.length; i++){
if(slide[i].classList.contains('scroll')){
continue;
}else{
slide[i].classList.add('scroll');
break;
}
}
};
This is fired on a scroll up event, it removes all the added class from the code above. But I want it to remove the classes one by one.
function removeOnScroll() {
for ( var i = 0; i < slide.length; i++){
slide[i].classList.remove('scroll')
}
};
The mouse scroll event I'm using.
function onDocumentMouseScroll( event ) {
console.log(event);
if( Date.now() - lastMouseWheelStep > 600 ) {
lastMouseWheelStep = Date.now();
var delta = event.detail || -event.wheelDelta;
if( delta > 0 ) {
navigateNext();
addOnScroll();
moveBackground();
}
else if( delta < 0 ) {
navigatePrev();
removeOnScroll();
}
}
}
So, why not do the opposite of what you do on the scroll down ?
function addOnScroll() {
for (var i = 0; i < slide.length; i++) {
if (slide[i].classList.contains('scroll')) {
continue;
} else {
slide[i].classList.add('scroll');
break;
}
}
};
function removeOnScroll() {
for (var i = slide.length - 1; i >= 0; i--) {
if (!slide[i].classList.contains('scroll')) {
continue;
} else {
slide[i].classList.remove('scroll');
break;
}
}
};
However, to simplify your code you could just do a new selection each time
function addOnScroll() {
var next = document.querySelector('div.about-slide:not(.scroll)');
if (next)
next.classList.add('scroll');
};
function removeOnScroll() {
var all = document.querySelectorAll('div.about-slide.scroll'),
last = all[all.length - 1]
if (last)
last.classList.remove('scroll');
};
You can improve below code and it will help updating class one by one Fiddle.
// For Chrome
window.addEventListener('mousewheel', mouseWheelEvent);
// For Firefox
window.addEventListener('DOMMouseScroll', mouseWheelEvent);
function mouseWheelEvent(e) {
var slide = document.getElementsByClassName("about-slide");
var bScroll = document.documentElement.scrollTop;
for (var i = 0; i < slide.length; i++) {
var sHeight = slide[i].offsetHeight;
var offsets = slide[i].offsetTop;
if (bScroll > offsets && bScroll < offsets + sHeight) {
slide[i].classList.add('scroll');
} else {
slide[i].classList.remove('scroll');
}
}
}