Local Storage, and how to delay div visibility - javascript

I am using localstorage to show a div only once, and although the code it works very well, I would like to know how I can delay the visibility of this div ( #alert ) for 1 - 2 seconds (the first time the visitor is shown), and then do a fade in, so that it does not appear suddenly.
My code:
const showMsg = localStorage.getItem('showMsg');
if(showMsg === 'false'){
$('#alert').hide();
}
$('.closebtn').on('click', function(){
$('#alert').fadeOut('slow');
localStorage.setItem('showMsg', 'false');
});
You can run the demo here:
https://jsfiddle.net/0966x2dw/7/
My problem has a solution?
Thanks.
EDIT:
Ops, right. I used CSS Transitions on my #alert div, and now it's much better.
Thanks.
https://jsfiddle.net/0966x2dw/23/

First add "display: none;" to your .alert. Then you can do something like:
if(showMsg === 'false'){
$('.alert').hide();
} else {
$('.alert').delay(1000).fadeIn();
}
This will cause your alert div to bump the content below it down. You may want to use slideDown() instead to make it less abrupt.
(Note that if your alert is critical to your users, you should adjust this to make sure it displays for the small % of people who have Javascript off.)

Related

Fading two images into each other on button click?

I'm trying to create a banner ad. There's a collapsed version that has an expand button and then the expanded, bigger version has a collapse button to go back to it's previous state. I've been asked to do this without using external javascript libraries and only using JS and CSS. I'm trying to do it with JS and CSS animations right now, but I'm having a hard time. Can anyone tell me what I'm doing wrong and help me get on the path to fixing my problem?
Here's a link to the code I have going now.
function fade(btnElement) {
if (btnElement.id == "expandButton"){
console.log("expand!");
document.getElementById("myImg").className = "fade-out";
document.getElementById("myImg").display = "none";
document.getElementById("myImg2").display = "block";
document.getElementById("myImg2").className = "fade-in";
console.log(document.getElementById("myImg2").display);
}
else {
document.getElementById("myImg2").className = "fade-in";
btnElement.value = "Fade Out";
}
}
I can get the first image to fade out, but I can't seem to get the second image to fade in...
EDIT: so, I have the images switching back and forth, but that was never really a problem for me... The problem I'm having is making them fade into each other via button click using CSS transitions. Can anyone help?
The reason the second image stays hidden is because document.getElementById("myImg2").display does nothing and the css rule you have written for #myImg2 remains. try instead document.getElementById("myImg2").style.display And you will the the element display block. Not sure about the fade though. That didn't seem to work appropriately.

html button for fadeIn and FadeOut

Hey guys I'm making my own website just for fun and the following code makes a list of shapes appear. Does anyone know how I could incorporate another button instead of the fadeOut code to make it so that when I click another button, a "hide menu" button. The shapes will fadeOut. This is because the code I have at the moment means that the shapes will fade out by themselves over time. Pls help!
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1aside").fadeIn(100);
$("#div2aside").fadeIn(200);
$("#div3aside").fadeIn(300);
$("#div4aside").fadeIn(400);
$("#div5aside").fadeIn(500);
$("#div6aside").fadeIn(600);
$("#div7aside").fadeIn(700);
$("#div8aside").fadeIn(800);
$("#div9aside").fadeIn(900);
$("#div10aside").fadeIn(1000);
$("#div11aside").fadeIn(1100);
$("#div12aside").fadeIn(1200);
$("#div13aside").fadeIn(1300);
$("#div14aside").fadeIn(1400);
$("#div15aside").fadeIn(1500);
$("#div16aside").fadeIn(1600);
$("#div17aside").fadeIn(1700);
$("#div18aside").fadeIn(1800);
$("#div1aside").fadeOut(17670);
$("#div2aside").fadeOut(17660);
$("#div3aside").fadeOut(17650);
$("#div4aside").fadeOut(17640);
$("#div5aside").fadeOut(17630);
$("#div6aside").fadeOut(17620);
$("#div7aside").fadeOut(17610);
$("#div8aside").fadeOut(17600);
$("#div9aside").fadeOut(17590);
$("#div10aside").fadeOut(17580);
$("#div11aside").fadeOut(17570);
$("#div12aside").fadeOut(17560);
$("#div13aside").fadeOut(17550);
$("#div14aside").fadeOut(17540);
$("#div15aside").fadeOut(17530);
$("#div16aside").fadeOut(17520);
$("#div17aside").fadeOut(17510);
$("#div18aside").fadeOut(17500);
$("section").fadeOut(0);
});
});
</script>
If I understood your question right, you should do a toggle, I find this the simpliest way to do that:
$(document).ready(function(){
var toggle = 0;
$("button").click(function(){
if (toggle === 0) {
$("#yourDivsToFadeIn").fadeIn(YourTimeToFadeIn);
toggle = 1;
}
else if (toggle === 1) {
$("#yourDivsToFadeOut").fadeOut(YourTimeToFadeOut);
toggle = 0;
}
});
});
EDIT: You also could use:
$(document).ready(function() {
$("button").click(function() {
$("#YourDivsIds").fadeToggle(YourTimeToToggleTheFade);
});
});
But I find the first way to do this better, because if you get to learn some more Javascript/jQuery, there arent always .toggle methods to toggle something. Then you better should learn - and get used to - the first method.
-But thats just my point of the view.
At first you need two buttons in your HTML:
<button id="infader">Fade all in</button>
<button id="outfader">Fade all out</button>
Then in your JS you first select all divs to fade with one jQuery selector and store them in a variable. It's faster, less to write and the attachment of the different fading times becomes easier.
// get all divs with an ID that ends with 'aside'
var asides = $("div[id$='aside']");
// get first button and attach the click-handler
$("#infader").click(function() {
// take all asides and use 'each() to execute a function on each of them
// keyword 'this' is one div-element, i is it's index in the collection
asides.each(function(i) {
// the divs gets a fading time depending on their index
// the first (i == 0) gets 100ms, the last (i == 17) gets 1800ms
$(this).stop().fadeIn((i + 1) * 100);
});
});
// get second button similar
$("#outfader").click(function() {
asides.each(function(i) {
$(this).stop().fadeOut((17 - i) * 10 + 17500);
});
});
What does the .stop() before fade? Lets say you have started a fadeIn and then click the out-button before it has completed. Now the fadeIn ist stopped and the fadeOut begins immediately. If you want instead the fadeIn finishing completely before fadeOut runs just remove the .stop().
Its easy to change the fade-times to fit your needs.

