We Keep Coding

How to add a class to an element based on another elements left value?

If you visit this code pen and click anywhere on the home page it cycles through three boxes. If you scroll down you will see the content changes too.
I want to underline the correct nav bar word depending on the box currently being displayed.
Box 2 is the default at page load, and then the nav-bar should have the underline class active on the id="home". Then you click and it moves to box 3, which should apply the underline class to id="blog".
It is using left values to cycle through the elements. How can I check which box is active just by looking at the left value?
$('.box').click(function() {
$('.box').each(function() {
if ($(this).offset().left < 0)
{
$(this).css("left", "150%");
}
else if ($(this).offset().left > $('#container').width())
{
$(this).animate({
left: '0%',
}, 500 );
}
else
{
$(this).animate({
left: '-150%',
}, 500 );
}
});
});
The class I want to apply
.underline-active {
border-bottom: 2px solid white;
}
to the corresponding nav-bar ID:
#box1 {
left: -150%;
}
#box2 {
}
#box3 {
left: 150%;
}
Also, is there a way to animate the underline sliding from one nav item to the next?

Your navbar elements might be a little too big since whenever I add the .underline-active class to the them it extends past the edge of the element (at the same time, this would probably make creating a css animation easier since they seem to be equidistant this way).
In any event, you can do this with another $().each() call. Just look for whichever element has offset.left == 0. JQuery provides plenty of methods to add/remove CSS classes to an item so from there it's simply figuring out which navbar element gets the .underline-active class which I did using a switch statement. Your new js should look like this:
$(document).ready(function() {
$('#home').addClass('underline-active');
$('.box').click(function() {
$('.box').each(function() {
if ($(this).offset().left < 0)
{
$(this).css("left", "150%");
}
else if ($(this).offset().left > $('#container').width())
{
$(this).animate({
left: '0%',
}, 500 );
}
else
{
$(this).animate({
left: '-150%',
}, 500 );
}
});
$('.nav-button').each(function() {
$(this).removeClass('underline-active');
});
$(".box").each(function() {
if ($(this).offset().left == 0) {
switch($(this).attr('id')) {
case 'box1':
$('#home').addClass('underline-active');
break;
case 'box2':
$('#blog').addClass('underline-active');
break;
case 'box3':
$('#about').addClass('underline-active');
break;
}
}
})
});
});
If you want to animate the movement of the underline then you should alter this process slightly to use transitions instead of removing/adding it from elements. I'd imagine you can use the same animation that scrolls the page to move the underline since the navbar elements seem to be a consistent distance apart.

change colour of header when scroll

I'm going to cut to the chase straight away, basically I want my header to go from transparent (no background attribute in the css) to having a background-color of white on scroll.
I am using this JavaScript and not getting anywhere.
$(window).scroll(function() {
var changeNav = 'rgba(0, 0, 0, 0.36)'
if ($(window).scrollTop() > 200) {
changeNav = '#ffffff';
}
$(.header).css('background-color', changeNav);
});
Also, is there a way I can make it go back on itself? So I am at the bottom of the page and the header has a background-color of white, but when I scoll to the top, JavaScript takes the attribute out? I have been playing about and searching but couldn't find anything.
NOTE: I had gotten this piece of JavaScript from another place on Stack Overflow, here
Thank you so much

