CODEWITHSUNDEEP
javascriptjqueryhtmlcss
TDsouza
TDsouza

Reputation: 938

Set bottom position of element based on rendered height of another element

Following is the url to my website

http://projectilepixels.com/beta/

I need the space shuttle to appear "naturally positioned" i.e slightly below the grass at all resolutions above 786 x 1024. However as the grass image as it's width set to 100%, the height is dynamic. Thus the bottom value for the shuttle would also be dynamic. I had initially tried using a simple css % value but that didn't help.

My current attempt uses JavaScript. Following is the code 

<script>
    $(document).ready(function() {
    var grass = $( '#grass' );
    var grassHeight = grass.outerHeight() - grass.outerHeight()/100 * 74;
        $( '#shuttle_1' ).css("bottom",grassHeight);
    });
</script>

The initial script just used

var grassHeight = grass.outerHeight();

however it ended up really messed up.

So, as a temp fix I added the mathematics's that calculates 74% (a solution I didn't really want to use as it uses magic numbers), it seemed to work "fine" on Mozilla at 786 x 1024, however I tested it on chrome at a slightly higher resolution (Can't remember it right now, will check the specific resolution and edit this part soon). I'm new to JavaScript and am under as to what would be the best practice to solve this problem across all browsers and resolutions

Would really appreciate if someone guided me around this problem. I'm open to using css,Javascript as well as jquery.

Upvotes: 3

Views: 697

Answers (2)

JRulle
JRulle

Reputation: 7568

Why dont you develop a few constant values that can be applied to the actual rendered values of the grass image to adjust the placement. Something like:

Lets say the grass image is 500px x 237px but the height of the grass is only 158px – If we want the shuttle to sit right at the crown of the grass, it needs to be offset from the bottom of the screen by 158px – 158 divided by 237 works out (almost magically) to .66667

Since this is a fixed ratio, we can use .66667 to calculate the offset from the bottom of the screen for any size grass image, as long as we know the dimensions of the grass image by multiplying the height and .6667

$(function(){
   var OFFSET = .66667; //this value is our shuttle adjustment constant
   $( '#shuttle_1' ).css("bottom",($('#grass').height() * OFFSET)); //sets the bottom offset of the shuttle
   $( '#shuttle_1' ).css("left",(($('#grass').width()/2)-($( '#shuttle_1' ).width()/2))); //centers the shuttle
});

Here is a JSfiddle demonstrating it.

Upvotes: 0

Ori Refael
Ori Refael

Reputation: 3028

i would have deffently use $.position in here,

$("#Grass").position({
    of: $(shuttle),
    my: "top center",
    at: "bottom center"
});

that will locate the the grass top line of the grass (its center), below the center of the bottom line on the shuttle

Upvotes: 1

Related Questions