jQuery functions run in background?

I have a page with a lot of elements (~1,500) of the same class on it, and when I execute
$(".pickrow").addClass("vis");
it takes a second or two for the page to reflect the changes. So that users aren't thinking the page was stuck, I'd like to pop-up a small message using:
$("#msgDiv").show();
$(".pickrow").addClass("vis");
$("#msgDiv").hide();
But the msgDiv never shows. If I remove the $("#msgDiv").hide(); the msgDiv appears simultaneously with the application of the added class (after the 1 or 2 seconds it took to add the class).
It seems like the jQuery functions get pooled and run together without any screen updates until they have all completed.
How can I get the msgDiv to appear while the $(".pickrow").addClass("vis"); is processing?
Here's a Demo
You probably want to delay the hide by a few seconds.
$("#msgDiv").show();
$(".pickrow").addClass("vis");
setTimeout(function(){ $("#msgDiv").hide(); },2000);
Or using jQuery's animations queue for timing:
$("#msgDiv").show();
$(".pickrow").addClass("vis");
$("#msgDiv").delay(2000).hide(1); //must make it at least 1 ms to go into the queue
You can go with this approach also
Working DEMO
$(document).on("click",".btn",function(){
$(".msg").show("fast",function(){
$(".pickrow").addClass("vis");
var interval = setInterval(function(){
var picLength = $(".pickrow").length;
var visLength = $(".vis").length;
if(picLength == visLength){
clearInterval(interval);
$(".msg").hide();
}
},500);
});
});
I think if you simplify the code, you would find that it is much more responsive and probably not require the loading message. In your code, you check every single element in an if statement. Rather than do that, you can check one value, then update all of them accordingly.
Here's a demo: http://jsfiddle.net/jme11/3A4qU/
I made a single change to your HTML to set the initial value of the input button to "Show Details". Then in the following code, you can just check whether the value is Show Details and remove the class that hides the .pickrow and update the value of the button to be "Hide Details" (which is better feedback for the user anyway). Likewise, you can add the .hid class to the pickrow if the button value is not "Show Details". This will also normalize all of the classes regardless if some were individually hidden or shown.
$('#showhide').on('click', function(){
if ($(this).val() === 'Show Details') {
$('.pickrow').removeClass('hid');
$(this).val('Hide Details');
} else {
$('.pickrow').addClass('hid');
$(this).val('Show Details');
}
});

jquery menu slideshow hover function loading too fast

