Develop Reference

how do I pause on hover on a div and continue on mouseout?

I have a set of divs in my HTML document and use jQuery to show them one by one after every 15000ms. I would also like to include some links inside some of the divs so I want to pause or delay the div on hover. Here is my script code. Can somebody show me how to pause on hover?
<script>
var ct = 0;
function showElem2() {
var length = $('.t1').length;
$('.t1').hide();
$('.info span').text(ct);
$('.t1').eq(ct).fadeIn(900);
(ct >= (length-1)) ? ct = 0: ct++;
setTimeout(showElem2, 1600);
}
$(document).ready(function(){
showElem2();
});
</script>

You can clear the timeout on mouseover and start it again on mouseout. I updated your code:
var ct = 0;
var myTimeout;
function showElem2() {
var length = $('.t1').length;
$('.t1').hide();
$('.info span').text(ct);
$('.t1').eq(ct).fadeIn(900);
(ct >= (length-1)) ? ct = 0: ct++;
myTimeout = setTimeout(showElem2, 1600);
}
$(document).ready(function(){
showElem2();
// $('div') is the container you want to attach the mouseover/mouseout event to.
$('div').hover(function() {
// mouseover
clearTimeout(myTimeout); // cancels the timeout
}, function() {
// mouseout
myTimeout = setTimeout(showElem2, 1600); // starts it again (or technically a new timeout)
});
});
Probably not the best solution code-wise, but the key here is clearTimeout() which let's you cancel a timeout set with setTimeout().

I believe you can tie the Timeout to a variable so you can cancel it on hover, then just reload the function on mouse out. This isn't tested but I think this should work:
:`
<script>
var ct = 0;
var timeoutvariable;
function showElem2() {
var length = $('.t1').length;
$('.t1').hide();
$('.info span').text(ct);
$('.t1').eq(ct).fadeIn(900);
$('.t1').eq(ct).hover(function(){ //on mouse enter
clearTimeout(timeoutvariable);
},
function(){ //on mouse leave
showElem2();
});
(ct >= (length-1)) ? ct = 0: ct++;
timeoutvariable = setTimeout(showElem2, 1600);
}
$(document).ready(function(){
showElem2();
});
</script>
`

Making tabs automatically rotate?

I am not very proficient in JS and would like to help me with an issue I have.
I want to make the tabs on a Drupal website automatically rotate but still the user to be able to click on them.
This is the code I have:
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
$('ul.checklist-select li').click(function () {
var selectID = $(this).attr('id');
$('ul.checklist-select li').removeClass('active');
$(this).addClass('active');
$('.first-box, .second-box, .third-box, .fourth-box').fadeOut(300);
$('.' + selectID + '-box').delay(300).fadeIn(300);});
</script>
I tried few options but it wasn't working.Thanks very much! I appreciate your time and help.

Well, you want to add an interval that updates the view and rotates to the next one (or first if it's the last).
Try this (not tested):
<script type="text/javascript">
var index = 0, // Index of current tab
interval = setInterval(function () { rotate(); }, 5000), // Interval
$tabs = $('ul.checklist-select'),
$content = $('.checklist_wrap');
// Click handler
$('ul.checklist-select li').each(function (i) {
$(this).click(function () {
index = i;
switchElement();
});
});
function rotate() {
// Update index to next one
index++;
// Check if this is a valid index, or reset to 0
if (index >= $tabs.children('li').length)
index = 0;
switchElement();
}
function switchElement() {
clearInterval(interval);
// Remove class from current tab
$('ul.checklist-select li').removeClass('active');
$('.checklist_wrap .box').fadeOut(300);
// Show
$tabs.children('li').eq(index).addClass('active');
$content.children('.box').eq(index).delay(300).fadeIn(300);
// Reset interval
interval = setInterval(function () { rotate(); }, 5000);
}
</script>
Something you might want to add is that the interval is reset when someone clicks a tab.

jQuery fade image loop

I want to make a loop in my function so that the slideshow effect always restarts.
Here's my fiddle : http://jsfiddle.net/Be67B/
It's all good for the image 1 to go to image 2, but I want it to fade it back to the image 1, and then go the image 2, and so on...to always loop like that.
What do I need to add in my code to make this work?

Don't use a loop, just ask the browser to repetitively call your animation step :
setInterval(function(){
// your animation (in fact just a step)
}, someDelay);
Demonstration : http://jsfiddle.net/dystroy/nPh6S/
In this precise case, the animation is done with :
setInterval(function(){
$("#top").fadeOut(function() {
$(this).attr("src","http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png").fadeIn().delay(1000).fadeOut(function(){
$(this).attr('src', 'http://coreldrawtips.com/images/applebig.jpg').fadeIn().delay(1000);
});
}
);
}, 4000);

see this jquery cycle plugin:
http://jquery.malsup.com/cycle/
may be this is what you want

You can create a function that does the transition, which has a callback function as part of the fadeIn method that will call back to itself to trigger the next transition, and it would just be in a constant loop.
Here's your modified jsfiddle:
http://jsfiddle.net/Be67B/1/
HTML:
<img id="top" src="http://coreldrawtips.com/images/applebig.jpg" width="300" height="300" />​
Javascript:
$(document).ready(function(){
transition(false);
});
function transition(first)
{
var src = first ? "http://coreldrawtips.com/images/applebig.jpg" : "http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png";
$("#top").delay(1000).fadeOut(function() {
$(this).attr("src",src).fadeIn(function() {
transition(!first);
});
});
}
​

I just made this code:
$(document).ready(function(){
// images in the pool
var images=["http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu- I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png",
"http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png"];
// next image to display
var next = 0;
// interval beetween images
var INTERVAL = 1000;
// main function
var doCarrousel = function() {
$("#top").fadeOut(function() {
$(this).attr("src", images[next]).fadeIn(
function() {
setTimeout(doCarrousel, INTERVAL);
});
});
if (++next >= images.length)
next = 0;
};
//start carrousel
doCarrousel();
});
fiddler: http://jsfiddle.net/Be67B/

I would use a plugin. But you can do it by hand. I just recommend against changing the src of the images, because some browsers don't handle it very well, like safari not firing load event.
Instead, have all images inside a container, and cycle their visibility:
$(document).ready(function(){
var currentImage = $("#images img:first");
setInterval(function(){
currentImage.fadeOut();
if(currentImage.next().size())
currentImage = currentImage.next();
else
currentImage = currentImage.siblings().first();
currentImage.fadeIn();
}, 1000)
});
See fiddle: http://jsfiddle.net/Be67B/2/

Quick and dirty: jsFiddle example
function swap(img) {
img = (img == 'http://coreldrawtips.com/images/applebig.jpg') ? 'http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png' : 'http://coreldrawtips.com/images/applebig.jpg';
$('#top').delay(2000).fadeOut(function() {
$(this).attr('src', img)
}).fadeIn(function() {
setTimeout(function() {
swap(img)
}, 1000);
});
};
swap($('#top').attr('src'));​

How to redirect page after Image slider finish loading in jquery?

I have a site with a rotating banner image in intro div and rest of the home page in page div. I want to do the following:
How can we hide intro div which contains current rotating banner images after finishing last slide and show rest of the home page.
Or if user will click on skip intro text then also it will show home page.
Current site: http://new.brandonplanning.com/home
I think modification is required in this code
/*-------------Intro page slider starts-----------*/
var intervalID;
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ($active.length == 0) $active = $('#slideshow IMG:last');
//var $next = $active.next().length ? $active.next()
// : $('#slideshow IMG:first');
var $next;
if ($active.next().length) {
$next = $active.next().delay(3000);
} else {
clearInterval(intervalID);
visibilityCheck();
return;
}
$active.addClass('last-active');
$next.css({ opacity: 0.0 })
.addClass('active')
.animate({ opacity: 1.0 }, 1000, function () {
$active.removeClass('active last-active');
});
}
$(function () {
intervalID = setInterval("slideSwitch()", 6000);
});
/*-------------Intro page slider ends-----------*/
/*-------------Intro page skip starts-----------*/
$(window).load(function () {
$(function () {
visibilityCheck();
$('#loader').remove();
});
$('.skip-intro').click(function () {
visibilityCheck();
});
});
function visibilityCheck() {
$('.hidden').removeClass('hidden');
if ($('#page').is(':hidden')) {
$('#intro').addClass('hidden');
} else {
$('#page').addClass('hidden');
}
}
/*-------------Intro page skip ends-----------*/
Thanks in Advance

