We Keep Coding

When hovering over parent div change image and heading at the same time

I need to be able to change the color of the my headings and the picture when the user hovers over the parent div. It works individually meaning when I hover over id="cf" the picture changes, but not the title and visa versa but not at the same time. Any help would be appreciated.
$(document).ready(function(){
$("#cf img").hover(function(){
$(this).css("-webkit-filter", "grayscale(0)");
}, function(){
$(this).css("-webkit-filter", "grayscale(1)");
});
$(".blue-bar-info").hover(function(){
$(this).css("background", "pink");
}, function(){
$(this).css("background", "blue");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cf">
Picture
<div id="blue-bar" class="blue-bar-info">
<div class="inner">
<h4>Title</h4>
<span>Sub Title</span>
</div>
</div>
</div>

To achieve this I'd suggest you instead use CSS. It was designed for the purpose of changing the UI, performs much better than JS and avoids the possible FOUC when the page loads.
To do this, you can set the default styles, then override them in the :hover pseudo-selector, like this:
#cf img {
-webkit-filter: grayscale(1);
width: 150px;
height: 150px;
}
#cf:hover img { -webkit-filter: grayscale(0); }
#cf .blue-bar-info { background-color: pink; }
#cf:hover .blue-bar-info { background-color: blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cf">
<img src="https://i.imgur.com/KwkmSK4.jpg"/>
<div id="blue-bar" class="blue-bar-info">
<div class="inner">
<h4>Title</h4>
<span>Sub Title</span>
</div>
</div>
</div>

JS solution, but recommend is use CSS for this ;)
$("#cf").hover(function(){
$("#cf img").css("-webkit-filter", "grayscale(0)");
$(".blue-bar-info").css("background", "pink");
}, function(){
$("#cf img").css("-webkit-filter", "grayscale(1)");
$(".blue-bar-info").css("background", "blue");
});

Something like this?
$(document).ready(function () {
$("#cf img, .blue-bar-info").hover(function () {
$('#cf img').css("-webkit-filter", "grayscale(0)");
$('.blue-bar-info').css("background", "pink");
}, function () {
$('#cf img').css("-webkit-filter", "grayscale(1)");
$('.blue-bar-info').css("background", "blue");
});
});

I believe your code is fine except you are using wrong selector for parent div in your code.
Can $("#cf") instead of $("#cf img") solve your problem?

changing the color of anchor element while clicking on enclosing div

I need to change the color of my anchor element from black to white while the enclosing div is clicked.
code:
$(document).ready(function() {
$(".settings-list-container").click(function() {
$(".functionHyperlink").css("background-color", "red");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="settings-container" ng-controller="settingController">
<div id="settings-list">
<div class="settings-list-container" ng-repeat="element in elements" ng-click="openTab(element,$event);" target="_self">
{{element.caption}}
</div>
</div>
<div id="settings-list-content" ng-include="tabV.view">
</div>
</div>

To achieve this you can use toggleClass() to add/remove a pre-defined CSS rule you apply to the .settings-list-container element. This class can then be set to affect the child .functionHyperlink element, something like this:
$(document).ready(function() {
$(".settings-list-container").click(function() {
$(this).toggleClass('active');
});
});
.functionHyperlink {
color: #000;
}
.settings-list-container.active .functionHyperlink {
background-color: #F00;
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="settings-container" ng-controller="settingController">
<div id="settings-list">
<div class="settings-list-container" ng-repeat="element in elements" ng-click="openTab(element,$event);" target="_self">
{{element.caption}}
</div>
</div>
<div id="settings-list-content" ng-include="tabV.view"></div>
</div>
If you only want the colour to be added once, change toggleClass() to addClass().

A possibility is to use angular.element() and css selector
angular.element('.functionHyperlink').css('color', '#fff');

If I understand you correctly, you only want to achieve the color change while clicking. You could try so with pure CSS like this.
.settings-list-container:active .functionHyperlink {
color: white;
}
Or you could go by jQuery and add a class while clicking the div:
$(document).ready(function() {
"use strict";
$('.settings-list-container').each(function() {
$(this).bind('mousedown', function() {
$(this).find('.functionHyperlink').addClass('inverted');
}).bind('mouseup', function() {
$(this).find('.functionHyperlink').removeClass('inverted');
});
});
});
.functionHyperlink.inverted {
color: white;
}
If you want the element to stay inverted, use the following jQuery instead.
$(document).ready(function() {
"use strict";
$('.settings-list-container').each(function() {
$(this).click(function(e) {
e.preventDefault();
$(this).find('.functionHyperlink').toggleClass('inverted');
});
});
});

Create fade-out and slide-in animation for HTML content

I am trying to get an animation effect where current content fades out, and is then replaced by content sliding in from the right side of the screen. My current effort:
http://jsfiddle.net/LKazq/3/
<p>header</p>
<div id="wrapper">
<div style="height: 400px; background-color: red;">
<p>Here is some text!</p>
<button id="next">And a button!</button>
</div>
</div>
<p>footer</p>
$('#next').click(function () {
var current = $('#wrapper :first-child');
var next = $('<div>').css("height", "400px").css("background-color", "blue");
next.hide();
current.fadeOut(800, function () {
current.remove();
$('#wrapper').prepend(next);
next.show("slide", { direction: "right" }, 800);
});
});
Two problems:
The removed element is still taking up space; notice how the footer gets pushed down.
Is there anyway to suppress the horizontal scroll bar?
Any tips on better ways to do this are appreciated. Thanks!

The reason for the vertical scroll back is because of an additional UI wrapper that jQuery UI puts in place.
You can do this with regular jQuery and it should be just fine:
$('#next').on('click',function(){
var wrapper = $('#wrapper'),
current = wrapper.children().first(),
next = $('<div>').css({
height:400,
backgroundColor:'blue',
marginLeft:'100%',
display:'none'
});
current.fadeOut(800, function () {
$(this).remove();
wrapper.prepend(next);
next.show().animate({marginLeft:0},800);
});
});
Updated jsFiddle.
That's the quick-fix way to do it. An additional step is to externalize your CSS into classes (which you really, really should do instead of inline styles) to make things a bit cleaner:
HTML:
<p>header</p>
<div id="wrapper">
<div class="first">
<p>Here is some text!</p>
<button id="next">And a button!</button>
</div>
</div>
<p>footer</p>
CSS:
wrapper {
overflow:auto;
overflow-x:hidden;
}
.first {
height:400px;
background-color:red;
}
.second {
height:400px;
background-color:blue;
}
Better jQuery:
$('#next').on('click',function(){
var wrapper = $('#wrapper'),
current = wrapper.children().first(),
next = $('<div>').addClass('second').css({
marginLeft:'100%',
display:'none'
});
current.fadeOut(800, function () {
$(this).remove();
wrapper.prepend(next);
next.show().animate({marginLeft:0},800,function(){
$(this).removeAttr('style');
});
});
});
Here is a second jsFiddle for that.
And finally the best (although not ancient-browser compliant) way to do it, by maximizing CSS.
CSS:
#wrapper {
overflow:auto;
overflow-x:hidden;
}
.first {
height:400px;
background-color:red;
}
.second {
height:400px;
background-color:blue;
margin-left:0;
-webkit-transition:margin-left 800ms;
-moz-transition:margin-left 800ms;
-o-transition:margin-left 800ms;
transition:margin-left 800ms;
}
.secondPushed {
margin-left:100%;
}
Smaller jQuery:
$('#next').on('click',function(){
var wrapper = $('#wrapper'),
current = wrapper.children().first(),
next = $('<div>').addClass('second secondPushed').hide();
current.fadeOut(800, function () {
$(this).remove();
wrapper.prepend(next);
next.show().removeClass('secondPushed');
});
});
This is the best from an overhead perspective, and its the way to do it in the modern web world, but it doesn't work on IE9 and below.
Here's a jsFiddle for that one.

addClass Working But Not removeClass

I am trying to create a toggling highlight effect using addClass and removeClass.
<head>
<style>
.box-highlight {
border: 2px solid yellow;
}
</style>
<script type="text/javascript" src="javascript/vendor/jquery-2.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#box').bind('click', function() {
if ($(this).hasClass('box-highlight')) {
$(this).removeClass('box-highlight');
}
$(this).addClass('box-highlight');
});
});
</script>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; background-color: silver">
</div>
</body>
The addClass is working properly, but removeClass does not. I know there is a toggleClass method but I am just wondering what is wrong with this code.

You're removing the class, then adding it back with no delay, before the UI can be redrawn. You need to do one or the other, which suggests an else:
if ($(this).hasClass('box-highlight')) {
$(this).removeClass('box-highlight')
} else {
$(this).addClass('box-highlight')
}

The problem with your code is that it runs very quickly, and you won't see the effect :).
To make such effect, you can use a timer or delay. For example, you can do like this:
$("#box").addClass("box-highlight")
.delay(300).queue(function(next){
$(this).removeClass("box-highlight");
next();
});

Try this................
$(document).ready(function() {
$('#box').bind('click', function() {
if ($(this).hasClass('box-highlight')) {
$(this).removeClass('box-highlight');
}else{
$(this).addClass('box-highlight');
}
});
});

jQuery .addClass and .fadeIn?

So, I have these h1 elements that are links and I want to add a class to them and fade that class in once the element has been hovered over, and then onMouseOut have the class removed, whilst fading the class. But using the fade function does nothing for me. Seeing as it hides the element. Any ideas?
jQuery(".categories h1 a").hover(
function () {
jQuery(this).fadeIn("slow").addClass("active");
},
function(){
jQuery(this).fadeOut("slow").removeClass("active");
});
});
Thanks!
EDIT:::
jQuery("h1").hover(function() {
jQuery(this).stop().animate({ backgroundColor: "#a7bf51"}, 800);
},function() {
jQuery(this).stop().animate({ backgroundColor: "#FFFFFF"}, 800);
});
});

