Develop Reference

JS / CSS issue with Div Slider and Display:Table-Cell

I have a Div slider that rotates a set of Divs in and out of focus. Everything was working fine until I tried switching everything to (table / table-cell) in order to keep them all the Divs the same height in CSS. Now they still rotate out but one div remains visible with a reduced width off to the side of the stage. I get a sense that its position related but just can't figure out what's causing the issue.
Affected Page - https://www.harpercollege.edu/dev/blog-slider-test.php
JS Code:
$('.blog-posts').wrapInner('<div class="blog-posts-stage" />');
// Calculate Conditions & Set Vars
// var playTimer = 9,
slideQty = $('.well').length,
slideWidth = $('.well').width(),
stageWidth = $('.blog-posts-stage').width(),
contWidth = $('.blog-posts').width();
if ((slideQty * slideWidth) < contWidth) {
$('.blog-posts-prev').addClass('blog-posts-prev-disabled').removeClass('blog-posts-prev');
$('.blog-posts-next').addClass('blog-posts-next-disabled').removeClass('blog-posts-next');
} else {
$('.blog-posts-prev-disabled').addClass('blog-posts-prev').removeClass('blog-posts-prev-disabled');
$('.blog-posts-next-disabled').addClass('blog-posts-next').removeClass('blog-posts-next-disabled');
}
$(window).resize(function() {
var slideQty = $('.well').length,
slideWidth = $('.well').width(),
stageWidth = $('.blog-posts-stage').width(),
contWidth = $('.blog-posts').width();
if ((slideQty * slideWidth) < contWidth) {
$('.blog-posts-prev').addClass('blog-posts-prev-disabled').removeClass('blog-posts-prev');
$('.blog-posts-next').addClass('blog-posts-next-disabled').removeClass('blog-posts-next');
} else {
$('.blog-posts-prev-disabled').addClass('blog-posts-prev').removeClass('blog-posts-prev-disabled');
$('.blog-posts-next-disabled').addClass('blog-posts-next').removeClass('blog-posts-next-disabled');
}
});
$('.blog-posts-next').on('click', function(event) {
event.preventDefault();
$('.blog-posts-stage').animate({
left: -(slideWidth)
}, 500, function() {
$('.well:first').appendTo('.blog-posts-stage');
$('.blog-posts-stage').css({
left: '0px'
});
});
});
$('.blog-posts-prev').on('click', function(event) {
event.preventDefault();
$('.well:last').prependTo('.blog-posts-stage');
$('.blog-posts-stage').css({
left: -(slideWidth)
});
$('.blog-posts-stage').animate({
left: '0px'
}, 500, function() {});
});
function moveForward() {
$('.blog-posts-stage').animate({
left: -(slideWidth)
}, 500, function() {
$('.well:first').appendTo('.blog-posts-stage');
$('.blog-posts-stage').css({
left: '0px'
});
});
}
var timer = setInterval(moveForward, playTimer);
$('.blog-posts, .blog-posts-prev, .blog-posts-next').hover(function(ev) {
// clearInterval(timer);
}, function(ev) {
// timer = setInterval( moveForward, playTimer);
});
CSS Code:
<style>
.blog-posts {
width: 100%;
background: #eee;
font-size: 0;
position: relative;
}
.blog-posts-prev,
.blog-posts-next {
display: inline-block;
background: #eee;
color: #000;
text-decoration: none;
padding: 10px;
margin: 5px 0;
}
.blog-posts-prev:hover,
.blog-posts-next:hover {
background: #ccc;
}
.blog-posts-prev-disabled,
.blog-posts-next-disabled {
display: inline-block;
background: #eee;
color: #ccc;
text-decoration: none;
padding: 10px;
margin: 5px 0;
}
.blog-posts-stage {
position: relative;
white-space: normal;
width: 100%;
height: 100%;
float: none;
}
.well {
background: #ccc;
box-shadow: inset -1px 0px 0px 0px rgb(255, 255, 255);
width: 100%;
font-size: 12px;
text-align: left;
display: table-cell;
height: 100%;
width: 100%;
}
.well .row .col-sm-12.col-md-12 h2 {
float: left;
margin-top: 0px;
}
</style>

