How avoid sibling element from shaking when animate with jquery - javascript

I have two div elements side by side. When i move the mouse over the first and animates it, the next one strangely shakes. See here: http://jsfiddle.net/YqZSv/1/ I've noticed it only happens when padding and border are involved. If i replace border with margin, the 'shaking' effect stops.
HTML
<div class='a'></div>
<div class='b'></div>
CSS
.a {
width: 80px;
height: 80px;
padding: 10px;
border: 0px solid yellow;
background-color: red;
display: inline-block
}
.b {
width: 100px;
height: 100px;
background-color: blue;
display: inline-block;
margin-left: 20px;
}
jQuery
$('.a').mouseenter(function(){
$(this).animate({
'padding': 0,
'borderWidth': 10
});
}).mouseleave(function(){
$(this).animate({
'padding': 10,
'borderWidth': 0
});
});
I can't use margin instead of border because i use a background image with border origin, so i don't want it to move together with its content.
Any help?

Tell the browser to keep both the padding and the border-width inside the defined height/width so it doesn't think the size is changing:
div.a { box-sizing:border-box; }
http://jsfiddle.net/exvEa/

If you DO NOT Mind some modification... I'd go for CSS Positioning.
Though this will have an additional tag
Something like:
<div id="mother">
<div class='a'></div>
<div class='b'></div>
</div>
and the in your original CSS:
#mother{
position:relative; width:210px;
}
.a {
width: 80px;
height: 80px;
padding: 10px;
border: 0px solid yellow;
background-color: red;
display: inline-block;
position:absolute;
left:0px;
}
.b {
width: 100px;
height: 100px;
background-color: blue;
display: inline-block;
margin-left: 20px;
position:absolute;
right:0px;
}
jQuery:
$('.a').mouseenter(function(){
$(this).animate({
'padding': 0,
'borderWidth': 10
});
}).mouseleave(function(){
$(this).animate({
'padding': 10,
'borderWidth': 0
});
});
Try that....
http://jsfiddle.net/8jFyL/

If small html/css changes aren't problem:
http://jsfiddle.net/YqZSv/8/
HTML:
<div class="box">
<div class='a'></div>
</div>
<div class="box">
<div class='b'></div>
</div>
CSS:
.box {
width:100px;
height:100px;
margin-right:20px;
float:left;
}
.a {
width: 80px;
height: 80px;
padding: 10px;
border: 0px solid yellow;
background-color: red;
display: inline-block
}
.b {
width: 80px;
height: 80px;
padding: 10px;
background-color: blue;
display: inline-block;
}
Basically, one div as wrapper...

Related

Changing contents of <span> is affecting placement of other elements in line [duplicate]

