We Keep Coding

Image jumping out of its absolute position on hover+grow

I have multiple images positioned using the CSS position: absolute attribute. I want them to grow on hover/mouseover. However, when I try to apply the transform: scale attribute to the images, the images jump repeatedly below all the images and grow there instead of growing in their defined position.
How can I keep the images in their correct positions while also making them grow on hover/mouseover?
I apologize in advance for the frankenstein code.
JS, CSS, HTML
function changeContent(description) {
console.log(description);
var MyDesc = document.getElementById(description);
document.getElementById('content').innerHTML = MyDesc.value;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
img, span{
display:table-cell;
}
.grow {
transition: all .2s ease-in-out;
}
.grow:hover {
transform: scale(1.1);
}
#main {
width: 100%;
}
#photo {
display:flex;
}
#photo > #photo-center {
width:100%;
position:relative;
display: block;
margin-left: auto;
margin-right: 0px;
}
/* Diagram */
#large{
width:100%;
}
/* Server Ops 2 - Bob */
#ops2{
width:17%;
position:absolute;
left:44%;
right:0px;
top:0%;
z-index:1;
}
/* Server Ops 1 - Alice */
#ops1{
width:17%;
position:absolute;
left:85%;
right:0px;
top:0%;
z-index:1;
}
/* QA Black Box - Steve */
#qablack{
width:10%;
position:absolute;
left:60%;
right:0px;
top:37%;
z-index:1;
}
/* QA Load Testing - Jerry */
#qaload{
width:17%;
position:absolute;
left:63%;
right:0px;
top:68%;
z-index:1;
}
/* QA Software Engineer - Alex */
#qasoft{
width:17%;
position:absolute;
left:73%;
right:0px;
top:38%;
z-index:1;
}
/* Manager 2 - Peter */
#mang2{
width:15%;
position:absolute;
left:22%;
right:0px;
top:-6%;
z-index:1;
}
/* Manager 1 - Craig */
#mang1{
width:13%;
position:absolute;
left:6%;
right:0px;
top:-4%;
z-index:1;
}
/* Software Engineer 1 - Bill */
#soft1{
width:15%;
position:absolute;
left:0%;
top:50%;
z-index:1;
}
/* Software Engineer 2 - Jared */
#soft2{
width:9%;
position:absolute;
left:3%;
right:0px;
top:23%;
z-index:1;
}
<strong><div style="font-size:20px" class="container" id="content">Hover over a character to discover their Workflow Woes!</div></strong>
<div id="main">
<div id="photo">
<div id="photo-center">
<img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:traditional3.jpg" id="large">
<div class="grow">
<a onmouseover="changeContent('desc1')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:server_ops2.png" id="ops2"></a>
<input type="hidden" id="desc1" value="apples are delicious">
</div>
<div class="grow">
<a onmouseover="changeContent('desc2')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:server_ops1.jpg" id="ops1"></a>
<input type="hidden" id="desc2" value="Oranges are healthy">
</div>
<div class="grow">
<a onmouseover="changeContent('desc3')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:soft_engineer1.png" id="soft1"></a>
<input type="hidden" id="desc3" value="Candy is tasty!">
</div>
<div class="grow">
<a onmouseover="changeContent('desc4')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:soft_engineer2.png" id="soft2"></a>
<input type="hidden" id="desc4" value="hhhh!">
</div>
<div class="grow">
<a onmouseover="changeContent('desc5')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:qa_black_box.png" id="qablack"></a>
<input type="hidden" id="desc5" value="aaaa!">
</div>
<div class="grow">
<a onmouseover="changeContent('desc6')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:qa_load.png" id="qaload"></a>
<input type="hidden" id="desc6" value="pppp!">
</div>
<div class="grow">
<a onmouseover="changeContent('desc7')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:qa_soft_engineer.png" id="qasoft"></a>
<input type="hidden" id="desc7" value="lollll!">
</div>
<div class="grow">
<a onmouseover="changeContent('desc8')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:manager1.png" id="mang1"></a>
<input type="hidden" id="desc8" value="bowowow!">
</div>
<div class="grow">
<a onmouseover="changeContent('desc9')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:manager2.png" id="mang2"></a>
<input type="hidden" id="desc9" value="meowww!">
</div>
</div>
</div>
</div>
(Run the Snippet then open in Full Page)

Try to add Class "grow" at "img" element, Instead of Div element

How to make a cross close sign in popup

I have used a popup script so that popup appear on my screen when I load my html file now I want a close sign on the top right corner on the popup screen like in the picture shown below
The code I have used is
("jsfiddle.net/sGeVT/10/")
this script code is an example of my code I have further modified it but the basic of the popup is same.
Hope you understand and can give solution.