You could just use a lightbox library and save yourself the effort, but if you really want to do this why not try flex?
.blog-posts-stage {
display: flex;
flex-direction: row;
overflow: hidden;
}
.well-large {
flex-shrink: 0;
}

Can I undo or delete some javascript code after running it

I am 3th year at college and for web design class we are manually drawing canvas elements. Which is very boring for me so I tried to make some 2D paint where I can do it by mouse where on the other end it writes code by itself.
I managed to do this much even tho is not "much" but now I am wondering is there a way to undo some script to remove it from the code? One way would be to append new canvas and do moves by one less but is there something to delete existing ones but not to recreate new ones over and over again?
In this example down below (try by full screen), when I add new lines I add new moves to the array and when I finish at the starting point I can draw new element. But every time I add new line I re create or draw lines over existing ones and new lines so it shows as one element where I could fill style and so on.
By doing that you will see that the adding lines over existing ones create a little darker bolder line, and because of that I would like to know if there is some way to delete or undo those lines and add whole new ones without puting em over existing ones.
$(document).ready(function(){
var mainCanvas = $('#mainCanvas')[0].getContext('2d');
var coordsCanvas = $('#coordsCanvas')[0].getContext('2d');
var moves = [];
$('#newCoords').click(function(){
var mainCanvasWidth = $('#mainCanvas').width();
$(this).parent().prepend('<input class="input-class" id="x-n0" placeholder="X number of blocks"><input class="input-class" id="y-n0" placeholder="Y number of blocks"> <span class="notes">Note: canvas full width is: '+Math.floor(mainCanvasWidth)+'px. </span><button id="saveCoords">Save</button>')
$(this).remove();
});
$(document).on('click','#saveCoords',function(){
var x = $(this).siblings('input#x-n0').val(),
y = $(this).siblings('input#y-n0').val(),
mainCanvasWidth = $('#mainCanvas').width(),
mainCanvasHeight = $('#mainCanvas').height(),
xWidthPx = Math.floor(mainCanvasWidth/x),
yHeightPx = Math.floor(mainCanvasHeight/y);
$('#coordsCanvas, #mainCanvas').attr('width', Math.floor(xWidthPx*x));
$('#coordsCanvas, #mainCanvas').attr('height', Math.floor(yHeightPx*y));
var marginLeftRight = 'calc(50% - '+Math.floor(xWidthPx*x)/2+'px)';
$('#coordsCanvas, #mainCanvas').css({'width':Math.floor(xWidthPx*x)+'px','height':Math.floor(yHeightPx*y)+'px','left': marginLeftRight, 'top':'10vh'});
for(var i=0; i<x-1; i++){
coordsCanvas.beginPath();
coordsCanvas.moveTo(Math.floor(xWidthPx+(xWidthPx*i)), 0);
coordsCanvas.lineTo(Math.floor(xWidthPx+(xWidthPx*i)), Math.floor(yHeightPx*y));
coordsCanvas.stroke();
coordsCanvas.closePath();
}
for(var i=0; i<y-1; i++){
coordsCanvas.beginPath();
coordsCanvas.moveTo(0 ,Math.floor(yHeightPx+(yHeightPx*i))+1);
coordsCanvas.lineTo(Math.floor(xWidthPx*x), Math.floor(yHeightPx+(yHeightPx*i))+1);
coordsCanvas.stroke();
coordsCanvas.closePath();
}
$(this).parent().html('<label for="#mouse-position"><input type="checkbox" id="mouse-position">Show mouse position</label><span class="notes">X = '+Math.floor(xWidthPx)+'px; Y = '+Math.floor(yHeightPx)+'px;</span><div class="tools"><button id="line">Lines</button></div>');
});
$(document).on( "change", "#mouse-position", function() {
if($('input[id="mouse-position"]:checked').length === 1){
$('#mouse-coords').css('display','block');
}else{
$('#mouse-coords').css('display','none');
}
});
$(document).on( "click", "#line", function() {
$(this).css('background','silver');
$('#mainCanvas').css({'cursor':'url(./pen.png) 0 24, auto'});
});
$(document).on( "click", "#mainCanvas", function(e) {
var cursor = $('#mainCanvas').css('cursor');
var strokeStyle = $('#strokestyle').val();
if(~cursor.indexOf('pen.png')){
var posX = $(this).position().left,
posY = $(this).position().top;
if(moves[0]==='beginPath'){
if(Object.keys(moves[1])[0]==='moveTo'){
var len = moves.length-1,
nowpos = Math.floor((e.pageX - posX)) + ',' + Math.floor((e.pageY - posY)),
renderDrawing = [];
renderDrawing.push({'func': 'beginPath', init: function(){ mainCanvas.beginPath(); }});
if(moves[len]!=="stroke" || moves[len]!=="closePath"){
for(var ee=1; ee<moves.length; ee++){
if(Object.keys(moves[ee])[0]==="moveTo"){
var mtp = moves[ee]['moveTo'],
pos = mtp.split(',');
renderDrawing.push({func: 'moveTo', val: pos, init: function(){
mainCanvas.moveTo(this.val[0], this.val[1]);
}});
}else if(Object.keys(moves[ee])[0]==="lineTo"){
var mtp = moves[ee]['lineTo'],
pos = mtp.split(',');
renderDrawing.push({func: 'lineTo', val: pos, init: function(){
mainCanvas.lineTo(this.val[0], this.val[1]);
}});
}
}
var nowX = Math.floor((e.pageX - posX));
var nowY = Math.floor((e.pageY - posY));
var nowXY = nowX + ',' + nowY;
moves.push({'lineTo':nowXY});
renderDrawing.push(
{func: 'lineTo', val: nowXY, init: function(){
mainCanvas.lineTo(this.val.split(',')[0], this.val.split(',')[1]);
}},
{func: 'stroke', init: function(){ mainCanvas.stroke(); }},
{func: 'closePath', init: function(){ mainCanvas.closePath(); }});
for(var q=0; q<renderDrawing.length; q++){
if(renderDrawing[q]['func']!=="beginPath" && renderDrawing[q]['func']!=="closePath" && renderDrawing[q]['func']!=="stroke"){
renderDrawing[q].init();
}else renderDrawing[q].init();
}
console.log(moves);
if(Object.keys(moves[len])[0]==="lineTo" && nowpos===moves[1]['moveTo']){
moves = [];
}
}
}
}else{
mainCanvas.beginPath();
mainCanvas.moveTo(Math.floor(e.pageX - posX) , Math.floor(e.pageY - posY));
moves.push('beginPath',{'moveTo':Math.floor((e.pageX - posX)) + ',' + Math.floor((e.pageY - posY))});
console.log(moves);
}
}
});
$(document).on('mousemove', "#mainCanvas", function(e){
var parentOffset = $('#mainCanvas').offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
$('#mouse-coords').css({
left: e.pageX + 20,
top: e.pageY
}).text( "X: " + Math.floor(relX) + ", Y: " + Math.floor(relY) );
});
});
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
body {
overflow: hidden;
font-size: 100%;
}
.container {
width: 100vw;
height: 100vh;
padding-right: 5vw;
padding-left: 5vw;
padding-top: 10vh;
padding-bottom: 5vh;
overflow: hidden;
position: relative;
}
canvas {
width: 90vw;
height: 85vh;
border: 1px solid #000;
float: left;
}
.toolsBar {
width: calc(100% - 10vw);
position: absolute;
top: 5px;
left: 5vw;
border: 1px solid #000;
height: calc(10vh - 10px);
overflow: hidden;
overflow-y: auto;
}
button {
color: #fff;
background: skyblue;
border: 0;
border-radius: 5px;
margin: 5px;
padding: 15px;
cursor: pointer;
float: left;
}
.input-class {
border-radius: 5px;
margin: 5px;
padding: 15px;
float: left;
border: 1px solid #e0e0e0;
outline: none;
}
.notes {
display: inline-block;
height: 60px;
text-align: center;
float: left;
color: red;
line-height: 60px;
}
#mouse-coords {
position: absolute;
display: none;
background: #000;
padding: 2px;
color: #fff;
}
label[for="#mouse-position"] {
display: inline-block;
height: 60px;
text-align: center;
line-height: 60px;
font-size: 1.2rem;
float: left;
padding: 5px;
}
label>input {
height: 1.2rem;
width: 1.2rem;
}
.coordsCanvas {
position: absolute;
z-index: 100;
}
#mainCanvas {
background: rgba(255,255,255,.5);
position: absolute;
z-index: 200;
}
.tools {
width: auto;
overflow: hidden;
overflow-y: auto;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="toolsBar">
<button id="newCoords">X & Y</button>
</div>
<div id="mouse-coords"></div>
<canvas class="coordsCanvas" id="coordsCanvas"></canvas>
<canvas id="mainCanvas"></canvas>
</div>

Position bottom element of top parent element

I am making this simple tooltip where I want to position the tooltip bottom at the top of the parent element. I want to do this by getting the height of the tooltip element and set this number negative to the top positioning.
The problem is that at the time that I hover the element, the tooltip height is 0, according to console.log();
$('.tooltip').hover(function() {
var content = $(this).data('tip-content');
var element = $(this).find('.tip-content');
if(element.length == 0 ) {
var html = $('<p class="tip-content">' + content + '</p>');
var height = html.height();
console.log(height);
html.css('top', - height);
$(this).prepend(html);
} else {
element.remove();
}
});
.element {
height: 50px;
width: 50px;
margin: 50px auto;
background: #000;
}
.tooltip {
position: relative;
}
.tooltip .tip-content {
width: 180px;
margin-left: -98px;
padding: 10px 5px;
position: absolute;
left: 50%;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #294a72;
font-size: 0.75em;
color: #fff;
text-align: center;
}
.tooltip .tip-content:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: #294a72;
border-width: 5px;
margin-left: -5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element tooltip" data-tip-content="This is a test content">
</div>

At the time you're checking the height, the element has not yet been added to the DOM, and therefore can have no height. You simply need to switch the order of your statements. jQuery can and will change the CSS of the element even after it has been added.
var html = $('<p class="tip-content">' + content + '</p>');
$(this).prepend(html); //This line must go before the next
var height = html.height();
console.log(height);
However, you're still missing some pieces. height() does not include either margin or padding. To get padding, you can use outerHeight(), but margin you'll have to either read from the CSS or use a hard-coded value. Even worse, your arrow is using a pseudo-element, which *cannot* be read by DOM traversal, so your best bet there is to just hardcode it, sadly.
A better height calculation might look like:
var ARROW_HEIGHT = 5;
html.outerHeight() + parseInt(html.css('marginBottom'), 10) + ARROW_HEIGHT;

I think you have to prepend the HTML, and then get the height and reposition the element. Right now, you are getting the height of a variable, not an HTML element.

You just need to get height of 'tooltip' instead of 'tip-content'.
$('.tooltip').hover(function() {
var content = $(this).data('tip-content');
var element = $(this).find('.tip-content');
if(element.length == 0 ) {
var html = $('<p class="tip-content">' + content + '</p>');
// Get height of parent element
var height = $(this).height();
console.log(height);
html.css('top', - height);
$(this).prepend(html);
} else {
element.remove();
}
});
.element {
height: 50px;
width: 50px;
margin: 50px auto;
background: #000;
}
.tooltip {
position: relative;
}
.tooltip .tip-content {
width: 180px;
margin-left: -98px;
padding: 10px 5px;
position: absolute;
left: 50%;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #294a72;
font-size: 0.75em;
color: #fff;
text-align: center;
}
.tooltip .tip-content:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: #294a72;
border-width: 5px;
margin-left: -5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element tooltip" data-tip-content="This is a test content">
</div>

For html object gets a height automatically, you need first put in DOM. That the reason for you get height = 0. You need first append your object and then get the height.
See my example: https://jsfiddle.net/bwun82q4/
$('.tooltip').hover(function() {
var content = $(this).data('tip-content');
var element = $(this).find('.tip-content');
if(element.length == 0 ) {
var html = $('<p class="tip-content">' + content + '</p>');
var height = html.height();
console.log(height);
html.css('top', - height);
$(this).prepend(html);
$(this).find("p").css("top",- $(this).find("p").height());
} else {
element.remove();
}});

Dynamic div dimensions: lightbox gallery

I'm creating a website where I have a series of images with different dimensions that are being placed in a lightbox gallery.
Sorry for the long read in advance.... the code is as follows:
http://jsfiddle.net/djtiii/Sas94/1/
HTML
<div id="wrapper">
<h1>simple lightbox w/ slideshow (images only)</h1>
<p>those image links i was talking about:</p>
<ul id="paintings">
<li> <a title="The Hills" href="http://www.artmajeur.com/files/oksana-veber/images/artworks/100x100/6683281_the-hils-100-100-cm-acrilic-on-canvas-1998-thumb.jpg" class="lightboxTrigger">
on
</a>
</li>
<li> <a title="Pixelisa" href="http://piq.codeus.net/static/media/userpics/piq_2313_400x400.png" class="lightboxTrigger">
two
</a>
</li>
<li> <a title="Vase" href="http://andyinoman.files.wordpress.com/2013/01/story-no-5-the-loosing-battle.jpg?w=500" class="lightboxTrigger">
three
</a>
</li>
</ul>
</div>
CSS
/* page styles */
body {
margin: 0;
padding: 0;
background: #efefef;
}
#wrapper {
width: 600px;
margin: 0 auto;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
background: #fff;
border: 1px solid #ccc;
padding: 25px;
border-top: none;
box-shadow: 0 0 5px #ccc;
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
text-align: left;
}
/* lightbox styles */
#lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#lightbox p {
text-align: right;
color: #fff;
margin-right: 20px;
font-size: 12px;
}
#lightbox img {
max-width: 940px;
}
/* slideshow styles */
#slideshow {
position: relative;
z-index: 100;
width: 600px;
height: 350px;
margin: 0 auto;
padding: 10px;
background-color: #fff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
#slideshow ul > li {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
list-style: none;
}
.nav {
display: none;
}
.prev, .next {
position: absolute;
top: 50%;
background: rgba(100, 100, 100, .5);
padding: .25em .5em;
color: #fff;
text-decoration: none;
}
.next {
right: 10px;
}
.prev {
left: 10px;
}
JavaScript
jQuery(document).ready(function ($) {
var current, size;
$('.lightboxTrigger').click(function (e) {
e.preventDefault();
var slideNum = $('.lightboxTrigger').index(this);
if ($('#lightbox').length > 0) {
$('#lightbox').fadeIn(300);
$('#content').html('<img src="' + href + '" />');
} else {
var hgt = $(this).attr('height');
var wid = $(this).attr('width');
var lightbox =
'<div id="lightbox">' +
'<p>X</p>' +
'<div id="slideshow">' +
'<ul></ul>' +
'<div class="nav">' +
'<' +
'>' +
'</div>' +
'</div>' +
'</div>';
$('body').append(lightbox);
$('#paintings').find('.lightboxTrigger').each(function () {
var href = $(this).attr('href');
var title = $(this).attr('title');
$('#slideshow ul').append(
'<li>' +
'<img src="' + href + '">' +
'<h5>' + title + '</h5>' +
'</li>');
});
$('#lightbox').hide().fadeIn(300);
}
size = $('#slideshow ul > li').length;
$('#slideshow ul > li').hide();
$('#slideshow ul > li:eq(' + slideNum + ')').show();
current = slideNum;
});
$('body').on('click', '#lightbox', function () {
$('#lightbox').fadeOut(300);
});
$('body').on({
mouseenter: function () {
$('.nav').fadeIn(300);
},
mouseleave: function () {
$('.nav').fadeOut(300);
}
}, '#slideshow');
$('body').on('click', '.slide-nav', function (e) {
e.preventDefault();
e.stopPropagation();
var $this = $(this);
var dest;
if ($this.hasClass('prev')) {
dest = current - 1;
if (dest < 0) {
dest = size - 1;
}
} else {
dest = current + 1;
if (dest > size - 1) {
dest = 0;
}
}
$('#slideshow ul > li:eq(' + current + ')').fadeOut(750);
$('#slideshow ul > li:eq(' + dest + ')').fadeIn(750);
current = dest;
});
});
The issue with this code is that the div id=slideshow's dimensions are not dynamic to the dimensions of the images. I'm fairly certain that I need some sort of Javascript that stores the dimensions of each image piece as it loads, then adjusts the dimensions of the div to those dimensions. I'm not experienced enough in Javascript to achieve this, however.
Thank you to all who take a crack at this!

