CODEWITHSUNDEEP
phpjquerycssresize
James Ison
James Ison

Reputation: 25

Calculating width after css height resize

I'm building a page of horizontal images pulled from XML When the images load they take on the screen height minus a small value to give some room. I'm grabbing the widths of the images so I can add them up and set the width of the div container. At the moment the total width is the size of the full unresized images leaving a blank space at the end of the last image. How can I grab the width of all the resized images?

Here is my code 

 <script>

 $(document).ready(function () {
$.ajax({
    type: "GET",
    url: "xml.xml",
    dataType: "xml",
    success: xmlParser
});

 });

function xmlParser(xml) {
var $heightb = $(window).height() - 45;
var $widthb = 0;
$(xml).find("image").each(function () {
    $url = $(this).attr("url");
    $(".main").append('<div class="image" style="height='+$heightb+'px"><div class="title"><img height="'+$heightb+'px" src="' + $url + '" title="' + $(this).attr("desc") + '" /></div><div class="description">' + $(this).attr("desc") + '</div></div>');
    $(".image").fadeIn(1000);
    $widthb += $(".image").width();
});
$(".main").css('width', $widthb);
}

The page I'm working on is http://www.spitznagel.ch/mobile.php

Upvotes: 1

Views: 417

Answers (1)

ithcy
ithcy

Reputation: 5589

You can probably just create the element for each image and get its size before appending it. Something like this (untested code; hopefully you get the idea)

function xmlParser(xml) {
    var $heightb = $(window).height() - 45;
    var $widthb = 0;
    var imgDiv;
    var width;

    $(xml).find("image").each(function () {
        $url = $(this).attr("url");
        imgDiv = $('<div class="image" style="height='+$heightb+'px"><div class="title"><img height="'+$heightb+'px" src="' + $url + '" title="' + $(this).attr("desc") + '" /></div><div class="description">' + $(this).attr("desc") + '</div></div>');
        $(".main").append(imgDiv);
        width = imgDiv.width();
        imgDiv.fadeIn(1000);
        $widthb += width;
    });
    $(".main").css('width', $widthb);
}

Upvotes: 1

Related Questions