We Keep Coding

Get closest div inside clicked <li>

I'm trying to get the closest DIV inside a li item, to apply a new class:
<ul id="menu">
<li class="here">
<img src="image">
<div class="border selected"></div>
</li>
<li class="here">
<img src="image">
<div class="border"></div>
</li>
.....
I wanted to be able to click inside the li tag and apply the class 'selected' to the div that already has class border.
I was trying to use .closest and .find but I couldn't get the good result.
Is there any recommendation? Thanks!
EDIT: https://jsfiddle.net/a8pm1aj7/

Please look at this jsfiddle.
The relevant code is:
$("#menu li").on("click", function(){
$("#menu li div.border").removeClass("selected");
$(this).find("div.border").addClass("selected");
});
This code removes the .selected class from all previously selected elements.
If I understand your question correctly, this should work for you.

.children() seems to work fine.... You may have more of an issue with CSS hierarchy. Make certain the selected class is defined after the border class in the CSS.
$(document).ready(function() {
$( '.here' ).on('click', function() {
var theDiv = $(this).children('.border');
$('.border').not(theDiv).removeClass('selected');
$( theDiv ).toggleClass('selected');
});
});
li { display: block; margin: 10px; width: 80%; }
.border { height: 20px; background: #eee; }
.selected { background: #fee; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li class="here">
Text/image
<div class="border"></div>
</li>
<li class="here">
Text/image
<div class="border"></div>
</li>
</ul>
Updated your fiddle and fixed issues with it.
- You had the div positioned absolute and set at 100% width and 100% height. S0 basically, it was the size of the window. Actually linked the jQuery library to the fiddle.

JQuery Hamburger Menu Functions

Below is the script I am trying to write to control two functions when the website's menu button is clicked; it is a hamburger menu that toggles the menu links. The first function shows/hides the menu links and the second fades an element on the page, both activated when the menu button is clicked.
In the first function, I am having trouble creating a delay/fadeIn for the menu links. I need '.navbar-item' to fade in and out when the menu is clicked. In the second function, I need to revert the opacity to 1.0 when the menu is clicked a second time. I can not get any of the effects to occur after the first effect has completed, i.e Menu is clicked to fade in menu links and dim '.values', menu is clicked to fade out menu links and revert '.values' to 100% opacity.
<div class="container">
<section class="header">
<h2 class="title">Title
<li class="client-item"><a class="client-link" href="#"><i class="fa fa-bars"></i></a></li></h2>
</section>
<nav class="navbar" style="display: none;">
<ul class="navbar-list">
<li class="navbar-item"><a class="navbar-link" href="#" target="_top">Contact</a></li>
<li class="navbar-item navbar-link">Store</li>
</ul>
</nav>
<div class="section values">
<div class="container">
<div class="row">
<div class="one-full column">
</div>
</div>
</div>
</div>
// Main Script For Site
$(document).ready(function() {
$('.client-link').click(function() {
$('.navbar').slideToggle("fast");
$('.values').animate({opacity:'0.6'});
});
});

This answer gives how to get simultaneous animations. jQuery's own docs describe slideToggle, including the bits you'd need to set similarly to how animate would need to be set.
I might also point out that there's no reason to separate the animate calls like you have. Since they're triggered by the same thing, they should be called from the same place.
Something like this, I think:
$(document).ready(function() {
$('.client-link').click(function() {
var $this = $(this);
var opening = !$this.data('isOpen');
$this.data('isOpen',opening);
if(opening) {
// opening animations
$('.navbar').slideDown({duration:'fast',queue:false});
$('.values').animate({opacity:1},{queue:false});
} else {
// closing animations
$('.navbar').slideUp({duration:'fast',queue:false});
$('.values').animate({opacity:0},{queue:false});
}
});
});
Though you may be better off moving your animations to CSS and just toggling a class.

You were very close, you have just made some simple mistakes. Here is a JSFiddle gives you a solution to your problem: https://jsfiddle.net/nv1gytrs/1/
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="client-link"></div>
<div class="navbar"></div>
<div class="values"></div>
CSS:
.client-link {
height: 100px;
width: 100px;
border: 2px solid green;
}
.navbar {
height: 100px;
width: 100px;
border: 2px solid red;
}
.values {
height: 100px;
width: 100px;
border: 2px solid blue;
transition: all 1s;
}
.fade {
opacity: 0.2;
}
JS:
// Main Script For Site
$(document).ready(function() {
$('.client-link').on("click", function() {
$('.navbar').slideToggle("fast");
$('.values').toggleClass("fade");
});
});
Of course, all of your HTML and CSS would be unique to what you are trying to accomplish, this is just an example.

Show/Hide divs that occupy the same space with separate links

I'm having an issue with trying to get divs to occupy the same space, and to also have a show/hide ability on them when clicking their respective links.
Can anybody please let me know the proper jQuery to put in to make this happen? Below is the code without jQuery.
The idea is that when I click on Print 1, then the piece #1 will show up, and when I click Print 2, #1 will disappear and #2 will take it's place.
Current HTML looks something vaguely like this:
<div id="content">
<div id="SideNav">
<ul>
<li>
<a>Print 1</a>
</li>
<li>
<a>Print 2</a>
</li>
</ul>
</div>
<div id="pieces">
<div id="1">
</div>
<div id="2">
</div>
</div>
</div>
CSS is basically this:
#content {
width:848px;
position:relative;
}
#SideNav {
width:169px;
float:left;
}
#pieces {
width:678px;
top:0px;
float:right;
position:relative;
}
#1 {
position:absolute;
top: 0px;
right: 0px;
z-index:1;
}
#2 {
position:absolute;
top: 0px;
right: 0px;
z-index:2;
}