(1) Add a span with a x inside, × the best looking one IMO.
<span class="deleteMeetingClose">×</span>
(2) Set up some styles for it.
.deleteMeetingClose {
font-size: 1.5em;
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
}
(3) Add it to the jQuery code along with other close triggers.
$('#overlay, .deleteMeetingCancel, .deleteMeetingClose').click(function () {
//close action
});
Updated demo: http://jsfiddle.net/zj0yL9me/
$('.deleteMeeting').click(function () {
$('#overlay').fadeIn('slow');
$('#popupBox').fadeIn('slow');
$('#popupContent').fadeIn('slow');
});
// added .deleteMeetingClose into the selectors
$('#overlay, .deleteMeetingCancel, .deleteMeetingClose').click(function () {
$('#overlay').fadeOut('slow');
$('#popupBox').fadeOut('slow');
$('#popupContent').fadeOut('slow');
});
$('.deleteMeetingButton').click(function () {
$('#popupContent').fadeOut('slow');
$('#deleteMeetingConfirmDeleted').fadeIn('slow');
$('#overlay').delay(1300).fadeOut('slow');
$('#popupBox').delay(1300).fadeOut('slow');
$('#deleteMeetingConfirmDeleted').fadeOut('slow');
});
#overlay {
display:none;
opacity:0.5;
background-color:black;
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
z-index: 999;
}
#popupBox {
display:none;
position: relative;
margin-left:auto;
margin-right:auto;
margin-top:100px;
width:600px;
height: 500px;
color: #000000;
border:5px solid #4E93A2;
-moz-border-radius:8px;
-webkit-border-radius:8px;
background-color:#FFFFFF;
z-index: 1000;
}
#popupContent {
display:none;
font-family:Arial, Helvetica, sans-serif;
color: #4E93A2;
margin-top:30px;
margin-left:30px;
margin-right:30px;
}
.deleteMeetingButton {
clear:both;
cursor:pointer;
width:90px;
height:30px;
border-radius: 4px;
background-color: #5CD2D2;
border:none;
text-align:center;
line-height:10px;
color:#FFFFFF;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}
.deleteMeetingCancel {
clear:both;
cursor:pointer;
width:90px;
height:30px;
border-radius: 4px;
background-color: #5CD2D2;
border:none;
text-align:center;
line-height:10px;
color:#FFFFFF;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
content:"XXXX";
}
#deleteMeetingConfirmDeleted {
display:none;
}
/* added code below */
.deleteMeetingClose {
font-size: 1.5em;
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="content">Content Obscured By Overlay
<button class="deleteMeeting">Delete</button>
</div>
<div id="overlay"></div>
<div id="popupBox">
<div id="popupContent">
<i>Are you sure you want to delete this meeting?</i>
<br />
<span style="text-align:center;color:black;font-size:40px;">YO</span>
<br />
<button class="deleteMeetingButton">Delete</button>
<button class="deleteMeetingCancel">Cancel</button>
</div>
<div id="deleteMeetingConfirmDeleted">Meeting Deleted</div>
<span class="deleteMeetingClose">×</span> <!-- <= added this line -->
</div>

First, put in image element in your popup div
<img id="ClosePopup" src="insert-image-url-here"/>
Then, style it with position:absolute. Also, make sure the popup div has position:relative
#ClosePopup{
position: absolute;
right:0px;
}
Finally, attach your click handler
$('#ClosePopup').click(function(){
$('#overlay,#popupBox,#popupContent').fadeOut('slow');
});
See it working in this fiddle
If you want a pure css solution without images, see
Pure css close button

Simply create a span element containing × char for the x, put some style and bind the click event to the popup close action:
HTML
<span class="cancel-icon" >×</span>
CSS:
.cancel-icon{
float:right;
cursor:pointer;
}
JS
$('.cancel-icon').click(function () {
//Close the popup
});
Using your Fiddle: http://jsfiddle.net/sGeVT/118/

How to overlay one div over another?