To adjust the dimension of lightbox you can use additional function to find the height, width of the image being displayed and can apply these to the lightbox window.
I have created a fiddle for this, please see here:
function to calculate and apply dimensions:
function adjustDimensions(current){
var H = $('img','#slideshow ul > li:eq(' + current + ')').height();
var W = $('img','#slideshow ul > li:eq(' + current + ')').width();
if($('h5','#slideshow ul > li:eq(' + current + ')').length>0){
H = H+20;
}
$('#slideshow').animate({width:W+'px',height:H+'PX'},1000);
}
http://jsfiddle.net/lokeshpahal/yX4NP/2/

Unable to print output in specific div?

First of all I am not very good in designing but with some help I am able to acheive this code
My main issue is that when a user opens a div it becomes the target div, so if I have five divs open at the same time it doesn't matter which I type in because the text gets appended to the last opened div. I can also open an unlimited amount of the same div, which should not happen.
The small issue I have is that I'm unable to close the div and minimize it(much like fb when we click on the chat box it gets minimized).
Fiddle
HTML
<div id="contact">
<header>Users</header>
<main>
<ul>
<li id="Prashant">Prashant</li>
<li id="Katrina">Katrina</li>
<li id="Priyanka">Priyanka</li>
<li id="Kareena">Kareena</li>
<li id="Anushka">Anushka</li>
</ul>
</main>
</div>
<div id="chat"></div>
CSS
* {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
body{margin:0;padding:0;}
#contact {
height: auto;
background: #ececec;
position:absolute;
right:0;
bottom:0;
width:100px;
}
#contact header {
padding: 10px;
background: #333;
color: #FFF;
}
#contact main {
padding: 10px
}
#chat {
position: fixed;
bottom: 0;
left: 0;
right: 100px;
height: auto;
}
#chat .user {
border: 1px solid #333;
background: #fff;
width: 200px;
height: 100%;
float: left;
margin-right: 5px;
}
.user header {
position: relative;
background: #4b67a8;
border: 1px solid #2e4588;
}
.user header .status {
position: absolute;
top: 36%;
left: 10px;
width: 8px;
height: 8px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: green;
}
.user header .header-text {
color: #fff;
font-weight: bold;
padding: 8px;
margin: 0 0 0 15px;
font-size: 12px;
text-shadow: 0 -1px rgba(0, 0, 0, .25);
}
.user header .close {
position: absolute;
right: 5px;
top: 7px;
color: #fff;
}
.message-area {
background: #fff;
height: 120px;
padding: 5px;
color: #333;
overflow: scroll;
}
.user .input-area {
border-top: 1px solid #333;
padding: 3px;
}
.user .input-area input {
padding: 5px;
width: 100%;
font-size: 12px;
border: none;
outline: none;
}
Javascript
var username = 'user201';
$(document).ready(function() {
$('a').click(function(e) {
e.preventDefault();
var targetUser = ($(this).html());
$(document).data('chat.targetUser', targetUser);
var user = '<div class="user open" id="' + targetUser + '"><header><div class="status"></div><div class="header-text">' + targetUser + '</div><div class="close">×</div></header><div class="message-area"></div><div class="input-area"><input type="text" id="input" /></div></div>';
$('#chat').append(user);
});
$('#chat').on('keydown', '#input', function(event) {
if (event.keyCode == 13) {
var targetUser = $(document).data('chat.targetUser');
var txt = $(this).val();
$('#' + targetUser + ' .message-area').append(username + ': ' + txt + '<br/>');
$(this).val('');
}
});
});