jsBin demo
$(.header) should be $(".header")
also your script can be "simplified" to:
$(window).scroll(function() {
var scrolled = $(this).scrollTop() > 200;
$(".header").css('background-color', scrolled ? '#fff' : "rgba(0, 0, 0, 0.36)");
});
Note that the above will force .header background color change (even from #fff to #fff) on every scroll. To leverage that and to make sure that you have the right colors even if the user resizes the window use:
$( function () { // DOM ready to be manipulated
var $header = $(".header"); // Cache elements for intensive actions
$(window).on("scroll resize", function() {
if($(this).scrollTop() > 200){
$header.css('background-color', "#fff" );
}else{
$header.css('background-color', "rgba(0, 0, 0, 0.36)" );
}
});
});
Ofc, make sue you've included the jQuery library inside the <head> of your document:
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

overflow-y: scroll causing issues with JQuery

When I add overflow-y:scroll to the .nav styling the button to open the navigation requires 2 clicks. Change this to overflow: none and it only requires 1 click as intended when using the following jquery:
$(function(){
var nav = $('.nav'),
navBut = $('.navBut');
navBut.click(function(){
if(nav.width() === 0){
nav.stop().animate({ width: '15%', opacity: '1.0' }, 300);
} else {
nav.stop().animate({ width: '0', opacity: '0.0' }, 300);
}
});
Can anybody see why this would be the case or how I can solve this?
http://jsfiddle.net/9ubxyw0t/2/

Rather than checking if the width of .nav is equal to 0, you need to check to see if it is less than or equal to 0.
Your original issue only seemed to effect certain browsers. It seems like some browsers would give the element a negative width when the overflow property was set to scroll. I guess this is just a cross-browser rendering inconsistency.
Updated Example
var nav = $('.nav'),
navBut = $('.navBut');
navBut.on('click', function () {
if (nav.width() <= 0) {
nav.stop().animate({
width: '15%',
opacity: '1.0'
}, 300);
} else {
nav.stop().animate({
width: '0',
opacity: '0.0'
}, 300);
}
});

jQuery: how to place a highlight to cover another element?

I want to create a transparent highlight to cover a particular DOM element.
My highlight will occasionally be switched from one element to another.
The basic implementation is easy: create an empty <div class='highlight'/> with css attributes for background-color and opacity.
But having it follow another element seems hard, because the highlighted element could move or resize or show or hide, and I'm not sure how to have the highlight follow it.
There must be someone who's done this before -- Firebug seems to have the effect I want, but I don't know how to delve into the Firebug source code + find the relevant piece.
Any suggestions?

Any reason you can't use the jQuery highlight effect?

Simple HTML element at the top of your DOM:
<div id="highlighter" class="highlight"></div>
Style it with abstracted CSS:
div {
border:1px solid #CCC;
position:relative;
}
#highlighter {
display:none;
border:none;
}
.highlight {
z-index:999999;
background-color:yellow;
opacity:.5;
-moz-opacity:.5;
position:absolute;
width:100%;
height:100%;
}
The JQuery is a little more complicated if you want the highlighter to tag along with your animated divs:
$('div').not('.highlight').on('click', function() {
var $this = $(this);
if($this.find('.highlight').length > 0) {
$this.find('.highlight').remove();
} else {
$('#highlighter').clone().appendTo($this).
width($this.width()).
height($this.height()).
css({
'top': '0px',
'left': '0px'
}).
show();
}
});
(function morph(){
$('div').not('.highlight').each(function(){
var $this = $(this);
$this.animate({
'top' : someVal + 'px',
'left' : someVal + 'px',
'width': someVal + 'px',
'left' : someVal + 'px',
}, {
duration: 1000,
step: function(){
// Here we tell the highlighter to sync up with the morphed parent.
$this.find('.highlight').width($this.width()).height($this.height());
},
complete: morph
});
});
}());
Demo: http://jsfiddle.net/AlienWebguy/7t4jT/

jQuery: how can I control a div's opacity when hovering over another div?

I am currently working on my portfolio website which uses a very simple navigation.
However what I want to do is have the drop shadow beneath the type become stronger (read: higher opacity/ darker) when the type is being hovered on.
Right now my code looks as follows and does not generate any errors but simply does not do anything either.
For a good understanding of what I mean please have a look at the website with a live example.
/* Work | Play | About | Contact */
/* Shadow Opacity */
$(document).ready(function() {
$('#workShadow', '#playShadow', '#aboutShadow', '#contactShadow').fadeTo( 0, 0.1);
});
/* Shadow Hover effect */
$(document).ready(function() {
$('a#work').hover(function() {
$('#workShadow').fadeTo( 200, 0.5);
}, function() {
$('#workShadow').fadeTo( 400, 0.1);
});
});
/* Type movement on hovering */
$(document).ready(function() {
$('a.shift').hover(function() { //mouse in
$(this).animate({ paddingTop: 85, paddingBottom: 2 }, 200);
}, function() { //mouse out
$(this).stop().animate({ paddingTop: 75, paddingBottom: 12 }, 400);
});
});
Basically I need the opacity of the shadow elements (4 individual ones) to start at 10% opacity and while the user hovers, the type moves down (this part is working) and simultaneously the shadow becomes stronger, increases to 60% opacity. Then revert back to 10% when on mouseOut.

This line is wrong - it is passing a bunch of arguments to the $() function.
$('#workShadow', '#playShadow', '#aboutShadow', '#contactShadow').fadeTo( 0, 0.1);
As the documentation notes, jQuery doesn't expect N arguments as a selector, but 1:
$('#workShadow, #playShadow, #aboutShadow, #contactShadow').fadeTo( 0, 0.1);
It is common (and good) practice to give a set of objects that should do something a common class or to select them in a smarter than just listing all their IDs. Based on your current HTML, this selector gets all the shadow <div>s in the menu, and is much shorter - you won't have to modify your code if you add a new menu element later on, for example:
$('div','#navigationFrame').fadeTo(0, 0.1);
I also see you have this:
<li id="work"><a id="work" ...>
This is really, really, wrong. IDs should be unique in the document. By having more than 1 ID in the document not only are you breaking best practices, ID selection on jQuery will go crazy and won't work as expected. Like the fadeTo selector, you can change the shadow changing code to a cleaner:
$('a','#navigationFrame').hover(function() {
$(this).next('div').fadeTo(200, 0.5);
}, function() {
$(this).next('div').fadeTo(400, 0.1);
});
I tested the website with these changes and it works fine.
What the selectors in my examples are doing is taking advantage of jQuery's context. By doing this:
$('a','#navigationFrame');
Or this:
$('div','#navigationFrame');
We are telling jQuery "only give me the <a> (or <div>) elements inside #navigationFrame.
It is equivalent to this:
$('#navigationFrame').find('a');
It is a good idea to take advantage of this. I see you have a tendency to manually list the elements you're trying to do stuff to do even if they are all similar in some way. Try to shake this habit and let jQuery's powerful selectors get what you want from the document.

I use this:
$(".thumbs img").addClass('unselected_img');
$('.thumbs img').click(function() {
$(this).addClass('selected_img');
if ($(this).is('selected_img')) {
$(this).removeClass('selected_img');
} else {
$('.thumbs img').removeClass('selected_img');
$(this).addClass('selected_img');
}
});
// hover the lists
$('.thumbs img').hover(
function() {
$(this).addClass('selected_img_h');
},
function() {
$(this).removeClass('selected_img_h');
});`
and style:
.selected_img
{
opacity: 1; filter: alpha(opacity = 100);
border:none;
}
.selected_img_h{
opacity: 1; filter: alpha(opacity = 100);
border:none;
}
.unselected_img
{
opacity: 0.6; filter: alpha(opacity = 60);
border:none;
}