CSS jquery moving a div from bottom to top using pixels

Question

Hey all i have a JSFiddle that i have been working on with trying to get it to animate going from bottom to top instead of what its currently doing, top to bottom.

This will be used as a animated bar graph for a fund raiser amount that's in front of an image and this bar graph will represent the amount in dollars they have raised so far.

The jsfiddle is here: http://jsfiddle.net/kboucher/YDruG/

Any help would be great!!!

update

The HTML code:

<a href="#" id="button">View 100 (out of 500)</a>

<div id="barGraph-container">
    <div id='barGraph'></div>
</div>

The JS:

$('#button').click(function(){
    $('#barGraph').animate({height:'72px'}, 500);
});

The CSS:

#barGraph-container {
    height: 200px;
    position: relative;
}
#barGraph {
    height: 200px;
    width: 50px;
    background-color: #000;
    position: absolute;
    bottom: 0;
}

put it in a table where it is vertical aligned to the bottom...then when the height changed it would go bottom to top. — Spencer May, Oct 10 '12 at 18:51
Fixed your [fiddle](http://jsfiddle.net/GZeu3/4/) to use jQuery. You had it set to use MooTools. — Matt Burland, Oct 10 '12 at 18:54

score 1 · Accepted Answer · answered Oct 10 '12 at 18:52

1

Try putting a container around your bar graph and use absolute positioning to anchor it to the bottom of the container.

Like this: http://jsfiddle.net/kboucher/YDruG/

answered Oct 10 '12 at 18:52

Kevin Boucher

16,426
3
48
55

It's still animating downward. I need it to start from the bottom and animate upwards. – StealthRT Oct 10 '12 at 18:53
Updated fiddle: http://jsfiddle.net/kboucher/YDruG/ (I set the initial height of the bar to '0') – Kevin Boucher Oct 10 '12 at 18:55

score 0 · Answer 2 · answered Oct 10 '12 at 19:02

0

By giving the graph bar a relative position, and adding a top position animation to compensate for the reduced height, you can achieve this quite easily.

http://jsfiddle.net/GZeu3/19/

answered Oct 10 '12 at 19:02

Nw167

169
5

score 0 · Answer 3 · answered Oct 10 '12 at 19:03

0

Here is an example that uses 2 divs to "reveal" the graph which looks like it is growing.

http://jsfiddle.net/GZeu3/23/

answered Oct 10 '12 at 19:03

lerxstrulz

143
1
8

Code is available at the link provided – lerxstrulz Oct 15 '12 at 21:44

CSS jquery moving a div from bottom to top using pixels

3 Answers3