Home/ Questions/Q 8253217
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T00:48:12+00:00

I need to have a scalable image that will be centered on an scalable

  • 0

I need to have a scalable image that will be centered on an scalable <div> at this point I have a <div> used as wrapper, the <div> that is scalable and holds the image. And I have some jquery code that calculates the width of the <body> and gets the amount of space available for the <div>/<img />. The site content is 745px; so the rest of the window will be left for the div and image.
This is what I have for now:

<div class="ad_banner_holder" id="ad_banner_holder" style="width: 100%;">
    <div class="ad_banner" id="ad_banner" style="background: white; text-align: center; position: absolute;">
        <a href="http://www.finconsult.ro/" target="_blank"><img id="the_ad" style="position: fixed; max-width: 800px; margin-top: 82px;" src="http://ww1.particularul.ro/images/ads/3rdtry2.jpg" /></a>
    </div>
</div>

<script type="text/javascript">
    $(window).load(function () {
        var adwidth = $("body").width();
        adwidth = adwidth - 760;
        $("#the_ad").css("width", adwidth);
        $("#ad_banner").css("width", adwidth);
    });
    $(window).resize(function () {
        var adwidth = $("body").width();
        adwidth = adwidth - 760;
        $("#ad_banner").css("width", adwidth);

    });
    $(window).resize(function () {
        var adwidth = $("#ad_banner").width();
        $("#the_ad").css("width", adwidth);

    });
</script>

The thing is that the script works perfect when the browser is resizes.
When you refresh the page the browser centers the image then it resize it from the point where it is to the right (getting away from the center point); I don’t understand why the same code doesn’t work with different triggers.

Also I tried to change the trigger for the image resize to .hover() and it’s acting the same: the centered image has it’s width changed and moves away from the center.

Any help/explanation would be highly appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Not only do you have two resize functions but you should just use standard jquery ready to detect when the page has loaded.

    $(function() {
    var adwidth = $("body").width();
    adwidth = adwidth - 760;
    $("#the_ad").css("width", adwidth);
    $("#ad_banner").css("width", adwidth);

    //combine the two resize handlers

    $(window).resize(function() {
        var adwidth = $("body").width();
        adwidth = adwidth - 760;
        $("#ad_banner").css("width", adwidth);

    });
    $(window).resize(function() {
        var adwidth = $("#ad_banner").width();
        $("#the_ad").css("width", adwidth);

    });

});
    • 0