CODEWITHSUNDEEP
jqueryhtml
twgoff
twgoff

Reputation: 5

Change height of image in html using jQuery on pageload

I have the main content in a div in the middle of the page, with two pictures either side, acting as shadows. The page length can vary so I want the shadow length to vary with it.

Here is the HTML set up:

<div id="content">
<div class="shadow_container">
    <img src="catalog/view/theme/furniture/image/left-shadow.png" height="400px" width="61px" id="left_shadow"/>
        <div class="main_container">

            pagecontentpagecontentpagecontent

        </div>
    <img src="catalog/view/theme/furniture/image/right-shadow.png" height="400px" width="61px" id="right_shadow"/>
</div>

Here is the jQuery:

$(".shadow_container").load(function(){
    var shadowHeight = $(".shadow_container").height();
    var newShadowHeight = shadowHeight+85+" px";

    $("#left_shadow").height(newShadowHeight);
    $("#right_shadow").height(newShadowHeight);
});

Where am I going wrong!?

Okay, just to clarify, I have tested it using absolute values in the last 2 lines and nothing happens.

All the other jQuery in the external script works, and this section is just after my document ready, so why isn't this running?

Upvotes: 0

Views: 165

Answers (2)

Luceos
Luceos

Reputation: 6720

Remove the px var newShadowHeight = shadowHeight+85+" px"; should be: var newShadowHeight = shadowHeight+85;

And you can use the shorthand for setting height, the same way you use it to retrieve it:

$("#left_shadow").height(newShadowHeight);
$("#right_shadow").height(newShadowHeight);

So rewritten to automatically change the shadow on body load:

$(function(){
    var shadowHeight = $(".shadow_container").height();
    var newShadowHeight = shadowHeight+85;

    $("#left_shadow").height(newShadowHeight);
    $("#right_shadow").height(newShadowHeight);
});

Upvotes: 2

Napas
Napas

Reputation: 2801

Try without "px". Just numbers.

Upvotes: 0

Related Questions