I am currently making a website that includes a menu navigation almost identical to the one found at fotopunch.com only instead of pointing down it points up. Anyways, I wrote the code using jquery/javascript for the menu and it works but I am wondering if there is a way to make it so that the hover function doesn't take effect for a specified amount of time. That way when you hover quickly over an item it doesn't cause the page to load unnecessarily. If anyone has any suggestions I would greatly appreciate it.
Below is a copy of part of my code to create the menu navigation. Another issue I am having is if you hover over too many navigation items in a row the arrow lags behind. I am hoping that by creating a wait time before the hover function takes effect that it would mostly correct this issue.
$("div#menu .reps").hover(function() {
if(current_slide != "reps"){
$(".arrow").animate({"left":"135px"});//move the arrow
if(current_slide == "clients"){
$(".clients_display").stop(true, true).fadeOut().hide();
$(".reps_display").fadeIn().show();
current_slide = "reps";
}
else if(current_slide == "services"){
$(".services_display").stop(true, true).fadeOut().hide();
$(".reps_display").fadeIn().show();
current_slide = "reps";
}
else{
$(".training_display").stop(true, true).fadeOut().hide();
$(".reps_display").fadeIn().show();
current_slide = "reps";
}
}
});
I think that something that you can do, although there is probably a better way is:
declare a function where you place all the code with a condition:
function hoverFunc(option)
{
if($(option).is(':hover'))
{
all the code to show the menu
}
}
And on the over function you do:
$("div#menu .reps").hover(function() {
setTimeout("hoverFunc('"+getOptionName+"')",milliseconds);
});
The idea is: when over, set a timeout and when the timeout is reached, check if the mouse is over and then do whatever you want, the hardest point is to pass the reference to the function, but you can pass the name of the item just getting it from html or a rel attribute.
But if you dont need the reference it is really ease, just call the function and check the element.
There is another option that maybe is more interesting for you. You can add a delay to the all the effects and add a stop(true) before, this way, if the user change the tag fast, the events will be cancelled, but it will change if the user goes through an option fast and goes out of the menu.
You an use the delay on some of your calls such as:
$(".reps_display").delay(100).fadeIn().show();
Or you can make some of the show and hide have a longer duration: show(2000) for instance.

Toggle display of divs 500ms apart

What I want to do:
Using three divs occupying the same dimensions, all display: none by default;
load 2 images into second div
show first div for 500ms
show second div for 500ms
then show 3rd div.
Seem simple enough?
The weird thing is that like 15% of the time it's like it appears to wait on the first div and display it longer, then the second div will never be seen, appearing to go directly to the third div.
html:
<div id="div1">...</div>
<div id="div2"><div id="img1"></div><div id="img2"></div></div>
<div id="div3">...</div>
Attempt #1:
var focus_length = 500;
var stimuli_length = 500;
// dummy values
var newimg1 = 'https://www.google.com/intl/en_com/images/srpr/logo3w.png';
var newimg2 = 'https://www.google.com/intl/en_com/images/srpr/logo3w.png';
console.log("step 1");
$("#div1").show();
$("#img1, #img2").empty();
$("#img1").append($(document.createElement('img')).attr('src', newimg1));
$("#img2").append($(document.createElement('img')).attr('src', newimg2));
window.setTimeout(
function () {
console.log("step 2");
$('#div1').hide();
$('#div2').show();
}, focus_length);
window.setTimeout(function () {
console.log("step 3");
$('#div2').hide();
$('#div3').show();
}, focus_length + stimuli_length);
Second variant (same apparent behavior):
console.log("step 1");
$("#div1").show();
$("#img1, #img2").empty();
$("#img1").append($(document.createElement('img')).attr('src', newimg1));
$("#img2").append($(document.createElement('img')).attr('src', newimg2));
window.setTimeout(
function () {
console.log("step 2");
$('#div1').hide();
$('#div2').show();
window.setTimeout(function () {
console.log("step 3");
$('#div2').hide();
$('#div3').show();
}, stimuli_length);
}, focus_length);
I've also tried setting opacity=1 or 0 rather than using jquery show/hide, with the same result.
What's really weird is that even when experiencing this issue the timings on the 3 console.log() messages are still 500ms apart! So it's like it's like javascript is calling it correctly but the browser just doesn't bother to actually show the redraw. Even stranger this happens on both Chrome and Safari.
update
I tried setting stimuli_length to 1000 above. With this change it will sometimes appear to lag a bit on the first div and show the second div for a smaller amount of time, but does not appear to ever completely skip it. 500ms is a strict design requirement, however.
Maybe there's something here with the dynamic appending of your images. Even if you show the div, if the images didn't have time to load, it will look exactly the same as if it was never shown.
Have you tried changing your delay for something like 10 seconds to be sure (or almost) that the images had time to load?
Adding $("#div2, #div3").hide(); after you show the first div makes it work for me in this jsfiddle.
Why don't you use
('#div1').show(timeinmiliseconds);
It could solve your problem and also use callback for one after another
like
('#div1').show(timeinmiliseconds,('#div2').show(timeinmiliseconds, ('#div3').show(timeinmiliseconds);););

Categories

Resources