Develop Reference

Limit jquery execution (times/time) on hover

I created a menu that shows its sub-menu on hover using some CSS and jquery. Thing is, it acts a bit funny in case user hovers lots of times on the menu item. This is the URL: http://91.202.168.37/~ibi/, and this is the jquery code (inside document ready):
if ($(window).width()>991) //menu script desktop or laptop
{
$('#mob-main-menu > li.menu-item-has-children').hover(function(event){
event.preventDefault();
$(this).children('a').toggleClass('bold600');
$(this).children('a').siblings('.sub-menu').slideToggle();
});
}
else // menu script touch device
{
$('#mob-main-menu > li.menu-item-has-children').click(function(event){
if ($(this).children('a').siblings('.sub-menu').css('display') == 'none')
{
event.preventDefault();
console.log('hidden');
}
$(this).children('a').toggleClass('bold600');
$(this).children('a').siblings('.sub-menu').slideToggle();
});
}
I tried to use setTimeout() function but couldn't get it to work. can I limit the code to queue no more than 2 times, no matter how many hovers it counted? and than after x time to set it back to zero? any other idea to make it work better will be happily accepted.

try make animation with .stop() function it clears the animation queue so it should work correctly
$(this).children('a').siblings('.sub-menu').stop().slideToggle();

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/

slideUp/slideDown is not consistent

I want to slideDown() a div when the appropriate radio is selected, and slideUp the active one.
However, as it is now, in some cases it's being pushed down, in other cases pushed up.
(Private -> Shop = Up, Shop -> Private = Down)
I want it to always be pushed down. What am I doing wrong?
Here's the current state on JSFiddle: http://jsfiddle.net/mfmU7/
And the raw Javascript code:
$(document).ready(function() {
$("#private").click(function() {
$('#registration-brand, #registration-shop').slideUp();
$('#registration-private').slideDown();
});
$("#shop").click(function() {
$('#registration-brand, #registration-private').slideUp();
$('#registration-shop').slideDown();
});
$("#brand").click(function() {
$('#registration-shop, #registration-private').slideUp();
$('#registration-brand').slideDown();
});
});

It's all about position in the DOM (or z-index):
$(document).ready(function() {
$('.btn').on('click', function() {
var that = $('#registration-'+this.id);
$('.registration-type:visible').not(that).slideUp().before(that.slideDown());
});
});
FIDDLE

I had same problem and I resolve it by adding:
position:absolute;
bottom:85%;
to CSS and it solves your isue here
but then u have to again place those divs
Here: http://jsfiddle.net/isair/mfmU7/4/

The problem (that some slide up visually and some slide down visually) is caused because, in your original code, all the animations are occurring at once and the divs are vertically placed one above the other. So the top one looks like it is sliding down but the other two, while sliding down, look like they are popping up from the bottom because of the one that is in the process of hiding.
I like doing it this way so one action doesn't start until the others are over:
$("#private").click(function() {
$('#registration-brand, #registration-shop').slideUp(function() {
$('#registration-private').slideDown();
});
});
FIDDLE HERE
The problem with doing that (like I usually do) is that the function gets called twice, once when the already hidden div finishes hiding, which is almost immediately, and once after the other div finishes hiding (4/10 sec later). The second one does nothing because the appearing div is already fully visible (or almost so).
So ... another solution is needed.
This one has a whole different look because it waits until both slide up actions are done (even though one div is already hidden) before starting the slide down. The 'promise()' creates something that will be finished when all the 'slideUp()' calls complete their animation and the 'always()' calls the function when that is done.
$("#private").click(function() {
$('#registration-brand, #registration-shop').slideUp().promise().always(function() {
$('#registration-private').slideDown();
});
});
ALTERNATE FIDDLE

image source changing at the wrong time after a few minutes in a slide show

