CODEWITHSUNDEEP
jquery
Ricardo Zea
Ricardo Zea

Reputation: 10283

jQuery: if an HTML element is not loaded, modify another one

I looked around and can't find anything similar to what I need help with.

--

I have two DIVs, floated to the left so they appear next to each other. In the left one I have the product image, and in the right one, the product description/information.

Sometimes, the product image will not appear in the page, that's because the product manager (there are many of them in the company I work at) may not have a picture of the product, hence, they won't upload a picture in the CMS, thus, in the product page only the description/information will appear.

What I need

What I need is a way to detect if the DIV of the product image has been injected in the page or not.

If it has, no problem, both containers maintain their widths. But if the DIV of the product image is not present on the page, then I need to modify the width of the DIV of the product description to be wider (otherwise, it will maintain its width and there will be unused space to its right).

Does that make sense?

Here's the basic code:

HTML:

<div id="product-wrapper">Product image</div>
<div id="product-description">Product description/information</div>

CSS:

#product-wrapper { float:left; width:200px; }
#product-description { float:left; width:400px; }

Thanks!

Upvotes: 2

Views: 228

Answers (5)

user113716
user113716

Reputation: 322502

Have you tried using just CSS?

For example if the elements are siblings, something like this may work.

You'll need to test in IE to make sure the + selector is working properly.

Example: http://jsfiddle.net/j6zsL/ (Remove the product-wrapper element, and click Run. You'll see that the product-description will become wider.)

#product-wrapper { 
    float:left; 
    width:200px; 
    height: 200px;
    background: orange;​
}
#product-description { 
    float:left;
    height:200px;
    width:600px;
    background:red;
}

#product-wrapper + #product-description {
    width:400px;
}

Here the default width for product-description is 600px, but if it has a product-wrapper before it, it is 400px.

Upvotes: 4

Ben Lee
Ben Lee

Reputation: 53319

Add this to your javascript:

if ($('#product-wrapper').length == 0) {
  $('product-description').addClass('wide');
}

And this to your CSS:

#product-description.wide {
  width: 600px;
}

Upvotes: 1

Cole
Cole

Reputation: 1503

If the image is not present, the entire product-wrapper div will not be on the page, correct?

You can attempt to get the element, and see if that succeeds.

The standard JS way would be

if(document.getElementById('product-wrapper')){/* do something */}

With jQuery,

if($('#product-wrapper').length){/* do something */}

The jQuery selector function returns an array. If the array has anything in it, the above will return true, and thus the element exists.

Upvotes: 1

generalhenry
generalhenry

Reputation: 17319

if(!$("#product-wrapper").length){ $("#product-description").width(600) }

Upvotes: 3

zzzzBov
zzzzBov

Reputation: 179086

One way is:

if ($('#product-wrapper img').length)
{
  ...
}

This assumes that the img tag is not present, rather than a broken image link.

Upvotes: 3

Related Questions