I'm reposting this with a new subject and description as I've
identified the problem is with Sortable.create().
I have a container, empty at document load time, to which I
dynamically add DIV children, and each time then re-call
Sortable.create() on the container. In IE, when this call is made, the
styles on the *new* DIV just added suddenly disappear. However no
error is thrown and the sortable succeeds as expected. Even weirder,
as soon as I drag the just-added DIV, the styles re-render correctly
and the bug is gone until the next time a DIV is added.
This is with Scriptaculous 1.8.0, Prototype 1.6.0, IE 7.
The added DIV itself contains 3 DIVs. Text styling is unaffected, but
oddly, of the 3 child DIVs, one stays visible with its contained text,
and the other 2 are invisible, even though one of those also contains
text ("x" indicating this is a delete box).
Hmmm... the two that become invisble both have a cursor style rule
applied. One of them, the delete box, has an onclick handler attached
*before* being attached to the document, and the other is the one used
as the drag handle.
Any thoughts are appreciated.
-Jason Boyd
Here's all the code that's relevant:
/* javascript code */
var playlistItem = $(document.createElement('div'));
playlistItem.id = params.mediaID;
playlistItem.addClassName('playlistItem');
var dragger = $(document.createElement('div'));
dragger.addClassName('playlistDragger');
var title = $(document.createElement('div'));
title.addClassName('playlistItemTitle');
title.update(params.mediaTitle);
title.onclick = function() {
PopupPlayer.playItem(params);
}
var metaData = $(document.createElement('div'));
metaData.addClassName('playlistItemMetaData');
metaData.update("Artist, YYY, ...");
var deleteButton = $(document.createElement('div'));
deleteButton.addClassName('deleteButton');
deleteButton.update('x');
deleteButton.onclick = function() {
PopupPlayer.removeItem(playlistItem.id);
}
playlistItem.appendChild(dragger);
playlistItem.appendChild(deleteButton);
playlistItem.appendChild(title);
playlistItem.appendChild(metaData);
$('playlist').appendChild(playlistItem);
// setting timeout to confirm styles only disappear when
Sortable.create() is called
setTimeout(function() {
Sortable.create('playlist', {
tag:'div',
only:'playlistItem',
handle:'playlistDragger'
});
}, 1000);
/* and the styles, contained in the HEAD of the page */
#playlist {
float: right;
width: 250px;
height: 400px;
border: 1px solid #dddddd;
}
.playlistItem {
background-color: white;
border: 1px solid #aaaaaa;
margin: 5px;
min-height: 30px;
overflow: auto;
font-variant: small-caps;
}
.playlistItemTitle {
cursor: pointer;
color: maroon;
font-weight: bold;
}
.playlistItemMetaData {
font-size: smaller;
color: #aaaaaa;
}
.playlistDragger {
cursor: move;
height:50px;
margin-right: 5px;
width:15px;
float:left;
background-color:#eeeeee;
}
.deleteButton {
cursor: pointer;
font-size: xx-small;
margin: 3px;
float: right;
width: 10;
height: 10;
color: #cccccc;
border: 1px solid #cccccc;
text-align: center;
vertical-align: middle;
}
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Spinoffs" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