When two inline-block divs have different heights, why does the shorter of the two not align to the top of the container? (DEMO):
.container {
border: 1px black solid;
width: 320px;
height: 120px;
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
How can I align the small div at the top of its container?
Because the vertical-align is set at baseline as default.
Use vertical-align:top instead:
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align:top; /* <---- this */
}
http://jsfiddle.net/Lighty_46/RHM5L/9/
Or as #f00644 said you could apply float to the child elements as well.
You need to add a vertical-align property to your two child div's.
If .small is always shorter, you need only apply the property to .small.
However, if either could be tallest then you should apply the property to both .small and .big.
.container{
border: 1px black solid;
width: 320px;
height: 120px;
}
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align: top;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
vertical-align: top;
}
Vertical align affects inline or table-cell box's, and there are a large nubmer of different values for this property. Please see https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align for more details.
Use display: flex property for the parent div
The flexbox items are aligned at the start of the cross-axis.
By default, the cross-axis is vertical. This means the flexbox items will be aligned vertically at the top.
So when you apply the display: flex property to the parent div, it sets its child elements with vertical-align: top.
See the following code:
.container {
border: 1px black solid;
width: 320px;
height: 120px;
display: flex;
/** CSS flex */
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
Browser Compatibility: Flexbox is very well supported across modern browsers.
<style type="text/css">
div {
text-align: center;
}
.img1{
width: 150px;
height: 150px;
border-radius: 50%;
}
span{
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type='password' class='secondInput mt-4 mr-1' placeholder="Password">
<span class='dif'></span>
<br>
<button>ADD</button>
</div>
<script type="text/javascript">
$('button').click(function() {
$('.dif').html("<img/>");
})
Add overflow: auto to the container div.
http://www.quirksmode.org/css/clearing.html This website shows a few options when having this issue.

Push other divs to the right

Im trying to slide in a div then move 3 other divs.
I have fiddle showing how I want to do it. But its not 100% correct.
If you check the fiddle you will see it slides in when you press "Press me". But instead of going over the 3 red divs I want it to push them to the side.
Fiddle with code
HTML
<div class="wrapper wrapper-content">
<div class="container" style="position:relative">
<div id="effectMenu"></div>
<div id="red">Press Me</div>
<div id="red"></div>
<div id="red"></div>
</div>
</div>
CSS
#red {
background-color:red;
height:50px;
margin-top: 2px;
width: 100px;
position:relative;
}
#effectMenu
{
display: none;
background: grey;
color: #FFF;
width:30px;
position:absolute;
height:100%;
z-index:1;
}
.container {
border: 2px solid #73AD21;
width:100px;
}
Script
$(function()
{
$("a#toggle-menu").click(function()
{
$("#effectMenu").animate({width:'toggle'},350);
return false;
});
});
Change the id to a class,toggle a class to the items called left,in the css animate the transition of adding the class using css transitions
<div class="container" style="position:relative">
<div id="effectMenu"></div>
<div class="red">Press Me</div>
<div class="red"></div>
<div class="red"></div>
</div>
</div>
$(function() {
$("a#toggle-menu").click(function() {
$("#effectMenu").animate({
width: 'toggle'
}, 350);
$(".red").toggleClass('left');
return false;
});
});
.red {
background-color: red;
height: 50px;
margin-top: 2px;
width: 100px;
position: relative;
transition: all 350ms ease-in-out;
}
#effectMenu {
display: none;
background: grey;
color: #FFF;
width: 30px;
position: absolute;
height: 100%;
z-index: 1;
}
.container {
border: 2px solid #73AD21;
width: 100px;
}
.left {
margin-left:30px;
transition: all 350ms ease-in-out;
}
https://jsfiddle.net/ygmbnwgL/
Using float and relative position instead of absolute one, you can do it :
CSS code :
#red {
background-color:red;
height:50px;
margin-top: 2px;
width: 100px;
position:relative;
float: left;
}
#effectMenu
{
display: none;
background: grey;
color: #FFF;
width:30px;
position:relative;
height:150px;
z-index:1;
float: left;
}
.container {
border: 2px solid #73AD21;
width:150px;
}
See this fiddle

How browser renders HTML

I am trying to create a structure similar to panels. This is what i have tried:
FIDDLE
<div id='main'>
<div id='firstp'>Panel 1</div>
<div id='secondp'>Panel 2
<div id='slide'>Panel 3</div>
</div>
</div>
and CSS is
#main{
width: 300px;
height: 300px;
border: 1px solid black;
}
#firstp{
width: 20%;
height: 100%;
border: 1px solid blue;
display: inline-block;
}
#secondp{
width: 20%;
height: 100%;
border: 1px solid red;
display: inline-block;
position: relative;
background-color: red;
}
#slide{
width: 100%;
height: 100%;
position: absolute;
border: 1px solid green;
background-color: green;
}
I am curious to know how browser renders HTML while parsing. As we can see there are three panels, Panel 3 being child of Panel 2, is seen on top of Panel 2. Whereas as per requirement , Panel 2 should be on top of Panel 3 and say when i click on some button in panel 2, panel 3 should slide behind panel 2 and comes forward on right side of panel 2. Hope i made myself clear. Please help.
If you want panel 2 to be on top of panel 3 then you will need to apply something like z-index:-1;.
I have modified your fiddle to show this working.
Panel 3 is behind panel 2 as you requested and there is a button that when clicked transforms the panel to the right. You can easily neaten this up to hide the entire panel and do some cool jQuery stuff to make the slide transition nicer.
Just try to remember that unless you say otherwise, children will usually appear in front of their parent.
This isn't about browser rendering, it's your CSS that's making the children exceed the height of the parent.
Because you've fixed the height of the parent, yet you've said that #slide is 100% in height, but there's another child of #secondp, which is the text node Panel 2. So technically, #secondp has a height of 100% + height of Panel 2, hence the overflow.
To remedy this, put the text node Panel 2 inside an element, then set the height of that element (I've used 10%) and then adjust the height of #slide to be 100% - specified height of the new element.
Here's an example:
Fiddle
HTML:
<div id='main'>
<div id='firstp'>Panel 1</div>
<div id='secondp'>
<div id="slide1">Panel 2</div>
<div id='slide'>Panel 3</div>
</div>
</div>
CSS:
#main{
width: 300px;
height: 300px;
border: 1px solid black;
}
#firstp{
width: 20%;
height: 100%;
border: 1px solid blue;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
}
#secondp{
width: 20%;
height: 100%;
border: 1px solid red;
display: inline-block;
position: relative;
background-color: red;
box-sizing: border-box;
}
#slide{
width: 100%;
height: 90%;
position: relative;
border: 1px solid green;
background-color: green;
box-sizing: border-box;
}
#slide1 {
height: 10%;
}
You'll also notice I've added vertical-align: top to firstp aswell, otherwise it'll be off the top.
Also, I've added box-sizing: border-box to prevent the border overlapping the parent.
#main{
width: 300px;
height: 300px;
border: 1px solid black;
}
#main>div{
width: 20%;
height: 100%;
border: 1px solid blue;
display: inline-block;
}
#main>div{
width: 20%;
height: 100%;
border: 1px solid red;
display: inline-block;
position: relative;
background-color: red;
}
#slide{
width: 100%;
height: 100%;
position: absolute;
border: 1px solid green;
background-color: green;
}

