Develop Reference

Trying to make container div change height on click

I am trying to make a container div change set height on click, but am having trouble getting it to work. I am not sure where I messed up and would love input as I am pretty new to Javascript.
$(function() {
$('#menu').click(function() {
$(".outer").css('height','600px ');
});
});
Here is a JS fiddle: https://jsfiddle.net/r92cc51d/2/

If you are just looking to increase the height on click then you don't need to do it in JS. You can do it in html also.
<div id="outer">
<div id="menu" onClick = "document.getElementById('outer').style.height = '600px';">
</div>
</div>

You're missing closing parenthesis for your click function:
$('#menu').on('click', function() {
$('.outer').css('height', '400px');
});
.outer {
width: 200px;
height: 200px;
background-color: #111111;
}
#menu {
height: 20px;
width: 20px;
background-color: #666666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div id="menu">
</div>
</div>

Hover effect to click

Heres basically what the code looks like, it should run if pasted in sublime, what i'm trying to do is get the div to show when the page is loaded and then hide on scroll but when the button is clicked it should show wherever you are on the page. The codes a bit rough but its just a test page
$(window).scroll(function() {
if ($(this).scrollTop()>0)
{
$('.fade').fadeOut();
}
else
{
$('.fade').fadeIn();
}
});
$(function(){
$(".box").click(function(){
$(this).find(".fade").fadeIn();
}
,function(){
$(this).find(".fade").fadeOut();
}
);
});
window.onscroll = function()
{
var left = document.getElementById("left");
if (left.scrollTop < 60 || self.pageYOffset < 60) {
left.style.position = 'fixed';
left.style.top = '60px';
} else if (left.scrollTop > 60 || self.pageYOffset > 60) {
left.style.position = 'absolute';
left.style.margin-top = '200px';
}
}
body {
height: 2000px;
}
.fade {
height: 300px;
width: 300px;
background-color: #d15757;
color: #fff;
padding: 10px;
}
.box{color: red;}
#left{
float: left;
width: 20%;
height: 200px;
background: yellow;
position: fixed;
top: 0;
left: 150px;
}
<div class="box">
<div class="fade" id="left">
show div / hide on click (NOT HOVER)
</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<div style="margin-left: 90% !important;">
<button style=" position: fixed;
/* margin-right: -40% !important; */
margin-top: 0%;
background-color: red;
color: #fff;
padding: 10px 10px;
display: block;
width: 54%;
float: right;
top: 0;">show div again</button></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'>

This could work. If box is clicked, check if .fade element is already visible. If it is, then hide it, if not, show it.
$(".box").click(function(){
if($(".fade", this).is(":visible"))
{
$(".fade", this).fadeOut();
}
else
{
$(".fade", this).fadeIn();
}
});

You can use toggle since you need to alternate fadeIn and fadeOut on click
Replace hover
$(function(){
$(".box").hover(function(){
$(this).find(".fade").fadeIn();
},function(){
$(this).find(".fade").fadeOut();
}
);
});
With toggle
$(function(){
$(".box").toggle(function(){
$(this).find(".fade").fadeIn();
},function(){
$(this).find(".fade").fadeOut();
}
);
});

a quick look at the doc would have saved you headaches: http://api.jquery.com/click

