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

I made a jquery slide show but it doesn't work right, what do i do [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Okay so i made this jquery slider from a video series on youtube and it doesn't seem to be working right... The image fades in at first but then the next image doesn't come in. How can i fix this.. Im using older versions of jquery because of deprecated functions
here is the html.
<!DOCTYPE html>
<html>
<head>
<title>
Home
</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript">
</script>
<script src="jquery-ui-1.8.18.js" type="text/javascript">
</script>
<script src="script.js" type="text/javascript">
</script>
</head>
<body class="body" onload="Slider()">
<div class="container">
<div class="bg">
<div class="mainHeader">
<nav>
<ul>
<li class="last">
Contact
</li>
<li>
Products
</li>
<li>
About
</li>
<li>
Home
</li>
</ul>
</nav>
</div>
<div class="topArea">
<div class="topAInfo">
<h2>
Here is just a simple title
</h2>
<p>
This is just a little bit of dummy text. This is just a little bit of dummy text. This is just a little bit of dummy text. This is just a little bit of dummy text.
</p>
</div>
</div>
<div class="middleArea">
<div class="slider">
<img id="1" src="slide1.jpg" border="0" alt="slide1" width="800px" height="350px">
<img id="2" src="slide2.jpg" border="0" alt="slide2" width="800px" height="350px">
<img id="3" src="slide3.jpg" border="0" alt="slide3" width="800px" height="350px">
</div>
<div class="middleAInfo">
<h3>
Welcome to
</h3>
<p>
A dummy website!!
</p>
</div>
<div class="latestNews">
<hr>
<h2>
Latest News
</h2>
<div class="post">
<p class="date">
March 28, 2015
</p>
<p>
New advanced update with double speed and a whole bunch of cool new st.. more>>
</p>
</div>
<div class="post">
<p class="date">
March 28, 2015
</p>
<p>
New advanced update with double speed and a whole bunch of cool new st.. more>>
</p>
</div>
<div class="newsLetter">
<div class="newsLInfo">
<h3>
Newsletter sign-up
</h3>
<hr>
<p>
If you would like to sign up for our free NewsLetter please enter your email below
</p>Unsubscribe
</div><input type="text" name="textBox" class="textBox" style="width:200px; height:20px;">
<div class="button1">
Submit
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
css:
*{margin:0;padding:0;}
#font-face {
font-family: SketchFont;
src: url(Fonts/Sketch_Block.ttf);
}
body{
background:#ebebeb;
width:80%;
height:1300px;
}
.container{
width:100%;
}
.mainHeader nav{
width:95%;
height:40px;
position:relative;
left:30px;
top:60px;
background: -webkit-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* Standard syntax */
/*margin: 100px 50px 0 150px;*/
}
.mainHeader nav ul{
}
.mainHeader nav ul li{
float:right;
display:inline;
text-align:center;
border:1px solid #ADADA8;
border-bottom:none;
border-top:none;
border-left:none;
padding-top:20px;
}
.mainHeader nav ul li.last{
border-right:none;
}
.mainHeader nav ul li a{
text-decoration:none;
/*margin:10px Use to replace paddings right/left but causes hovedr errors*/
font-family:Arial;
position:relative;
top:-10px;
color:white;
padding:10px;
padding-right:20px;
padding-left:20px;
}
.mainHeader nav ul li a.active{
background:white;
color:black;
}
.mainHeader nav ul li a:hover{
background:white;
color:black;
}
.topArea{
width:95%;
height:300px;
position:relative;
left:30px;
top:10px;
/*margin: -50px 50px 0 150px;*/
background: -webkit-linear-gradient(white,rgb(33, 171, 198)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(white,rgb(33, 171, 198)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(white,rgb(33, 171, 198)); /* For Firefox 3.6 to 15 */
background: linear-gradient(white,rgb(33, 171, 198)); /* Standard syntax */
}
.topArea .topAInfo{
margin:20px;
padding-top:60px;
width:60%;
margin:50px;
font-family:;
}
.topArea .topAInfo h2{
font-family:SketchFont;
font-weight: normal;
}
.topArea .topAInfo p{
line-height:25px;
font-family:cursive;
font-size:15px;
}
.bg{
width:100%;
height:1200px;
position:relative;
left:10%;
background:linear-gradient(blue, white, white, blue); /* Standard syntax */
/*background-image:url(bg2.jpg);*/
background-repeat: no-repeat;
}
.middleArea{
background:linear-gradient(white, white, #55C4E9); /* Standard syntax */;
height:600px;
width:95%;
position:relative;
left:30px;
top:10px;
}
.middleArea .middleAInfo {
padding:30px 0 0 30px;
}
.middleArea .middleAInfo p{
color:#49CBF0;
font-size:30px;
font-weight:400;
}
.middleArea .latestNews {
width:250px;
height:300px;
background:#0099cc;
float:right;
position:relative;
top:-60px;
border:1px solid #D6D8D8;
}
.middleArea .latestNews hr{
position:relative;
top:50px;
color:black;
width:90%;
margin-left:10px;
}
.middleArea .latestNews h2{
padding:10px 10px 10px 10px;
color:white;
}
.middleArea .latestNews p.date{
color:white;
font-size:13px;
font-weight:bold;
padding:10px 10px 10px 20px;
}
.middleArea .latestNews p{
color:white;
font-size:13px;
position:relative;
left:10px;
width:225px;
}
.middleArea .latestNews a{
color:blue;
font-size:15px;
font-family:Arial;
}
.middleArea .latestNews .newsLetter{
background:white;
width:250px;
height:200px;
position:relative;
top:80px;
border:1px solid #D6D8D8;
}
.middleArea .latestNews .newsLetter .textBox{
position:relative;
top:40px;
left:25px;
}
.middleArea .latestNews .newsLetter .button1{
width:50px;
height:25px;
background:#1768ED;
padding:3px 10px 2px 10px;
border-radius:7px;
text-align:center;
color:white;
font-family:Arial;
position:relative;
top:45px;
left:155px;
}
.middleArea .latestNews .newsLetter .button1:hover{
cursor: pointer;
}
.middleArea .latestNews .newsLetter h3{
position:relative;
top:15px;
left:10px;
color:#21AFEA;
}
.middleArea .latestNews .newsLetter hr{
position:relative;
top:20px;
color:#21AFEA;
}
.middleArea .latestNews .newsLetter p{
color:black;
position:relative;
top:40px;
color:#21AFEA;
font-size:15px;
}
.middleArea .latestNews .newsLetter a{
position:relative;
top:90px;
left:30px;
}
.slider{
width:800px;
height:350px;
overflow:hidden;
margin:30px auto;
background-image:url(loading.gif);
background-repeat:no-repeat;
background-position:center;
background-size: 100px 100px;
}
.slider img{
display:none;
}
javascript:
function Slider(){
$(".slider #1").show("fade", 500);
$(".slider #1").delay(5500).hide("slide", {direction:'left'}, 500);
var sc = $(".slider img").size();
var count = 2;
setInterval(function(){
$("slider #"+count).show("slide", {direction:'right'}, 500);
$("slider #"+count).delay(5500).hide("slide", {direction:'left'}, 500);
if(count == sc){
count == 1;
}else{
count = count + 1;
}
},6500);
}
and the images zip
https://www.dropbox.com/s/z8cxqlfp7i46066/slides.zip?dl=0

The problem is that your syntax is wrong, the class selector should contain a dot
change $("slider") to $(".slider")
try this
function Slider(){
$(".slider #1").show("fade", 500);
$(".slider #1").delay(5500).hide("slide", {direction:'left'}, 500);
var sc = $(".slider img").size();
var count = 2;
setInterval(function(){
console.log(count);
$(".slider #" + count).show("slide", {direction:'right'}, 500);
$(".slider #" + count).delay(5500).hide("slide", {direction:'left'}, 500);
if(count == sc){
count == 1;
}else{
count = count + 1;
}
},6500);
}
and replace your slider container with
<div class="slider">
<img id="1" src="slide1.jpg" border="0" alt="slide1" width="800px" height="350px">
<img id="2" src="slide2.jpg" border="0" alt="slide2" width="800px" height="350px">
<img id="3" src="slide3.jpg" border="0" alt="slide3" width="800px" height="350px">
</div>
and make sure to rename your image slider3.jpg to slide3.jpg

Well, Here are the following problems make it not working, and you can have a try:
In your javascript file, the data type of variable count is int, that's the reason why selector cannot find the DOM pointing to.
You should code like count.toString().
You select dom by Id, so you don't need to code like: $("slider #"+count), and $("#"+ count.toString()) is the proper way.
In the html, the name of image3 is incorrect, should be slider3.jpg.
I think that will help you to resolve the problem of image 2 and 3 not showing.
The other thing you need to think of is, how to slide back.

Need to display a div on hover of other div

I have an element set to visibility:hidden and i need it to change to visible on hover, i tried this with javascript with no luck
HTML
<div class="options">
<div id="option-1" onmouseover="dis()"></div>
</div>
</div>
<div id="pic-1"></div>
CSS
#option-1{
width:100px;
height:20px;
background:#fff;
position:relative;
z-index:999;
top:0;left:0;
}
#pic-1{
width:100%;
height:100%;
position:absolute;
z-index:99;
background:#f0f;
visibility:hidden;
}
Javascript
function dis(){
document.getElementById("pic-1").style.visibility = "visible";
}

html:
<div class="options">
<div id="option-1" onmouseover="showx();" onmouseout="hidex();"></div>
</div>
</div>
<div id="pic-1"></div>
css:
#option-1{
width:100px;
height:100px;
background-color:red;
cursor: pointer;
}
#pic-1{
width:100%;
height:100%;
position:absolute;
z-index:99;
background:#f0f;
visibility:hidden;
}
js
function showx(){
document.getElementById("pic-1").style.visibility = "visible";
}
function hidex(){
document.getElementById("pic-1").style.visibility = "hidden";
}
codepen link: http://codepen.io/anon/pen/bNrdrN

