Can anyone help with this? IF certain element not exist set min-width

JavaScript
1

I need to write a script that checks if there is any elements with the class “article” on a page, and if there isnt any I want to set the min-height of “otherdiv” to something, like 200px, and if there do exists “article” on the page, don’t set any min-height.

I don’t know how to write this, this is what I have done so far but it isn’t working:

$(function(){
	if ($('.article:visible')) {
		$('.otherdiv').css('min-height', 0);
	} else {
		$('.otherdiv').css('min-height', '200px');
	};
});
2

Find out if an element is present by checking the length of the selector.

var articlesPresent = $(".article").length;
if (articlesPresent){
  // do stuff
} else {
  //do other stuff
}
3

Thanks but I can get it to work=/

If the .article exists I want to use a script to check its height and apply it to .otherdiv, I tried this: and it works when .article exists but the .otherdiv isnt 200px height if i take away .article

var articlesPresent = $(".article").length;
if (articlesPresent){
  	function equalHeights (element1, element2) {
		var height;

		if (element1.outerHeight() > element2.outerHeight())
		{
			height = element1.outerHeight();
			element2.css('height', height);
		}
		else {
			height = element2.outerHeight();
			element1.css('height', height);
		}
	}
	equalHeights($('.article'), $('.otherdiv') )
} else {
 	$('.otherdiv').attr('style', 'min-height: 200px;');
}

Do you see anything wrong in this? If not maybe its my CSS messing things up.

4

Yeah, a couple of things.

I would define the function outside of the if else statement.
I would use .css() instead of .attr("style")
You are passing the equalHeights function two collections of jQuery objects, when it is expecting two jQuery objects.

function equalHeights (element1, element2) {
  var height;
 
  if (element1.outerHeight() > element2.outerHeight()){
    height = element1.outerHeight();
    element2.css('height', height);
  } else {
    height = element2.outerHeight();
    element1.css('height', height);
  }
}

var articlesPresent = $(".article").length;
if (articlesPresent){
  $(".article").each(function(){
    equalHeights($(this), $('.otherdiv') );
  });
} else {
  $('.otherdiv').css('min-height', '200px');
}

This is all off the top of my head (i.e. untested) so if you still can’t get it to work a simple fiddle demonstrating your problem would be appreciated.

5

Thanks that is a prettier script! However, when no articles is on the page the min-height of .otherdiv is still not 200px.

EDIT: I made a http://jsfiddle.net/jq5Bg/10/ , where it is working. I guess I will have to look i my CSS and see what might be messing things up.

6

Can you post a link to the page in question?