Hi, I have a sortable list where the list items flicker around constantly when you try and move a list item above them. If drop into the bottom of the list it works fine, try the same list item above and it goes crazy. This happens in both firefox and ie7. I'm going to upgrade my version of both prototype and scriptaculous to see if this fixes the problem.
Just to let you know, I have the same js files running an older version where this problem just doesn't exist. The only difference is in my CSS code (of which I am pasting segments for comparison) and also a screenshot of both versions. I'd appreciate some help, I have a feeling it's something to do with the floats inside the <li/> items and setting the height, I thought I could overcome this by fixing the height but apparently not. Some help would be appreciated! Version 0.2 of my code with screenshot: http://www.meridimus.com/wp-content/uploads/flickering_02.gif Screenshot can be found here: XHTML: <div id="body"> <h1>Edit Pages</h1> <div style="float: right; width: 360px; margin: 0; padding: 0;"> <img src="gfx/help/slider.gif" align="left" style="padding: 0 5px 0 0;" /><p style="margin-top: 0;">Re-order the menu by dragging the most prominent choices to the top.</p> <img src="gfx/help/page.gif" align="left" style="padding: 0 5px 0 0;" /><p>To 'edit' page content press the corresponding page icon.</p> <img src="gfx/help/delete.gif" align="left" style="padding: 0 5px 0 0;" /><p>To delete a page you may press the corresponding cross icon.</p> <img src="gfx/help/dependents.gif" align="left" style="padding: 0 5px 0 0;" /><p>If a page name has a number afterwards that is the number of dependent pages.</p> </div> <div style="float: left;"> <div id="update" style="display:none;">Saving Order...</div> <ul id="order"> <li id='order_1'><a href='addpage.php?do=edit&id=1' class='edit' title='Edit this page content'><span>amend</span></a><a href='#' onclick="javascript:confirmDelete(1)" class='delete' title='Delete this page and all dependents'><span>delete</span></a> Homepage</li> <li id='order_3'><a href='addpage.php?do=edit&id=3' class='edit' title='Edit this page content'><span>amend</span></a><a href='#' onclick="javascript:confirmDelete(3)" class='delete' title='Delete this page and all dependents'><span>delete</span></a> About Us</li> <li id='order_5'><a href='addpage.php?do=edit&id=5' class='edit' title='Edit this page content'><span>amend</span></a><a href='#' onclick="javascript:confirmDelete(5)" class='delete' title='Delete this page and all dependents'><span>delete</span></a> Services</li> <li id='order_2'><a href='addpage.php?do=edit&id=2' class='edit' title='Edit this page content'><span>amend</span></a><a href='#' onclick="javascript:confirmDelete(2)" class='delete' title='Delete this page and all dependents'><span>delete</span></a> Contact Us</li> </ul> <p> </p> <ul id="active"> <li id='order_4'><a href='addpage.php?do=edit&id=4' class='edit' title='Edit this page content'><span>amend</span></a><a href='#' onclick="javascript:confirmDelete(4)" class='delete' title='Delete this page and all dependents'><span>delete</span></a> Products <a href='/WindowsETC/web-content/editpage.php?do=subsort&id=4' class='subsort'><abbr title='6 Dependent Pages'>6</abbr></a></li> </ul> <script type="text/javascript"> function updateOrder() { var options = { method : 'post', parameters : Sortable.serialize('order'), onComplete : function(request) { /*new Effect.Highlight('order'); return false;*/ } }; new Ajax.Request('order.ajax.php', options); } function updateActive() { var options = { method : 'post', parameters : Sortable.serialize('active'), onComplete : function(request) { /*new Effect.Highlight('active'); return false;*/ } }; new Ajax.Request('order.ajax.php', options); } Sortable.create('order', { onUpdate : updateOrder, dropOnEmpty:true, constraint:false, containment:["order","active"] }); Sortable.create('active', { onUpdate : updateActive, dropOnEmpty:true, constraint:false, containment:["order","active"] }); </script> </div> ################################################################ CSS (0.2): #order, #active { list-style-type : none; margin : 0; z-index: 1; font-size: 10pt; } #order li { clear: both; cursor: s-resize; background: url(../gfx/orderoff.gif) no-repeat #963; color: #FFF; background-position: 0px 7px; width: 373px; height: 25px; padding: 7px 3px 3px 20px; margin : 1px 0 1px 0; z-index: 2; } #active li { clear: both; cursor: s-resize; background: url(../gfx/back.gif) repeat #963; color: #FFF; background-position: 0px 7px; width: 373px; height: 25px; padding: 7px 3px 3px 20px; margin : 1px 0 1px 0; z-index: 2; } #order, #active { margin: 0; padding: 32px 0 0 0; } #order { background: url('../gfx/enabled.gif') no-repeat top left; } #active { background: url('../gfx/not-enabled.gif') no-repeat top left; } #order a.edit, #active a.edit { color: #FFF; text-decoration: none; background: url(../gfx/edit.gif) no-repeat; background-position: top left; display: block; float: left; height: 20px; width: 20px; margin: 0; padding: 0; } #order a.subsort, #active a.subsort { color: #000; text-decoration: none; display: block; background: url('../gfx/subpage.gif') top right #FFF no-repeat ! important; height: 15px; font-size: 8pt; float: right; text-align: center; margin: -13px 10px 0 6px; padding: 0 4px 0 3px; border-bottom: 1px solid #000; } #order a.delete, #active a.delete { color: #FFF; text-decoration: none; background: url(../gfx/delete.gif) no-repeat; background-position: top left; display: block; float: left; height: 20px; width: 20px; margin: 0 6px 0 0; padding: 0; } #order a span, #active a span { display: none; } #order li:hover, #active li:hover { background: url(../gfx/order.gif) no-repeat #7E5429; color: #FFF; background-position: 0px 7px; width: 373px; height: 25px; padding: 7px 3px 3px 20px; } ################################################################ Version 0.3 with screenshot: Screenshot can be found here: http://www.meridimus.com/wp-content/uploads/flickering_03.gif XHTML: <div id="order"> <h2>Menu Pages</h2> <ul class="menu-pages" id="menu_pages"> <li id='order_1'><p>Homepage</p><a href='addpage.php?do=edit&id=1' class='edit-page' title="Edit 'Homepage' content">Edit Page</a><a href='#' class='locked' title="'Homepage' is locked">Page Locked</a></li> <li id='order_2'><p>Form Tests</p><a href='addpage.php?do=edit&id=2' class='edit-page' title="Edit 'Form Tests' content">Edit Page</a><a href='#' class='delete-page' title="Delete 'Form Tests'">Delete Page</a></li> </ul> <h2>Non-Menu Pages</h2> <ul class="non-menu-pages" id="non_menu_pages"> <li id='order_4'><a href='#' class='sub- pages'>2 <span>Sub-Pages </span></a><p>Error Documents</p><a href='addpage.php?do=edit&id=4' class='edit-page' title="Edit 'Error Documents' content">Edit Page</a><a href='#' class='locked' title="'Error Documents' is locked">Page Locked</a></li> </ul> <h2>Disabled Pages</h2> <ul class="disabled-pages" id="disabled_pages"> <li id='order_7'><p>Test Face</p><a href='addpage.php?do=edit&id=7' class='edit-page' title="Edit 'Test Face' content">Edit Page</a><a href='#' class='delete-page' title="Delete 'Test Face'">Delete Page</a></li> </ul> <script type="text/javascript"> function update_menu_pages() { var options = { method : 'post', parameters : Sortable.serialize('menu_pages') }; new Ajax.Request('editpage.php?do=ajax- pagesort&type=t_menu_pages', options); } function update_non_menu_pages() { var options = { method : 'post', parameters : Sortable.serialize('non_menu_pages') }; new Ajax.Request('editpage.php?do=ajax- pagesort&type=t_non_menu_pages', options); } function update_disabled_pages() { var options = { method : 'post', parameters : Sortable.serialize('disabled_pages') }; new Ajax.Request('editpage.php?do=ajax- pagesort&type=t_disabled_pages', options); } Sortable.create('menu_pages', { onUpdate : update_menu_pages, dropOnEmpty:true, constraint:false, containment: ["menu_pages","non_menu_pages","disabled_pages"] }); Sortable.create('non_menu_pages', { onUpdate : update_non_menu_pages, dropOnEmpty:true, constraint:false, containment: ["menu_pages","non_menu_pages","disabled_pages"] }); Sortable.create('disabled_pages', { onUpdate : update_disabled_pages, dropOnEmpty:true, constraint:false, containment: ["menu_pages","non_menu_pages","disabled_pages"] }); </script> </div> ################################################################ CSS (0.3): #order { clear: both; padding: 8px 0 0 0; } #order ul { float: left; width: 256px; margin: 0; padding: 58px 0 20px; list-style: none; } #order h2 { display: none; } #order ul li { padding: 7px; height: 16px; margin: 0 0 1px; cursor: move; font-size: 10pt; color: #666; } #order ul li p { float: left; padding: 0; margin: 0; } #order ul.non-menu-pages, #order ul.disabled-pages { margin: 0 0 0 8px; } #order ul.menu-pages { background: url('../gfx/menu_pages.gif') no- repeat top left #FFF; } #order ul.non-menu-pages { background: url('../gfx/ non_menu_pages.gif') no-repeat top left #FFF; } #order ul.disabled-pages { background: url('../gfx/ disabled_pages.gif') no-repeat top left #FFF; } #order ul.menu-pages li { background: #E7EBF4; } #order ul.non-menu-pages li { background: #EAF4CA; } #order ul.disabled-pages li { background: #FFDECC; } #order ul li a.sub-pages { height: 16px; float: left; display: block; padding: 7px 10px; margin: -7px 10px -7px -7px; font-weight: bold; border-right: 1px solid #FFF; } #order ul li a.sub-pages span { display: none; } #order ul.menu-pages li a.sub-pages { background: #72A6D6; } #order ul.non-menu-pages li a.sub-pages { background: #C2E167; } #order ul.disabled-pages li a.sub-pages { background: #FF8647; } #order ul li a.delete-page, #order ul li a.edit-page, #order ul li a.locked { width: 20px; height: 15px; float: right; display: block; text-indent: -9999px; } #order ul li a.delete-page { background: url(../gfx/icons/ delete_page.gif) no-repeat top right; } #order ul li a.edit-page { background: url(../gfx/icons/ edit_page.gif) no-repeat top right; } #order ul li a.locked { background: url(../gfx/icons/16-security- lock.png) no-repeat top right; } --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