JSFIDDLE
a Basic example of what you want to achieve :
JS :
$('a').on("click",function(){
alert($(this).text());
if($(this).text() == "Print 1"){
$('#1').show();
$('#2').hide();
}else{
$('#2').show();
$('#1').hide();
}
});
putting an event on click of your anchors and then checking the value of the clicked anchor.

Assuming the first link toggles the visibility of the first div and the second link toggles the second div
$('a').click(function() {
var index = $(this).closest('li').index();
$('#pieces div').eq(index).toggle();
}
And set display:none on the the second div

The trick is to make your markup structure a little more meaningful, and your CSS styling a little more generalized. This allows you to leverage common indexes between the links and the tabs below, as well as to define the style using a single CSS class. Then you can easily scale the solution for any number of links and panels:
jsFiddle
HTML
<div id="content">
<div id="SideNav">
<ul>
<li> Print 1
</li>
<li> Print 2
</li>
</ul>
</div>
<div id="pieces">
<div id="panel1" class="panel">First Div</div>
<div id="panel2" class="panel">Second Div</div>
</div>
</div>
CSS
/*
#content, #SideNav, #pieces
Same As Before
*/
.panel {
display: none;
position:absolute;
top: 0px;
right: 0px;
}
JS
$(function () {
$("a[id^='link']").click(function (e) {
e.preventDefault();
var index = this.id.replace("link", "");
$(".panel").hide();
$("#panel" + index).show();
});
});

You setup the click function for each of the anchors within the #sideNav container, prevent the default anchor tag function(preventDefault(), in case an href attribute is provided) and then execute what you want to do.
$('#sideNav a').click(function(e){
// prevent default link event
e.preventDefault();
// use show()/hide() or toggle()
});

Change Link Styling Based on Current Div

I have a single HTML page with a fixed position top level navigation menu with links that lead to different sections. Is there a way to change the color of my links when a user reaches the corresponding section (either by clicking the link itself or scrolling down to the section)?
This is what my HTML looks like, basically:
<div id="topNav">
<ul>
<li>Contact</li>
<li>Web Design</li>
<li>Home</li>
</ul>
</div>
<div id="home">
<img src="images/dog.jpg" class="bg" />
</div>
<div id="web_design">
<img class="titleImage" src="images/web_design.jpg" />
</div>
<div id="contact">
<img class="titleImage" src="images/contact.jpg" />
</div>
And this is the CSS:
#topNav {
width: 100%;
height: 60px;
position: fixed;
top: 20px;
}
I'd like to use a class "selected" for my list items and probably apply it to whichever link corresponds to the user's current section, and do something like:
#topNav li.selected a {
color: #cbcacc;
}
Any help is greatly appreciated!

