We Keep Coding

How to save the last hovered state on an HTML element?

I am working on a Wordpress shortcode for generating dynamically circles.
At my current version I have a problem with saving my current and my last hover state.
Here is a fiddle
I have a problem displaying the text under the circles. The text should be displayed from the last hovered circle until I hover over a new one.
Is there maybe a better solution to my problem?
I think my problem is in the hover end.
[...] ,function () {
$contentBoxPrevious = $contentBoxCurrent;
$contentBoxCurrent.removeClass('active-text');
$(this).removeClass('hover active');
}

Move this line
$contentBoxPrevious.removeClass('active-text');
from the handleOut function to the middle of handleIn function like this https://jsfiddle.net/eu0jcmh0/
What you were doing wrong was that you were removing the "active-text" class every time you moused out of the element instead of removed it when you moused on another element, hope I helped!

Your code looked way too complicated...
So I just rewrote it my way to achieve what I think you want as a result.
Here's the code:
$(document).ready(function() {
// Set all texts invisible
$(".text-content").css({
"opacity": 0
});
// Declare previous and active indexes vars
var previous_index;
var active_index;
$(".icon-circle").hover(function() {
// On mouseenter, getting this index.
active_index = $(this).data("index");
// Show associated text.
$(this).parent().find(".text-content").css({
"opacity": 1
});
// Hide previous associated text.
if (active_index != previous_index) {
$("[data-index='" + previous_index + "']").parent().find(".text-content").css({
"opacity": 0
});
}
}, function() {
// On mouseout, just keeping previous index...
previous_index = active_index;
});
});
Working Fiddle.

adding fadeTo Method in Script

I want to add fadeTo to this code snippet. When this adds the class current i want it to fade in. But I don't know how to solve, and where I've have to put the fadeTo(); parameter.
$(this).bind("click", function() {
navClicks++;
$(this).addClass('current').parents('ul').find('a').not($(this)).removeClass('current');
offset = - (panelWidth*z);
alterPanelHeight(z);
currentPanel = z + 1;
$('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
if (!settings.crossLinking) { return false }; // Don't change the URL hash unless cross-linking is specified
});

I'm not exactly sure which DOM element you're looking to fadeTo(), but take a look at this jsfiddle:
http://jsfiddle.net/37XEp/1/

i have a class "current" which i add on click. in your example the "click me" and i want to fade in the green color of your "Click me" text slowly... nevermind the pikachu!

How do I show or hide div, based on position of another div

I have the following jquery that slides a div horizontally:
$('.nextcol').click(function() {
$('.innerslide').animate({'left': '-=711px'}, 1000);
});
$('.prevcol').click(function() {
$('.innerslide').animate({'left': '+=711px'}, 1000);
});
What I want to happen is this... if the div.innerslide has a position that is left: 0px then I want to hide div.backarrow. If the position is not left: 0px, then it shows it.
Any help would be greatly appreciated.
EDIT (added HTML Markup)
<div class="backarrow prevcol">
<div id="mainleft" class="overflowhidden">
<div class="innerslide">
<div class="col">my content including next</div>
<div class="col">my content including next</div>
<div class="col">my content including next</div>
</div>
</div>

Try this:
if ($('.innerslide').css("left") == 0) {
$('div.backarrow').hide();
} else {
$('div.backarrow').show();
}
Fix for Double-Click Issue:
From what you described in your comment about the issue when the visitor double-clicks, it sounds like the double-click is causing two of the animation events to fire. To keep this from happening, you can either disable the click handler while the animation is running and re-enable it once it is finished, or you can try to write a new thread to continually check the element's position. One of these solutions is not a good idea - I'll let you figure out which one :) - but the other actually has a very simple solution that requires little change to your existing code (and may actually reduce your overhead by a teeny weeny amount):
$('.nextcol').on("click.next", function() {
$('.innerslide').animate({'left': '-=711px'}, 1000, showHideBack());
$(this).off("click.next");
});
$('.prevcol').on("click.prev", function() {
$('.innerslide').animate({'left': '+=711px'}, 1000, showHideForward());
$(this).off("click.prev");
});
Then add this this line to showHideBack() (and a complementary one to showHideForward() if you are using that):
$('.nextcol').on("click.next".....
I suggest that you write a function to set each click handler and another to remove each one. This will make your live very easy and the whole solution should reduce overhead by removing unnecessary click handlers while the animation is running.
Note: the animation method often calls its callback before the animation finishes. As such, you may wish to use a delay before calling the showHide... method(s).
Let me know if you have any questions. Good luck! :)
UPDATE:
Here is the updated version of the fiddle you gave me with all bugs ironed out. It looks like I misunderstood part of your goal in my original solution, but I straightened it out here. I have also included the updated jQuery, here:
var speed = 1000;
var back = $("div.backarrow");
var next = $(".nextcol");
var prev = $(".prevcol");
var inner = $(".innerslide");
function clickNext(index) {
next.off("click.next");
inner.animate({
'left': '-=711px'
}, speed, function() {
back.show(); //this line will only be hit if there is a previous column to show
next.delay(speed).on("click.next", function() {
clickNext();
});
});
}
function clickPrev() {
prev.off("click.prev");
inner.animate({
'left': '+=711px'
}, speed, function() {
if (inner.css("left") == "0px") {
back.delay(speed).hide();
prev.delay(speed).on("click.prev", function() {
clickPrev();
});
} else {
back.delay(speed).show();
prev.delay(speed).on("click.prev", function() {
clickPrev();
});
}
});
}
next.on("click.next", function() {
clickNext();
});
prev.on("click.prev", function() {
clickPrev();
});​
I was going to also include a condition to check if you were viewing the last column, but, as I don't know what your final implementation will be, I didn't know if it would be applicable. As always, let me know if you need help or clarification on any of this. :)

