Using a variable for .css position 'type'

JavaScript
1

Using Jquery, and I’m trying to make a element positioned either from the top or bottom based on where it is in a grid.


if (position.top+width > container_height) {
     var position_type = "bottom";
} else {
     var position_type = "top";
}

and then apply it like so


.css({position_type:position.top+padding,"left":position.left+7,"width":width,"height":width})

This isn’t working. Anyone know a reason why? Can’t seem to find anything on google, but maybe I’m not using the correct term.:confused:

Thanks for any kind of help/insight.

2

okay, came up with a solution, but it’s pretty ‘clunky’.


		$('<div class="term_definition"><p><b>' + title + '</b>' + term + '</p><img src="/images/close_button.png" class="definition_close" /></div>').hide().css({"width":width,"height":width}).appendTo($(benefit_grid_term).parent('dl'));

		var target_div = $('.term_definition');
		if (position.top+width > container_height) {
			$(target_div).css({'bottom':padding+4});
		} else {
			$(target_div).css({'top':position.top+padding});
		}
		
		if (position.left+width > container_width) {
			$(target_div).css({'right':padding+4});
			var right = position.left+width;
		} else {
			$(target_div).css({'left':position.left+padding});
		}
		
		$(target_div).slideToggle('fast');

Seems like I should be able to place a variable in the css block for the name of the style i’m messing with instead of having to do new css methods for each one.