Try using jQuery UI .addClass and .removeClass.
$(function() {
$(".categories h1 a").hover(function() {
$(this).stop(true,true).addClass("active", 500);
}, function() {
$(this).stop(true,true).removeClass("active", 100);
});
});
DEMO (For some reason, it doesn't animate properly(fade) for the first time.. but then onwards it works fine)
Edit: Updated for completeness.
You can also use .animate to get the desired effect. See below,
$(function() {
$(".categories h1 a").hover(function() {
$(this).stop().animate({
backgroundColor: "#a7bf51"
}, 800);
}, function() {
$(this).stop().animate({
backgroundColor: "#FFFFFF"
}, 800);
});
});
DEMO

If you dont wanna use jquery UI because it will be an extra load, you can do the following :
(was useful to me when the 'hidden' bootstrap class is used in my app)
Fade In slowly while removing the class :
$('.myClass').removeClass('hidden').fadeOut(0).fadeIn(10000)
Fade Out slowly, add the class and then fade back in:
$('.myClass').fadeOut(1000, function(){
$(this).addClass('hidden'); //or any other class
}).fadeIn(10000)
hope this will simplify someone's task!

Sounds like you want the styles of the class to fade in. You should look into animate() for that: http://api.jquery.com/animate/
fadeIn simply fades in the element.

I don't think you can cross fade between classes, but you can use the animate function. animate allows you to affect any css variable over a specified time.
http://api.jquery.com/animate/
I know that removes some styling from the css file, but again, I don't think jQuery will cross fade between classes.

If you have the jQuery UI library loaded, you can set an extra param for the toggleClass function.
Set your opacity's via css.
h1 a {
opacity:0.8;
}
h1 a.hovered {
opacity: 1.0;
}
then
jQuery(".categories h1 a").hover(function(e) {
$(this).toggleClass('hover', 1000);
}
The 1000 is the millisecond counter on the event. So the effect should fade to 1.0 opacity when hovered in a second and fade out in 1 second when not hovered.

Try this, and here's the jsFiddle (enter link description here) :
<script type="text/javascript">
jQuery(".categories h1").hover(function () {
jQuery(this).stop().animate({ "background-color": "#a7bf51"}, 800);
jQuery(this).addClass("active");
jQuery(this).find("a").fadeIn("slow");
},
function() {
jQuery(this).stop().animate({ "background-color": "#FFFFFF"}, 800);
jQuery(this).addClass("active");
jQuery(this).find("a").fadeOut("slow");
});
</script>
<style type="text/css">
.categories h1 {
background-color: rgb(200, 200, 200);
display: block;
padding: 5px;
margin: 5px;
width: 100px
}
.categories h1 a {
display: none;
}
</style>
<div class="categories">
<h1>Item 1</h1>
<h1>Item 2</h1>
<h1>Item 3</h1>
</div>​