We Keep Coding

Create a DIV at click; Then remove same DIV by clicking on it

I'm very new to programming and particularly JS and JQuery.
I've searched SO for hours trying to figure out how to do this seemingly simple task and observed plenty of code from talented programmers, but nothing what would suit my request.
I'm simply trying to
(A) create a dynamic DIV at the point on the page where the user clicks the mouse. This part I can accomplish.
(B) The next step is clicking on that new DIV and removing it from the page.
Here's what I've found to accomplish step A:
$(function(){
$('#picture').click(function(e){
var x = e.pageX - 20 + 'px';
var y = e.pageY - 20 + 'px';
var div = $('<div>', {
'class':'face',
'css': {
'position':'fixed',
'left': x,
'top': y,
'width': '40px',
'height': '40px'
},
});
$(document.body).append(div);
This simply creates a small 40x40px DIV in the body of the document.
Step B is proving beyond my knowledge. Simply being able to click on that newly created DIV and remove it from the document?
If I create the same div manually prior to the page loading, I can click it as expected. I just cant find a way to 'find' the newly created DIV's. Please help. I have researched extensively, and cant seem to find out how to accomplish this.

jsbin demo
Use dynamic event delegation with the .on() method
$("body").on("click", ".face", function(){
$(this).fadeOut(function(){
$(this).remove();
});
});
http://api.jquery.com/on/#direct-and-delegated-events
P.S: to prevent dispatching events all over the document or "body" use rather the first static parent ID as selector $("#someid").on.
or as Santiago suggested (but slightly different), accessing the "click" Element property and not using the div variable at all:
$('#picture').click(function(e) {
var x = e.pageX - 20 + 'px';
var y = e.pageY - 20 + 'px';
$('<div />', { // Don't forget closign slash!
'click': function(){ // The click property
$(this).fadeOut(function(){
$(this).remove();
});
},
'class':'face',
'css': {
position: 'fixed',
left: x,
top: y,
width: 40,
height: 40
}
}).appendTo("body");
});
jsbin demo

what about this:
$(function(){
$('#picture').click(function(e) {
var x = e.pageX - 20 + 'px';
var y = e.pageY - 20 + 'px';
var div = $('<div>', {
'class':'face',
'css': {
'position':'fixed',
'left': x,
'top': y,
'width': '40px',
'height': '40px'
},
'click': function(ev) {
$(ev.target).remove();
}
});
$("body").append(div);
});
});
#picture {
height: 150px;
width: 150px;
background:gray;
display:block;
}
.face {
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="picture"></div>

It's pretty simple actually. Add a function to your javascript to remove the element after you create it. You can do it even more easily thanks to jQuery. I think that my answer is one of the most elegants here ;P hihi
div.click(function(){
div.remove();
});
I did a live example below, if you want to test it :)
$(function(){
$('#picture').click(function(e){
var x = e.pageX - 20 + 'px';
var y = e.pageY - 20 + 'px';
var div = $('<div>', {
'class':'face',
'css': {
'position':'fixed',
'left': x,
'top': y,
'width': '40px',
'height': '40px'
},
});
/* HELLO DEAR, I DO THE TRICK */
div.click(function(){
div.remove();
});
$(document.body).append(div);
});
});
#picture{
width:500px;
height:500px;
background-color:green;
}
.face {
background-color:red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="picture">
</div>

Use event delegation:
$(document).on('click', '.face', function(){
$(this).remove();
});
$(function(){
$('#picture').click(function(e){
var x = e.pageX - 20 + 'px';
var y = e.pageY - 20 + 'px';
var div = $('<div/>', {
'class':'face',
'css': {
'position':'fixed',
'left': x,
'top': y,
'width': '40px',
'height': '40px'
}
});
$(document.body).append(div);
});
});
$(document).on('click','.face', function() {
$(this).remove();
});
#picture {
width: 200px;
height: 200px;
border: 1px solid black;
}
.face {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="picture"></div>

I would create the jQuery object first, then you can append and remove it at will, without creating a new jQuery object.
In the image click listener all the script below does is change the position of the square and append it if it isn't already appended, while clicking on the square itself will remove it.
$(function(){
var body = $('body');
var div = $('<div>', {
'class':'face',
'css': {
'position':'fixed',
'width': '40px',
'height': '40px',
'background': '#f9fd42',
}
});
$(document).on('click', function(e){
if(div.is(e.target)) div.remove();
});
$('#demo').click(function(e){
div.css({
'left': e.pageX - 20 + 'px',
'top': e.pageY - 20 + 'px'
}).appendTo(body);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="//lorempixel.com/200/100" id="demo">

<div class="full-page">
<div class="imgbox">
</div>
</div>
js
$('.imgbox').click(function(e){
var x=e.pageX-20;
var y=e.pageY-20;
var ap_div='<div class="ap_div" style="left:'+ x +'px;top:'+ y+'px"></div>';
$('.full-page').append(ap_div)});
$('body').delegate(".ap_div", 'click', function(e){
$(this).remove();
});
fiddle
http://jsfiddle.net/6czbzb38/2/

Script is only going to last text and last color but is animating as directed, what's going on?

I am able to move the text around the div like I would like but I want it to be different colors and have different text/colors at different parts of the movement but it is only calling the final text and colors. The 'slow' part of the jQuery function seems to only be firing for the first part of the movement.
What am I doing wrong?
Fiddle here.
HTML:
<button id="button">Go!</button>
<br>
<br>
<br>
<br>
<div id="container">
<div id="demo">Hello World</div>
</div>
CSS:
#container {
width: 100%;
height: 400px;
}
JavaScript:
$(document).ready(function(){
$('#button').on('click', function(){
var divWidth = ($('#container').width());
var divHeight = ($('#container').height());
$('#demo').css('color', '#ffff00');
$('#demo').html("Going!");
$('#demo').animate({
'marginLeft' : '+=' + divWidth
}, ' slow');
$('#demo').html("Moving Down Now");
$('#demo').css('color', '#e31912');
$('#demo').animate({
'marginTop' : '+=' + divHeight
}, ' slow');
$('#demo').html("Moving Home Now");
$('#demo').css('color', '#00FFFF');
$('#demo').animate({
'marginLeft' : '-=' + divWidth,
'marginTop' : '-=' + divHeight,
}, ' slow');
$('#demo').html("I am home!");
$('#demo').css('color', '#ff0067');
});
});

.animate() is asynchronous. The animations appear in order because the animate function appends the animation to a queue. You can use the optional callback parameter of .animate() to avoid this.
(Demo)
$(document).ready(function(){
$('#button').on('click', function(){
var demo = $('#demo');
var divWidth = $('#container').width();
var divHeight = $('#container').height();
demo.css('color', '#ffff00').text("Going!").animate({
'marginLeft' : '+=' + divWidth
}, 'slow', function(){
demo.css('color','#e31912').text("Moving Down Now").animate({
'marginTop' : '+=' + divHeight
}, 'slow', function(){
demo.css('color', '#00FFFF').html("Moving Home Now").animate({
'marginLeft' : '-=' + divWidth,
'marginTop' : '-=' + divHeight,
}, 'slow', function(){
demo.css('color', '#ff0067').html("I am home!");
});
});
});
});
});

you need to wait until the animate script is finished:
`$('#demo').animate({
'marginLeft' : '+=' + divWidth
}, ' slow', function(){
....
});`
http://jsfiddle.net/xzzc4skq/1/

While animations are queued by default, changes made with the css() and html() methods do not wait for your animations to be complete. They are all executed immediately, without any delay, and all you see is the last setting.
Rather than nesting animations, I suggest that you chain them. Then use the "start" and "complete" callbacks to set HTML and CSS. The callbacks will be executed before and after each animation, respectively.
$(function() {
$('#button').on('click', function() {
var divWidth = 300,
divHeight = 100;
// stage #1
$('#demo').animate({
'marginLeft': '+=' + divWidth
}, {
duration: 'slow',
start: function() {
$(this).css('color', '#128800').html("Going!");
}
})
// stage #2
.animate({
'marginTop': '+=' + divHeight
}, {
duration: 'slow',
start: function() {
$(this).css('color', '#e31912').html("Moving Down Now");
}
})
// stage #3
.animate({
'marginLeft': '-=' + divWidth,
'marginTop': '-=' + divHeight,
}, {
duration: 'slow',
start: function() {
$(this).css('color', '#3cacac').html("Moving Home Now");
},
complete: function() {
$(this).css('color', '#ff0067').html("I am home!");
}
});
});
});
#container {
width: 100%;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Go!</button>
<br>
<br>
<div id="container">
<div id="demo">Hello World</div>
</div>

Adjusting the content area in 2 column layout when the left column is moved

I'm having a 2 column layout with left menu having fixed width and i'm following the structure
as given in http://blog.html.it/layoutgala/LayoutGala24.html.
On click of the navigation menu I'm trying to hide it to certain pixels.
How can right content adjust itself automatically when the navigation menu is animated to the left side?
JS
$("#navigation").on('click', function() {
var $el = $(this), animateLeft;
if(parseInt($el.css('margin-left')) === 0) {
animateLeft = "-=180px";
}else{
animateLeft = "+=180px";
}
$(this).animate({
marginLeft : animateLeft
},500, function() {
console.log("anim complete");
});
});
Demo - http://codepen.io/anon/pen/hCmKl

Try this:
$("#navigation").on('click', function() {
var $el = $(this), animateLeft;
if(parseInt($el.css('margin-left')) === 0) {
animateLeft = "-=180px";
}else{
animateLeft = "+=180px";
}
$(this).animate({
marginLeft : animateLeft
},500, function() {
console.log("anim complete");
});
$("#content").animate({
marginLeft: animateLeft
}, 500);
});
http://codepen.io/anon/pen/Ikgnm

You have fixed margin-left , so in your case one solutions is to animate whole content :
$("#navigation").on('click', function() {
var $el = $(this).parent(), animateLeft;
if(parseInt($el.css('margin-left')) === 0) {
animateLeft = "-=180";
}else{
animateLeft = "+=180";
}
$(this).parent().animate({
marginLeft : animateLeft
},500, function() {
console.log("anim complete");
});
});

JQuery ScrollTop in the middle of an animation?

I have 2 containers whose widths change. Inside them, I have clickable elements. When a container is clicked, it resizes in an animation. I want to make it so that when a clickable element is clicked, its container resizes and scrolls to the clicked element. Here's a fiddle that shows this: http://jsfiddle.net/w7H3M/1/
However, it scrolls to the wrong position because of the resizing. Here's the event handler for the click:
<div id=left>...</div>
<div id=right>...</div>
$('#left').on('click', 'a', function () {
var node = $(this);
$('#left').animate({
width: 0.75 * $(document).width()
}, 800);
$('#right').animate({
width: 0.25 * $(document).width()
}, 800);
$('body').animate({
scrollTop: node.offset().top
}, 800);
});
$('#right').on('click', 'a', function () {
var node = $(this);
$('#left').animate({
width: 0.25 * $(document).width()
}, 800);
$('#right').animate({
width: 0.75 * $(document).width()
}, 800);
$('body').animate({
scrollTop: node.offset().top
}, 800);
});

Effectively, it does not work correctly because of the animation. The offset of the node you want to show at the top of the screen will change when the div expands. To achieve what you want, you need to set the scrollTop property when the animation completes. You can achieve this using the complete handler of jQuery.animate(). I've forked your jsfiddle to show you it. The only problem is that the two animationw now play one after the other instead of simultaneously.
$(document).ready(function () {
// generate content
var str = '';
for (i = 1; i < 100; i++) {
str += '<p>' + x100(i) + '</p>';
}
$('#left').html(str);
$('#right').html(str);
// end generate content
$('#left').on('click', 'p', function () {
var node = $(this);
$('#left').animate({
width: 0.75 * $(document).width(),
}, 800, 'swing', function() {
$('body, html').animate({scrollTop: node.offset().top}, 800);
});
$('#right').animate({
width: 0.25 * $(document).width()
}, 800);
});
$('#right').on('click', 'p', function () {
var node = $(this);
$('#left').animate({
width: 0.25 * $(document).width()
}, 800);
$('#right').animate({
width: 0.75 * $(document).width()
}, 800, 'swing', function() {
$('body, html').animate({scrollTop: node.offset().top}, 800);
});
});
});

jQuery each width problem

I have the following function set to run on a hover over an image:
function() {
$('.slides .slide h3').each(function(i){
var owidth = $(this).width()
$(this).animate({"right":730 - owidth - 16}, 500);
});
}
You can view the page here. Over the image and click the next icon on the lower right of the image. For some reason, the function is calculating the first h3's width correctly, but then it thinks all other h3s have a width of 0. Can anyone offer a solution?

function() {
var owidth = 0;
$('.slides .slide h3').each(function(i){
owidth = $(this).width();
$(this).animate({"right":(730 - owidth - 16) + 'px'}, 500);
});
}
A better way:
function() {
$('.slides .slide h3').each(function(i){
$(this).stop().animate({
"right": (714 - $(this).width()) + 'px'
}, 500);
});
}