Forums

revolutiong

 $('.div.masonary-box img').css('width', '100%');

Doesn't seem to work for me in javascript, yet it works when its in css.

div.masonary-box img { 
width:100%;
 }

Using Masonry, before the script creates the column its shows a blown up image for millisecond. So my plan is the just load my css after the script to resolve this.

Thanks

srig99

I noticed that you have .div in the jQuery version but just div in the CSS version. Is this intentional? Did you make a class name called div (I don't even think that's possible). I think that's your problem...

revolutiong

That worked, didn't solve my issue with my images blowing up however. Thanks for your help.

AlenAbdula

Did you try visually hiding the image with CSS. Then, when DOM and all the resources load show the image with JavaScript.

Look at the HTML5 Boilerplate index page, see the order resource are loaded. It's a good place to start.

revolutiong

Great idea. Within the Masonry js there is ImagesLoaded Function. Added my css as so...

  function triggerCallback() {
    callback.call( $this, $images ),
       $("div.masonry-box img").css({'visibility': 'visible', 'width': '100%'}); 
    }

Thanks

treehouse : what would you like to learn today?

Forums

[Solved] Setting image width 100% not working.