You could try the step option — a callback function that is fired at each step of the animation:
$('.prevcol').click(function() {
$('.innerslide').animate({ left: '+=711px' },
{
duration: 1000,
step: function(now, fx) {
if (now === 0 ) {
$('div.backarrow').hide();
} else {
$('div.backarrow').show();
}
}
});
});
More examples of usage in this article The jQuery animate() step callback function

Rotating tiles; how to delay a transition after hover

I'm brand spankin' new to Javascript. Here's what I want to do. I want an array of square tiles covering the window and I want them to flip over when the mouse goes over them. I already have a single tile. See the Jsfiddle below.
http://jsfiddle.net/V7cS8/
I would like it so that the tile will flip over completely to the back side, even if the user doesn't hover for the entire animation length (basically, even if the hover is only very brief, I want it to commit to rotating). I want it to hold its flipped state for some minimum amount time and then return if the user is no longer hovering.
Should I be trying to do this entirely in javascript or still using a lot of CSS?

You don't need JavaScript/jQuery at all. Replace all .flip references in your CSS by :hover: http://jsfiddle.net/V7cS8/1/
For delays, you can use transition-delay: 1s.
Apply transition-delay:1s; (delay 1 second, with vendor prefixes) to the normal selector, and transition-delay:0s to the :hover selector. The result is that the backflip will be delayed for 1 second.
Demo: http://jsfiddle.net/s9xcP/2/
Outcome of comment chain: When existing animations have to be completed first, regardless of the hover state, a JavaScript timeout have to be used:
Demo: http://jsfiddle.net/nY8U8/224/
$(function(){
$('.box').hover(function(){
var $this = $(this);
// If not not-ready, do nothing
// By default, the value is `undefined`, !undefined === true
var not_ready = $this.data('box-hover-not-ready');
if (!not_ready) {
$this.addClass('hover');
} else {
// If bosy, defer hover transition
$this.data('box-hover-hovered', true);
}
}, function() {
var $this = $(this);
$this.removeClass('hover');
// Mark state as "busy"
$this.data('box-hover-not-ready', true);
var timeout = setTimeout(function() {
var hovered = $this.data('box-hover-hovered');
if (hovered) {
// If a hover transition is deferred, activate it now.
$this.addClass('hover');
$this.data('box-hover-hovered', false);
}
// Mark state as "not busy"
$this.data('box-hover-not-ready', false);
}, 2000); /* 2 seconds*/
// Remove previous timeout, set new one.
clearTimeout($this.data('box-hover-timeout'));
$this.data('box-hover-timeout', timeout);
});
});

JQuery if hovering on either element

So I have 2 divs. One is "top" and one is "menu." I got "menu" to fade in when you hover on "top" in JQuery, as shown:
$(".top").mouseover(function(){
$(".menu").fadeIn(200);
});
$(".top").mouseout(function(){
$(".menu").fadeOut(200);
});
But I want to make it so if I'm also hovering on "menu," "menu" will stay faded in. How would I do this?

I believe this will do it for you. It waits half a second before hiding the menu. If the user hovers over the menu in that time, then it cancels the hide operation.
var timer;
$(".top").mouseover(function(){
clearTimeout(timer);
$(".menu").fadeIn(200);
});
$(".top, .menu").mouseout(function(){
timer = setTimeout(function() {
$(".menu").fadeOut(200);
}, 500);
});
$(".menu").mouseover(function() {
clearTimeout(timer);
});

Add a variable that remembers if you are hovering on the menu:
var isHoveringMenu;
$(".menu").mouseover(function(){
isHoveringMenu = true;
});
$(".menu").mouseout(function(){
isHoveringMenu = false;
$(".menu").fadeOut(200); // you probably want this here
});
$(".top").mouseover(function(){
$(".menu").fadeIn(200);
isHoveringMenu = true; // not necessary, but sounds good
});
$(".top").mouseout(function(){
if (!isHoveringMenu) {
$(".menu").fadeOut(200);
}
});
You may want to tweak this slightly -- the best solution depends on the spatial relationship between the two divs, so we 'd need to see the layout first.