Develop Reference

Custom cursor not loading on slideshow fade

I am using RoyalSlider plugin to create slideshows on on this site
I have the following javascript to create the two fields that overlay the slideshows, to allow for left and right click navigation. The problem is that the custom cursor doesn't stay loaded during the fade transition between slides. Does anyone know a solution for this?
Many thanks,
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.royalSlider').each(function() {
var slider = $(this);
var sliderInstance = slider.data('royalSlider');
if(sliderInstance) {
var slideCounter = $('<div class="rsSlideCount"></div>').appendTo( slider );
var updCount = function () {
slideCounter.html( (sliderInstance.currSlideId+1) + ' / ' + sliderInstance.numSlides );
}
sliderInstance.ev.on('rsAfterSlideChange', updCount);
updCount();
}
slider.append('<div class="rs-prev"/>');
slider.append('<div class="rs-next"/>');
slider.find('.rs-prev').click(function() {
slider.royalSlider('prev');
});
slider.find('.rs-next').click(function() {
slider.royalSlider('next');
});
});
});
</script>

Add this into your CSS:
div.rs-prev,
div.rs-next {
z-index: 10;
}
This worked for me.

Hover out from two divs simultaneously

Have a look at the following JQuery code:
function my_hover()
{
$( "#up,#down" ).hover(
function() {
$("#up").animate({
"background-color": "#020306"
});
$("#down").animate({
"background-color": "#171716"
});
},
function() {
$("#up").css("background-color","#C8CACF" );
$("#down").css("background-color","#FAFAF8" );
}
);
}
There are two divs: #up,#down which I cannot wrap into a parent div(due to design restrictions). What I want to do is to animate the change in background color whenever #up or #down are being hovered. However, in case the mouse leaves one div by going directly to the other(the two divs are stuck together vertically) I do not want the last two lines of the above code being applied. I want them to be applied only when mouse hovers out from both divs. How may I achieve that? At users.sch.gr/ellhn you may see what is happening with the above code in the first left rectangle with the target photo (transition between up and down provokes change of color and that's not desirable).
Thank you

Try this.
HTML
<div id="up">Up</div>
<div id="down">down</div>
CSS
div{ transition:all 0.25s ease-in-out;}
#up{background:#C8CACF;}
#down{background:#FAFAF8;}
#up.up-hover{background-color:green;}
#down.down-hover{background-color:yellow;}
Script
$('#up, #down').mouseenter(function(){
//alert('hi')
$("#up").addClass('up-hover');
$("#down").addClass('down-hover');
})
.mouseleave(function(){
//alert('hi')
$("#up").removeClass('up-hover');
$("#down").removeClass('down-hover');
});
Fiddle Demo

Using the technique #nnnnn alluded to, e.g., using a timeout:
(function init() {
var $up = $('#up'),
$down = $('#down'),
hovered = false;
$up.hover(over, out);
$down.hover(over, out);
function over() {
hovered = true;
$up.css({
"background-color": "#020306"
});
$down.css({
"background-color": "#171716"
});
}
function out() {
setTimeout(function to() {
if (!hovered) {
$up.css("background-color", "#C8CACF");
$down.css("background-color", "#FAFAF8");
}
}, 1000);
hovered = false;
}
})();
http://jsfiddle.net/TudqT/3/
And with the elements inline next to each other, instead of vertically aligned:
http://jsfiddle.net/TudqT/5/

jQuery toggle not working/hiding nav on click

Im just trying to move a div 40% to the left and then back to 0% on a click/toggle... not sure why its not working i have done it before where it works. For some reason this hides the NAV button and doesnt toggle....
Fiddle
jQuery
$("#mobileNav").toggle(function() {
$("#content").animate({ "left" : "40%" }, 500);
}, function() {
$("#content").animate({ "left" : "0%" }, 500);
});
html
<div class="header">
Nav
</div>
<div id="mainContain">
<div id="menu"></div>
<div id="content"></div>
</div>

That version of toggle has been deprecated and removed, now it only hides and shows stuff, but you can create your own toggle functionality :
$("#mobileNav").on('click', function() {
var toggle = $(this).data('toggle'),
dist = toggle ? '0%' : '40%';
$("#content").animate({ "left" : dist }, 500);
$(this).data('toggle', !toggle);
});
FIDDLE

