Develop Reference

fade backgrounds move text up

I have multiple background images that are behind a block of text each. I would like to fade each background image and have the text move up when one background image fades into another.
For example
BG1 (background image 1) has Tegxt1 on top of it. As BG1 fades into BG2, Text1 moves up and is replaced by Text2.
How can I do this with simple jquery and javascript and CSS?
Here's what I tried
this._currentTimeout = setTimeout(function() {
this.slides$.eq(newSlideIndex).css('z-index', 3).fadeTo(ANIMATION_FADE_DURATION, 1, function() {
this.slides$.eq(this.currentSlideIndex).css('z-index', 1).css('opacity', 0);
this.slides$.eq(newSlideIndex).css('z-index', 2);
this.currentSlideIndex = newSlideIndex;
this._setTransitionTimerForNewSlide(this._getNextSlideIndex(), 5000);
}.bind(this));
}.bind(this), durationUntilTransition);

You did not provide enough code to generate a complete working example (How is your html structured? Where is your jQuery located on the page? What does your existing CSS look like?), so unfortunately no one on StackOverflow and give you a perfect answer. The best we can do is create a small demo of what you could do to accomplish this affect. It's then up to you to learn from the example and apply the concept to your own code.
If I was going to try to accomplish this, here's the approach I would take:
Stack images on top of each other with position: absolute;
The first image group should have the highest z-index, so it's on top. CSS can do this!
The second image group should have the second-highest z-index, so that it shows behind the first image during the fade. CSS again!
all other image_groups should have z-index below the second image. Yay for CSS!
Animate the image and text seperately
The image just needs to fade out
The text needs to fade up and out
After the first (top) image group is completely faded, move it to the bottom of the list
Remove the inline style="..." that jQuery's .animate() applies to the image group. Once we do this, the image group will adhere to the css rules we set up in step one.
JS Fiddle Demo
The first step will be done manually by you when you're writing HTML and CSS, but then your jQuery can handle steps 2-4. Then just repeat as much as you'd like. Ask questions if you need to, but try hard to apply this to your own code. Good luck!!

Google Maps API Dropdown Change Color

I've referred to How do you style the dropdown on Google Places Autocomplete API?, and could't find the answer to my problem. I changed the .pac-item class on hover, focus and active but didn't work. Before I upload the pictures, let me tell you the problem. There's a dropdown, which is a google autofill feature. I want the background color of the list items to be #0085c6 (class - blue) when I go over an option. Now, this works fine when I hover on it (as seen on the pic), however, when I use the arrow keys to traverse through the list the background color becomes #ff5a5f (class - red).
Please, help! Thanks.
Works fine on hover, i.e.,
.pac-item:hover{
color: white !important;
background-color: #0085c6 !important;
}
But, when arrow keys are used:

change background color by iterating through array

I have a container with a light blue background on my page and I would like for the background to get sequentially darker with each click. At this point, I'm happily setting my array of colors manually (we'll leave that question for another day) but I'm unable to get the background color to change or iterate over the array like I would like.
Currently, I'm getting alerts that there was an error in parsing my background color. I've tried setting background-color for .content in the css document and removing it, but neither way works (except if I remove it, then there's no background color at all)
Here's a rough sense of the code I have so far. I built it based on this jsfiddle from another thread, though it does not match entirely: http://jsfiddle.net/arunpjohny/3eGM5/
$(document).ready(function() {
var blues = ['#c4c4fd', '#5d5dbc'],
counter = 0;
$(".content").click(function() {
$(".content").animate({
backgroundColor: blues[counter++]});
#the text in this div also changes on click, so here's my animation for that.
#This is working fine, but I figured I'd include it just to be safe
var current = $('.active');
var next = current.next('.section');
if(next.length === 0) {
next = $('.section').first();
};
current.fadeOut(400).removeClass('active');
next.delay(100).fadeIn(1500).addClass('active');
});
});
Is there an obvious solution to this that I'm missing? I'm still pretty new to jQuery and putting everything together, so any advice or any direction you can point me in would be greatly appreciated!

Your color isn't being animated because you need to use the jQuery Color plugin to animate colors.
So you'd need to include the jquery color plugin in your markup and then change your animate code to look similar to this.
$("#block").animate({
backgroundColor: $.Color(blues[counter++])
}, 1500 );

Nivo Slider: control nav thumb loose cursor pointer property after change image

I'm stuck with this. Hope you can helpme. I'm adapting Nivo Slider for a site (I must use jquery 1.5.1). Everything is fine but the issue now is that when the image change the control nav thumbs loose its cursor pointer property. I mean, the click only works the first time the slide runs but when the image change the controls in the thumbs doesn't allow to make click.
Here you can see the slider:
http://www.sixplus1.com.mx/stackoverflow/carrusel_stack.html
The nivo slider Script:
http://www.sixplus1.com.mx/stackoverflow/js/jquery_kfu.nivo.slider.pack.js.js
I've been diging on the script to find a reason, around line 175 to 201, specifically on line 193 is the function that add the class to the thumbnails nav controller,
`$('.nivo-controlNav a:eq('+vars.currentSlide+')',slider).addClass('active');
$('.nivo-controlNav a',slider).live('click',function(){
if(vars.running)return false;
if($(this).hasClass('active'))return false;
clearInterval(timer);
timer='';]`
but I can't find anything that helps. I set in all the states of the thumb (on the css) the "cursor:pointer" property. And it doesn't works.

The reason for this is because your .nivo-slice goes over your .nivo-controlNav so when you hover it, you're actually going on top of the slice and not the .nivo-controlNav.
To solve this, by looking at your code, you only need to add a z-index
.nivo-controlNav {
z-index:10;
}
In your case, you need a z-index higher than 5 because .nivo-slice has a z-index of 5.

How to respond to a click outside a certain area?

My document looks like this:
Basically the background is one full-screen, transparent div. There are couple problems...if I just create the background div and don't apply any z-index to it, it ends up being on top of everything, and I cannot click on the box. If I set the z-index of the background div to be below the box, I can't seem to click on the background. What I want to do, it to be able to click both on the box, and the background.
var x = document.getElementById("bg");
x.addEventListener("click",reset,false);
function reset() {
alert("reset was clicked");
}
CLARIFICATION: box is on the same node level as the bg. it is not inside the bg div.

Take a look at this jQuery plugin - even if it doesn't solve your particular question the code could provide insight into your dilemma.
jQuery clickoutside

You must post your code so every one can help you. My test work correctly on Firefox and Chrome. If I'm guessing right, the background in your code isn't expanded. Try to remove html, body { width:100%; height:100%; } in my example to see the problem.
On IE browser, you need to use a transparent gif image as background of the background div, otherwise the background div may be unable to receive mouse click event.