CODEWITHSUNDEEP
jqueryfindwidthparenteach
huddds
huddds

Reputation: 1045

Detect div and resize other div if not present

I have a list item with 3 columns, an image, text, and a table. They are all float left. I need to detect if the list item contains a div with the class '.Image', if this div is not present I need to resize the width of the div that has the class '.Text'.

I've attached the code and a JSFIDDLE below, option 2 is the one that needs to detect that there isn't a 'div.Image' instance and resize 'div.Text' to 450px.

JSFIDDLE

jQuery:

$(document).ready(function(){
    $('.Image').each().parent().find('div.Text').width(450);
});

CSS:

#listingItem{width:660px; background-color:#666666;}
.Image{width:100px;float:left; background-color:#cccccc; height:200px; padding:10px;}
.Text{width:350px;float:left;background-color:#666666; color:#FFFFFF; height:200px;padding:10px;}
.Table{width:150px; float:left;background-color:#999999; height:200px;padding:10px;}
.clr{clear:both;}
table tr td{color:#FFFFFF;}

HTML:

<h2>OPTION 1</h2>
<div id="listingItem">
    <div class="Image"><img src="http://foto.hrsstatic.com/fotos/0/3/256/256/80/FFFFFF/http%3A%2F%2Ffoto-origin.hrsstatic.com%2Ffoto%2F1%2F6%2F4%2F9%2Fteaser_164977.jpg/NJznvEm71tK4eSpZVLEFZA%3D%3D/128,128/6/Holiday_Inn_MIAMI_BEACH-OCEANFRONT-Miami_Beach-Exterior_view-5-164977.jpg" width="100" /></div>
    <div class="Text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla sagittis iaculis. Etiam tincidunt egestas urna, et congue lorem elementum eget. Morbi sed nibh rutrum, pulvinar metus a, bibendum purus. In porttitor ornare massa et dapibus. Duis tempor facilisis ipsum, sed tempus mauris ornare id. Donec in consequat est. Nunc pulvinar nibh in lorem suscipit, at eleifend tellus dictum. Proin congue leo eu dui feugiat condimentum. Sed sagittis sagittis consectetur. Quisque ut ultrices erat.
    </div>
    <div class="Table">
        <table cellspacing="0" cellpadding="5" border="0" width="150">
            <tr>
                <td bgcolor="#b22222">
                    CONTENT
                </td>
            </tr>
        </table>
    </div>
    <div class="clr"></div>
</div>

<h2>OPTION 2</h2>

<div id="listingItem">
    <div class="Text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla sagittis iaculis. Etiam tincidunt egestas urna, et congue lorem elementum eget. Morbi sed nibh rutrum, pulvinar metus a, bibendum purus. In porttitor ornare massa et dapibus. Duis tempor facilisis ipsum, sed tempus mauris ornare id. Donec in consequat est. Nunc pulvinar nibh in lorem suscipit, at eleifend tellus dictum. Proin congue leo eu dui feugiat condimentum. Sed sagittis sagittis consectetur. Quisque ut ultrices erat.
    </div>
    <div class="Table">
        <table cellspacing="0" cellpadding="5" border="0" width="150">
            <tr>
                <td bgcolor="#b22222">
                    CONTENT
                </td>
            </tr>
        </table>
    </div>
    <div class="clr"></div>
</div>

Thanks in advance for any responses.

Upvotes: 0

Views: 216

Answers (4)

Dom Day
Dom Day

Reputation: 2562

or http://jsfiddle.net/C7fQ8/

$(document).ready(function () {
    $('.listingItem:not(:has(.Image)) .Text').width(470);
});

width 470 to account for image div padding

Upvotes: 0

Dimdum
Dimdum

Reputation: 332

  1. Both of your containers have the same id. Change it to class, since id's purpose is a unique representation of an element.

  2. I would do it like this: 

    $(document).ready(function()
{
    $(".listingItem").each(function()
    {
        isImgInside = $(this).find(".Image").length ? true : false;
        if(! isImgInside )
            $(this).find(".Text").width(450);
    });
});

Upvotes: 0

Pete Scott
Pete Scott

Reputation: 1526

You should be able to do that with just css.

.Text{width:450px;float:left;background-color:#666666; color:#FFFFFF; height:200px;padding:10px;}
.Image + .Text { width:350px; }

Set the default .Text width to 450. If the .Text element is preceded by an .Image element, adjust it to 350.

Upvotes: 1

isJustMe
isJustMe

Reputation: 5470

First you will need to change your ID for a class, since you can't repeat IDs then use something like this:

$(document).ready(function(){
    $( ".listingItem" ).each(function() {
        if (!$(this).find('.Image').length){
            $(this).find('div.Text').width(450);
        }

    });    

});

Here is the fiddle

Upvotes: 1

Related Questions