It doesn't look like anything is triggering your animate calls. Try this
var toggle = false;
$("#mobileNav").click(function(){
toggle = !toggle;
if(toggle)
//do animations
else
//reverse the animations
});

Jquery - trying to select an image within a div

I am new to jquery and am stuck trying to select an image inside a div.
<div class="div-main">
<div class="title"></div>
<div class="description"></div>
<img class="post-thumb" src="img.jpg"/>
</div>
I am trying to make the title and description show only when the the user hovers over the image in the div.
Currently I have it setup so that the animations happen when the div-main is hovered over
$(document).ready(function(){
$(".div-main").hover(
function () {
$(this).children(".title").fadeIn("slow");
$(this).children(".description").fadeIn("slow");
$(".div-main").css({ opacity: 0.1 });
$(this).css({ opacity: 1.0 });
$(this).show();
},
function () {
$(".title").hide();
$(".description").hide();
$(".div-main").fadeIn("fast");
$(".div-main").css({ opacity: 1.0 });
}
);
});

jsBin demo
$(".div-main").hover(
function () {
$(".title, .description", this).fadeTo(300, 1);
$(".div-main").stop().fadeTo(0, 0.3);
$(this).fadeTo(300,1);
},function () {
$(".title, .description").hide();
$(".div-main").stop().fadeTo(300, 1);
});

I have decided to post this as an answer.
$('.div-main > img')
.hover(function(){
$(this).parent().find(".title, .description").fadeIn(); //Title & description
},
function(){
$(this).parent().find(".title, .description").fadeOut();
}
);

To make the description and title fade in and out when you hover over the image, you could do this:
$('.div-main .post-thumb').hover(function(){
$(this).parent().find(".title, .description").stop(true).fadeIn();
},
function() {
$(this).parent().find(".title, .description").stop(true).fadeOut();
});
If the image is normally the only visible content except when hovering, then this might work better because things would remain visible when hovering over the title and description too:
$('.div-main').hover(function(){
$(this).find(".title, .description").stop(true).fadeIn();
},
function() {
$(this).find(".title, .description").stop(true).fadeOut();
});

jQuery hover animation

I want to appy a hover effect to div boxes, may be up to 60 boxes on a page. It should be quite equal to the css hover effect but I want to apply a fade effect to the hover color. E.g. I have light green as background color and dark green as hover background color, then it should fade from the one to the other side.
I played a bit around with jQuery but could get the result that I wanted:
$(".box").hover(function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 1000);
},function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 500);
});

You need to use a decent color plug-in. See jQuery animate backgroundColor for more information.
Also, your original code is not really going to do anything, as you want it to animate to another colour afterwards.
$(".box").each( function () {
$(this).data('baseColor',$(this).css('color'));
$(this).hover(function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 1000);
},function() {
$(this).animate({ backgroundColor: $(this).data('baseColor') }, 500);
});
});
EDIT: see http://jsfiddle.net/eHXNq/2/ for example.

I don't have much experience with jQuery, but it looks like just a copy-and-paste mistake, since you have the same color in both .animate()s

I believe you are not using the hover function like you should. the second function is used when the user leave the box so your should return to the original color.
White for example:
$(".box").hover(function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 1000);
},function() {
$(this).animate({ backgroundColor: "#FFFFFF" }, 500);
});

$(".box").hover(
function () {
// this is mouseover
},
function () {
// this is mouse out
}
);
see example here
http://jsfiddle.net/krRse/

review this code, I think this might help you!!!
<!DOCTYPE html>
<html>
<head>
<style>
ul { margin-left:20px; color:blue; }
li { cursor:default; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<ul>
<li>Milk</li>
<li>Bread</li>
<li class='fade'>Chips</li>
<li class='fade'>Socks</li>
</ul>
<script>
$("li").hover(
function () {
$(this).append($("<span> ***</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
//li with fade class
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
</script>
</body>
</html>
take a look at this link too,
http://api.jquery.com/hover/

60 boxes? Please use event delegation, or live.