I edited div.close and added a div.mini like
<div class="mini" title="MINIMIZE">-</div>
<div class="close" title="CLOSE">×</div>
Css for .mini
.user header .mini {
position: absolute;
right: 25px;
top: 7px;
color: #fff;
cursor:pointer;
}
JS code for them to work
$(document).on("click", "div.close", function(){
$(this).parent().parent().remove();
});
$(document).on("click", "div.mini", function(){
var elem = $(this).parent().parent().children().not("header");
elem.slideToggle();
});
Also added this js code to prevent add the div if it's already opened and make it append to last section of chat
if ($("div#" + targetUser).length > 0) {
$("div#" + targetUser).appendTo("#chat");
return false;
}
FIDDLE
EDIT
Edited div.mini click function for -/+ Minimize/Maximize
$(document).on("click", "div.mini", function(){
var elem = $(this).parent().parent().children().not("header");
elem.slideToggle();
$(this).text($(this).text() == "-" ? "+" : "-");
$(this).attr("title", $(this).attr("title") == "MINIMIZE" ? "MAXIMIZE" : "MINIMIZE");
});
UPDATED FIDDLE

The text you enter will appear in the last opened div because your var targetUser is changed every time you click on one of the users. The best way to solve this I think is to find the parent of the input field and search for the previous .message-area.
Like this:
$('#chat').on('keydown', '#input', function(event) {
if (event.keyCode == 13) {
var txt = $(this).val();
$(this).parent().prev(".message-area").append(username + ': ' + txt + '<br/>');
$(this).val('');
}
});
Working JSFiddle

