Side navigation
#8377 closed bug (invalid)
Opened February 24, 2011 09:39PM UTC
Closed March 14, 2011 05:49PM UTC
Last modified March 14, 2012 01:28PM UTC
siblings() impacts ancestors siblings
| Reported by: | luckylooke@gmail.com | Owned by: | luckylooke@gmail.com |
|---|---|---|---|
| Priority: | undecided | Milestone: | 1.next |
| Component: | traversing | Version: | 1.5 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
used latest jquery and jquery ui
I am using: FF3.6.13 on winXP
it supposed to change background color only in sibling divs of actual resizing div, and it also changeing color in ancestors siblings divs
changing color was used to minimize problem only. I have another function but the impact is the same
minimized 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>
My attempt to show it in jsfiddle but it doesnt work there at all:
Attachments (0)
Change History (3)
Changed February 24, 2011 09:41PM UTC by comment:1
| component: | unfiled → traversing |
|---|---|
| owner: | → luckylooke@gmail.com |
| status: | new → pending |
Changed March 04, 2011 11:51AM UTC by comment:2
I tried to replace selector siblings() with selectors parent().children().not(thisElement) and behaviour was same..
this leads me to conclusion that I dont have problem with siblings selector but with hested resizable elements. And this problem is already discussed here: http://bugs.jqueryui.com/ticket/4333
Changed March 14, 2011 05:49PM UTC by comment:3
| resolution: | → invalid |
|---|---|
| status: | pending → closed |
Because you've confirmed the issue you have isn't with sibling selectors (as per this ticket) but rather nested resizable elements (and there's a thread going on for that on the UI tracker), we'll be closing it. Please feel free to continue the discussion about the issues you're experiencing on http://bugs.jqueryui.com/ticket/4333
Thanks for taking the time to contribute to the jQuery project! Please provide a reduced jsFiddle test case to help us assess your ticket!
Additionally, test against the jQuery 0 GIT version to ensure the issue still exists.