Slide show with JavaScript - javascript

I wrote this line of code to animate the pictures on my webpage:
var SlideShow = function (container) {
this.images = [];
this.curImage = 0;
for (i = 0; i < container.childElementCount; i++) {
this.images.push(container.children[i]);
this.images[i].style.display = "none";
}
var nextSlide = function(){
for (var i = 0; i < this.images.length; i++) {
this.images[i].style.display = "none";
}
this.images[this.curImage].style.display = "block";
this.curImage++;
if (this.curImage >= this.images.length) {
this.curImage = 0;
}
window.setTimeout(nextSlide.bind(this), 3000);
};
nextSlide.call(this);
};
SlideShow(document.getElementById("testslide"));
The slide show works, pictures change but the style is boring. I want it to either slide in from the right to the left or fade in or something similar, any style at all other than just changing. How do I achieve this?

Related

Div not showing when onClick Function runs

I wanted to make a specific form show and the other forms disappear when I click on one of four dropdown buttons. When I tested the code, no from is showing when I clicked on a button.
Here is my javascript code:
function showClass(className)
{
var allItems = document.getElementsByClassName('change-form');
for (var i = 0; i < allItems.length; i++)
{
allItems[i].style.display = "none";
}
var formItems = document.getElementsByClassName(className);
for (var i = 0; i < formItems.length; i++)
{
formItems[i].style.display = "block";
}
}
It shows the form if I remove the top for loop.
Edit: Sorry guys I made a typo
Your code is going in and hiding all the items and then showing them right away. What you want to do is split the hide and show into different functions to trigger them at different times.
function showClass(className)
{
var formItems = document.getElementsByClassName(className);
for (var i = 0; i < formItems.length; i++)
{
formItems[i].style.display = "block";
}
}
function hideClass(className){
var allItems = document.getElementsByClassName(className);
for (var i = 0; i < allItems.length; i++)
{
allItems[i].style.display = "none";
}
}
If you want to be able to swap them with one function you could use this:
function swapHide(className){
var firstItem = document.getElementsByClassName(className)[0];
var isDisplayed = firstItem.style.display == "block"
if(isDisplayed){
hideClass(className);
}else{
showClass(className)
}
}

Slideshow Troubleshooting (Timer & Animation)

