Develop Reference

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.

Better way to blink a button jQuery?

I would like a button to blink for a short duration prior to a AJAX call (and some other animations happening). The ajax call happens very fast so I do not want to use AJAX's before function. The blink must be distinct prior to any other animations. I feel as if there is a prettier way to do this:
//This is inside of a button click event
$(this).addClass('active').delay(250).queue(function (e) {
$(this).removeClass('active').delay(250).queue(function (f) {
alert(33);
$child.css('margin-left', $(window).width() + 10 + 'px');
$child.load(url + 'API CALL' + $(this).data("id"), bindAClicks);
});
});
bindAClicks - Animates to margin:0.
$child is a container div.
active is a class with a dark background.
What's wierd is that the alert is not even firing.

If you are referring to beforeSend, I would recommend checking out this answer which shows how to wait for your animation to finish.
In response to Oleg's comment, I'm not sure what problem you're having when you say the response is so quick you can't see the blink. I created a quick example to demonstrate how it would work (so you can make the Ajax call and still perform the blink). Hopefully this helps.

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.

Add automation to a jQuery Content Slider

I'm looking for some help to implent a timer for this script I'm linking to.
As it is now, it toggles different slides when hovering the list to the right, but I want the slider to automatically jump ahead to the next slide after a certain amount of time until it reaches the end and then goes back to the top.
The catch though is that it also needs to work as it is now, so that you can toggle via hovering and when you stop hovering it should remember the position and jump ahead to the next item.
I realize this is alot to ask for, but some pointer would be great, thanks alot!
DEMO: http://jsbin.com/acorah

Your code is taking a bit of a performance hit with that each() loop which I don't think you need. You're binding events inside the loop and you're limiting your possibilities by declaring your actions inside the bind() scope. You want to be able to call events on any object and not only a single element; $('.cn_item') in your case.
The idea is to keep track of your current slide with a class, let's say .cur.
Then you create an object where you declare all your methods. The main methods or actions are getCur() and goTo() and mostly everything else will use these. ie. next() is just a shortcut for goTo()
var actions = {
getCur: function(){ return idx; },
goTo: function(idx){
// The simplest case
$slides.hide().eq(idx).show();
},
next: function(){ this.goTo(this.getCur()+1); },
prev: function(){ this.goTo(this.getCur()-1); }
.
.
.
}
Now you can call actions on events by simply doing this:
$slides.click(function(){ actions.goTo($(this).index()); });
$next.click(function(){ actions.next(); });
And then you can setInterval() to add a timer.
setInterval(actions.next, 1000);
This tutorial might help. I basically cover everything involved in making a slider. I would change some things as of today, we learn new ways to code stuff everyday.

Javascript callback and pattern matching help

I am trying to make a simple searcher/highlighter and I am running into difficulties with inconsistent results/nothing happening when I test it out.
I think the biggest gap is my understanding of how the callback functions should work and what the selectors are able to match.
Ideally when one clicks on the tag, everything should fade out and only the dives with the matching tags in them should reappear. If nothing matches then the nothing found div should appear and the reset should fade veryhtign out and make all the divs (sans nomatch div) reappear unhighlighted.
Anyone provide some clarification on where I can improve?
Edit: See the link in the comments to see my code.
More clarification on problems:
Click on a tag (old, photography, guide) and then click on reset. All three parts should reappear but only two do.
Randomly The no results found will show up.
If you select a tag, then search for a different one, the fade ins and outs will be asynchronous.

The problem is that the .fadeout() was on each .workshopentry so would really be 3 fade outs. Therefore the animation complete callback function was being called 3 times as well! So the logic to determine which new entries to show and hide was being executed 3 times and causing the strange multiple fading.
I have updated the jsfiddle with a more robust solution.
Let me know if you need any more explanation of what the JavaScript is doing.

You need to copy your following code
if (toFadeIn.length < 1) { //No results found
toFadeIn.push(noResults);
}
$(toFadeIn).each(function(index, div){
div.fadeIn(1000);
});
inside the callback function of the workshop.fadeout.. like this :
workshop.fadeOut(1000, function() {
var tags = $('.left ul li', this);
tags.removeClass('searchMatch'); //reset the search results
tags.each(function() {
if ($(this).text().toLowerCase() === searchTerm.toLowerCase()) {
$(this).addClass('searchMatch');
toFadeIn.push($(this).parent().parent().parent());
}
});
if (searchTerm === "") {
toFadeIn.push(workshop);
}
if (toFadeIn.length < 1) { //No results found
toFadeIn.push(noResults);
}
$(toFadeIn).each(function(index, div){
div.fadeIn(1000);
});
});
You see? The fadeout callback was not yet called but you already started going through the toFadeIn array to show the search results. At that time it hadn't even searched through the entries yet.
It's only down to because we are mostly used to sequential code so callbacks take a little bit of head around. But it does work like that. You just keep on putting the code inside the callback ..and then again inside another callback and so on.