CODEWITHSUNDEEP
javascriptcss
sanitycheck
sanitycheck

Reputation: 298

How to set div width on the fly based on scaled image width

I want to have the page adjust the width of the div that surrounds an image with a little text underneath it, such that the text is forced to wrap so as not to exceed the width of the image. The thumb's width will vary from thumb to thumb. In the code below, I've identified the unknown width with "???".

<div id="N-03-item" style="float:left; width: ???;">
  <p><a href="item.php?i=8">
  <img id="N-03" src="photos/thumbs/8.jpg" alt='Choker Necklace 18"'/><br/>
  Frosted Flower Choker Necklace 18"</a></p>
</div>

I presume this is something that needs to happen with javascript (although a CSS solution would also be good), but javascript is not my strength. The resulting div width will need to be different each time, based on what the DOM reports the image width to be in each instance.

Can someone tell me what the appropriate javascript would be?

Upvotes: 0

Views: 1128

Answers (4)

Marc Diethelm
Marc Diethelm

Reputation: 1202

Here's a complete working example. The width of the DIV is adjusted as soon as an image has finished loading. Which can be as early as the domready event. No need to wait until document.onload fires. I slightly improved your markup, getting rid of the BR tag. (see JSFiddle)

css

.link-thumb { float: left; border: 1px solid gold; position: relative; }
.link-thumb img { display: block; }
.desc { position: absolute; }

html

<div class="link-thumb" id="id">
    <a href="#">
        <img class="thumb" id="id" src="http://placekitten.com/100/100" alt="foo" width="100" height="100" />
        <span class="desc">Frosted Flower Choker Necklace 18"</span>
    </a>
</div>

js

$('.thumb').on('load', function() {
    var $this = $(this);
    $this.parents('.link-thumb').width( $this.width() );
});

If you're not using jQuery 1.7+ substitute the .on method with the .bind method!

Edit: I incorporated dave's CSS only solution. So this script only needs to run for IE7 and older! However, depending on your use case, you may now have to set a fixed height on .link-thumb as the .desc is now not part of the flow.

Upvotes: 1

Junaid Qadir Shekhanzai
Junaid Qadir Shekhanzai

Reputation: 1425

OK, you don't have to use JavaScript for this. check this fiddle http://jsfiddle.net/jeykeu/WCHcP/2/

UPDATE:

OK, @sanitycheck now I did it with jQuery. Check out the fiddle http://jsfiddle.net/jeykeu/2dBJa/2 I hope it help

Upvotes: 1

yas
yas

Reputation: 3620

Based on these assumptions:

  • You are not able to access the width of the image, and set that width on the containing DIV through server code
  • You'll be able to reserve enough space for line wrapping, since solution uses absolute positioning and takes text out of the flow

I would try:

#N-03-item {
    position : relative;  
}

/* if you can add a class for items, in addition to ID (e.g. N-03-item) than use a  
   rule such as 

.item {
     position :relative
 }

 */

 .description{
      position : absolute;
 }

Description is positioned absolutely, but there is no top or left specified. Most user agents will try to position the .description element where it should have appeared. This will cause the width of the description to get bound by the width of the item DIV (which itself is shrunk to fit the width of the image since it is floated left).

I think you still need to sort out reserving enough space below the item if there are items following it, the text is taken out of the flow.

Example : http://jsfiddle.net/5FJvd/

Upvotes: 0

Voooza
Voooza

Reputation: 779

If you can use jQuery It woould be something like:

$("#N-03-item").css({
     "width": $("#N-03").width()
});

Upvotes: 1

Related Questions