Here is the fix for your code:
http://jsfiddle.net/afzaal_ahmad_zeeshan/36pcu/14/
I have updated the code in your fiddle, and I have added a fix so that the divs don't open up twice.
I just added a class to the link of the user, to show that this user is now active. Here is the code
if($(this).attr('class') != 'active') {
var targetUser = ($(this).html());
$(document).data('chat.targetUser', targetUser);
var user = '<div class="user open" id="' + targetUser + '"><header><div class="status"></div><div class="header-text">' + targetUser + '</div><div class="close">×</div></header><div class="message-area"></div><div class="input-area"><input type="text" id="input" /></div></div>';
$('#chat').append(user);
}
$(this).attr('class', 'active');
Then the div thing was handled using this code:
if (event.keyCode == 13) {
var txt = $(this).val();
$(this).parent().prev(".message-area").append(username + ': ' + txt + '<br/>');
$(this).val('');
}
This was the fix for your code, now it works.

According to your statement "...Also I am able to open an unlimited amount of the same divs, which should not happen**..." this can be prevented if you know what are the boxes opened
please check the Fiddle
var id = '#Box' + targetUser;
var existent = $('#chat').find(id)[0];
// This will ensure that you can only open one box at each time
if(existent != null){
alert('There is already one chat to user "' + targetUser + '" open');
}
else
{
your code...
}
Also the fix proposed by speetje33 helps you prevent to write always in the last box.
I've added some comments to the code for your better understanding.