We Keep Coding

How to create span content on mouse hover?

I want a slider with content. but the content should appear only when mouse hover. This is the code I'm using:
<div id="slideshow" style="width:560px; background:#999;">
<div id="slidesContainer">
<div class="slide">
<img src="js/1.jpg" />
<div> some text </div>
</div>
<div class="slide">
<img src="js/2.jpg" />
<div> some text </div>
</div>
<div class="slide">
<img src="js/3.jpg" />
<div> some text </div>
</div>
<div class="slide">
<img src="js/4.jpg" />
<div> some text </div>
</div>
</div>
</div>
and the jquery 1.8.3 lib and this code
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 560;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Hide left arrow control on first load
manageControls(currentPosition);
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
if(position >= 4)
{
position=0;
currentPosition=0;
}
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}
function Aplay(){
// Determine new position
currentPosition = currentPosition+1 ;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
setTimeout(function(){Aplay();},2000);
}
setTimeout(Aplay(),20000);
});
now the <div> some text </div> should appear only when mouse hover, example: http://www.backslash.gr/demos/contenthover-jquery-plugin/#demo4

CSS
<style type="text/css">
.title {visibility:hidden;}
</style>
HTML add a class title to all needed DIV elements
<div class="title"> some text </div>
Add this to your script
$('#slideInner').mouseover(function() {
$('#slideInner .title').css('visibility', 'visible');
});
$('#slideInner').mouseout(function() {
$('#slideInner .title').css('visibility', 'hidden');
});
Working jsBin

A simple solution would be to set up your 'slide' divs like this:
<div class="slide" onMouseOver="$('#TEXT1').css('display','block')" onMouseOut="$('#TEXT1').css('display','none')">
<img src="js/1.jpg" />
<div id="TEXT1" style="display:none;"> some text </div>
</div>

