#7168 closed bug (notabug)

Opened March 19, 2011 11:11AM UTC

Closed March 19, 2011 11:14AM UTC

nested resizables and resize-event functions problem

Reported by: luckylooke Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.resizable Version: 1.8.11
Keywords: Cc:
Blocked by: Blocking:
Description

When I put resize event function in both nested resizable divs, then resizing inner div activate own resize-event function, but it also activate all superior resizables resize-event functions.

see code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title> bug? </title>
	<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css" rel="stylesheet" />	
	<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){														/**      <----  DOCUMENT READY FN     */
			randomColor($('#id2'));
			randomColor($('#id111'));
			randomColor($('#id112'));
			randomColor($('#id12'));
			$('#id1').resizable({handles: 's'});
			$('#id11').resizable({handles: 'e'});
			$('#id111').resizable({handles: 's'});
			$('#id1, #id11, #id111').bind( "resize", function(event, ui) { $(this).siblings('[id^="id"]').each(function(index, el){
				randomColor(el);
			}); });
		});
	function randomColor(el){
	var rndColor = Math.random();
		rndColor *= 1000000;
		rndColor = Math.round(rndColor);
		$(el).css('background-color', '#' + rndColor);
		}
	</script>
</head>
<body>
<div id="wrap" style="width: 200px; height: 200px; display:inline-block; border: 1px solid #1C94C4">
	<div id="id1" style="width: 100%; height: 50%">
		<div id="id11" style="width: 50%; height: 100%; float: left">
			<div id="id111" style="width: 100%; height: 50%"></div>
			<div id="id112" style="width: 100%; height: 50%"></div>
		</div>
		<div id="id12"style="width: 50%; height: 100%; float: left"></div>
	</div>
	<div id="id2" style="width: 100%; height: 50%"></div>
</div>
</body>

Solution should be adding class to all superior resizables and when the resize-event function is activated frist line inside this function should chceck if this resizable hasnt this class, but I havent try it yet.. I will update this ticket after trying it.

Attachments (0)
Change History (1)

Changed March 19, 2011 11:14AM UTC by scottgonzalez comment:1

resolution: → invalid
status: new → closed

Yes, events bubble. Check event.target to see which element was resized.