When I hover my mouse over a div with id one, dialog box appears, but the div with id three moves to the right.
I want the dialog box to appear over div with id three without it moving to right.
HTML PAGE
<!DOCTYPE html>
<html>
<head>
<style>
div{
width:300px;
height:300px;
border:1px solid #000000;
float:left;
margin-left:10px;
}
#one,#three{
position:relative;
}
#two,#four{
margin:0;
padding:0;
left:334px;
top:100px;
background-color:#3B3B3B;
border:none;
width:200px;
height:100px;
display:none;
position:relative;
left:14px;
}
#triangleone,#triangletwo{
margin:0;
padding:0;
width: 0;
height: 0;
border-color:transparent;
border-top: 8px solid transparent;
border-right: 14px solid #3B3B3B;
border-bottom: 8px solid transparent;
top:35px;
display:none;
position:relative;
}
#dialogboxone,#dialogboxtwo{
margin:0;
padding:0;
width:214px;
display:none;
border:none;
}
</style>
<script>
var timer;
function showDialogBox(idOne,idTwo,idThree){
var firstSideBar=document.getElementById(idOne);
var secondSideBar=document.getElementById(idTwo);
var dialogBox=document.getElementById(idThree);
timer=setTimeout(function(){
firstSideBar.style.display="block";
secondSideBar.style.display="block";
dialogBox.style.display="block";
},800);
}
function hideDialogBox(idOne,idTwo,idThree){
clearTimeout(timer);
var firstSideBar=document.getElementById(idOne);
var secondSideBar=document.getElementById(idTwo);
var dialogBox=document.getElementById(idThree);
firstSideBar.style.display="none";
secondSideBar.style.display="none";
dialogBox.style.display="none";
}
</script>
</head>
<body>
<div id="one" onmouseover="showDialogBox('two','triangleone','dialogboxone')" onmouseout=hideDialogBox('two','triangleone','dialogboxone')></div>
<div id="dialogboxone">
<div id="two"></div>
<div id="triangleone"></div>
</div>
<div id="three" onmouseover="showDialogBox('four','triangletwo','dialogboxtwo')" onmouseout="hideDialogBox('four','triangletwo','dialogboxtwo')"></div>
<div id="dialogboxtwo">
<div id="four"></div>
<div id="triangletwo"></div>
</div>
</body>
</html>

You need a wrapper to position the dialogboxes against:
<div class="wrapper">
<div id="one"></div>
<div id="dialogone"></div>
</div>
Then you'll need to position the wrapper relatively, and position them to your liking (eg. with float). The dialog can be positioned absolutely, for example: position: absolute; left: 100% to position them just outside the wrapper to the right.
JSFiddle example
Note: please try to format your code a bit more readable, with indents and spaces... Whenyouwriteinenglishyoualsousespaces,doyou?

Display different divs on the same page

I need to display div="block2" when the user clicks "Yes" and display div="block3" when the user clicks "No".
Question:
1.How do I display both block2 & block3 at the same place where block2 is currently displayed.
2. Block2 needs to be hidden when clicked "No" and Block3 needs to be hidden when clicked "Yes"
<div id="block1">
<input type="submit" value="Yes"/>
<input type="submit" value="No"/>
</div>
<div id="block2">
Block2
</div>
<div id="block3">
Block3
</div>
css
html, body{
height: 100%;
width:100%;
}
#block1{
height:10%;
width:50%;
text-align:center;
float:left;
box-sizing:border-box;
-moz-box-sizing:border-box;
border-style:solid;
border-color:green;
}
#block2{
height:90%;
width:50%;
float:right;
-moz-box-sizing:border-box;
box-sizing:border-box;
border-style:solid;
border-color:green;
}
#block3{
height:80%;
width:50%;
float: left;
-moz-box-sizing:border-box;
box-sizing:border-box;
border-style:solid;
border-color:green;

You can display them in the same place using position: absolute; top: 0; left: 0. Just set whatever the parent div is, to position: relative.
You can use javascript or a library like jQuery to listen for the click, and show the right element.

Here is one possible solution that may work for you:
Fiddle Demo
I added added a wrapping container to your content blocks, and tweaked the CSS a tiny bit.
HTML:
<div id="block1">
<input id="yes" type="submit" value="Yes"/>
<input id="no" type="submit" value="No"/>
</div>
<div class="container">
<div id="block2">
Block2
</div>
<div id="block3">
Block3
</div>
</div>
CSS:
//new entries
.container{
position: relative;
height: 300px;
}
.hidden {display:none;}
edit (added a second way to do this using delegation) JS:
$('#yes').on('click', function () {
$('#block2').toggleClass('hidden');
});
$('#no').on('click', function () {
$('#block3').toggleClass('hidden');
});
// OR
$('#block1').on('click', 'input', function () {
$('.container').children('div').eq( $(this).index() ).toggleClass('hidden');
});

http://jsfiddle.net/zcWJ6/6/
html:
<div id="block1" class="box">
<input id="yes" type="submit" value="Yes"/>
<input id="no" type="submit" value="No"/>
</div>
<div id="container">
<div id="block2" class="box">
Block2
</div>
<div id="block3" class="box">
Block3
</div>
</div>
css:
#container {
position: relative;
height: 100px;
width: 50%;
}
#block1 {
height:10%;
width:50%;
text-align:center;
border-bottom: none;
}
#block2{
background: violet;
position: absolute;
}
#block3{
background: yellow;
position: absolute;
}
.box {
height:100%;
width:100%;
-moz-box-sizing:border-box;
box-sizing:border-box;
border: 2px solid #000;
}
js:
$('#yes').click(function(){
$('#block3').hide();
$('#block2').show();
});
$('#no').click(function(){
$('#block2').hide()
$('#block3').show();
});

