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
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---