Develop Reference

Local Storage, and how to delay div visibility

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.)

how to execute jquery function after one another (and few more questions)

To explain the situation ,I am using both jquery and animate.css combined in order to bring about some animation part that i want to apply to my website.
http://lifeto.cafe24.com/xe/
I have a couple of questions in this post, and it needs fairly thorough understanding of the site that i have built.
Fist, If you go to the webstie I linked above and click on the menu that says '공지사항' on the bottom, an iframe src gets triggered by jquery attr.
And if you click on any of the image you can see on the board after that, the board content (#window_frame) slidesout to left and the new div (.window_board) slides in from the leftside.
but when you click on the image, notice the content of the board AND the .window_board disappear and appear AT THE SAME TIME.
what i want to achieve here is to have the #window_frame slides out first, and THEN, after it is done, have .window_board slides in.
and SECONDLY, when i click on the menu button that says '공지사항' from the point when the .window_board is still opened, i want the .window_board to slides back in, and have the content(#window_frame) comes back out.
I wonder if it's possible to achieve this only by using simple jquery events, as it needs to calculate when the #window_frame is opened or not.
here is the complete js for the board (iframe)
jQuery(document).ready(function(){
jQuery(document).on('click', '.item', function() {
jQuery('.loader_container', parent.document.body).show();
var url = jQuery(this).data('url');
jQuery('#window_board', parent.document.body).attr('src', 'url',200);
jQuery('#window_frame', parent.document.body).addClass('animated slideOutLeft');
jQuery('.window_board', parent.document.body).addClass('open animated slideInLeft');
jQuery('.loader_container', parent.document.body).hide();
});
});
and the main menu:
<a onclick="jQuery('#window_frame').attr('src',
'http://lifeto.cafe24.com{$val1['href']}',200),
jQuery('#window_frame').removeClass('animated slideOutLeft')" class="menu_a">MENU</a>

Your question not clear so much, but if i consider only your main question:
how to execute jquery function after one another
you can use promise().done() or .when() to execute a jquery function after another.
Example:
$('div').click(function(){
$(this).addClass('blah').promise().done(function(){
alert('class added!');
});
});
You can read more about it:
https://api.jquery.com/promise/

Make toggle link only effect box in the same parent

So I currently have two toggle boxes set up and there will be more soon, I'd like to keep the JS pretty simple and not have a new script for each area, but whenever I attempt to toggle in one place it applies the function to both other the toggle-content boxes I have set up.
In order to see both areas, open the first one and close it before opening the second so a product is added to the Recently Viewed box
http://www.coreytegeler.com/bolivares/shop/pablo-ribbed-winter-skully/
http://www.coreytegeler.com/bolivares/shop/salvador-crewneck-sweater-copy/
Here's what I have in place now:
$(window).load(function(){
$('.toggle-link').click(function(e){
$('.toggle-content').slideToggle();
e.preventDefault();
});
$(".toggle-link div").click(function()
{
$(".toggle-link div").toggle();
});
});
I tried using $(this).find('.toggle-content').slideToggle(); but still no luck.
I know this is a pretty easy fix but just can't figure it out.
Any help would be great!

$(document).ready(function(){
$('.toggle-link').click(function(e){
$(this).closest("ul").children('.toggle-content').slideToggle();
$(this).children('div').toggle();
});
});

Fading in a div after a delay

I'm new to javascript so I'm struggling with the basics...
I'm using this delay to bring in a div but i want to fade the div in as part of this function (not just have the box appear)
function show() {
AB = document.getElementById('div_with_text');
AB.style.display = 'inline';
}
setTimeout("show()", 3000);
Can any one help with this?
I've tried adding things like:
$(function(){
$('#div_with_text').fadeIn('slow');
});
but I don't know the language well enough to get it to work...
Any help would be much appreciated!

Is your DIV hidden in the first place? If not, that is your problem. Your are trying to open an already opened door.
Your code is also incorrect, even if you hide the DIV, this will not work. It should have been setTimeout(show, 3000);
With the JavaScript code (setTimeout) you have provided, 3 seconds after the page loads, you are trying to display the DIV. Did you notice that the DIV was already there and never 'appeared' after 3 seconds as you expected?
Example - http://jsfiddle.net/BLPTq/2/ - just click run and see.
To make it work, hide the DIV first and then call the setTimeout or the jQuery method. Example - http://jsfiddle.net/zeXyG/ - just click run and see. Check the CSS display:none;
OR, if you don't want to hide it with CSS, just call hide() before calling fadeIn()
$('#div_with_text').hide().fadeIn('slow');
Example - http://jsfiddle.net/zeXyG/1/
As per your comment below. Add delay() to the call like shown below
$('#div_with_text').hide(); // this or use css to hide the div
$('#div_with_text').delay(2000).fadeIn('slow');
2 seconds after the page loads, this will hide the div and then fade in slowly. Look at this example carefully.

The fadeIn method will only work if you load the jQuery library on your page. Without that, the method will not work since it isn't part of native Javascript.
Once you have loaded jQuery, that method will work as your syntax is correct.

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.