jquery set div container height and width depending on image size

Question

I need to set a div height and width according to the first image size within a list of 40 items (all images are the same size). To make it short function works only the first time you load the page, after visiting other pages imgSize will be undefined.

<div id="ulSorList"> 
  <div class="col-lg-4 col-md-6 col-sm-6 col-xs-6 mix">
    <div class="portfolio-list">
      <a href="#">    
          <div class="overlay-block"></div>
          <img src="/img/1.jpg" class="img-responsive">
      </a>
    </div>
  </div>
  <div class="col-lg-4 col-md-6 col-sm-6 col-xs-6 mix">
    <div class="portfolio-list">
      <a href="#">    
          <div class="overlay-block"></div>
          <img src="/img/2.jpg" class="img-responsive">
      </a>
    </div>
  </div>
  ...
  ...
  ...
</div>

Script

$("#ulSorList img:first").load(function() {
  imgSize = $(this);
  $(".portfolio-list a .overlay-block").width( imgSize.width()).height( imgSize.height() );
  alert(imgSize.width());
});

Everything works until you navigate throught the site (new page is loaded).

IT seems like the script is breaking at some point, so I guess that I only need to get the img size of the first list item.

I edited because since i didnt know what could be the problem the question was bad formulated.

Nothing I cant make it work, now it seems like the script isnt breaking and at least I am getting imgSize width, but I am still at the same position. Script wont function after navigaion.

Any ideas?

do you mean when the page is refreshed? can you specify more clearly the influence of "navigate through the site" on the image? — renakre
– renakre, Commented Apr 5, 2015 at 3:50
I mean after clicking in any menu item and a new page is load. After refreshing everything is fine — Tyra Pululi
– Tyra Pululi, Commented Apr 5, 2015 at 3:53
Also notice that imgSize is undefined, may this be the main problem here? — Tyra Pululi
– Tyra Pululi, Commented Apr 5, 2015 at 4:38
no, is always undefined, even when everything seems to be working — Tyra Pululi
– Tyra Pululi, Commented Apr 5, 2015 at 4:54

Dinesh Devkota · Accepted Answer · 2015-04-05 04:00:56Z

1

Try this.

$("selector for menu"). on("click", function() {
    var imgSize= $(".portfolio-list a img");
    $(".portfolio-list a .overlay-block").width( imgSize.width()).height( imgSize.height() );
});

edited Apr 5, 2015 at 4:00

answered Apr 5, 2015 at 4:00

Dinesh Devkota

1,4172 gold badges18 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tyra Pululi · Accepted Answer · 2015-04-05 08:49:25Z

1

I think I solved, may not be the best way but now its working. The problem is that after navigating, the image was already loaded imgSize was returning the height and width before it was placed in the container. I solved this by adding a timeout.

answered Apr 5, 2015 at 8:49

Tyra Pululi

4561 gold badge8 silver badges19 bronze badges

Comments

Shubham · Accepted Answer · 2015-04-05 04:01:31Z

0

You are using anchor tag in jquery but where it is in the HTML code. That's an error.

$(".portfolio-list>img").load(function() {
var imgSize= $(this);
$(".portfolio-list>.overlay-block").width(imgSize.width()).height(imgSize.height());
});

answered Apr 5, 2015 at 4:01

Shubham

112 bronze badges

Collectives™ on Stack Overflow

jquery set div container height and width depending on image size

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related