I am building an app where I have different kinds of divs going onto the page. Some are filled with an <img> and some with a <span>. All divs have a class called draggable on them. I make all div's with the draggable class resizable by doing this:
$( '.draggable' ).resizable({
maxWidth: 500,
aspectRatio: false,
containment: 'parent',
start: function() {
last_element = $(this);
},
resize: function() {
$(this).children('img').css('width',$(this).css('width'));
$(this).children('img').css('height',$(this).css('height'));
},
stop: function() {
updateDiv($(this).attr('id'));
}
});
Is there any way to make the aspectRatio value dependent on the contents of div? I tried doing this:
aspectRatio: ($(this).children('img').length ? true : false),
I would like it so that textboxes (those divs with spans in them) can be resized with aspectratio = false, but image boxes (those divs with imgs in them) have aspectratio = true.
I know I can setup two different classes (.draggable and .draggable_img) but instead of doing that I'm just wondering if there is something simple I can do without having redundant code.
This is a context issue. $(this) is referencing window instead of the .draggable element at that level. What you could do is something like this. Once you do that your logic for setting true/false is fine.
$('.draggable').each(function() {
$(this).resizable({
maxWidth: 500,
aspectRatio: ($(this).children('img').length ? true : false),
containment: 'parent',
start: function() {
//last_element = $(this);
},
resize: function() {
//$(this).children('img').css('width',$(this).css('width'));
//$(this).children('img').css('height',$(this).css('height'));
},
stop: function() {
//updateDiv($(this).attr('id'));
}
});
});