I think you need an item called scrollspy. There are some free stuffs all the web:
This jsFiddle is an lightweight example
Some jQuery scrollspy plugin in jQuery plugin registry
Bootstrap scrollspy javascript plugin
You can also google with the keyword scrollspy for more stuffs.
This is the code from the above fillde:
JS
// Cache selectors
var lastId,
topMenu = $("#top-menu"),
topMenuHeight = topMenu.outerHeight()+15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href=#"+id+"]").parent().addClass("active");
}
});
HTML
<div id="topNav">
<ul>
<li>Contact</li>
<li>Web Design</li>
<li>Home</li>
</ul>
</div>
<div class="spacer"></div>
<div id="home">
<img src="images/dog.jpg" class="bg" />
</div>
<div id="web_design">
<img class="titleImage" src="images/web_design.jpg" />
</div>
<div id="contact">
<img class="titleImage" src="images/contact.jpg" />
</div>
CSS
#topNav {
width: 100%;
height: 60px;
position: fixed;
top: 20px;
}
div.spacer {
height: 80px;
}
#topNav li.selected a {
color: #cbcacc;
}

CSS3 has an interesting selector :target, you can style your links based on the targets , you can do something like this
:target{color:#ff0000;}
Try google for css3 target selector

jQuery hide div, show div with new content

I am trying to retract my div, then show it with new content based on which link they clicked.
HTML:
<div id="menu">
<ul>
<li>about</li>
<li>contact</li>
<li>cv</li>
</ul>
</div>
<div class="content">
test
<div id="content_1" class="content">
content1
</div>
<div id="content_2" class="content">
content2
</div>
<div id="content_3" class="content">
content3
</div>
</div>
JS:
<script type="text/javascript">
$(document).ready(function(){
$("a.menu").click(function() {
var clicked = $(this).attr('title');
$(".content").hide('slide', {direction: 'right'}, 1000);
$("#"+clicked).show('slide', {direction: 'left'}, 1000);
});
});
</script>
CSS:
.content {
position: absolute;
left:303px;
top: 200px;
width: 100%;
margin-top: 200px;
background: #6c7373;
}
#content_1, #content_2, #content_3 {
display: none;
}
What happens is: the div retracts, but does not reappear at all, what is going wrong here?
Thanks.

First, notice that the container for all of the potential DIVs has the content class so it's being hidden as well. Since the container is hidden, it won't matter if you "show" one of the contained elements. Second, note that the "hide" statement and the "show" statement will have a race condition since they will both apply to the element that's being hidden. It would be better to show the item in the callback to the hide operation or exclude it from being hidden.
<div class="content_wrapper"> <!-- give it a different class -->
test
<div id="content_1" class="content">
content1
</div>
<div id="content_2" class="content">
content2
</div>
<div id="content_3" class="content">
content3
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("a.menu").click(function() {
var clickedID = '#' + $(this).attr('title');
$(".content:not(" + clickedID +")").hide('slide', {direction: 'right'}, 1000);
$(clickedID).show('slide', {direction: 'left'}, 1000);
});
});
</script>

Change the outer .content to .content-wrapper.

Show and hide are both working at the same time. To avoid the conflict (and not hide then show the content that's visible if the user clicks the same item twice), show the one you want and hide the others by selecting them using siblings()
Working demo
$("a.menu").click(function() {
var clicked = $(this).attr('title');
$("#"+clicked).show(1000).siblings().hide(1000);
});
This will also solve the problem you have that you have given the wrapper div the class of .content too.
Also your ul li structure is wrong. You need the a tags inside the li. li must come directly after ul.