Response title
This is preview!
jqueryUI position() breaks events!
in Using jQuery UI
•
12 years ago
Hi,
I don't know if its me but i'm having some problem with the position() utility from jqueryui.
Sometimes, when a element is positionated with jquery ui, the events on it don't work any more!
It's totally strange that happens only on certain elements but I can't find a common point.
I have some buttons on which I want to change the background on hover:
- <div class="hidden" id="context">
- <div class="move up"><span></span></div>
- <div class="move down"><span></span></div>
- <div class="move left"><span></span></div>
- <div class="move right"><span></span></div>
- </div>
her's the css:
- div.move {
- position: absolute;
- height: 40px;
- width: 40px;
- -webkit-box-shadow: #333 0px -3px 1px inset, white 0px 2px 1px inset, rgba(0, 0, 0, 0.4) 0px 3px 5px;
- border-radius: 20px;
- }
- div.move span{
- -webkit-transition: opacity 0.1s linear;
- height: 40px;
- width: 40px;
- position:absolute;
- -webkit-box-shadow: #333 0px -3px 1px inset, white 0px 2px 1px inset;
- border-radius: 20px;
- }
- div.move span:hover{
- opacity: 0;
- }
- div.move.left span{
- background: url(images/left1.png) no-repeat;
- }
- div.move.left{
- background: url(images/left-hover.png) no-repeat;
- [...]
and finally the js:
- $('div.move.left').position({
- of: $('td.grid.current'),
- my: 'center center',
- at: 'left center',
- offset: '-40px 0',
- collision: 'none'
- });
Even if I use jquery events to add a class with "opacity:0" on hover it doesn't work! It doesn't take the event!
Does anyone have any solution?
UPGRADE: maybe i got it and seems to be a bug!!!
Once the app run it generates html in the #context container, creating main table and small tables for every td of the main one:
- <div class="" id="context">
- <div class="move up" style="top: -60px; left: 505px; "><span></span></div>
- <div class="move down" style="top: 780px; left: 505px; "><span></span></div>
- <div class="move left" style="top: 360px; left: -20px; "><span></span></div>
- <div class="move right" style="top: 360px; left: 1069px; "><span></span></div>
- <table class="grids" style="position: relative; top: -618px; left: -539px; ">
- <tbody>
- <tr class="gridsRow">
- <td class="grid current">
- <div class="id">0</div>
- <div class="gridTotal"></div>
- <div class="close"><span class="hover"></span></div>
- <table>
- <tbody>
- <tr class="cellsRow">
- <td class="cell current">
- <div class="id">0</div>
- <label>0</label>
- </td>
- [...]
- </div>
All the elements that have positions styled inline have been processed by the position() function of jquery ui. The main table table.grids is moved by this code:
- $('table.grids').position({
- my: 'left top',
- at: 'center center',
- of: $('#context'),
- offset: '-1064px -998px'
- });
Ok, the problem is this piece of code.
If i move table.grids using position() the events handling on the .move buttons is disabled
If I delete this code the problem disappear.
I think it's a sort of bug.
I thought that maybe the bug appear if you position() an element against a child of a another position()ed element. But the stranger is that if I position() any other element against td.grid.current the bug doesn't show up! it happens only with the .move buttons!
Here I give some insight about the app:
First I'll explain how my app works. It's a system i thought of to help me counting neurons on mouse brain slices colored with immuno-enzymatic reaction.On the screen you have a grid (td.grid) in which you put the number of cells. this grid is itself part of a bigger table (table.grids) that contains many smaller grids. Once one small grid is full i want to switch to the grids nearby using direction buttons (.move.up for example) that move away from the current grid (td.grid.current) to the next one.I used jquery ui position to fix the td.grid.current on the center of the page even if you resize it, by fixing the position of the main table (table.grids) with a certain offset to center on the grid. and then i used position() also to fix the buttons relatively to the current grid.
1