I have a problem with the transition of the bootstrap navbar.
the collapse has a jumpy transition when the collapsing element has padding
I googled this issue and it seems that the problem is the padding:
.menu-menu-container{
padding: 100px 30px 60px 30px;
background-color: yellow;
}
In fact if i remove the padding from menu-menu-container element, the animation works well, and it is very smooth
This is my codepen: http://codepen.io/mp1985/pen/EyOJYE
How can I achieve the same result without this weird issue?
The issue is caused by the padding of the container you are collapsing. It complicates the calculation of the height by collapse.js
Example:
HTML
<div class="collapsible-div padding-values">
// YOUR CONTENT
</div>
CSS
.padding-values{
padding: 20px 40px 30px;
}
this will be fixed if you move the padding to an inner container:
HTML
<div class="collapsible-div">
<div class="new-container padding-values">
// YOUR CONTENT
</div>
</div>
Its happening because of max-height of navbar-collapse class which is 340px use below code to handle it.
http://codepen.io/rahulchaturvedie/pen/VjVOLa
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
max-height: none;
}
Try adding a CSS transition the affected items. This will make the transition less jump as the browser will animate between the various paddings. You can target each CSS animatable property with there own timing properties. You can see all the various animatable properties here: http://www.w3schools.com/cssref/css_animatable.asp
// will want to make this selector more targeted/meaningful
* {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
Related
On my site I have a container in which numerous divs containing one i elements with background-images are rendered. Those i elements all have the same background-image but with different background-positions so that only one http request has to be made, which is general best practice for smaller icons. The divs should be horizontally centered in the container.
My problem is that on Chrome and Firefox browser (latest versions) the rendering of the background images is not working as intended on certain (wide) screen sizes. Specifically on Chrome it will always not show some of the elements background-image unless the element is hovered and on Firefox it will not render background images at all.
If I add float: left to the divs inside the container the rendering issue is solved. However I want to have the elements centered in the container which does not work with the float left.
My question is what am I doing which is causing this behaviour on certain browsers and how can I try to resolve it?
You can have a look at this problem for yourself on:
http://staging.koreanbuilds.net
Here is a screenshot of the behaviour on Chrome and on Firefox
This is the css code for the container and elements:
/* Container of clickable champion icons */
#champContainer {
width: 100%;
padding-right: 10px;
padding-left: 10px;
text-align: center;
position: relative;
}
/* Champion images div container class */
.champIcon {
width: 65px;
height: 65px;
margin: 1px auto;
overflow: hidden;
}
.champIcon i {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
}
.champIcon i:hover {
zoom: 1.05;
cursor: pointer;
-moz-transform:scale(1.05);
-moz-transform-origin: 0 0;
}
Additionally the divs have one of those two classes
.nodisplay {
display: none;
}
.yesdisplay {
display: inline-block;
}
The i elements always have the following class
.chmp {
display: inline-block;
overflow: hidden;
text-indent: -9999px;
text-align: left;
cursor: pointer;
}
as well as a class defining the background-image and position for example
.chmpashe {
background-image: url(http://statics.koreanbuilds.net/champion_65x65/sprite.png);
background-position: 0 -455px;
width: 65px;
height: 65px;
}
I don't see anything wrong with your code. It looks like this might be the same issue you are seeing here as I can't seem to load your spritesheet on it's own in Firefox
It might be worth cutting your sprite sheet down and testing if that works.
hope that helps!
edit:
Looking at your live site you have a more traditionally shaped stylesheet which doesn't go beyond 1000 pixels in ether dimension. It looks like the one you are using on staging goes beyond 80,000 pixels which looks to be where your issue is.
When we expand transition is smooth but when we collapse transition is not good... when its about to collapse I see a shake.
I played with transition but its not working. Can you help me providing my code in the fiddle?
.accordion-section {
border-bottom: solid 1px #000;
}
.accordion-section > h3 {
padding: 6px;
font-size: 16px;
background-color: #CCC;
margin: 0;
}
.accordion-section > .body {
height: 0;
padding: 0 10px;
overflow-y: hidden;
transition: height .5s;
transition: height .5s, padding-top .5s, padding-bottom .5s;
}
You can transition max-height instead of height and enclose the body content with padding, etc inside of the element you're transitioning (added .body-inner in .body). I also added a transition for scale() as it will cause a more "accordion" style collapse, but you can try it without that.
with scale() - http://jsfiddle.net/b4L6kyg4/93/
without - http://jsfiddle.net/b4L6kyg4/94/
Just give the initial div background color green. when the accordion is closing it doesn't have any background so it makes it look as if the div is flickering.
.accordion-section > .body {
background: green;
}
There are a couple of things you can do:
First, accelerate some device's hardware by using -webkit-transform: translate3d(0,0,0); . Second, use the CSS animation property transition timing function. I am not sure which effect you are trying to achieve, but you have "ease" on certain elements. Try experimenting with "ease-out". Third, the CSS transitions you're using may not be aligned perfectly with your elements, so when the transition finished running, the div snaps back to its place. A quick patch for this problem may be animation-fill-mode: forwards; . Your fiddle does not have the actual #keyframes for animation, so it is hard to give you any further advice.
I hope my question makes sense, but what im trying to do is: show a div by transition. Meaning i want the div to slowly appear from top to bottom or from left to right, almost like a fade. Is this possible with either javascript or jquery?
It is possible, if i understand u need something like this:
http://jsfiddle.net/e5BuX/
$(document).ready(function(){
$(".cube").animate({left:"400px",opacity:"1"},2000);
});
If I understand the question correctly, the closest thing is the jQuery slideUp() or slideDown() methods. they are not a fade exactly, but like I said, probably the closest thing ( I am not a JavaScript/jQuery expert though).
here is a site that demonstrates how they look.
EDIT: Here are some other good examples of custom animations you can do with the animate() method
Hope that helps!
Its possible with vanilla javascript and jQuery.animate but it can also be done entirely css3 transition & animate. Take a look here for example
It can also be done only with css3. Here's a rough ideea.
HTML
<div class="im-a-div animate-me im-hidden">
<span class="center-me">I'm inside the div!</span>
</div>
<input id="show-the-div" type="button" value="Show div"/>
CSS
.im-a-div {
background: #ddd;
border: 1px solid #ccc;
border-radius: 5px;
height: 100px;
position: relative;
opacity: 1;
width: 400px;
}
.im-hidden {
margin-top: -100%;
opacity: 0;
}
.animate-me {
-webkit-transition: all 1000ms 0s ease-in-out;
-moz-transition: all 1000ms 0s ease-in-out;
-ms-transition: all 1000ms 0s ease-in-out;
transition: all 1000ms 0s ease-in-out;
}
So basically I float all my div elements (icons) to the left and margin left them to create space In between them and I display them inline. The problem I have now is that whenever I hover over one element(icon) the rest of the elements moves. Please can you explain what causes this, thanks a lot. Examples will be gladly appreciated.
css:
.facebookIc{
font-size: 80px;
margin-left: 120px;
-webkit-transition: font-size 0.3s linear;
}
i.icon-facebook-circled:hover{
color: #3b5998;
font-size: 90px;
-moz-transition: all 0.3s ease-in;
/* WebKit */
-webkit-transition: all 0.3s ease-in;
/* Opera */
-o-transition: all 0.3s ease-in;
/* Standard */
transition: all 0.3s ease-in;
}
.twitterIc{
font-size: 80px;
margin-left: 120px;
-webkit-transition: font-size 0.3s linear;
}
i.icon-twitter-circled:hover {
font-size: 90px;
color: #00aced;
-moz-transition: all 0.3s ease-in;
/* WebKit */
-webkit-transition: all 0.3s ease-in;
/* Opera */
-o-transition: all 0.3s ease-in;
/* Standard */
transition: all 0.3s ease-in;
}
.contactContent{
position: relative;
height: auto;
width:100%;
background: #b7d84b;
opacity: 0.8;
overflow:auto;
padding: 20px 20px;
}
html:
<section id = "contactContent" class="contactContent">
<div>
<i class="icon-gplus-circled gplusIc"></i>
<i class="icon-facebook-circled facebookIc"></i>
<i class="icon-mail-circled mailIc"></i>
<i class="icon-twitter-circled twitterIc"></i>
<i class="icon-soundcloud-circled soundcloudIc"></i>
</div>
</section>
There could be a number of factors, the most obvious would be in your CSS having a :hover set on the element to increase a font-size or change something which would affect its position or size.
We would need to see code to be sure and verify thats the problem.
EDIT
So looking through your code, i can see one major flaw. As i guessed the :hover was affecting the placement.
Your setting the font-size to be 80px and then on the hover, upping that to be 90px. That will then increase the size the container needs to be. Unless you set a max-height/width on the element or set the overflow to hidden it will always increase in size when you modify something that will increase in size, even by a single pixel.
Its hard to try and amend the code for you without seeing the full code (the piece you added was only a snippet) and also needing to know how it looks.
If you could get it into a jsFiddle then i could try fix it up but its best to learn yourself where your going wrong and then how to fix it yourself.
Hope this all makes sense to you.
Your elements are most likely wired up with a mouse over effect that changes the border around each element. Hovering over the element will change the dimensions of the element. Since they are all floated they will move around as best they could to accommodate the altered element.
I'm displaying tooltips via pure CSS3 but the only problem I have is that the content of the tooltips has really different lengths. Some of them are just 1 line long, others up to 4 lines.
Now are these tooltips Shadow DOM elements, so how could I get the (different) height of these tooltips via JavaScript (or a pure CSS solution would be better (maybe CSS calc?)) to adjust the margin that all tooltips have the margin from the anchor element?
HTML:
Test #1
Test #2
CSS:
a:before {
content: attr(data-title);
position: absolute;
background: blue;
padding: 7px 10px;
width: 440px;
max-height: 72px;
text-align: left;
line-height: 18px;
margin: 0 0 0 0;
opacity: 0;
color: white;
transition: opacity 0.15s ease-out 0.25s, margin-top 0.15s ease-out 0.25s;
}
a:hover:before {
opacity: 1;
margin-top: -40px;
transition: opacity 0.2s ease-out 0.5s, margin-top 0.2s ease-out 0.5s;
}
Live demo: http://jsfiddle.net/qq3YJ/
This is the jsfiddle solution: http://jsfiddle.net/kwJz9/2/
This is what I did:
Make a relative, so this means that a:before element will have position relative to his parent a.
To place tooltip right under links I used bottom attribute instead of margin-top. Because I used position: relative to link - this means that bottom:0 for example it is when tooltip has it's bottom border right on the bottom border of the parent a.
Because you want to see tooltips under links - in :hover I changed bottom to 1.4em, which is little bit under text (.4em will be distance between them).
Because you want to see it animated I changed transition to include bottom property instead of 'margin-top'.
The last problem was that because you had :before element always in html flow - in case of second tooltip (which is big) - it occupies more space than a, so when you hover it (not the link) - you can see it. So I also added visibility: hidden to :before element to make sure that if mouse will be over it you will not see it.