Timing and speed of multiple sliding divs

Timing and speed of multiple sliding divs - javascript

Please see this fiddle I have set up.
You are first confronted by three links. Each link triggers divs to slide out.
The link 'john smith' slides out and in at the speed we want. When it slides out the first line slides out then when that is completed the second line slides down as though coming from the first. When it slides back it does the same motion at the same speed but reverse i.e.. the second line slide back up first and then when that is completed the first line slides back to the left.
When you click on the work link and menu slides out in the same manner as the bio. Also there is a sub menu that slides out when on clicks on item 2.
When the user clicks on the contact link one line slides out.
What we need to achieve is this; when any div is open and another link is clicked on, the visible div slides back in reverse to how they slid in. We have almost achieve this, however, the code is not quite right as the divs are not sliding back in at the same speed and in the right order, they simply slide back fast. For example, if one has clicked on 'work' and the 'item 2' link, and then you select 'contact' the opened div slide back very quickly. What I need to achieve is that they slide back in reverse to how they slid out.
To attempt to make it clear, if you click on 'work' and then 'item 2' so with menus are visible and then click on work again, you will see the sub menu slides away first before the first menu. You will also notice that the items that slide up slide back down first before the divs slide back to the left. This is what needs to happen if you click on 'contact' or 'john smith' when the menus are visible.
I know this sounds very complicated and if I can answer any questions to make it clearer I will.
Thanks
$('#bio-line-1').animate({width: 'hide'});
$('#contact-info').animate({right: 'hide'});
$('#bio-line-2').slideUp("fast");
$('#black-div, #black-credits, #igna-1-div, #igna-1-credits, #igna-2- div, #igna-2-credits, #fatal-div, #fatal-credits').fadeOut('100');
});

you can use .setTimeout() to put some delay
setTimeout(function () {
$('#contact-info').animate({right: 'toggle'});
}, 500);
DEMO

