Animations and animation delay behaving randomly on Safari - javascript
I am trying to animate a certain page where there are three main components, two tables and one chart.
Please refer the JSFiddle to replicate the same on your Safari browser.
Link to JSFiddle
Two rows of the first table are shown one after the another i.e. the green row slides in then slides out cueing the yellow row to slide in. After a couple of seconds the yellow row slides out and then green comes back. After green comes back to the original position.
Two divs below slide in simultaneously. Now, what is happening is I make the green row absolute after it slides out so that the yellow row shifts up on the same position but on Safari, the 'position: absolute' in the green row is not applying.
#-webkit-keyframes slideRightDisappear {
0% {
opacity: 1;
}
75% {
opacity: 0;
}
99% {
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
100% {
position: absolute;
}
}
#keyframes slideRightDisappear {
0% {
opacity: 1;
}
75% {
opacity: 0;
}
99% {
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
100% {
position: absolute;
}
}
The yellow row also when slides out does not take absolute position to pull the lower two division up.
#-webkit-keyframes slideLeftDisappear {
0% {
display: inline;
opacity: 1;
}
99% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
100% {
position: absolute;
opacity: 0;
}
}
#keyframes slideLeftDisappear {
0% {
display: inline;
opacity: 1;
}
99% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
100% {
position: absolute;
opacity: 0;
}
}
Also, the two divisions at the bottom do not animate and just suddenly appear.
Check the fiddle on Chrome, that is how ideally it should work and then check it on Safari for the main issue.
Do not be confused by the way I am injecting the animation, my requirement is that I want to chain multiple animations and start and stop them on demand so what I do is, I pass a list of animation properties and join them individually and add it to the DOM style. I was earlier concatenating the shorthand but apparently Safari does not consider the shorthand so I went further and split each animation into its properties.
Also, one more issue which I am not able to replicate is when I click on the animate button, all my animations run simultaneously ignoring the delay that I give.
function animator () {
addAnimationToElement('row-1', ['fadeInLeftBig', 'slideRightDisappear', 'slideLeftAppear'], ['0.5s', '0.3s', '0.5s'], ['linear', 'linear', 'linear'], ['0.6s', '3s', '7.5s'], ['1', '1', '1'], ['normal', 'normal', 'normal'], ['forwards', 'forwards', 'forwards'], ['running', 'running', 'running'])
addAnimationToElement('row-2', ['slideInLeft', 'slideLeftDisappear'], ['0.5s', '0.5s'], ['linear', 'linear'], ['4s', '6.5s'], ['1', '1'], ['normal', 'normal'], ['forwards', 'forwards'], ['running', 'running'])
addAnimationToElement('table', ['fadeInLeftBig'], ['1.5s'], ['cubic-bezier(0.215, 0.61, 0.355, 1)'], ['9s'], ['1'], ['normal'], ['forwards'], ['running'])
addAnimationToElement('chart', ['fadeInRightBig'], ['1.5s'], ['cubic-bezier(0.215, 0.61, 0.355, 1)'], ['9s'], ['1'], ['normal'], ['forwards'], ['running'])
}
function pause () {
document.getElementById('portfolio').style.opacity = 0;
}
function addAnimationToElement (elementID, animationName, animationDuration, animationTimingFunction, animationDelay, animationIterationCount, animationDirection, animationFillMode, animationPlayState) {
// Animation for Safari
document.getElementById(elementID).style.WebkitAnimationName = animationName.join(', ')
document.getElementById(elementID).style.WebkitAnimationDuration = animationDuration.join(', ')
document.getElementById(elementID).style.WebkitAnimationTimingFunction = animationTimingFunction.join(', ')
document.getElementById(elementID).style.WebkitAnimationDelay = animationDelay.join(', ')
document.getElementById(elementID).style.WebkitAnimationIterationCount = animationIterationCount.join(', ')
document.getElementById(elementID).style.WebkitAnimationDirection = animationDirection.join(', ')
document.getElementById(elementID).style.WebkitAnimationFillMode = animationFillMode.join(', ')
document.getElementById(elementID).style.WebkitAnimationPlayState = animationPlayState.join(', ')
// Animation for other browsers
document.getElementById(elementID).style.animationName = animationName.join(', ')
document.getElementById(elementID).style.animationDuration = animationDuration.join(', ')
document.getElementById(elementID).style.animationTimingFunction = animationTimingFunction.join(', ')
document.getElementById(elementID).style.animationDelay = animationDelay.join(', ')
document.getElementById(elementID).style.animationIterationCount = animationIterationCount.join(', ')
document.getElementById(elementID).style.animationDirection = animationDirection.join(', ')
document.getElementById(elementID).style.animationFillMode = animationFillMode.join(', ')
document.getElementById(elementID).style.animationPlayState = animationPlayState.join(', ')
}
.transparent_element {
opacity: 0;
}
#row-1 {
width: 300px;
height: 100px;
display: block;
background-color: green;
}
#row-2 {
width: 300px;
height: 100px;
display: block;
background-color: yellow;
}
#table {
width: 150px;
height: 150px;
background-color: red;
display: inline-block;
}
#chart {
width: 150px;
height: 150px;
background-color: blue;
position: absolute;
right: 0;
display: inline-block;
}
#-webkit-keyframes slideLeftAppear {
0% {
opacity: 0;
transform: translate3d(100%, 0, 0);
-webkit-transform: translate3d(100%, 0, 0);
}
100% {
transform: translate3d(0, 0,);
-webkit-transform: translate3d(0);
position: relative;
display: block;
opacity: 1;
}
}
#keyframes slideLeftAppear {
0% {
opacity: 0;
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
100% {
transform: translateX(0);
-webkit-transform: translateX(0);
position: relative;
display: block;
opacity: 1;
}
}
#-webkit-keyframes slideRightDisappear {
0% {
opacity: 1;
}
75% {
opacity: 0;
}
99% {
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
100% {
position: absolute;
}
}
#keyframes slideRightDisappear {
0% {
opacity: 1;
}
75% {
opacity: 0;
}
99% {
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
100% {
position: absolute;
}
}
#-webkit-keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#-webkit-keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translate3d(400px, 0, 0);
transform: translate3d(400px, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translate3d(400px, 0, 0);
transform: translate3d(400px, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes slideLeftDisappear {
0% {
display: inline;
opacity: 1;
}
99% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
100% {
position: absolute;
opacity: 0;
}
}
#keyframes slideLeftDisappear {
0% {
display: inline;
opacity: 1;
}
99% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
100% {
position: absolute;
opacity: 0;
}
}
<div>
<button onclick="animator()">
Animate
</button>
<button onclick="pause()">
Pause
</button>
<table>
<tr id="row-1" class="transparent_element" style="-webkit-box-shadow: 6px 4px 11px 1px rgba(0,0,0,0.75); -moz-box-shadow: 6px 4px 11px 1px rgba(0,0,0,0.75); box-shadow: 6px 4px 11px 1px rgba(0,0,0,0.75); height: 90px;">
</tr>
<tr id="row-2" class="transparent_element" style="-webkit-box-shadow: 6px 4px 11px 1px rgba(0,0,0,0.75); -moz-box-shadow: 6px 4px 11px 1px rgba(0,0,0,0.75); box-shadow: 6px 4px 11px 1px rgba(0,0,0,0.75); height: 90px;">
</tr>
</table>
<div id="table" class="transparent_element"></div>
<div id="chart" class="transparent_element"></div>
</div>
</div>
Any idea or suggestion will be highly appreciated.
Thank you in advance!
Related
How to add scroll class to element and remove it when done
Am trying to add a scrolling class to a text every 1 minute once the text finished scrolling i will remove the class and wait for the next 1 minute. Please can anyone help me out on this below is my sample code but it doesn't work as expected. $(function(event){ $infoLongMessage = $("#infoLongMessage"); var wait = 60000; var timer = ($infoLongMessage.text().length + wait); setInterval(function(){ $infoLongMessage.toggleClass("scroll-left"); }, timer); }) .content{ background-color: #000; color: #fff; padding: 6px 10px; overflow: hidden; } #infoLongMessage{ overflow: hidden; white-space: pre; display:block; } .scroll-left{ /* Starting position */ -moz-transform:translateX(100%); -webkit-transform:translateX(100%); transform:translateX(100%); /* Apply animation to this element */ -moz-animation: scrollleft 15s linear infinite; -webkit-animation: scrollleft 15s linear infinite; animation: scrollleft 15s linear infinite; } /* Move it (define the animation) */ #-moz-keyframes scrollleft { 0% { -moz-transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); } } #-webkit-keyframes scrollleft { 0% { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(-100%); } } #keyframes scrollleft { 0% { -moz-transform: translateX(100%); /* Firefox bug fix */ -webkit-transform: translateX(100%); /* Firefox bug fix */ transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); /* Firefox bug fix */ -webkit-transform: translateX(-100%); /* Firefox bug fix */ transform: translateX(-100%); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="content"> <span id="infoLongMessage" class="scroll-left">Browser sources let you display a webpage from the internet or a local file and are commonly used for widgets and alerts</span> </div>
You don't need any js to achieve your idea. You need a ticker. Also you can put delay to your animation if you need. #-webkit-keyframes ticker { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } #keyframes ticker { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .ticker-wrap { position: fixed; top: 0; width: 100%; overflow: hidden; background-color: #9a1f1f; color: #fff; padding: 6px 10px; padding-left: 100%; box-sizing: content-box; } .ticker-wrap .ticker { display: inline-block; height: 2rem; line-height: 2rem; white-space: nowrap; padding-right: 100%; box-sizing: content-box; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-name: ticker; animation-name: ticker; -webkit-animation-duration: 30s; animation-duration: 30s; } .ticker-wrap .ticker__item { display: inline-block; padding: 0 1rem; font-size: 1rem; color: white; } <div class="ticker-wrap"> <div class="ticker"> <div class="ticker__item">Hi Lea!</div> <div class="ticker__item">Look at them !!!</div> <div class="ticker__item">Owww new items...</div> <div class="ticker__item"> offers | save up to 50% — shop now </div> </div> </div>
Safari not always firing animationend with chained animation
I dont know what im doin wrong here. My animation worked fine till last days. After debugging ive seen the animationend event is not getting fired on my last two animations in the chain. Fiddle here: https://jsfiddle.net/bn1krph7/ <div class="welcome-container"><div class="welcome-logo"><img src="https://placehold.it/250x250" class="welcome-avatar"></div><div class="welcome-title-container"><span class="welcome-title">Welcome, </span><span class="welcome-user">User!</span></div></div> $(function() { var container = $('.welcome-container'); var logo = document.querySelector('.welcome-logo'); logo.addEventListener('animationend', function(e) { console.log(e.animationName); }, false);; setTimeout(function() { container.addClass('visible'); }, 1000) }); html, body { height: 100%; width: 100%; } .welcome-container { opacity: 0; display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; &.visible { transition-property: opacity; transition-duration: 450ms; opacity: 1; display: block; z-index: 1; } } .welcome-logo, .welcome-title-container { position: relative; left: 50%; transform: translate3d(-50%, 0, 0); } .welcome-logo { overflow: hidden; border-radius: 50%; border: 16px solid #434c53; background-color: #ffffff; transform-origin: center center; width: 126px; height: 126px; transform: translate3d(-50%, 0, 0) scale(0.17); top: 8.4%; } .welcome-avatar { width: 100%; height: 100%; display: block; opacity: 0; } .welcome-user { opacity: 0; color: #434c53; } .welcome-title { opacity: 0; color: #6D7579; } .welcome-title-container { position: absolute; font-size: 15px; top: 63.3%; } .welcome-container.visible { .welcome-logo { animation-fill-mode: forwards; animation-duration: .6s, .2s, .3s, .1s, .1s, .3s; animation-name: logoMoveDown, logoSmall1, logoBig1, logoNormal, logoBig2, logoFadeOut; animation-delay: 0s, 0.1s, 0.3s, 0.6s, 3.1s, 3.2s; } .welcome-avatar { animation-fill-mode: forwards; animation-duration: .2s; animation-name: fade-in; animation-delay: 0.3s; } .welcome-user { animation-fill-mode: forwards; animation-duration: 1s, .3s; animation-name: fade-in, fade-out; animation-delay: 1s, 3.2s; } .welcome-title { animation-fill-mode: forwards; animation-duration: 1s, .3s; animation-name: fade-in, fade-out; animation-delay: 0.8s, 3.2s; } } #keyframes logoMoveDown { from{ top: 8.4%; } to { top: 39%; } } #keyframes logoSmall1 { from { transform: translate3d(-50%, 0, 0) scale(0.17); } to { transform: translate3d(-50%, 0, 0) scale(0.1); } } #keyframes logoBig1 { 0% { transform: translate3d(-50%, 0, 0) scale(0.1); border-width: 16px; } 50% { border-width: 3px; } 100% { transform: translate3d(-50%, 0, 0) scale(1.2); border-width: 3px; } } #keyframes logoNormal { from { transform: translate3d(-50%, 0, 0) scale(1.2); } to { transform: translate3d(-50%, 0, 0) scale(1); } } #keyframes logoBig2 { from { transform: translate3d(-50%, 0, 0) scale(1); } to { transform: translate3d(-50%, 0, 0) scale(1.2); } } #keyframes logoFadeOut { 0% { transform: translate3d(-50%, 0, 0) scale(1.2); opacity: 1; } 100% { transform: translate3d(-50%, 0, 0) scale(0.2); opacity: 0; } } #keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } #keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } Chrome is working fine. Safari (9.1.2) doesnt work! Another funny issue ive found: With alt+tab out and back in the animation will get called to end aslong there is no iframe usage. So you cant see in the fiddle demo.
How to create the following effect in jquery or javascript
I want to create an effect in jquery/ javascript so that the play button in the image grows to some size then shrinks back suddenly with a bouncy/pulsating effect.
This can be done easily with CSS3 animations. HTML: <div class="container"> <div class="myButton"> <a class="myButton"> <img src="http://i.stack.imgur.com/FcuEp.png" alt="" /> </a> </div> </div> CSS for growing and shrinkin object: .container { width: 100%; padding: 100px; text-align: center; } #-webkit-keyframes zoomout { from { -webkit-transform: none; } 50% { -webkit-transform: scale(1.5); } to { -webkit-transform: none; } } #keyframes zoomout { from { transform: none; } 50% { transform: scale(1.5); } to { transform: none; } } .myButton:hover { -webkit-animation: zoomout 1s; animation: zoomout 1s; } jsFiddle CSS for bounce effect before shrinking to original size: .container { width: 100%; padding: 100px; text-align: center; } #-webkit-keyframes zoomout { 50% { -webkit-transform: scale3d(1, 1, 1); } 65% { -webkit-transform: scale3d(1.2, 1.2, 1.2); } 75% { -webkit-transform: scale3d(1.35, 1.35, 1.35); } 80% { -webkit-transform: scale3d(1.35, 1.35, 1.35); } 95% { -webkit-transform: scale3d(.8, .8, .8); } } #keyframes zoomout { 50% { transform: scale3d(1, 1, 1); } 65% { transform: scale3d(1.2, 1.2, 1.2); } 75% { transform: scale3d(1.35, 1.35, 1.35); } 80% { transform: scale3d(1.35, 1.35, 1.35); } 95% { transform: scale3d(.8, .8, .8); } } .myButton:hover { -webkit-animation: zoomout 1.5s; animation: zoomout 1.5s; } jsFiddle for bounce CSS You can tweak the scale and animation to your taste. :)
Animation glitches on website
I made a small scale experiment where I was testing an animation that would happen when you repeatedly hit the yellow square, in the jsfiddle below: http://jsfiddle.net/aritro33/v86tE/5/ However, I am trying to move the animation seen in that jsfiddle to the jsfiddle here when you hit the compose/post circle/button. The animation would be applied to the posts. This is the jsfiddle: I am having problems however, and after the 3+ times hitting the compose and post button, the animation falls apart. Any ideas how to put the same animation seen in the first jsfiddle in the second jsfiddle for the posts? Thanks so much to anyone who can help! HTML for second experiment: <div id="compose"><span id="firstspan">Compose</span> <span id="fourthspan">Post</span> </div> <span id="noposts">- No Posts Yet -</span> <div id="composeheader"> <input type="text" id="secondspan" value="Write Header Here:" /> </div> <div id="thecolor"></div> <div class="bubble"> <input type="text" id="thehex" value="#2AC0A3" /> </div> <div id="body"><span id="thirdspan" contenteditable="true">Write context text here:</span> </div> <ul id="allposts"></ul> CSS for second experiment: #import url(http://fonts.googleapis.com/css?family=Roboto:100); body { background-color: #2D3E50; } #compose { height: 215px; width: 215px; background-color: #EBF1F1; border-radius: 150px; position: relative; left: 100px; top: 40px; color: #2c3e50; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; transition: all 0.15s linear; } #compose:hover { background-color: #219B86; color: #EBF1F1; } #firstspan { font-size: 39px; font-family:'Roboto'; position: relative; left: 22px; top: 75px; } #composeheader { height: 80px; width: 500px; background-color:#2AC0A3; position: relative; bottom: 175px; left: 365px; color: white; } #secondspan { color: white; font-family:'Roboto'; font-size: 40px; position: relative; background-color: #2AC0A3; border: 1px solid #2AC0A3; left: 15px; top: 10px; } #body { min-height: 80px; overflow: hidden; width: 500px; background-color: #C6EEE6; position: relative; left: 365px; bottom: 275px; padding: 20px; -moz-box-sizing: border-box; box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; } #thirdspan { color: black; font-family:'Roboto'; outline: 0px solid transparent; } .thirdspan2{ color: black; font-family:'Roboto'; outline: 0px solid transparent; } #thecolor { height: 50px; width: 50px; background-color: #2AC0A3; border-radius: 100px; position: relative; left: 365px; bottom: 315px; } .bubble { position: relative; left: 440px; bottom: 365px; width: 145px; height: 50px; padding: 0px; background: #FFFFFF; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .bubble:after { content:''; position: absolute; border-style: solid; border-width: 10px 15px 10px 0; border-color: transparent #FFFFFF; display: block; width: 0; z-index: 1; left: -15px; top: 15px; } #thehex { font-family:'Roboto'; font-size: 20px; height: 30px; width: 115px; background-color: white; position: relative; border: 0px none; outline: 0px solid transparent; top: 10px; left: 28px; } .animated { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -ms-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; } #-webkit-keyframes bounceInDown { 0% { -webkit-transform: translateY(-2000px); } 60% { -webkit-transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px) } 100% { -webkit-transform: translateY() } } #-moz-keyframes bounceInDown { 0% { -moz-transform: translateY(-2000px); } 60% { -moz-transform: translateY(30px); } 80% { -moz-transform: translateY(-10px) } 100% { -moz-transform: translateY() } } #-ms-keyframes bounceInDown { 0% { -ms-transform: translateY(-2000px); } 60% { -ms-transform: translateY(30px); } 80% { -ms-transform: translateY(-10px) } 100% { -ms-transform: translateY() } } #-o-keyframes bounceInDown { 0% { -o-transform: translateY(-2000px); } 60% { -o-transform: translateY(30px); } 80% { -o-transform: translateY(-10px) } 100% { -o-transform: translateY() } } #keyframes bounceInDown { 0% { transform: translateY(-2000px); } 60% { transform: translateY(30px); } 80% { transform: translateY(-10px) } 100% { transform: translateY() } } .bounceInDown { -webkit-animation-name: bounceInDown; -moz-animation-name: bounceInDown; -ms-animation-name: bounceInDown; -o-animation-name: bounceInDown; animation-name: bounceInDown; } #-webkit-keyframes bounceInUp { 0% { -webkit-transform: translateY(2000px); } 60% { -webkit-transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px) } 100% { -webkit-transform: translateY() } } #-moz-keyframes bounceInUp { 0% { -moz-transform: translateY(2000px); } 60% { -moz-transform: translateY(-30px); } 80% { -moz-transform: translateY(10px) } 100% { -moz-transform: translateY() } } #-ms-keyframes bounceInUp { 0% { -ms-transform: translateY(2000px); } 60% { -ms-transform: translateY(-30px); } 80% { -ms-transform: translateY(10px) } 100% { -ms-transform: translateY() } } #-o-keyframes bounceInUp { 0% { -o-transform: translateY(2000px); } 60% { -o-transform: translateY(-30px); } 80% { -o-transform: translateY(10px) } 100% { -o-transform: translateY() } } #keyframes bounceInUp { 0% { transform: translateY(2000px); } 60% { transform: translateY(-30px); } 80% { transform: translateY(10px) } 100% { transform: translateY() } } .bounceInUp { -webkit-animation-name: bounceInUp; -moz-animation-name: bounceInUp; -ms-animation-name: bounceInUp; -o-animation-name: bounceInUp; animation-name: bounceInUp; } #noposts { color: white; font-size: 39px; font-family:'Roboto'; position: relative; left: 440px; bottom: 100px; } #fourthspan { color: #2c3e50; font-family:'Roboto'; font-size: 39px; position: relative; left: 70px; top: 75px; } ul#allposts li{ min-height: 140px; width: 500px; position: relative; left: 239px; bottom: 432px; } .thecolor2{ height: 50px; width: 50px; border-radius: 100px; background-color: #2AC0A3; position: relative; bottom: 591px; left: 325px; } ul{ list-style-type: none; } .composeheader2{ height: 80px; width: 500px; background-color:#2AC0A3; position: relative; bottom: 581px; left: 325px; color: white; } .secondspan2{ color: white; font-family:'Roboto'; font-size: 40px; background-color: #2AC0A3; border: 1px solid #2AC0A3; position: relative; left: 17px; top: 13px; } .body2{ min-height: 80px; overflow: hidden; width: 500px; background-color: #C6EEE6; position: relative; left: 325px; bottom: 371px; -moz-box-sizing: border-box; box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; } JS for second experiment: var clicktwice = false; var color; var forrgb; var finalrgb2; var myheader; //198 238 230 //rgb(42, 192, 163) #2AC0A3 //rgb(198, 238, 230) #C6EEE6 //+156, +46, +67 $('#fourthspan').hide(); $('#thecolor').hide(); $('.bubble').hide(); $('#composeheader').hide(); $('#body').hide(); $('#compose').click(function () { setInterval(function () { $('#noposts').fadeTo(10, 0); }, 3000); }); $("#thehex").keyup(function () { color = $("#thehex").val(); forrgb = $("#thehex").val(); $("#thecolor").css("background-color", color); $("#secondspan").css("background-color", color); $("#secondspan").css("border-color", color); $("#composeheader").css("background-color", color); forrgb = $('#thehex').val().replace('#', ''); var reg = forrgb.length === 3 ? forrgb[0] + forrgb[0] + forrgb[1] + forrgb[1] + forrgb[2] + forrgb[2] : forrgb; var conv = reg.match(/.{2}/g); var r = parseInt(conv[0], 16); r = r + 156; var g = parseInt(conv[1], 16); g = g + 46; var b = parseInt(conv[2], 16); b = b + 67; var rgb = r + ',' + g + ',' + b; rgb = rgb.replace(/NaN/g, ' ... '); var finalrgb = ('rgb(' + rgb + ')'); finalrgb2 = finalrgb; $("#body").css("background-color", finalrgb); }); $('#compose').click(function () { if (clicktwice === false) { color = "#2AC0A3"; finalrgb2 = "rgb(198, 238, 230)"; $("#secondspan").val("Write Header Here:"); $('#thirdspan').text("Write context text here:"); $('#thehex').val(color); $("#thecolor").css("background-color", color); $("#secondspan").css("background-color", color); $("#secondspan").css("border-color", color); $("#composeheader").css("background-color", color); $("#body").css("background-color", finalrgb2); $('#thecolor').fadeTo(0, 1); $('#body').fadeTo(0,1); $('.bubble').fadeTo(0,1); $('#composeheader').fadeTo(0, 1); $('#firstspan').hide(); $('#fourthspan').show(); $('#thecolor').show(); $('.bubble').show(); $('#composeheader').show(); $('#body').show(); $(".composeheader2").animate({ bottom: '-=248px' }, 400); $(".body2").animate({ bottom:'-=248px' }, 400); $(".thecolor2").animate({ bottom:'-=245px' }, 400); $('#thecolor').addClass('box animated bounceInDown'); $('.bubble').addClass('box animated bounceInDown'); $('#composeheader').addClass('box animated bounceInDown'); $('#body').addClass('box animated bounceInDown'); clicktwice = true; } else if (clicktwice === true) { myheader = $("#secondspan").val(); $('.bubble').fadeTo(300, 0); $('#firstspan').show(); $('#fourthspan').hide(); clicktwice = false; var thestream = document.getElementById('allposts'); var oneofpost = document.createElement('li'); var thecolor2 = document.createElement('div'); thecolor2.className = "thecolor2"; var composeheader2 = document.createElement('div'); composeheader2.className = "composeheader2"; var secondspan2 = document.createElement('span'); secondspan2.className = "secondspan2"; var body2 = document.createElement('div'); body2.className = "body2"; var thirdspan2 = document.createElement('span'); thirdspan2.className = "thirdspan2"; var bodytext = $('#thirdspan').html(); thirdspan2.innerHTML = bodytext; body2.style.backgroundColor = finalrgb2; secondspan2.innerHTML = myheader; thecolor2.style.backgroundColor = color; composeheader2.style.backgroundColor = color; secondspan2.style.backgroundColor = color; secondspan2.style.borderColor = color; $('#thecolor').fadeTo(0, 0); $('#body').fadeTo(0, 0); $('#composeheader').fadeTo(0, 0); thestream.appendChild(body2); thestream.appendChild(thecolor2); thestream.appendChild(composeheader2); composeheader2.appendChild(secondspan2); body2.appendChild(thirdspan2); $('#thecolor').removeClass('box animated bounceInDown'); $('.bubble').removeClass('box animated bounceInDown'); $('#composeheader').removeClass('box animated bounceInDown'); $('#body').removeClass('box animated bounceInDown'); } });
I've cleaned this up A LOT, the code should be much easier to read and follow now: HTML <script id="empty-message" type="html/template"> <div class="message new box animated bounceInDown"> <div class="thecolor"></div> <div class="bubble"> <input type="text" class="hexcolor" value="#2AC0A3" /> </div> <div class="composeheader"> <input type="text" value="Write Header Here:" /> </div> <div class="body"> <span contenteditable="true">Write context text here:</span> </div> </div> </script> <div id="message-actions"> <span class="compose">Compose</span> <span class="post">Post</span> </div> <div id="no-posts">- No Posts Yet -</div> <div id="all-posts"></div> JavaScript var getRGB = function(color) { var rgb = color.replace('#', ''); rgb = rgb.length === 3 ? rgb[0] + rgb[0] + rgb[1] + rgb[1] + rgb[2] + rgb[2] : rgb; var conv = rgb.match(/.{2}/g); var r = parseInt(conv[0], 16) + 156; var g = parseInt(conv[1], 16); + 46; var b = parseInt(conv[2], 16); + 67; rgb = r + ',' + g + ',' + b; rgb = rgb.replace(/NaN/g, ' ... '); rgb = ('rgb(' + rgb + ')'); return rgb; }; $(document).ready(function() { $('#all-posts').on('keyup', '.message.new .hexcolor', function () { var color = $(this).val(); $(".message.new .thecolor, .message.new .composeheader").css("background-color", color); $(".message.new .body").css("background-color", getRGB(color)); }); $('#message-actions').click(function () { if ($('.compose').is(':visible')) { $('#all-posts').prepend($('#empty-message').html()); } else { var $message = $('#all-posts .message:first').removeClass('new box animated bounceInDown'); $message.find('.composeheader > input').attr('readonly', true); $message.find('.body > span').attr('contenteditable', false); } $('#no-posts').hide(); $('.compose, .post').toggle(); }); }); CSS #import url(http://fonts.googleapis.com/css?family=Roboto:100); /* css for animation */ .animated { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -ms-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; } #-webkit-keyframes bounceInDown { 0% { -webkit-transform: translateY(-2000px); } 60% { -webkit-transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px) } 100% { -webkit-transform: translateY() } } #-moz-keyframes bounceInDown { 0% { -moz-transform: translateY(-2000px); } 60% { -moz-transform: translateY(30px); } 80% { -moz-transform: translateY(-10px) } 100% { -moz-transform: translateY() } } #-ms-keyframes bounceInDown { 0% { -ms-transform: translateY(-2000px); } 60% { -ms-transform: translateY(30px); } 80% { -ms-transform: translateY(-10px) } 100% { -ms-transform: translateY() } } #-o-keyframes bounceInDown { 0% { -o-transform: translateY(-2000px); } 60% { -o-transform: translateY(30px); } 80% { -o-transform: translateY(-10px) } 100% { -o-transform: translateY() } } #keyframes bounceInDown { 0% { transform: translateY(-2000px); } 60% { transform: translateY(30px); } 80% { transform: translateY(-10px) } 100% { transform: translateY() } } .bounceInDown { -webkit-animation-name: bounceInDown; -moz-animation-name: bounceInDown; -ms-animation-name: bounceInDown; -o-animation-name: bounceInDown; animation-name: bounceInDown; } #-webkit-keyframes bounceInUp { 0% { -webkit-transform: translateY(2000px); } 60% { -webkit-transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px) } 100% { -webkit-transform: translateY() } } #-moz-keyframes bounceInUp { 0% { -moz-transform: translateY(2000px); } 60% { -moz-transform: translateY(-30px); } 80% { -moz-transform: translateY(10px) } 100% { -moz-transform: translateY() } } #-ms-keyframes bounceInUp { 0% { -ms-transform: translateY(2000px); } 60% { -ms-transform: translateY(-30px); } 80% { -ms-transform: translateY(10px) } 100% { -ms-transform: translateY() } } #-o-keyframes bounceInUp { 0% { -o-transform: translateY(2000px); } 60% { -o-transform: translateY(-30px); } 80% { -o-transform: translateY(10px) } 100% { -o-transform: translateY() } } #keyframes bounceInUp { 0% { transform: translateY(2000px); } 60% { transform: translateY(-30px); } 80% { transform: translateY(10px) } 100% { transform: translateY() } } .bounceInUp { -webkit-animation-name: bounceInUp; -moz-animation-name: bounceInUp; -ms-animation-name: bounceInUp; -o-animation-name: bounceInUp; animation-name: bounceInUp; } /* page */ body { background-color: #2D3E50; font-family:'Roboto'; min-width: 960px; } /* message compose */ .message { margin-top: 40px; } .composeheader { background-color:#2AC0A3; color: white; padding: 10px 15px; clear: both; } .composeheader INPUT { color: white; font-size: 40px; background-color: transparent; border-width: 0; font-family: 'Roboto'; } .body { min-height: 80px; overflow: hidden; padding: 20px; background-color: #C6EEE6; -moz-box-sizing: border-box; box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; } .body > span { color: black; outline: 0px solid transparent; } .thecolor { height: 50px; width: 50px; background-color: #2AC0A3; border-radius: 100px; float: left; margin-bottom: 10px; } .bubble { display: none; } .message.new .bubble { height: 50px; padding: 0px; background: #FFFFFF; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; float: left; margin-left: 20px; display: block; } .bubble:after { content:''; position: absolute; border-style: solid; border-width: 10px 15px 10px 0; border-color: transparent #FFFFFF; display: block; width: 0; z-index: 1; left: 55px; top: 15px; } .hexcolor { font-size: 20px; height: 30px; width: 100px; background-color: transparent; border-width: 0px; margin: 10px 5px } /* compose button */ #message-actions { height: 215px; width: 215px; background-color: #EBF1F1; border-radius: 150px; position: relative; color: #2c3e50; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; transition: all 0.15s linear; float: left; margin: 40px 100px 10px; } #message-actions:hover { background-color: #219B86; color: #EBF1F1; } #no-posts { color: white; font-size: 39px; float: left; margin-top: 120px; } .compose { font-size: 39px; position: relative; left: 22px; top: 75px; } .post { color: #2c3e50; font-size: 39px; position: relative; left: 70px; top: 75px; display: none; } /* messages */ #all-posts { min-height: 140px; width: 500px; float: left; } jsFiddle Demo Use meaningful names for your ids and css classes, it makes the code much easier to follow and understand what is going on. Styles such as "firstspan" mean nothing and means you have to keep looking back at the markup to figure out context. I've cleaned this up as best I can, I'm not good with CSS3 or the animation stuff, I'll leave it to you to fix that up. I think this should be working exactly as you expect now, messages slide down and are added to the stack top down. EDIT 2: I changed a lot of the ID selectors to use and refactored the code to make it much simpler. You were also setting the ID on the newly created elements which were all the same, this is wrong and will cause you issues further down the line (ID's should be unique per page). I cleaned up the JS, combining multiple statements which did the same thing with different selectors. You were using a lot of standard JavaScript getElementById type calls, I changed these create the DOM elements using jQuery instead. I used an html/template script declaration to create the new elements, it's much cleaner than using jQuery to built up your new DOM elements. Also, your compose and post elements were essentially the same thing. Don't repeat CSS styles, either combine multiple selectors, or just re-use the same structure as I have done. Hopefully the changes make sense.
Keep div static when other appears
I have a jsfiddle as follows: http://jsfiddle.net/aritro33/uX7HG/ And I have a problem that when you hit the compose button, the post that appears gets pushed down slightly, but noticeably, by the arrangement of colors that pops up seconds later. How do I keep the post from moving as the arrangement of colors pops up? Thanks! HTML: <div id="red" class = "color"></div> <div id="orange" class = "color"></div> <div id="yellow" class = "color"></div> <div id="green" class = "color"></div> <div id="turquoise" class = "color"></div> <div id="blue" class = "color"></div> <div id="purple" class = "color"></div> <div id="gray" class = "color"></div> <div id="composeheader"> <input type="text" id="secondspan" value="Write Header Here:" /> <div id = "sidebarhex"></div> <div id = "taghex"><span id = "withhex" contenteditable = "true">#2AC0A3</span></div> </div> <div id="body"><span id="thirdspan" contenteditable="true">Write context text here:</span> </div> CSS: #red { background-color: #2ac0a3; border-top-left-radius: 5px; border-bottom-left-radius: 5px; position: relative; bottom: 220px; left: 365px; } #orange { background-color: #25ac92; position:relative; bottom:236px; left: 405px; } #yellow { position: relative; bottom: 252px; left: 445px; background-color:#219982; } #green { position: relative; left: 485px; bottom: 268px; background-color: #1d8672; } #turquoise { position: relative; left: 525px; bottom: 284px; background-color: #197361; } #blue { position: relative; left: 565px; bottom: 300px; background-color: #156051; } #purple { position: relative; left: 605px; bottom: 316px; background-color: #104c41; } #gray { position: relative; left: 645px; bottom: 332px; background-color: #0c3930; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } #composeheader { height: 80px; width: 500px; background-color:#2AC0A3; position: relative; bottom: 320px; left: 365px; color: white; } #secondspan { color: white; font-family:'Roboto'; font-size: 40px; position: relative; background-color: #2AC0A3; border: 1px solid #2AC0A3; left: 15px; top: 10px; } #body { min-height: 100px; overflow: hidden; width: 500px; background-color: #C6EEE6; position: relative; left: 365px; bottom: 320px; padding: 20px; -moz-box-sizing: border-box; box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; } #thirdspan { color: black; font-family:'Roboto'; outline: 0px solid transparent; } #sidebarhex{ height: 30px; width: 7px; background-color: #156051; position: relative; left: 500px; bottom: 30px; } #taghex{ height: 30px; width: 80px; background-color: #219982; position: relative; left: 420px; bottom: 60px; } #withhex{ font-family: 'Roboto'; position: relative; top: 4px; left: 9px; border: 0px solid transparent; outline: none; } .color{ height: 16px; width: 40px; } #red.active{ height: 16px; width: 45px; z-index: 1; border: 3px solid white; position: relative; bottom: 218px; } #orange.active{ height: 16px; width: 45px; z-index: 1; border: 3px solid white; position: relative; bottom: 233px; } #red.orangeselected{ position: relative; bottom: 215px; } Animation CSS: .animated { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -ms-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; } #-webkit-keyframes bounceInDown { 0% { -webkit-transform: translateY(-2000px); } 60% { -webkit-transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px) } 100% { -webkit-transform: translateY() } } #-moz-keyframes bounceInDown { 0% { -moz-transform: translateY(-2000px); } 60% { -moz-transform: translateY(30px); } 80% { -moz-transform: translateY(-10px) } 100% { -moz-transform: translateY() } } #-ms-keyframes bounceInDown { 0% { -ms-transform: translateY(-2000px); } 60% { -ms-transform: translateY(30px); } 80% { -ms-transform: translateY(-10px) } 100% { -ms-transform: translateY() } } #-o-keyframes bounceInDown { 0% { -o-transform: translateY(-2000px); } 60% { -o-transform: translateY(30px); } 80% { -o-transform: translateY(-10px) } 100% { -o-transform: translateY() } } #keyframes bounceInDown { 0% { transform: translateY(-2000px); } 60% { transform: translateY(30px); } 80% { transform: translateY(-10px) } 100% { transform: translateY() } } .bounceInDown { -webkit-animation-name: bounceInDown; -moz-animation-name: bounceInDown; -ms-animation-name: bounceInDown; -o-animation-name: bounceInDown; animation-name: bounceInDown; } #-webkit-keyframes bounceInUp { 0% { -webkit-transform: translateY(2000px); } 60% { -webkit-transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px) } 100% { -webkit-transform: translateY() } } #-moz-keyframes bounceInUp { 0% { -moz-transform: translateY(2000px); } 60% { -moz-transform: translateY(-30px); } 80% { -moz-transform: translateY(10px) } 100% { -moz-transform: translateY() } } #-ms-keyframes bounceInUp { 0% { -ms-transform: translateY(2000px); } 60% { -ms-transform: translateY(-30px); } 80% { -ms-transform: translateY(10px) } 100% { -ms-transform: translateY() } } #-o-keyframes bounceInUp { 0% { -o-transform: translateY(2000px); } 60% { -o-transform: translateY(-30px); } 80% { -o-transform: translateY(10px) } 100% { -o-transform: translateY() } } #keyframes bounceInUp { 0% { transform: translateY(2000px); } 60% { transform: translateY(-30px); } 80% { transform: translateY(10px) } 100% { transform: translateY() } } .bounceInUp { -webkit-animation-name: bounceInUp; -moz-animation-name: bounceInUp; -ms-animation-name: bounceInUp; -o-animation-name: bounceInUp; animation-name: bounceInUp; } #-webkit-keyframes bounceInUp { 0% { -webkit-transform: translateY(2000px); } 60% { -webkit-transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px) } 100% { -webkit-transform: translateY() } } #-moz-keyframes bounceInUp { 0% { -moz-transform: translateY(2000px); } 60% { -moz-transform: translateY(-30px); } 80% { -moz-transform: translateY(10px) } 100% { -moz-transform: translateY() } } #-ms-keyframes bounceInUp { 0% { -ms-transform: translateY(2000px); } 60% { -ms-transform: translateY(-30px); } 80% { -ms-transform: translateY(10px) } 100% { -ms-transform: translateY() } } #-o-keyframes bounceInUp { 0% { -o-transform: translateY(2000px); } 60% { -o-transform: translateY(-30px); } 80% { -o-transform: translateY(10px) } 100% { -o-transform: translateY() } } #keyframes bounceInUp { 0% { transform: translateY(2000px); } 60% { transform: translateY(-30px); } 80% { transform: translateY(10px) } 100% { transform: translateY() } } .bounceInUp { -webkit-animation-name: bounceInUp; -moz-animation-name: bounceInUp; -ms-animation-name: bounceInUp; -o-animation-name: bounceInUp; animation-name: bounceInUp; } JS: $('#red').click(function(){ $('#red').addClass('active'); $('#red').removeClass('orangeselected'); $('#orange').removeClass('active'); }); $('#orange').click(function(){ $('#orange').addClass('active'); $('#red').removeClass('active'); $('#red').addClass('orangeselected'); }); $('#sidebarhex').fadeTo(0,1); $('#thecolor').addClass('box animated bounceInDown'); $('.bubble').addClass('box animated bounceInDown'); $('#composeheader').addClass('box animated bounceInDown'); $('#body').addClass('box animated bounceInDown'); setTimeout(function () { setTimeout(function () { $('#red').fadeTo(0, 400); $('#orange').fadeTo(0, 400); $('#yellow').fadeTo(0, 400); $('#green').fadeTo(0, 400); $('#turquoise').fadeTo(0, 400); $('#blue').fadeTo(0, 400); $('#purple').fadeTo(0, 400); $('#gray').fadeTo(0, 400); }, 400); $('#red').addClass('box animated bounceInUp'); $('#orange').addClass('box animated bounceInUp'); $('#yellow').addClass('box animated bounceInUp'); $('#green').addClass('box animated bounceInUp'); $('#turquoise').addClass('box animated bounceInUp'); $('#blue').addClass('box animated bounceInUp'); $('#purple').addClass('box animated bounceInUp'); $('#gray').addClass('box animated bounceInUp'); }, 500); setTimeout(function(){ $('#red').addClass('active'); }, 1050);