Basically what you need is this:
demo jsBin
$('#slider img:gt(0)').hide();
var T; // timeout
var c = 0; // counter
var imgN = $('#slider img').length; // get the images Number
function toggler(){ // screens toggler function
$('#intro').fadeTo(400,0).siblings('#page').fadeTo(400,1);
}
function a(){ // 'A'nimations
if(c === imgN ){ // if the 'C'ounter reached the images in slider...
toggler(); // toggle our screens
}else{ // else ... do our animations.
$('#slider img').siblings('img').stop().fadeTo(1000,0).eq(c++).stop().fadeTo(1000,1);
} // ^^^^ here the counter 'ticks'
}
function aa(){ // 'A'uto 'A'dvance
T=setTimeout(function(){
a();
aa();
},2000); // set here pause between slides
}
aa();
$('#skip').click(function(){ // if 'skip' is clicked...
clearTimeout(T); // well...
toggler(); // run our screens 'toggler'
});
Hope you'll easily implement this into your page.

1, How can we hide intro div which contains current rotating banner images after finishing last slide and show rest of the home page.
You'll need to check that the last image has the .active, then use .delay() before hiding the #intro and showing the #page, something like:
if ($(.skip-intro li).last().hasClass('active')){
$('#intro').delay(2000).addClass('.hidden').queue(function() {
$('#page').removeClass('.hidden');
});
}
2, Or if user will click on skip intro text then also it will show home page.
$('.skip-intro').click(function(){
$('#intro').addClass('.hidden');
$('#page').removeClass('.hidden');
});

When is Jquery pseudo recussion finished

I use the function below to show a list of items. I want to change the function so that I can display the navigation when the pseudo recussion is finished. Is there a way to dtect when it is finished?
function fadeItem() {
$('ul li:hidden:first').fadeIn(fadeItem);
}

(update: added this first part) Loads all embed images then recursively fades everything in every half second, then does an alert (replace with the concept you commented back on)
var selector = "ul li:hidden:first";
function fadeIn($item) {
$item.fadeIn(500,function() {
var n = $(selector);
if(n.length > 0) {
fadeIn($(selector));
} else {
// add a div
alert("added a div");
}
})
}
$(document).ready(function() {
// load images first
var imgs = []; // cached
$("ul li img").each(function() {
// create a separate img tag because img is not active due do [assumed css] display:none;
var cacheImage = document.createElement('img');
cacheImage.src = $(this).attr("src");
imgs.push(cacheImage);
});
// this is a quick method, you can change window to the image nodes to optimize better
$(window).load(function() {
fadeIn($(selector));
});
});
Source: http://jsfiddle.net/MattLo/ukLaG/1/ (using a very large image to test)

See the documentation. You can pass a callback function:
function fadeItem() {
$('ul li:hidden:first').fadeIn(fadeItem, function() {
// do something
});
}