I am trying to create a slideshow completely from scratch using html, css and plain javascript but I can't figure out what to do so that when I click one of the slideshow indicators the setInterval() resets its timer (in order to be able to change slide without it directly switching to the next one because there is, for example, only 1 sec left)
I have tried to reset the timer with clearInterval() and then reactivating the setInterval() but when I then click on one of the slideshow indicators the slides start changing at random moments (they don't follow the 6000ms timer of the SetInterval() for some reason).
var slides = document.querySelectorAll(".slide");
var dots = document.querySelectorAll(".dot");
function removeClass() {
for (var i = 0; i < slides.length; i++) {
slides[i].classList.remove('active');
}
}
function removeNext() {
for (var i = 0; i < slides.length; i++) {
slides[i].classList.remove('next');
}
}
function slideshow() {
currentSlide = document.querySelector(".active");
nextSlide = currentSlide.nextElementSibling;
if (nextSlide != null) {
removeClass();
nextSlide.classList.add('next');
nextSlide.classList.add('active');
} else {
removeClass();
slides[0].classList.add('next');
slides[0].classList.add('active');
}
removeNext();
}
var slideDelay = setInterval(slideshow, 6000);
document.addEventListener("click", function(event){
if (event.target.className == "dot") {
removeClass();
var dotAttrValue = event.target.getAttribute('data-slide-to');
slides[dotAttrValue-1].classList.add('active');
clearInterval(slideDelay);
var slideDelay = setInterval(slideshow, 6000);
}
});
Having two var declarations creates two separate intervals. Just get rid of the second one and you should be good to go.
var slides = document.querySelectorAll(".slide");
var dots = document.querySelectorAll(".dot");
function removeClass() {
for (var i = 0; i < slides.length; i++) {
slides[i].classList.remove('active');
}
}
function removeNext() {
for (var i = 0; i < slides.length; i++) {
slides[i].classList.remove('next');
}
}
function slideshow() {
currentSlide = document.querySelector(".active");
nextSlide = currentSlide.nextElementSibling;
if (nextSlide != null) {
removeClass();
nextSlide.classList.add('next');
nextSlide.classList.add('active');
} else {
removeClass();
slides[0].classList.add('next');
slides[0].classList.add('active');
}
removeNext();
}
var slideDelay = setInterval(slideshow, 6000);
document.addEventListener("click", function (event) {
if (event.target.className == "dot") {
removeClass();
var dotAttrValue = event.target.getAttribute('data-slide-to');
slides[dotAttrValue - 1].classList.add('active');
clearInterval(slideDelay);
slideDelay = setInterval(slideshow, 6000);//Var removed from here.
}
});

Toggle multiple css classes on div with javascript

I have a problem to toggle between 4 color classes.
I trying to change color everytime this function is used.
function changeBackground() {
var all = getSelected();
var blue = document.getElementsByClassName("blue");
for (var i = 0; i < all.length; i++) {
all[i].classList.add("green");
all[i].classList.remove("blue");
}
var red = document.getElementsByClassName("red");
for (var i = 0; i < red.length; i++) {
all[i].classList.add("blue");
all[i].classList.remove("red");
}
var yellow = document.getElementsByClassName("yellow");
for (var i = 0; i < yellow.length; i++) {
all[i].classList.add("red");
all[i].classList.remove("yellow");
}
for (var i = 0; i < all.length; i++) {
all[i].classList.add("yellow");
all[i].classList.remove("green");
}
}
getSelected returns document.getElementsByClassName("selected");
and make sure only divs who are selected do change background.
Html looks like this: <div id="box1" class="box center green size200"></div>
Works well untill it comes to blue->green and the classes won't be removed.
How do i solve this?
Please check this https://jsfiddle.net/maflorezp/1u3xjxaq/1/
You have some errors walking the elements and you need validate class before change
function changeBackground() {
var all = getSelected();
for (var i = 0; i < all.length; i++) {
var color = all[i].classList;
if(color.contains("blue")){
all[i].classList.add("green");
all[i].classList.remove("blue");
} else if(color.contains("red")){
all[i].classList.add("blue");
all[i].classList.remove("red");
} else if(color.contains("yellow")){
all[i].classList.add("red");
all[i].classList.remove("yellow");
} else if(color.contains("green")){
all[i].classList.add("yellow");
all[i].classList.remove("green");
}
}
}
I see a few issues with your code:
1- You loop on all of the boxes for each color. You should replace
for (var i = 0; i < blue.length; i++) {
all[i].classList.add("green");
all[i].classList.remove("blue");
}
by
for (var i = 0; i < blue.length; i++) {
blue[i].classList.add("green");
blue[i].classList.remove("blue");
}
2- You should select all your divs before making any modification, to make sure you only select the one that were that color before starting the function.
var blue = document.getElementsByClassName("blue");
var red = document.getElementsByClassName("red");
var yellow = document.getElementsByClassName("yellow");
var green = document.getElementsByClassName("green");
3- You currently use getSelected to get all the selected divs but then you run the code on every element of the document.
I think instead of using 4 loops, you should only create one and check the class for each elemnts of all, it would resolve a lot of you issues. Something like:
function changeBackground() {
var all = getSelected();
for (var i = 0; i < all.length; i++) {
var colorBlue = all[i].classList.contains("blue")
var colorRed = all[i].classList.contains("red")
var colorGreen = all[i].classList.contains("greed")
var colorYellow = all[i].classList.contains("yellow")
if(colorBlue){
all[i].classList.add("green");
all[i].classList.remove("blue");
}
//check other colors here the same way
}
}

matchMedia / Javascript Media Query Issue

I created this function to handle the toggle for my mobile nav.
const mobileNav = document.getElementById('mobile-nav');
let tabs = document.getElementsByClassName('nav_tabs');
//nav toggle control
mobileNav.onclick = (event) => {
event.preventDefault();
for(let i = 0; i < tabs.length; i++) {
if(tabs[i].style.display === "block"){
tabs[i].style.display = "none";
} else {
tabs[i].style.display = "block";
}
}
};
It's working on great on mobile. The problem is when I resize, the toggle is still set to display none and the toggled menu options are not visible. I have tried using this JS Media Query to reset the display block based on a min-width of 786px but it is not reseting the menu.
// media query event handler
if (matchMedia) {
const dsktp = window.matchMedia("(min-width: 768px)");
dsktp.addListener(WidthChange);
WidthChange(dsktp);
}
function WidthChange(elem) {
for(let i = 0; i < elem.length; i++) {
tabs[i].style.display = "block";
}
}
Here's a codepen of the problem.
Your code does not work because of this code (pay attention to the comments):
if (matchMedia) {
const dsktp = window.matchMedia("(min-width: 768px)");
dsktp.addListener(WidthChange); // <-- add function as handler
WidthChange(dsktp);
}
function WidthChange(elem) { // elem argument it is not the dom elements here
for(let i = 0; i < elem.length; i++) {
tabs[i].style.display = "block";
}
}
So you should rewrite your code this way:
if (matchMedia) {
const dsktp = window.matchMedia("(min-width: 768px)");
dsktp.addListener(WidthChange);
WidthChange(dsktp);
}
function WidthChange(mediaQueryEvent) {
for(let i = 0; i < tabs.length; i++) {
tabs[i].style.display = mediaQueryEvent.matches ? "block" : "none";
}
}
Check my fork of your pen.

How to ignore an event in javascript?

So, I'm new to javascript.
My code is the following, it is based on a xaml file with a canvas and a couple of borders in it:
var defaultPage = null;
var aantalKliks;
var correcteBorders;
var incorrecteBorders;
var geenAntwBorders;
function onLoaded() {
defaultPage = document.getElementById('DefaultPage');
alert('In onloaded van Default.xaml.');
aantalKliks = 0;
aantalBorderKliks = 0;
correcteBorders = new Array();
for (var i = 0; i < 3; i++) {
correcteBorders[i] = defaultPage.content.findName('CorrecteBorder' + i);
}
incorrecteBorders = new Array();
for (var i = 0; i < 3; i++) {
incorrecteBorders[i] = defaultPage.content.findName('IncorrecteBorder' + i);
}
geenAntwBorders = new Array();
for (var i = 0; i < 3; i++) {
geenAntwBorders[i] = defaultPage.content.findName('GeenAntwBorder' + i);
}
}
function OnCanvasClicked() {
if (aantalKliks == 2) {
aantalKliks = 0;
}
if (aantalKliks == 0) {
for (var i = 0; i < correcteBorders.length; i++) {
correcteBorders[i].Visibility = 'Visible';
}
for (var i = 0; i < incorrecteBorders.length; i++) {
incorrecteBorders[i].Visibility = 'Visible';
}
for (var i = 0; i < geenAntwBorders.length; i++) {
geenAntwBorders[i].Visibility = 'Visible';
}
} else if (aantalKliks == 1) {
for (var i = 0; i < correcteBorders.length; i++) {
correcteBorders[i].Visibility = 'Collapsed';
}
for (var i = 0; i < incorrecteBorders.length; i++) {
incorrecteBorders[i].Visibility = 'Collapsed';
}
for (var i = 0; i < geenAntwBorders.length; i++) {
geenAntwBorders[i].Visibility = 'Collapsed';
}
aantalKliks++;
}
function borderClicked(sender) {
for (var i = 0; i < correcteBorders.length; i++) {
correcteBorders[i].Visibility = 'Collapsed';
}
for (var i = 0; i < incorrecteBorders.length; i++) {
incorrecteBorders[i].Visibility = 'Collapsed';
}
for (var i = 0; i < geenAntwBorders.length; i++) {
geenAntwBorders[i].Visibility = 'Collapsed';
}
sender['Visibility'] = 'Visible';
}
The function OnCanvasClicked is triggered when I click anywhere in the canvas and makes all borders disappear/reappear. The function borderClicked is triggered when I click a specific border. The function borderClicked does trigger when I click a specific border, however the OnCanvasClicked function also gets executed right after, which causes an unwanted result.I think I need some way to ignore the OnCanvasClicked function if I click on a border, I did google this but to be honest I didn't really understand what they meant in most of the solutions, so I was hoping someone could explain it to me in a simple way what I need to do (and what I'm doing).
You need to set event.stopPropagation() when borderClicked function is fire
Try this which will prevent Javascript to further execution
event.preventDefault()
#Harshit is correct
You need to set event.stopPropagation() when borderClicked function is fire
I just wanted to add this link/sample which I found very usefull to understand bubbling
http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/ie9_event_phases.htm

Categories