I'm a designer more than a programmer, but I'm trying to get the hang of javascript so I have more design options when it comes to web design beyond plugins. So here's the problem I'm having.
I have a page with 4 slide shows. Right now I have it so that when one of 4 buttons are clicked it will change the array it gets the image sources from and loop through the images every 4 sec.
At first the slideshows look fine and the change happens when the image is hidden, but after a couple minutes the source change falls out of time with the fading effects and happens when its visible. It also works fine to have the shows switch with no problem.
All the timing and variables get reset and the new parameter from the onClick-call switches which array is used. I tried one solution where I made the image change part it's own function and called it from other functions to control the timing more, but then for some reason clearTimeout stopped working to clear the loop and it would still play one instance of the loop at the same time as another.
Maybe someone can look at this code and see a simple fix for the timing issue.
i=0
var delay=4000
var fade=1000
var timer;
function play(showNum){
var showNum = showNum;
$("#show").stop(true,true)
newShow();
changeInfo(showNum);
$("#show").hide();
change(showNum);
}
function change(showNum){
$("#show").fadeIn(fade);
$("#show").attr("src",showNum[i]);
i = (i+1)% showNum.length;
$("#show").delay(delay-(fade*2)).fadeOut(fade);
timer=setTimeout (function(){change(showNum)},delay)
}
function newShow(){
clearTimeout(timer);
i=0;
}
Here is an update to the code since I posted this.
function play(showNum){
var showNum = showNum;
$("#show").stop(true,true);
newShow();
$("#show").hide();
changeInfo(showNum);
change(showNum);
$("#show").fadeIn(fade);
setTimeout(function(){loop(showNum);},fade*2);
}
function loop(showNum){
$("#show").fadeOut(fade);
setTimeout (function(){change(showNum);},fade);
$("#show").fadeIn(fade);
int=setTimeout (function(){loop(showNum);},delay);
}
function change(showNum){
$("#show").attr("src",showNum[i]);
i = (i+1)% showNum.length;
}
function newShow(){
clearTimeout(int);
i=0;
}
I don't get a problem with the timing anymore, but I do get a weird hiccup if I click on a new slideshow when it's on fadeOut where it changes image then changes back and then fades in with the next image of the previous slide show then fades out and starts the right slide show from there.

fadeIn as callback function after fadeOut doenst work as expected

In my HTML a#navInnerMapR and a#navInnerMapL are contained within div#navTwo.
The following code is within a function. When called, I need the function to fadeOut any visible links in div#navTwo, pause for a moment, and then fadeIn a#navInnerMapR.
$('div#navTwo a').fadeOut(200, function() {
$('a#navInnerMapR').delay(100).fadeIn(200);
});
The code fades out the links but doesn't fade anything in. I thought that they delay would only start once the fadeOut finishes, however changing the delay value to 1000 makes it sometimes work but its very buggy. Thanks
UPDATE Here is a fiddle showing that the hidden link starts to be shown before the visible is hidden: http://jsfiddle.net/jamesbrighton/d9QKr/5/
UPDATE Apologies, my question doesnt include the full details of what I need to achieve. I simplified it as I thought I just had some sort of sytax issus that could be easily fixed.
div#navTwo actually contains 3 links. At any point (other than the delay before animations run) only 1 link is visible. I need to be able to call a function that will hide either of the other 2 links that are being shown, and then show a#navInnerMapR.
Different events will call this function, so either of the 2 links that arn't a#navInnerMapR may be visible. Thanks
UPDATE I think this fiddle illustrates the issue. Ive created 2 div.nav's to illustrate different states. Ive hidden different links with inline CSS in each one. JavaScript will be showing and hiding the links in my div repeatedly, so the same div will look like each example at different times.
Ive created 2 triggers to illustrate that different events will need to call the function. When you click on a trigger you can see the issue with both examples. The visible divs are not hidden before the a.one is shown. Thanks for your patience!
http://jsfiddle.net/jamesbrighton/dYvMS/24/
Interesting point, if I change $('.nav a.one').fadeIn(1000); to an alert, the alert fires multiple times! No idea why this would be the case!

Edit: Updated answer based on your below comment,
Yes this works as I need, but im not sure it will work for my actual
page. Sorry for my question not being detailed enough. The code
example I gave is simplified. In the actual page their are 3 links
within div#navTwo, at any time only one of them will be visible. I
need to be able to call a function that hides any links and shows a
specific one, but either one of the other 2 links in div#navTwo may be
visible. Thanks
DEMO
HTML: Added class to all links inside navTwo
<div id="navTwo">
Right
Left
Middle
Upper
Lower
</div>
JS:
$('.links').click(function() {
showHide($(this));
});
function showHide($this) {
$this.fadeOut(1000, function() {
$('#navTwo a').not($this).delay(1000).fadeIn(1000);
});
}
I think I understood what you need. Try below DEMO and let me know if that is what you want,
DEMO
$('#navInnerMapR').click(function() {
runMeR($(this));
});
$('#navInnerMapL').click(function() {
runMeL($(this));
});
function runMeR($this) {
$this.fadeOut(1000, function() {
$('a#navInnerMapL').delay(1000).fadeIn(1000);
});
}
function runMeL($this) {
$this.fadeOut(1000, function() {
$('a#navInnerMapR').delay(1000).fadeIn(1000);
});
}

As you said, You need the function to fadeOut any visible links in div#navTwo, pause for a moment, and then fadeIn a#navInnerMapR (not other links, only a#navInnerMapR).
$('#navTwo a').click(function(e) {
$(this).parent().children().each(function(i){
$(this).fadeOut('slow', function(){
$('a#navInnerMapR').delay(1000).fadeIn(1000);
});
});
});​
A fiddle is here.