It`s not working for reason - you create buttons dynamically because of that you need to call them with .live() method if you use jquery 1.7
but this method is deprecated (you can see the list of all deprecated method here) in newer version. if you want to use jquery 1.10 or above you need to call your buttons in this way:
$(document).on('click', 'selector', function(){
// Your Code
});
Your code will be something like this.
$(document).on('click', '.box', function(){
$(this).find(".fade").fadeIn();
},function(){
$(this).find(".fade").fadeOut();
});

How to remove a div after a second and make other one change in width in jquery

I need remove a div from DOM after 1 second, I found out how to hide using CSS, but the problem this divs stay in the DOM.
So how can remove this Div from DOM and make the other one be width:100% ?
css:
.header {
width:30%;
}
.sub-header {
width:70%;
}
html:
<div class="header">
I need be removed not hided from DOM after 1 second
</div>
<div class="sub-header">
I need be 100% after 1 second
</div>

Use setTimeout() and apply the animate() as per your need.
setTimeout(function(){
$('.header').remove();
$('.sub-header').animate({
width: '100%',
marginLeft: '40%'
});
}, 1000);
setTimeout(function(){
$('.header').remove();
$('.sub-header').animate({
width: '100%',
marginLeft: '40%'
});
}, 1000);
.header {
width:30%;
}
.sub-header {
width:70%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
I need be removed not hided from DOM after 1 second
</div>
<div class="sub-header">
I need be 100% after 1 second
</div>

Plan your CSS well. You can use setTimeout to add a class and make the change.
setTimeout(function () {
document.body.classList.add("after");
}, 1000);
.header {
width: 30%;
float: left;
}
.sub-header {
width: 70%;
float: left;
}
.after .header {
display: none;
}
.after .sub-header {
width: 100%;
float: none;
}
<div class="header">
I need be removed not hided from DOM after 1 second
</div>
<div class="sub-header">
I need be 100% after 1 second
</div>

setTimeout(
() => {
const elHeader = document.querySelector('.header');
const elSubHeader = document.querySelector('.sub-header');
elHeader.parentNode.removeChild(elHeader);
elSubHeader.classList.add('sub-header_wide');
},
1000
);
.header {
background: red;
width:30%;
}
.sub-header {
background: blue;
transition: width 0.3s;
width:70%;
}
.sub-header_wide {
width: 100%;
}
<div class="header">
I need be removed not hided from DOM after 1 second
</div>
<div class="sub-header">
I need be 100% after 1 second
</div>

Use settimeout()
setTimeout(function(){
$('div.header').remove();
$('div.sub-header').css("width: 100%");
$('div.sub-header').slideDown("300")
}, 1000);
The 1000 is calculated in milliseconds

Animating Multiple Divs

The following code works, but I have a problem since I want to have multiple portfolio objects like this one. If I use the current code it would raise all of the hidden divs (.slide) with text instead of one at a time based on hover. I can't use "this" since that would just make the picture animate upward. I could give everything ids and write a lot of JavaScript code that is repetitive, but I am almost positive that isn't the best way to do things.
Basically, How would you target a div with a hover effect that causes another div to do something and still be able to reuse the code?
The HTML for this section:
<div class="col-md-6 high">
<img class="port" src="http://loremflickr.com/320/240" alt="test">
<div class="slide">
<h3>Test Portfolio</h3>
</div>
</div>
The CSS for this section:
.high {
height: 200px;
overflow: hidden;
}
.port {
width: 100%;
height: 200px;
}
.slide {
background-color: rgba(74, 170, 165, 0.7);
color: white;
position: relative;
top: -34px;
height: 200px;
width: 100%;
padding: 20px;
text-align: center;
}
The JavaScript for this section:
$(document).ready(function(){
var portfolio = {
// moves div with text over portfolio picture on hover
hoverPort: function() {
$(".port").hover(function() {
$(".slide").stop().animate({"top" : "-110px"});
}, function() {
$(".slide").stop().animate({"top" : "-34"});
});
}, // end of hoverPort function
} // end of portfolio object
portfolio.hoverPort();
}); // end of document.ready

Of course you can use this, not to animate the element itself but to refer another "closest" element based on that:
$(".port").hover(function() {
$(this).next('.slide').stop().animate({"top" : "-110px"});
}, function() {
$(this).next('.slide').stop().animate({"top" : "-34"});
});
Demo Snippet
$(".port").hover(function() {
$(this).next('.slide').stop().animate({
"top": "-110px"
});
}, function() {
$(this).next('.slide').stop().animate({
"top": "-34"
});
});
.col-md-6 {
float: left;
width: 50%;
padding:25px;
box-sizing:border-box;
}
.slide {
position: relative;
top: -60px;
color: white;
background: red;
font-size: 2em;
font-family: sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 high">
<img class="port" src="http://loremflickr.com/320/240" alt="test">
<div class="slide">
<h3>Test Portfolio</h3>
</div>
</div>
<div class="col-md-6 high">
<img class="port" src="http://loremflickr.com/320/240" alt="test">
<div class="slide">
<h3>Test Portfolio</h3>
</div>
</div>

You can use jQuery "eq" selector.
$(".port").eq(0).hover(function() {
$(".slide").eq(0).stop().animate({"top" : "-110px"});
});
Hovering over the first "port" will animate the first "slide".

How to add a class to only one div on click?

So I am having 2 issues here and maybe this is just a poor execution in general so please point me in the right direction.
1.) Regardless of how many black boxes there are the last one always works correctly, meaning I click the black box and it opens then a red box appears, I can close the box by clicking the dark area surrounding the red box or the red box itself. The issue comes when I click any boxes before the last box, it opens as expected but when I try to close it by clicking the red box it opens another instance of the dark background, I don't want that to happen.
2.) So I think the deeper issue is when I click a black box it is adding the class "fart" to ALL .testthree divs instead of just the one for the area I am clicking AND when I click the red box it is also adding the class "open" to all of the other test divs.
So my question is, Is there a way to contain the classes that are added ONLY to the initial place that I click? What I want to happen is:
I click workImg, test gets the class of open, and testthree gets the class of fart, ONLY for the workImg that i click on. Then when I click anywhere it all closes nicely.
Link to fiddle:
http://jsfiddle.net/dkarasinski/L6gLLyko/
HTML:
<div class="workCont">
<div class="workBlock">
<div class="workImg">
<div class="test one">
<div class="testthree"></div>
</div>
<img src="/assets/images/piece1.jpg" />
</div>
<div class="workName">Project</div>
</div>
<div class="workBlock">
<div class="workImg">
<div class="test one">
<div class="testthree"></div>
</div>
<img src="/assets/images/piece1.jpg" />
</div>
<div class="workName">Project</div>
</div>
</div>
CSS:
.workImg {
background:#151515;
width:330px;
height:201px;
display:inline-block;
position: relative;
}
.test {
position: fixed;
top: 50%;
left: 50%;
z-index:100;
width: 0;
height: 0;
-webkit-transition-duration: 300ms;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease-in-out;
text-align: center;
background: white;
color: white;
font-family: sans-serif; /* Just 'cos */
}
.test.open {
top: 0;
left: 0;
width: 100%;
height: 100%;
position:fixed;
color:black;
background-color: rgba(0, 0, 0, 0.8);
}
.testthree {
width:0;
height:0;
background-color: red;
margin:auto;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.testthree.fart {
width:50%;
height:300px;
}
.testthree.close {
display:none;
}
.workName {
text-align:center;
margin-top:17px;
}
JQuery / Javascript:
$(document).ready(function(){
$(".workImg").click(function() {
$(this).find(".test").toggleClass("open");
if ($(this).find(".test").hasClass("one")) {
if($('.testthree').hasClass("fart")) {
$(".testthree").removeClass("fart");
}
else {
setTimeout(function(){
$( ".testthree" ).addClass( "fart" );
}, 500);
}
}
});
});

Replace all your code in else block with this:
var scope=$(this);
setTimeout(function(){
scope.find('.testthree').addClass('fart');
},500);
You needed a scope to work within and not apply fart class to all of the .testthree elements. Hope you find it useful.
Update: Your complete code may look like:
$(document).ready(function () {
$(".workImg").click(function () {
var scope = $(this);
var test = scope.find('.test');
var testthree = scope.find('.testthree');
test.toggleClass('open');
if (test.hasClass('one')) {
if (testthree.hasClass('fart')) {
testthree.removeClass('fart');
} else {
setTimeout(function () {
testthree.addClass('fart');
}, 500);
}
}
});
});
Hope this helps.

Why don't you just ignore the whole fart and close classes.
And make .testthree invisible by default..
.testthree {
width:50%;
height:300px;
background-color: red;
margin:auto;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display:none;
}
Then just do...
$(document).ready(function(){
$(".workImg").click(function() {
var test = $(this).find(".test");
test.toggleClass("open");
setTimeout(function(){
test.find(".testthree").toggle();
},100);
});
});
JSFIDDLE HERE

Try below code
$(document).ready(function(){
$(".workImg").click(function() {
$(this).find(".test").toggleClass("open");
if ($(this).find(".test").hasClass("one")) {
if($(this).find('.testthree').hasClass("fart")) {
$(this).find(".testthree").removeClass("fart");
}
else {
setTimeout(function(){
$(this).find( ".testthree" ).addClass( "fart" );
}, 500);
}
}
});
});