I am trying to set a loader for the data loading section. but, I already have a loader for before loading full website data.
$(window).on("load", function () {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");
});`
And now I set this, to load the data section.
const npreloader = document.querySelector('.npreloader');
const fadeEffect = setInterval(() => {
// if we don't set opacity 1 in CSS, then
// it will be equal to "", that's why we
// check it
if (!npreloader.style.opacity) {
npreloader.style.opacity = 1;
}
if (npreloader.style.opacity > 0) {
npreloader.style.opacity -= 0.1;
} else {
clearInterval(fadeEffect);
}
}, 500);
window.addEventListener('load', ()=> fadeEffect);
Can I replace the event keyword "load" with any event? Because it overrides each other.
Related
The user clicks the map and it calls clickMap, the DIV#calculating is displayed, the map calcs are done and then in updateResults the DIV#calculating is hidden.
However the DIV is never shown on screen.
The console log shows
block 9775.199999996403
none 10517.899999998917
The delay between show and hide maybe from 100ms up to 5000ms, no matter what I never see the DIV.
function clickMap(e) {
if (myAStar.nodesPosition[e.offsetY][e.offsetX]) {
document.getElementById("calculating").style.display = "block";
console.log(document.getElementById("calculating").style.display, performance.now());
myAStar = new AStarPathFinder(mapW, mapH);
path = [];
myAStar.setStart(0, 0);
myAStar.setDestination(e.offsetX, e.offsetY);
myAStar.wh = document.getElementById('hWeight').value;
myAStar.loadMap(map);
findPath();
drawMap();
updateResults();
} else {
mapCanvas.classList.add("oops");
setTimeout(() => {
mapCanvas.classList.remove("oops");
}, 500);
}
}
function updateResults() {
document.getElementById("calculating").style.display = "none";
console.log(document.getElementById("calculating").style.display, performance.now());
}
I have a page with couple subpages in .html. On every page there is two "buttons" for language change. Is there any solution, that help me keep currently selected language after a page refresh or moving to another subsite?
This is my code:
// Language icons //
var polIco = $('.language_ico_container').find('img').first();
var engIco = $('.language_ico_container').find('img').last();
engIco.toggleClass('transparency');
function checkTransparency() {
engIco.click(function () {
$(this).toggleClass('transparency');
if (engIco.hasClass('transparency')) {
polIco.removeClass('transparency');
} else {
polIco.addClass('transparency');
}
});
polIco.click(function () {
$(this).toggleClass('transparency');
if (polIco.hasClass('transparency')) {
engIco.removeClass('transparency');
} else {
engIco.addClass('transparency');
}
});
};
// Call function checking transparency in language icons //
checkTransparency();
// English & Polish content selection //
var languagePL = $('.pl');
var languageEN = $('.eng');
languageEN.toggleClass('hidden');
function changeLanguage() {
engIco.click(function () {
languageEN.toggleClass('hidden');
languagePL.toggleClass('hidden');
});
polIco.click(function () {
languageEN.toggleClass('hidden');
languagePL.toggleClass('hidden');
});
};
// Call function changing content language
changeLanguage();
And CSS classes:
.hidden {
display: none;
}
.transparency {
opacity: 0.5;
}
LocalStorage can be a solution is used to save data across browser sessions..
You can implement your classes with session storage, every time you set transparency class you can add it to the local storage.
localStorage.setItem('class','transparency');
when you remove the class you can also remove it from the local storage
localStorage.removeItem('class');
And when the page is refreshed you can set the class from the localStorage
localStorage.getItem('class');
Its just an instant idea on which you can build own solution:
$.fn.toggleTransparency = function () {
if (localStorage[this] === undefined) {
localStorage[this] = true
} else {
localStorage[this] = !localStorage[this]
}
localStorage[this]
? this.addClass('transparency')
: this.removeClass('transparency')
}
// Usage:
$(selector).toggleTransparency()
I was able to find this solution:
var polIco = $('.language_ico_container').find('img').first();
var engIco = $('.language_ico_container').find('img').last();
// English content hidden on load //
engIco.addClass(localStorage.added);
engIco.on('click', function() {
switchEngTransparency();
});
function switchEngTransparency() {
if (localStorage.added != 'transparency') {
engIco.addClass('transparency', true);
localStorage.added = 'transparency';
} else {
engIco.addClass('transparency', false);
localStorage.added = '';
}
};
function deactivateOppositeIcon() {
if (!engIco.hasClass('transparency')) {
polIco.addClass('transparency');
} else {
polIco.removeClass('transparency');
}
};
deactivateOppositeIcon();
.transparency {
opacity: 0.5;
}
But the problem is - when i click on engIco the transparency is changing only after refreshing site or moving to another subsite. It's not changing immediately. Any ideas how to fix it?
I have a class of .header-is-active that is applied to the <body> tag when a user scrolls.
I would like an animation to be triggered when the class is added and then the animation to run in reverse when the class is removed.
Everything happens as expected except for the animation. I'm using jQuery and Greensock to make everything happen.
Here's what I currently have:
$(function() {
var body = $('body');
var trigger = $('.trigger');
var tween = TweenMax.to(trigger, 0.5, {css:{height: "100vh"},});
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
body.addClass('header-is-active');
tween();
} else {
body.removeClass('header-is-active');
}
});
});
The issue I have is the tweened value height: 100vh is being applied regardless with .header-is-active or not. Is there something missing?
At the end of your $(window).scroll() function, give this a shot:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
body.addClass('header-is-active');
tween();
} else {
body.removeClass('header-is-active');
}
// jQuery way
if(body.hasClass('header-is-active')) {
// Run animation
} else {
// Run reverse animation
}
// Non-jQuery way (just for reference)
var body = document.body;
if(body.classList.contains('header-is-active') {
// Run animation
} else {
// Run reverse animation
}
});
If it doesn't work, since it's running async, you can add a setTimeout() to the above so it's called after your function. It should look something like this
setTimeout(function() {
if(body.hasClass('header-is-active')) {
// run animation
} else {
// run reverse
}
}, 0);
I have been trying to create an image slider for html by changing the value of the image element, using a loop to go through each image and then returning to the original image.
However once it reaches the end of the loop it doesn't continue.
Here is my Js code:
window.onload = function() {
var x = 0
while(x<1000){
setTimeout(function() {
document.getElementById('carousel').src='img/header2.jpg';
setTimeout(function() {
document.getElementById('carousel').src='img/header3.jpg';
setTimeout(function() {
document.getElementById('carousel').src='img/header.jpg';
}, 5000);
}, 5000);
}, 5000);
x = x+1
}
}
I'd recommend you to not do while loop in this case. Just recall setTimeout when executed.
window.onload = function() {
/* Element */
var carousel = document.getElementById('carousel'),
/* Carousel current image */
cimage = 2,
/* Carousel source images */
csources = [
'img/header2.jpg',
'img/header3.jpg',
'img/header.jpg'
];
function changeCarouselImage() {
// Reset the current image if it's ultrapassing the length - 1
if(cimage >= 3) cimage = 0;
// Change the source image
carousel.src = csources[cimage ++];
// Re-call the function after 5s
setTimeout(changeCarouselImage, 5000);
}
setTimeout(changeCarouselImage, 5000);
};
The final function does not set another timeout, and thus the animation does not continue. Seperating into individual functions should help:
var carousel = document.getElementById('carousel');
function ani1() {
carousel.src = 'img/header.jpg';
window.setTimeout(ani2, 500);
}
function ani2() {
carousel.src = 'img/header2.jpg';
window.setTimeout(ani3, 500);
}
function ani3() {
carousel.src = 'img/header3.jpg';
window.setTimeout(ani1, 500);
}
window.onload = ani1;
I can't for the life of me see why my setInterval() function is only executing one time. I believe I am doing it right according to its usage. It's a slideshow script that takes a group of slides as part of a slideshow object called TheBand and changes slides using setInterval().
This is the timer:
current_band.obj_timer = window.setInterval(function () {
TheBand.nextSlide(current_band_id);
}, current_band.timer);
This is the nextSlide function:
nextSlide : function (band_id) {
var obj_band = TheBand.bands[band_id];
if (band_id == 0) {
console.log(obj_band.current_slide, obj_band.slide_count)
}
if (obj_band.current_slide + 1 >= obj_band.slide_count) {
new_slide = 0;
} else {
new_slide = obj_band.current_slide + 1;
}
TheBand.changeSlide(band_id, new_slide);
},
Then the changeSlide function:
changeSlide : function (band_id, slide_id) {
var obj_band = TheBand.bands[band_id];
if (slide_id != obj_band.current_slide) {
// Get the viewport width for display purposes
var slide_width = jQuery(obj_band.viewport).width();
// Set up the slide objects
var current_slide = jQuery(obj_band.slides[obj_band.current_slide]);
var new_slide = jQuery(obj_band.slides[slide_id]);
// Set the left value for the new slide and show it
new_slide.css('left', slide_width).width(slide_width).height(obj_band.max_height);
new_slide.show();
// Animate the slide transition
current_slide.animate({ left: -slide_width }, obj_band.transition_time);
new_slide.animate({ left: 0 }, obj_band.transition_time, 'swing');
if (new_slide.css('background-color') != current_slide.css('background-color')) {
jQuery(obj_band.back).animate({ backgroundColor : new_slide.css('background-color') }, obj_band.transition_time);
}
// Set the class for the nav buttons
jQuery(obj_band.nav_buttons[obj_band.current_slide]).removeClass('selected');
jQuery(obj_band.nav_buttons[slide_id]).addClass('selected');
// Run the slide javascript - be careful with this!
eval(obj_band.slide_script[obj_band.current_slide].unload);
eval(obj_band.slide_script[slide_id].load);
window.setTimeout(function () {
eval(obj_band.slide_script[slide_id].ready);
}, obj_band.transition_time);
// Set the current slide variable
obj_band.current_slide = slide_id;
// Set the correct Nav color
TheBand.setNavColor(band_id);
}
},
Seems simple enough, but I only get to the second slide!? No errors or warnings in console and if I watch the clear timer breakpoint it does show a clear timer event, but its not from this code... Please help?
P.S. The setInterval() timer does not break if I comment out the changeSlide function.