TR elements aren't really designed to function in this way, in addition
there are many known quirks when scripting tables. Unless you have a high
threshold for pain I would look at changing my html structure first. You
seem to have a lot of needless markup.
<div id="zebra">
<div class="entry header">
<span class="name">Name</span>
<span class="place">Place</span>
<span class="number">Number</span>
</div>
<div class="entry">
<span class="name">H. Potter</span>
<span class="place">978564</span>
<span class="number">029748466</span>
</div>
.....
</div>
haven't looked at the zebra stripe code but you code. I'm assuming it has
alternating colors and mouseenter/mouseleave events for rollover effect.
you could 'hack' it with a modulus.
<script>
$('zebra').getElements('div.entry').each(function(el,idx){
var bgcolor = (idx % 2) ? [ '#FFFFFF', '#F3F3F3'] : [ '#DDE4F1',
'#CCD3DF' ];
el.addEvents({
'mouseenter' : function(color){
this.setStyle('background-color',color }.bind(el,bgcolor[1]),
'mouseleave' : function(color){
this.setStyle('background-color',color ); }.bind(el, bgcolor[0])
});
});
</script>
The styling on your span tag just need a little adjustment to fit right.
floats display-inline... something.
The big difference to note with this change in structure is the div.entry
while contained inside #zebra are not part of the whole. tr elements are a
required part of a table. They function completely different especially when
trying to do effects.
On Fri, Jun 26, 2009 at 4:39 PM, TimeImp <time...@live.com> wrote:
>
> Hello everyone,
>
> I am currently building a website for a friend and require some
> mootools help. What I have is a zebra table but require the use of the
> Animated Ajax Deletion script from davidwalsh.name . It all works
> fine, however my problem is that when it slides out, the row shrinks
> to the left then slides out. I am wondering if it is possible to
> delete the whole row with out any part of it shrinking.
>
> JS:
>
> $$('.done').addEvent('click',function() {
> var parent =
> this.getParent('td').getParent('tr');
> var request = new Request({
> url:
> '/core/subjects/functions/deleterow.php',
> link: 'chain',
> method: 'get',
> onRequest: function() {
> new
> Fx.Tween(parent,{
> duration:150
>
> }).start('background-color', '#fb6c6c');
> },
> onSuccess: function() {
> new
> Fx.Slide(parent,{
>
> duration:1000,
> onComplete:
> function() {
>
> parent.destroy();
> }
> }).slideOut();
> }
> }).send();
> });
>
>
> HTML:
>
> <table class="zebra" width="100%" border="0" cellpadding="0"
> cellspacing="0">
> <tr>
> <th><ol>
> <li>Name</li>
> </ol></th>
> <th><ol>
> <li>Place</li>
> </ol></th>
> <th><ol>
> <li>Number</li>
> </ol></th>
> </tr>
> <tr class="even">
> <td><ol>
> <li>J Smith</li>
> </ol></td>
> <td><ol>
> <li>123456</li>
> </ol></td>
> <td><ol>
> <li><a class="done" href="#">029748466</a></li>
> </ol></td>
> </tr>
> <tr>
> <td><ol>
> <li>W. Dory</li>
> </ol></td>
> <td><ol>
> <li>456786</li>
> </ol></td>
> <td><ol>
> <li><a class="done" href="#">029748466</a></li>
> </ol></td>
> </tr>
> <tr>
> <td><ol>
> <li>S. Jobs</li>
> </ol></td>
> <td><ol>
> <li>245786</li>
> </ol></td>
> <td><ol>
> <li><a class="done" href="#">029748466</a></li>
> </ol></td>
> </tr>
> <tr>
> <td><ol>
> <li>B. Gates</li>
> </ol></td>
> <td><ol>
> <li>56756678</li>
> </ol></td>
> <td><ol>
> <li><a class="done" href="#">029748466</a></li>
> </ol></td>
> </tr>
> <tr>
> <td><ol>
> <li>M. yself</li>
> </ol></td>
> <td><ol>
> <li>5673456</li>
> </ol></td>
> <td><ol>
> <li><a class="done" href="#">029748466</a></li>
> </ol></td>
> </tr>
> <tr>
> <td><ol>
> <li>H. Potter</li>
> </ol></td>
> <td><ol>
> <li>978564</li>
> </ol></td>
> <td><ol>
> <li><a class="done" href="#">029748466</a></li>
> </ol></td>
> </tr>
> </table>
>
> When they click on the ph. number, it indicates that they have called
> them, hence the requirement of the deletion script.
> [HTML data has been modified]
> Any help would be much appreciated...