It's easy and i think this is the fastest solution, because require less jquery than the others (= keep your code clean)
Add the following class to every div which contain the description: class="slide-desc" to your HTML
Add var slideDesc = $('.slide-desc'); to your JS, which is just to fit your way of write jQuery, and slideDesc.hide(); (or $('.slide-desc').hide;, to use a faster way instead). This statement (it's better to call the .hide() method in first line of your JS, to avoid the description flashing while page is loading. Put it just after your declaration of variables.
Add somewhere in the JS these lines: $('#slidesContainer').hover(function(){
slideDesc.show();
});
You've done! :D

jquery cycle trigger event on slide change not before or after

I'm using the jquery cycle1 plugin for a slideshow with fade transitions between images, no previous or next controls. I need to layer text on top of this slider that changes color based on what slide is showing.
I'm not very fluent in jQuery so I'm having a hard time using the documentation to manipulate the available options. I've gotten this far thanks to this post and this one but the color changes slightly before or after depending on if I use before or after, obviously. How can I make the text color change at the same exact time the slide does?
Note: I have to use the cycle 1 plugin as my site uses jQuery 1.3.2 with no hope of upgrading.
here is a fiddle, and code below. Thanks in advance for any help!
here is my html:
<div id="text">this is some text over the slider</div>
<div id="switch-it">
<div id="slide1">
<a href="link1.html">
<img src="hp_hero_010114_01.jpg" height="500" width="980" border="0" />
</a>
</div>
<div id="slide2">
<a href="link2.html">
<img src="hp_hero_010114_02.jpg" height="500" width="980" border="0"/>
</a>
</div>
</div><!--//END switch-it-->
and here is the jQuery
$(document).ready(function(){
$('#switch-it').after('<div id="switch" class="switch">').cycle({
fx: 'fade',
speed: 800,
timeout: 500,
cleartypeNoBg: true,
height:'500px',
width:'980px',
pager:'#switch',
pause:1,
before: function (prev, current, opts) {
var current_id = $(current).attr('id');
if( current_id.match("slide1")){
$('#text').css('color','white');
}
else if( current_id.match("slide2")){
$('#text').css('color','red');
}
else if( current_id.match("slide3")){
$('#text').css('color','blue');
}
else if( current_id.match("slide4")){
$('#text').css('color','green');
}
},
pagerAnchorBuilder: function(index, el) {
return '•'; // whatever markup you want
}
});
});

It's not very elegant, but adding a timeout inside the before for half of your speed makes the change exactly in the middle of your transition.
setTimeout(function () { ...change text color }, 400);
JSFiddle
EDIT OR
Add a transition to your css for the #text for the same amount of time as your speed
#text {transition: color .8s linear}
JSFiddle

You might want to update to Cycle2 plugin it has what you are looking for
link
Down in "misc. bits" look for the state variable named 'busy';

JavaScript Fade In/Out issues

I am having some difficulty trying to get my Fade In and out effect working properly. I think I am over complicating it.
I have 4 images, however only the first 2 need to be faded out and in on hover of the image (The other 2 images come into play with some other feature on the page).
My HTML is:
<div class="square">
<div class="imageHolder">
<!--Comment out and uncomment BG image to show transitions on BG images-->
<img class="one" src="image_01.jpg" />
<img class="two" src="image_02.jpg" />
<img class="three" src="image_03.jpg" />
<img class="four" src="image_04.jpg" />
</div>
</div>
Images, two, three, four are displayed none
JS:
$('.square').mouseover(function () {
$(this).find('img').each(function () {
if ($(this).attr('class') === 'two') {
$(this).fadeIn('slow');
}
if ($(this).attr('class') === 'one') {
$(this).fadeOut('slow');
}
});
});
Any help would be much appreciated.
Thanks for the responses.
I was trying to be too clever and it didn't need it. Is there a way for the the fadein and out to happen simultaneously without the use for a plugin?

Why do the each and not just selected them?
var imgs = $(this).find("img");
imgs.filter(".one").fadeOut('slow');
imgs.filter(".two").fadeIn('slow');
or
var imgs = $(this);
imgs.find(".one").fadeOut('slow');
imgs.find(".two").fadeIn('slow');

Try to do it like this:
$(".one").fadeIn("slow", function() { $(this).fadeOut("slow") });
$(".two").fadeIn("slow", function() { $(this).fadeOut("slow") });
Update:
I misread you question and thought you want both to fade in and out. To make the first one fade in and the second fade out use something like this:
$(".one").fadeIn("slow");
$(".two").fadeOut("slow");
If you have other elements with one and two classes and don't want to affect them, you can type $(".imageHolder .one") and $(".imageHolder .two") instead of $(".one") and $(".two").
If you have multiple imageHolder elements on your page, use find() function as suggested by epascarello or sushanth reddy.

You do not need a .each loop .. Just find the img inside the div and do your operations on it
Try this instead..
$('.square').mouseover(function() {
$(this).find('.two').fadeIn('slow');
$(this).find('.one').fadeOut('slow');
});​
Check FIDDLE

I think this is what you're looking for:
$('.square img')
.mouseover(function () {
$(this).fadeIn('slow');
})
.mouseout(function () {
$(this).fadeOut('slow');
});

I think you will better use jquery.hoverIntent.js. It will create a little delay time when you will move your cursor rapidly over the different images.
an example
$(document).ready(function(){
var config = {
interval: 230,
over: zoomIn,
out: zoomOut
};
$("div#clients_wrap div").hoverIntent(config);
});
zoomIn en zoomOut are functions, you could declare them with an fadein, fadeout respectively. This is just an improvement.

Basically assign a class to the group of images that need to fade in/out on hover in/out respectively
<div class="square">
<div class="imageHolder">
<!--Comment out and uncomment BG image to show transitions on BG images-->
<img class="one fadeeffect" src="image_01.jpg" />
<img class="two fadeeffect" src="image_02.jpg" />
<img class="three" src="image_03.jpg" />
<img class="four" src="image_04.jpg" />
</div>
</div>
javascript:
$('.fadeeffect')..hover(function(){
// write your code here
}

Create a falling div (that works in IE)

Below is my original question and code but per CoreyRS's comment let me add some detail. I want to create a div that falls own the page and disappears like a rock falling through the air. The catch is it must work in IE 9 and 8. I have found some CSS3 animations that work great in all but IE. Any help is appreciated. Please provide code examples.
Original Question and Code
I am attempting to use the slideDown animation in jQuery to animate a div. The idea is a div will show then slide down the page and then fade out. Preferably it would fade out while falling but I cannot even get the div to fall. Here is my code:
JS:
var $j = jQuery.noConflict();
$j(window).load(function() {
$j('#loading').fadeOut('slow', function() { //fade out loading div
$j("#content-wrap").fadeIn("slow", function() { // show content div
setTimeout( function() { // delay slideDown effect
$j('#animate').slideDown('slow', function() {
// script to fade out or hide animate div
}, 2000 );
});
});
});
});
HTML:
<div id="loading">
<h2 class="textcenter">Loading...</h2>
<img id="loading-image" class="center" src="/images/ajax-loader.gif" />
</div>
<div id="content-wrap" class="hide">
<div id="animate">
<img class="fear" src="/sign.png" />
</div>
<div class="img-center">
<img class="feature-image" src="/Prairie-Grass.jpg" />
</div>
</div>
What am I doing wrong and I will take any advice that will create a falling div on the screen that fades out that will work in IE 9 and 8.

Haven't tested but give this a go. You'll need to edit the width/height properties etc to your needs, and obviously don't use inline styling if you have a css stylesheet.
<style>
#animate {
width:100px;
height:100px;
position:fixed;
top:-100px;
left:50%;
margin-left:50px;
z-index:1;
}
</style>
<script>
var $j = jQuery.noConflict();
$j(window).load(function() {
$j('#loading').fadeOut('slow', function() {
$j("#content-wrap").fadeIn("slow", function() {
$j('#animate').delay(2000).animate({'top':'50%'}, 500);
$j('#animate').delay(2000).fadeOut(500);
});
});
});
</script>

jQuery Cycle - #next #prev, goto nextGallery after final slide of currentGallery

I am using jQuery cycle in several galleries with #next #prev navigation and a image counter output.
Now I am trying to connect all these galleries together. If the user reaches the final slide of gallery A (galleryA.html), the #next anchor should point to gallery B (galleryB.html) / the #prev anchor should point to gallery C (galleryC.html).
How can I combine my 2 functions to do that?
// slideshow fx
$(function() {
$('#slideshow').cycle({
fx: 'fade',
speed: 350,
prev: '#prev',
next: '#next',
timeout: 0,
after: onAfter
});
});
//image counter output
function onAfter(curr,next,opts) {
var caption =
(opts.currSlide + 1) + opts.slideCount;
$('#counter').html(caption);
}
html:
<div id="slideshow-container">
<div class="slideshow-nav"><a id="prev" href=""></a></div>
<div class="slideshow-nav"><a id="next" href=""></a></div>
<div id="slideshow" class="pics">
<img src="galleryA/01.jpg" />
<img src="galleryA/02.jpg" />
<img src="galleryA/03.jpg" />
<img src="galleryA/04.jpg" />
<img src="galleryA/05.jpg" />
<img src="galleryA/06.jpg" />
</div>
</div>

Not too familiar with the cycle plugin, but you could put something like this in function onAfter:
if(opts.currSlide == opts.slideCount) {
$("#next").attr("href","galleryB.html");
}
or you could try
if(opts.currSlide == opts.slideCount) {
$("#next").click(function() { document.location = "galleryB.html"; });
}
Untested, something along those lines?
Basically it only attaches the redirect behaviour onto #next after the last slide has been shown.. There might be an onFinish option or something, have you checked the docs?

You can have a look here :
http://helpdesk.toitl.com/?p=cycle_plugin
It is not so easy to integrate 2 synchronized cycles in the same page ... In this sample there is no reload of the page with location=... but the 2 galleries are managed using the different commands of the cycle plugin.
Regards,
Dominique VINCENT