Make javascript string of div2 and div3 content.
Now add one more div.
<div id="displayhere"></div>
store your div2 and div3 in javascript string. User Jquery click event. After click event add the div2 content to displaynone html.
$("#display2").click(function(){
$("#displayhere").html("div2 content javascript string");
});

Two fixed width divs, and another div with dynamic size between

The title says everything. I want something like this:
The left box should be positioned in the left, the right one in the right. They both should have fixed widths, e.g. 200px. The middle div should take the size between. Its width is not set, but it takes the width that's remaining.
Thanks.

Here's a working one.
Use margin: 0 auto; will get your element centered most of the time. (Quick note: your element must have a declared width for this to work.)
The margin: 0 auto; rule is shorthand for 0 top and bottom margin, and automatic left and right margins. Automatic left and right margins work together to push the element into the center of its container.
The margin: 0 auto; setting doesn't work perfectly in every centering situation, but it works in a whole lot of them.
reference: You Can't Float Center with CSS
HTML
<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">c</div>
CSS
.leftsidebar
{
height: 608px;
width: 60px;
background:red;
float:left; }
.rightsidebar
{
background:blue;
height: 608px;
width: 163px;
float:right;
}
.content
{
width: auto; //or any width that you want
margin:0 auto;
background:yellow;
}

Here is the DEMO http://jsfiddle.net/yeyene/GYzVS/
Working great on onReady and onResize too.
JS
$(document).ready(function(){
resizeMid();
$(window).resize(function() {
resizeMid();
});
});
function resizeMid(){
var mid_width = $('#main').width() - ($('#left').width()+$('#right').width());
$('#middle').css({'width':mid_width});
}
HTML
<div id="main">
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
</div>
CSS
html, body{
margin:0;
padding:0;
}
#main {
float:left;
width:100%;
margin:0;
padding:0;
}
#left {
float:left;
width:100px;
height:300px;
margin:0;
background:red;
}
#middle {
float:left;
width:100%;
height:300px;
margin:0;
background:blue;
}
#right {
float:left;
width:100px;
height:300px;
margin:0;
background:red;
}

You can try this one FIDDLE just html and css, without javascript
<div class="container">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</div>
CSS
div {
height:500px;
position:absolute;
border:0px;
padding:0px;
margin:0px;
}
.c1, .c3 {
width: 200px;
background-color:red;
}
.c1, {
left:0px;
}
.c3 {
right:0px;
}
.c2 {
margin-left:10px;
margin-right:10px;
background-color:blue;
left:200px;
right:200px;
}
.container {
width:99%;
}

[updated]
use a table, it will adjust it's own width. float style was the first that came to my mind but it doesn't adjust the element's width to fill in the gap.
html:
<table>
<tr>
<td style="width:10%;"><div id="d1"></div></td>
<td><div id="d2"></div></td>
<td style="width:10%;"><div id="d3"></div></td>
</tr>
</table>
css:
#d1,#d3{
background-color:red;
width:100%;
height:300px;
}
#d2{
background-color:blue;
width:100%;
height:300px;
}
table{
width:100%;
height:100%;
}
DEMO
update:
if you don't want to use tables or excessive js calculations use this:
#d1,#d3{
float:left;
background-color:red;
width:10%;
height:300px;
}
#d2{
float:left;
background-color:blue;
width:80%;
height:300px;
}
DEMO

I would personally avoid using JS and do this using CSS.
You can add a #container wrapper and then define the width to whatever you want and then use % for the left right and the middle div's
Sample CSS below:
<div id="container">
<div id="left-column"> </div>
<div id="middle-column"> <p>Content goes in here and dynamically stretches</p></div>
<div id="right-column"> </div>
</div>
#container{
float:left;
width:1000px;
*background-color:blue;
}
#left-column, #middle-column, #right-column{
height:500px;
float:left;
}
#left-column, #right-column {
width:20%;
background-color:red;
}
#middle-column {
background-color:green;
width:60%;
}

I'm late to the party, still here goes.
This can be done using flexbox.
HTML
<div class="flex">
<div class="fixed-div"></div>
<div class="dynamic-div"></div>
<div class="fixed-div"></div>
</div>
CSS
.flex {
display:flex;
}
.fixed-div {
width:30px;
background-color:blue;
height:200px;
}
.dynamic-div {
width:100%;
background-color:red;
height:200px;
margin: 0px 10px;
}
You can checkout the implementation here.