Jquery Text Slide in Effect

I want to make text animation like this slide in from left. There are three text fields
Sports Cargo Bag
$14
Sale $25
I want these text to be set from jquery and slide in from the left like this link
. This is my code JsFiddle, i have set these headtext but i want to use jquery method to set these texts
html
<div id="mainContainer">
<div id="logdo">
<img src="http://i.share.pho.to/7346a9ca_o.gif"/>
</div>
<div id="images">
<img id="introImg" src="http://i.share.pho.to/9064dfe4_o.jpeg"/></div>
<div id="headlineText">
<p id="headline1Txt" ></p>
<p id="headline2Txt" ></p>
<p id="headline3Txt" ></p>
</div>
<button class="btn btn-primary" id="ctaBtn" type="button">SHOP NOW</button>
</div>
css
* {
margin:0;
padding:0;
}
#mainContainer{ text-align: center;
width:160px;
height:600px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:5px solid #BACAE4;
overflow: hidden;
position: fixed;
}
#images{
position:absolute;
top:200px;
left:3px;
right:1286px;
Width:130px;
height:152px;
}
#introImg{
position:absolute;
top:40px;
left:7px;
right:11px;
}
#headlineText p
{
text-align: center;
position: absolute;
top:60px;
left:-120px;
Width:120px;
height:269px;
line-height:1.0;
overflow:hidden;
}
#ctaBtn{
position:absolute;
top:540px;
left:26px;
right:0px;
Width:106px;
height:28px;
}

Here is the simplest method:
Replace all our current javascript in your fiddle with $("#mainContainer").hide().show('slide');.
If you want you can use .delay(500) to make it wait a bit before the animation: $("#mainContainer").hide().delay(500).show('slide');

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.