Loading an Image in `<div>` overrides html text

I'm writing an html page that should have the following behavior:
When loaded it contains an empty <div> with a link inside it.
Once pressed the link runs the script StartTrial.js which is supposed to load an image from a directory, visualize it, and give some instructions on what to do.
However, as you can see, once the image is loaded it covers the instructions. This is cause the instructions are written in a <div> that has a margin of 30px from the container <div> with its size before loading the image. How can I fix my code so that the text is always shown with a 30px margin from the bottom of the image?
Here are my code snippets:
Html
<div id="container">
Start Trial
<img class="displays" id="t1_img" src="./images/immi.jpg">
</div>
<div class="instruction" id="instr_1">
<p><b>Instruction:</b><p>
<p>Some text here.</p>
</div>
CSS
#container {
position: relative;
background: gray;
width: 300px;
height: 300px;
margin: 30px;
}
.displays {
position: absolute;
display: none;
top: 0px;
left: 0px;
}
JavaScript
function StartTrial() {
$('#startTrial').hide();
$('#t1_img').show();
$('#instr_1').show();
}
Change your css to use min-height and min-width
#container {
position: relative;
background: gray;
min-width: 300px;
min-height: 300px;
margin: 30px;
}
and remove the absolute positioning, as there is no real need for it.
.displays {
display: none;
top: 0px;
left: 0px;
}
Your image is larger than the container and hence it is overlapping the instructions.
No need to over-engineer it, you can have a css only solution or a simple JS one as follows:
CSS only solution
HTML:
<input type="checkbox" id="startCheckbox" class="start-checkbox"/>
<div id="container" class="container">
<label for="startCheckbox" class="start-trial center">Start Trial</label>
<div class="instruction center" id="instr_1">
<p><b>Instruction:</b></p>
<p>Some text here.</p>
</div>
</div>
CSS:
.center {
position: absolute;
top:0; right:0; bottom:0; left:0;
margin: auto;
}
.container {
border: 1px solid #ccc;
width: 400px;
height: 400px;
position: relative;
}
.container .instruction {
border: 1px dashed #333;
background: rgba(255,238,221,.9);
width: 250px;
height: 250px;
padding: 25px;
text-align: center;
display: none;
}
.container .start-trial {
position: absolute;
height: 20px;
width: 80px;
text-decoration: underline;
cursor: pointer;
}
.container .start-checkbox {
display: none;
}
.start-checkbox {
display: none;
}
.start-checkbox:checked ~ .container .start-trial {
display: none;
}
.start-checkbox:checked ~ .container .instruction {
display: block;
}
.start-checkbox:checked ~ .container {
background: url(http://www.ceritaspros.com/dev/images/dogs/FunnyPuppies/funny-puppies-sleeping-400x400.jpg);
}
Fiddle: http://jsfiddle.net/qobbkh6f/5/
CSS+JS Solution
HTML:
<div id="container" class="container">
Start Trial
<div class="instruction center" id="instr_1">
<p><b>Instruction:</b></p>
<p>Some text here.</p>
</div>
</div>
CSS:
.center {
position: absolute;
top:0; right:0; bottom:0; left:0;
margin: auto;
}
.container {
border: 1px solid #ccc;
width: 400px;
height: 400px;
position: relative;
}
.container .instruction {
border: 1px dashed #333;
background: rgba(255,238,221,.9);
width: 250px;
height: 250px;
padding: 25px;
text-align: center;
display: none;
}
.container.clicked {
background: url(http://www.ceritaspros.com/dev/images/dogs/FunnyPuppies/funny-puppies-sleeping-400x400.jpg);
}
.container.clicked .start-trial {
display: none;
}
.container.clicked .instruction {
display: block;
}
.copntainer.clicked .instruction {
display: block;
}
.container .start-trial {
position: absolute;
height: 20px;
width: 80px;
}
JS:
$("#container").on("click", "#startTrial", function(e) {
e.preventDefault();
$("#container").addClass("clicked");
});
Fiddle: http://jsfiddle.net/qobbkh6f/3/
Try this and let me know if it helps
HTML
<div id="container">
Start Trial
<img class="displays" id="t1_img" src="./images/immi.jpg">
</div>
<div class="instruction" id="instr_1">
<p><b>Instruction:</b><p>
<p>Some text here.</p>
</div>
CSS
#container {
position: relative;
background: grey;
width: 300px;
height: 300px;
margin: 30px;
overflow:hidden
}
.displays {
position: absolute;
top: 0px;
left: 0px;
max-height:100%;
}
Javascript
function StartTrial() {
$('#startTrial').hide();
$('#t1_img').show();
$('#instr_1').show();
}
http://jsfiddle.net/5jx3dn44/
Don't use absolute positioning on your image.
The whole concept of absolute positioning is to make an element overlap the other elements on the page. If you don't want something to overlap other elements then don't use it.
Also don't give a size to your container. It's not the container that's 300x300 and grey - it's your start trial block. If the container is invisible and flexible then it will look good with the image in it when you remove the start trial block. I forget how hide() works but just change to display:none if it doesn't actually remove the element from the layout.

Problems with positioning and z-index

I'm trying to have the menu overlap content, but as of now it moves the content box away.
I've already tried the position: relative trick, but the problem doesn't seem to go away. The solution is probably something really obvious, but I need help finding it.
EDIT: Sorry, forgot to add, the box will also be resizable() so I'm trying to avoid absolute positioning.
EDIT2: nevermind, right:5px fixes that problem
JSFiddle
HTML
<div class="box">
<div class="top">
<div class="icon"></div>
<div class="menubox">
<ul class="menu">
<li>Menu Option 1
</li>
<li>Menu Option 2
</li>
</ul>
</div>
</div>
<div class="content">
<p>content goes here</p>
</div>
<div class="content">
<p>content goes here</p>
</div>
</div>
CSS
.box {
width: 400px;
height: 200px;
margin: 5px;
float: left;
background: LightGray;
border: 1px solid DarkGray;
overflow: hidden;
}
.top {
width: 100%;
height: 25px;
background: lightblue;
}
.icon {
float: right;
background: red;
height: 15px;
width: 15px;
margin: 5px;
}
.menubox {
float: right;
background: yellow;
position: relative;
z-index:100;
width: 150px;
}
.content {
width: 180px;
height: 165px;
margin: 0px 10px 47px;
float: left;
position: relative;
z-index: 0;
display: block;
background:DarkGray;
}
li {
list-style-type: none;
text-decoration: none;
}
ul {
margin:none;
padding:none;
}
JS/jQuery
$('.icon').mouseover(function () {
$(".menu").show();
}); //toggle menu on hover
$(".menu").mouseleave(function () {
$(this).hide();
});
use position: absolute?
fiddle
.menubox {
float: right;
background: yellow;
position: relative;
z-index:100;
width: 150px;
top: 25px;
right: 5px;
position: absolute;
}
.box {
width: 400px;
height: 200px;
margin: 5px;
float: left;
background: LightGray;
border: 1px solid DarkGray;
overflow: hidden;
position: relative; /* add this */
}
Edit: better position
The yellow menubox needs to be positioned absolutely so it does not interfere with the flow of the document (take up space).
Give it a position:absolute;
Furthermore, the .box element needs to have a position:relative so the menu is positioned relative to that box.
Updated your fiddle for you:
http://jsfiddle.net/CcVnL/11/
Check the below link i have updated your code.
"jsfiddle.net/CcVnL/9/"

Categories