DEMO
I finally worked out how to fix it to work how I intended, however my code is very long winded. I realise there must be a way to reduce the repetition of the code by using generic functions. I will now post the working code onto Code Review for further development.
$('#menu').click(function () {
if ( $('#igna-1').css('display') != 'none' ) {
$('#igna-1').slideToggle("fast", function() {
$('#igna-2').animate({ left: 'hide' }, 300, function() {
$('#black, #igna, #igna-1').slideUp("fast", function() {
$('#fatal, #igna-2').animate({ left: 'hide' }, 300);
});

Although I see that you have found your solution but as I had started coding the TweenMax version of it, I went on and finished it. The reason I am suggesting GSAP should be the go-to tool for animations for the web is not just because it is crazy fast, or easy to jump-start or get started with, or makes some of the coolest animation effects possible with few lines of code (I can go on and on) ... but it is as intuitive as it can get.
Coming back to your animation, I have converted your animation solution into using TimelineMax / TweenMax entirely, snippet of which is as follows:
/*global TweenMax,TimelineMax,Power2,Power0*/
var getElementById=document.getElementById.bind(document);
var nameA=getElementById('name-a'),menu=getElementById('menu'),contact=getElementById('contact');
var contactInfo=getElementById('contact-info'),contactInfoAnchor=contactInfo.querySelector('a');
var igna=getElementById('igna'),ignaAnchor=igna.querySelector('a');
var ignaOne=getElementById('igna-1'),ignaOneAnchor=ignaOne.querySelector('a');
var ignaTwo=getElementById('igna-2'),ignaTwoAnchor=ignaTwo.querySelector('a');
var black=getElementById('black'),blackAnchor=black.querySelector('a');
var fatal=getElementById('fatal'),fatalAnchor=fatal.querySelector('a');
var bioLineOne=getElementById('bio-line-1'),bioLineOneParagraph=bioLineOne.querySelector('p');
var bioLineTwo=getElementById('bio-line-2'),bioLineTwoParagraph=bioLineTwo.querySelector('p');
var tlName=getTimeline(),tlContact=getTimeline(),tlWork=getTimeline(),tlIgnaTwo=getTimeline(),tlWorkIgnaTwoCombined=getTimeline();
var isTlNameDirectionForward=false,isTlContactDirectionForward=false,isTlWorkDirectionForward=false,isTlIgnaTwoDirectionForward=false,reverseTimeScale=1;
var duration=.4,easeInOut=Power2.easeInOut,easeOut=Power2.easeOut,easeIn=Power2.easeIn,easeNone=Power0.easeNone;
function init(){
setTlName();
setTlContact();
setTlWork();
setTlIgnaTwo();
setTlWorkIgnaTwoCombined();
assignListeners();
}
function setTlName(){
addParentDIVsToTimeline(tlName,[bioLineOne,bioLineTwo],['rect(10px 633px 50px 0px)','rect(10px 633px 50px 0px)']);
tlName.fromTo(bioLineOneParagraph,duration,{x:-633},{x:0,ease:easeOut,clearProps:'x'},0).fromTo(bioLineTwoParagraph,duration,{y:-40},{y:0,ease:easeOut,clearProps:'y'},duration*.3);
}
function setTlContact(){
addParentDIVsToTimeline(tlContact,[contactInfo],['rect(0px 120px 20px 0px)']);
tlContact.fromTo(contactInfoAnchor,duration,{display:'block',x:150},{display:'block',x:0,ease:easeOut,clearProps:'display, x'},0);
}
function setTlWork(){
var fromProps={display:'block',y:40},toProps={display:'block',y:0,ease:easeOut,clearProps:'display, y'};
addParentDIVsToTimeline(tlWork,[fatal,igna,black],['rect(0px 120px 20px -90px)','rect(0px 120px 26px 0px)','rect(0px 120px 26px 0px)']);
tlWork.fromTo(fatalAnchor,duration,{display:'block',x:-150},{display:'block',x:0,ease:easeOut,clearProps:'display, x'},0).fromTo(ignaAnchor,duration,fromProps,toProps,duration*.3).fromTo(blackAnchor,duration,fromProps,toProps,duration*.6);
}
function setTlIgnaTwo(){
addParentDIVsToTimeline(tlIgnaTwo,[ignaTwo,ignaOne],['rect(0px 120px 20px -90px)','rect(0px 120px 26px 0px)']);
tlIgnaTwo.fromTo(ignaTwoAnchor,duration,{display:'block',x:-150},{display:'block',x:0,ease:easeOut,clearProps:'display, x'},0).fromTo(ignaOneAnchor,duration,{display:'block',y:40},{display:'block',y:0,ease:easeOut,clearProps:'display, y'},duration*.3);
}
function setTlWorkIgnaTwoCombined(){
tlWorkIgnaTwoCombined.to(tlIgnaTwo,duration,{progress:0,ease:easeNone},0).to(tlWork,tlWork.totalDuration(),{progress:0,ease:easeNone},duration*.3);
}
function assignListeners(){
nameA.addEventListener('click',onNameAClicked,false);
menu.addEventListener('click',onMenuClicked,false);
contact.addEventListener('click',onContactClicked,false);
igna.addEventListener('click',onIgnaClicked,false);
ignaOneAnchor.addEventListener('click',playTlWorkIgnaTwoCombined,false);
ignaTwoAnchor.addEventListener('click',playTlWorkIgnaTwoCombined,false);
black.addEventListener('click',onMenuClicked,false);
fatal.addEventListener('click',onMenuClicked,false);
}
function onNameAClicked(){
isTlNameDirectionForward=!isTlNameDirectionForward;
isTlNameDirectionForward?tlName.timeScale(1).play():tlName.timeScale(1).reverse();
reverseTlContact();
if(isTlIgnaTwoDirectionForward){playTlWorkIgnaTwoCombined();}else if(isTlWorkDirectionForward){reverseTlWork();}
}
function onMenuClicked(){
isTlWorkDirectionForward=!isTlWorkDirectionForward;
isTlWorkDirectionForward?tlWork.timeScale(1).play():tlWork.timeScale(1).reverse();
reverseTlContact();
reverseTlName();
if(isTlIgnaTwoDirectionForward){playTlWorkIgnaTwoCombined();}
}
function onContactClicked(){
isTlContactDirectionForward=!isTlContactDirectionForward;
isTlContactDirectionForward?tlContact.timeScale(1).play():tlContact.timeScale(1).reverse();
reverseTlName();
if(isTlIgnaTwoDirectionForward){playTlWorkIgnaTwoCombined();}else if(isTlWorkDirectionForward){reverseTlWork();}
}
function onIgnaClicked(){
isTlIgnaTwoDirectionForward=!isTlIgnaTwoDirectionForward;
isTlIgnaTwoDirectionForward?tlIgnaTwo.timeScale(1).play():tlIgnaTwo.timeScale(1).reverse();
}
function addParentDIVsToTimeline(tl,parents,clipRects){
var length=parents.length;
for(var i=0;i<length;i+=1){tl.fromTo(parents[i],duration,{display:'none',clip:clipRects[i]},{display:'block',clip:clipRects[i],ease:easeOut,clearProps:'clip'},duration*.3*i);}
}
function getTimeline(){return new TimelineMax({paused:true});}
function reverseTlContact(){
if(isTlContactDirectionForward){
isTlContactDirectionForward=false;
tlContact.timeScale(reverseTimeScale).reverse();
}
}
function reverseTlName(){
if(isTlNameDirectionForward){
isTlNameDirectionForward=false;
tlName.timeScale(reverseTimeScale).reverse();
}
}
function reverseTlWork(){
isTlWorkDirectionForward=false;
tlWork.timeScale(reverseTimeScale).reverse();
}
function playTlWorkIgnaTwoCombined(){
isTlIgnaTwoDirectionForward=isTlWorkDirectionForward=false;
tlWork.pause(tlWork.totalTime());
tlIgnaTwo.pause(tlIgnaTwo.totalTime());
tlWorkIgnaTwoCombined.pause(0).play();
}
//
init();
#name-a {
left: 38px;
position: fixed;
top: 38px;
z-index: 1;
}
#bio-line-1 {
left: 150px;
position: fixed;
top: 35px;
width: 633px;
z-index: 1;
}
#bio-line-1 p {
color: #333333;
display: block;
float: right;
font-size: 16px;
line-height: 21px;
width: 552px;
}
#bio-line-2 {
left: 150px;
margin-top: 20px;
position: fixed;
top: 38px;
width: 633px;
z-index: 1;
}
#bio-line-2 p {
color: #333333;
display: block;
float: right;
font-size: 16px;
line-height: 21px;
width: 552px;
}
#menu {
bottom: 34px;
left: 38px;
position: fixed;
z-index: 4;
background-color: #ffffff;
}
#contact {
bottom: 34px;
position: fixed;
right: 38px;
z-index: 1;
background-color: #ffffff;
}
#contact-info {
bottom: 34px;
margin-right: 38px;
position: fixed;
right: 160px;
text-transform: lowercase;
white-space: nowrap;
}
.hidden {
display: none;
}
#fatal {
bottom: 34px;
float: right;
left: 135px;
margin-left: 36px;
position: fixed;
white-space: nowrap;
z-index: 1;
}
#black {
bottom: 61px;
float: right;
left: 171px;
margin-bottom: 18px;
position: fixed;
white-space: nowrap;
z-index: 1;
}
#igna {
bottom: 52px;
float: right;
left: 171px;
margin-bottom: 5px;
position: fixed;
white-space: nowrap;
width: 270px;
z-index: 1;
}
#igna-1 {
bottom: 72px;
left: 404px;
margin-bottom: 7px;
position: fixed;
white-space: nowrap;
width: 162px;
z-index: 1;
}
#igna-2 {
bottom: 57px;
left: 82px;
margin-left: 321px;
position: fixed;
white-space: nowrap;
width: 162px;
z-index: 1;
}
.sub-menu {
white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<div id="name-a">John Smith</div>
<div id="menu">Work</div>
<div id="contact">Contact</div>
<div class="hidden" id="contact-info">conatct#foo.com</div>
<div class="hidden hover" id="black">item 1</div>
<div class="hidden hover" id="igna">item 2</div>
<div class="hidden hover" id="fatal">item 3</div>
<div class="hidden hover" id="igna-1">S/S <span id="ss">15</span></div>
<div class="hidden hover" id="igna-2">A/W 14</div>
<div id="bio-line-1" class="hidden"><p>holds a Master's Degree from the University of the Arts London</p></div>
<div id="bio-line-2" class="hidden"><p>and currently works foo bar.</p></div>
Hope you find it all useful in some way.
Further reading:
Sequence JavaScript Animations Like a Pro with GSAP's
TimelineLite.
Understanding the Position Parameter.
P.S. The example above may not have done justice to the library. There may have been bugs in my code or the approach may seem overly complicated, but these shouldn't take away the credits from this GreenSock Animation Platform. Love this tool.
T

Related

Slide up div from another divs top when page loads

So I have 2 div as shown in below code.
What I just want is to slide up the second div (box-2) from the top of the first div.
The real problem is
First div will remain as it is and second div will slide from it's back side.
I want to keep the second div hidden and let it slide and revel it self as it slides i.e. only the portion that slides up should be visible.
Not sure how to do it, tried multiple options but no luck.
Really appreciate if anyone can guide.
$('.box-2').animate({'margin-bottom': '83px'}, 3000);
.box-1 {
height: 30px;
width: 100px;
background-color: blue;
color: white;
position: fixed;
bottom: 0px;
}
.box-2 {
height: 30px;
width: 500px;
background-color: blue;
color: white;
position: fixed;
bottom: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="box-1">div 1</div>
<div class="box-2">div 2 - the one that will slide up from box-1's Top.</div>

The easiest way, considering your starting point, is to simply use the callback function exposed inside of the animate() method, which will be executed once the initial animation is completed:
// your initial jQuery, which selects the '.box-2' element(s) and
// passes that collection to the animate() method:
$('.box-2').animate({
// here rather than quote (just to show the example), we camel case
// the CSS 'margin-bottom' property to the (unquoted) 'marginBottom',
// and pass in the new dimension to which the method will animate:
marginBottom: '83px'
// we then take advantage of the completion callback, which is called
// when the first animation is complete:
}, 1500, function() {
// here we take the 'this' from the collection passed to the outer
// animate() call in which this callback function is wrapped:
$(this).animate({
// here we then animate the 'width' to its new dimension of
// '500px':
width: '500px'
}, 1500);
});
.box-1 {
height: 30px;
width: 100px;
background-color: blue;
color: white;
position: fixed;
bottom: 0px;
}
.box-2 {
height: 30px;
width: 100px;
background-color: blue;
color: white;
position: fixed;
bottom: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="box-2">Div that will slide up from box-1's Top.</div>
<div class="box-1">Static div</div>
Note that, because of the two animations running sequentially I divided your initial time of 3000ms to have each animation take 1500ms, so that the overall time taken is the same but allowing the animation to run in stages.
References:
animate().

I'm not quite sure I understand your question completely.
But if you want to reveal the box-2 from behind box-1, don't you just have to switch their positions in the html? So that box-1 is always in front of box-2
$('.box-2').animate({'margin-bottom': '83px'}, 3000);
.box-1 {
height: 30px;
width: 100px;
background-color: blue;
color: white;
position: fixed;
bottom: 0px;
}
.box-2 {
height: 30px;
width: 500px;
background-color: blue;
color: white;
position: fixed;
bottom: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="box-2">Div that will slide up from box-1's Top.</div>
<div class="box-1">Static div</div>

Use z-index:1; on css of .box-1
$('.box-2').animate({'margin-bottom': '83px'}, 3000);
.box-1 {
height: 30px;
width: 100px;
background-color: blue;
color: white;
position: fixed;
bottom: 0px;
z-index:1;
}
.box-2 {
height: 30px;
width: 500px;
background-color: blue;
color: white;
position: fixed;
bottom: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="box-1">div 1</div>
<div class="box-2">div 2 - the one that will slide up from box-1's Top.</div>

The $( ".box-2" ).hide(0); method is used to hide the second container after the animation. z-index: -1; style applied to make the box-2 container appear at the bottom during animation.
$(document).ready(function() {
/* The animation moves the second container from the bottom to a height of 83px. */
$('.box-2').animate({'margin-bottom': '83px'}, 3000, function(){
/* The first container appears when the animation is finished. */
$( ".box-1" ).css("display", "inline");
/* The second container is stored after the animation. */
$( ".box-2" ).hide(0);
});
});
.box-1 {
height: 30px;
width: 100px;
background-color: red;
color: white;
position: fixed;
bottom: 0px;
/* The first container is initially hidden. */
display: none;
}
.box-2 {
height: 30px;
width: 500px;
background-color: blue;
color: white;
position: absolute;
bottom: 0px;
/* Implemented to make the container appear at the bottom during animation. */
z-index: -1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="box-1">Static div</div>
<div class="box-2">Div that will slide up from box-1's Top.</div>
References
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Z-Index of Material Dropdown component not layering underneath a fixed div when opened

Objective:
I would like the Header, Tab Section, and the Radio Button Section to be fixed in a form (see image below). Meaning that they should always be in view, and never have any overlapping elements.
The form looks like the following:
This is working fine when I simply scroll down on the form:
The Problem:
When I open the Angular Material dropdown, it overlaps over the Radio Button Section:
Here is the HTML. The highlighted sections are the elements that I want to be fixated on the form:
And here is the CSS for the 3 sections
//Header:
.module__header {
position: fixed;
top: 0px;
z-index: 1001;
display: flex;
height: 35px;
width: 100%;
background-color: #082749;
color: #FFFFFF;
font-size: 14px;
font-weight: 500;
align-items: center;
justify-content: stretch;
padding: 0;
margin-bottom: 0;
}
// Tab Section:
.mat-tab-label-container {
position: fixed;
top: 35px;
padding-top: 10px;
z-index: 1001;
width: 100%;
background: #fff;
}
// Radio Button Section:
.timaticFullTextView {
padding-top: 35px;
padding-left: 15px;
padding-bottom: 15px;
background: #fff;
z-index: 1001;
position: fixed;
width: 100%;
border-bottom: 1.5px solid gray;
}
I have tried changing the cdk-overlay-container to a z-index of <1001, but that still is overlapping the Radio Button Section.
How can I have the opened dropdown display underneath all 3 sections?
Edit: Adding screenshot to show the cdk-overlay that is giving issues. I have tried removing and lowering the z-index, but it doesn't have any effect

The problem is that mat-tab-body has z-index: 1 and this won't allow your fixed view inside to have a higher elevation. You can remove the z-index from mat-tab-body put then your content without a z-index won't be clickable anymore so you have to add a z-index and position to your not fixed content.
The code would have to look something like this:
<mat-tab>
<mat-tab-body> <!-- <-- added automatically -->
<div class="tab-header"></div>
<div class="tab-content"></div>
</mat-tab-body>
</mat-tab>
::ng-deep mat-tab-body {
z-index: unset !important;
}
.tab-header {
position: fixed;
z-index: 1001;
}
.tab-content {
position: relative;
z-index: 1;
}

You've found the right element whilst applying styles to the wrong one.
Here is how I made it work
.cdk-global-overlay-wrapper, .cdk-overlay-container {
z-index: 99999 !important;
}

set class in css or hover over 2 overlapping divs

Is it possible to give the hover-icon a class, so that the icon is the triggerinfo? The image is in gray when i hover it, it gets colored but I wan't to hover a text when is colored, when I going over the little icon. Is there a way overlapping the div with the triggerinfo class over the image, but not leaving the hover of the image. Like hover the div that is not visible and not leaving the hover effect colored ?
Thanks !
If it helps I can share the link to my website, but only as message not for the public post. It gets more visual, and I think better to understand what I mean.
jQuery(document).ready(function() {
jQuery(".triggerinfo").mouseleave(function() {
jQuery(this).next(".info").hide();
});
jQuery(".triggerinfo").hover(function() {
jQuery(this).next(".info").toggle("fade");
});
});
.info {
display: none;
padding: 10px;
background: #fff;
position: absolute;
box-sizing: border-box;
z-index: 1;
}
.triggerinfo {
display: inline-felx;
opacity: 0.1;
position: absolute;
margin-top: -50px;
margin-left: 30px;
z-index: 3;
}
.uk-overlay-icon:before {
content: "\f0c9";
position: absolute;
top: 90%;
left: 10%;
width: 30px;
height: 30px;
margin-top: -15px;
margin-left: -15px;
font-size: 30px;
line-height: 1;
font-family: FontAwesome;
text-align: center;
color: #f69c00;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-uk-filter="dsgf" data-grid-prepared="true" style="position: absolute; box-sizing: border-box; padding-left: 10px; padding-bottom: 10px; top: 0px; left: 0px; opacity: 1;">
<div class="uk-panel">
<div class="uk-panel-teaser">
<figure class="uk-overlay uk-overlay-hover ">
<img src="/wp-content/uploads/bilder/projekte/dsf.jpg" class="uk-overlay-grayscale" alt="dfsg">
<div class="uk-overlay-panel uk-overlay-icon uk-overlay-fade"></div>
<a class="uk-position-cover" href="/wp-content/plugins/widgetkit/cache/nuding-35281426b204ba8667e05928e60e8a11.jpg" data-lightbox-type="image" data-uk-lightbox="{group:'.wk-1b2a'}" title="dsfg"></a>
</figure>
</div>
<div>
<div class="triggerinfo">
sdf
</div>
<div class="info">
<h5>dsfg</h5>
</div>
</div>
</div>
</div>

The Fiddlejsfiddle.net/e8qd8gvf/3/ works now as it should on my site. Now the thing is: on hover the img get colored and it appears a little icon in the bottom left coner, the trigger that is now under the img should be this little icon, because the icon is from the css definition in uk-overlay-icon (from the font awesome)
I dont now how to set the info class on this icon.
Or I was trying put an div with the info class over the img at the position of the icon and than trigger it, but than the colored effekt dont show when I trigger it, so I thought there must be a way to trigger the div on hover and not lose the colored effect, so the trigger div would trigger the Info and musst trigger the hover from the img at the same time
PS: Sorry for the long css !

The <figure> element is intended to mark up diagrams, illustrations, photos, code examples and similar content, "that can be moved away from the main flow of the document without affecting the document’s meaning" (http://w3c.github.io/html-reference/figure.html).
Your way of using it seems to be against this specification.
It's your own responsibility to code according to specification and best practices.
I just opted with your provided example: https://jsfiddle.net/e8qd8gvf/4/
I moved the uk-overlay-icon outside of the figure, added the toggle-info class and put the info box inside it.
All that was left was adding some CSS:
.uk-position-cover { cursor: default; }
.uk-panel-teaser { position: relative; }
.toggle-info {
display: none;
cursor: pointer;
position: absolute; bottom: 20px; left: 20px;
width: 30px; height: 30px;
}
.toggle-info > .info {
width: 150px; height: 150px;
border: 2px solid red;
position: absolute; bottom: -20px; left: 10px;
transform: translateY(100%);
}
.toggle-info, .info { display: inline-block !important; }
.toggle-info.hidden, .info.hidden { display: none !important; }
as well as changing your JS to:
jQuery(document).ready(function() {
jQuery(".uk-overlay").hover(
function() {
jQuery(this).next(".toggle-info").removeClass("hidden");
},
function() {
jQuery(this).next(".toggle-info").addClass("hidden");
}
);
jQuery(".toggle-info").hover(
function() {
jQuery(this)
.removeClass("hidden")
.children(".info").removeClass("hidden");
},
function() {
jQuery(this)
.addClass("hidden")
.children(".info").addClass("hidden");
}
);
});
 
My solution is only showing you a way to accomplish things and is by far not "nice". You need to adapt it yourself and to specifications.

border-radius + overflow:hidden when animating with jQuery

Check this jsFiddle.
The orange bar is serving as a progress bar where the value under the circle is how high the progress bar should be.
Any idea why the overflow:hidden; is beeing disregarded and how do one solve this problem? Oblviously nothing should go outside the circle.
Also is there a better solution for this?

Modified your fiddle a little bit. Here is the link
Modifications:
Changed .outerContainer css to display:block from display:table and addedmargin-top:30px to p css
Check if this works for you.

position: absolute and overflow: hidden don't appear to be playing nicely with display: table/table-cell. Removing the table stuff you had in there to vertically center the text fixes the problem. In Firefox, at least.

I think it's the browser thing...
This is the CSS3 version...
.progressBar {
display: block;
width: 100%;
height: 0;
position: absolute;
bottom: 0;
left: 0;
background: #ec6730;
transition: height 1s;
}
.innerContainer:hover > .progressBar {
height: 300px;
}
http://jsfiddle.net/ZyhgT/2/
It no longer flashing 'cause browser handle the job (not js loop animation...). But still it shows the edge on animation finish!!! This could be the browser things... Could be a bug...

This is not related to jQuery or any javascript. In fact, if you delete all your javascript and manipulate the height of your .progressBar using css on li:hover, you will notice the bug anyway.
It appears to be a browser issue as reported on: https://code.google.com/p/chromium/issues/detail?id=157218
As a workaround try adding an imperceptible css transform to the mask element:
.outerContainer {
-webkit-transform: rotate(0.000001deg);
}

You just need to change your .outerContainer class and it works just fine!
.outerContainer {
position: relative;
display: block;
height: 96px;
width: 96px;
overflow: hidden;
background: #fff;
border: 2px solid #fff;
-webkit-border-radius: 50px;
border-radius: 50px;
}

Put the level class inside the outerContainer div and style the span inside the level class to be relatively positioned. In the JavaScript, to calculate the level, divide by 10 instead of 100 for the perfect circular hover effect.
Here is a fiddle.
HTML
<div class="outerContainer">
<div class="innerContainer">
<p>Circle 3</p>
<span class="progressBar"></span>
</div>
<div class="level"><span>75</span>
</div>
</div>
CSS
body {
background: blue;
}
#circles {
text-align: center;
margin: 100px 0;
}
li {
display: inline-block;
margin: 0 10px;
position: relative;
}
.outerContainer {
position: relative;
display: block;
height: 96px;
width: 96px;
overflow: hidden;
background: #fff;
border: 2px solid #fff;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.innerContainer {
display: table-cell;
vertical-align: middle;
width: 100%;
margin: 0 auto;
text-align: center;
}
p {
color: #000;
width: 96px;
position: relative;
z-index: 2;
}
.progressBar {
display: block;
width: 100%;
height: 0;
position: absolute;
bottom: 0;
left: 0;
background: #ec6730;
}
.level span{
position:relative;
}
JS
$(function() {
$("#circles li").hover(function(){
var thisElement = $(this);
var level = $(this).find(".level").text();
var elementHeight = $(this).find(".outerContainer").height();
level = (level/10)*elementHeight;
$(thisElement).find(".progressBar").stop().animate({
height: level
}, 300);
}, function() {
var thisElement = $(this);
$(".progressBar").stop().animate({
height: 0
}, 300);
});
});

display: table doesn't work that good with CSS positioning;
you should avoid using that, and find some other way to vertically center your labels.
If your circles have a known height, like your code seems to indicate (height:96px ecc), then just use a fixed top position for an absolutely positioned <p> element:
http://jsfiddle.net/ZyhgT/5/
Note that you don't even need jQuery for this, it is all achievable with just CSS3 (unless you are targeting old browsers)

Alert when div height changes

I've been searching all day for this but i can't figure it out myself..
I have a shopping cart that you can add items to. The shoppin cart is in a drop down so you have to click it in order to view it. Therefore, everytime you add an item to the cart i want to display "+1", "+2" and so on, somewhere and when u click on the drop down it would disappear so it can start over counting.
So, i thought that when the div's height changes it could display +1.
But, i don't know enough javascript to do this....
My html:
<div id="button">Button</div>
<div id="chartdropupcontainer">
<div id="chart">
<button>test</button>
<script type="text/javascript">
$("button").click(function () {
$("#testp").hide();
});
$("#chart").bind("resize", function(){
alert("test");
});
</script>
<p id="testp"></p>
</div>
</div>
</div>
My Css:
* {
padding: 0;
margin: 0;
font-family: Helvetica;
color: white;
}
#chartdropupcontainer {
width: 200px;
background-color: red;
position: fixed;
bottom: 0;
right: 0;
margin-right: 20px;
padding: 0 5px 0 5px;
margin-bottom: 47px;
z-index: 998;
}
#chartdropupcontainer h1 {
margin: 5px;
color: black;
cursor: pointer;
}
#chart {
width: 100%;
background-color: black;
height: 400px;
overflow: auto;
}
#button {
background-color: blue;
cursor: pointer;
padding: 10px;
width: 190px;
position: fixed;
bottom: 0;
right: 0;
margin-right: 20px;
z-index: 999;
}
My javascript:
$(document).ready(function() {
$("#button").click(function () {
$("#chartdropupcontainer").slideToggle("slow");
});
});
And here is a link to an online version: http://www.rutgerinc.nl/niels/
Edit: sorry, bit inpolite!
Could anyone please help me with this?

First off, the resize event is when you resize a window so that's why your event is never firing.
http://api.jquery.com/resize/
I think you need to alter the bit of code where the item gets added to the basket. Isn't there more javascript somewhere to add things to the basket in the first place?
An event-driven approach like BGerrissen suggests would be perfect because you can fire one or more independent functions when the user adds something to the cart.
As you are using jQuery, custom events are quite easy. You use trigger to fire the event and then bind to listen for it.
http://api.jquery.com/trigger/

We Keep Coding

JavaScript is the programming language of the Web.