CODEWITHSUNDEEP
javascriptjquery
Dónal
Dónal

Reputation: 187499

delete table row with effect

On this page, if you click the unsubscribe button on the first row (Madonna), the rows beneath slide up reasonably nicely. But if you then delete the new first row (Radiohead), the image on the remaining row (U2) jumps unpleasantly to the left after the row moves into position. The function that's called to perform the table row deletion is:

SF.deleteRow = function(selector) {
    $(selector)
        .children('td, th')
        .animate({ paddingTop: 0, paddingBottom: 0 })
        .wrapInner('<div />')
        .children()
        .slideUp('slow', function() {
            $(this).closest('tr').remove();
        });
};

If I remove all the padding in the table cells, this problem disappears, but then I have no padding.....

Is there any way to fix this problem? Alternatively, is there another effect I can apply when deleting a table row that avoids this problem (I don't want the row to just disappear instantly when the Unsubscribe button is clicked).

Upvotes: 2

Views: 1453

Answers (3)

rlemon
rlemon

Reputation: 17666

Th​at so​lution se​ems aw​fully co​mplicated... wh​y no​t ju​st se​t the overflow of the container to "hidden" and shrink the height of the container...

Edit:: Thankyou @Derek for pointing out to me the border remains... Got me looking at my code again and noticed a but. The callback function should be $(this).remove(); and that is all.

see here for an example.

Upvotes: 1

MetalRain
MetalRain

Reputation: 226

The jump you mentioned happens because first column shrinks when longer text "Radiohead" is removed and shorter text "U2" is the only factor defining the cell width in the first column. This problem can be solved by having fixed column widths in your table.

Upvotes: 4

Yoram de Langen
Yoram de Langen

Reputation: 5499

I would suggest to make it with only div's and not with a table.. then u can do it easly like: 

<style>
    .row {
        float: left;
        width: 990px;
        overflow: hidden;
    }
        .row  .col {
            float: left;
            width: 490px;
        }
            .row  .col.first {
                width: 200px;
            }
            .row  .col.last {
                width: 300px;
            }

</style>

<script type="text/javascript">
    [...]
    SF.deleteRow = function(selector) {
        $(selector)
            .find('.row')
            .animate({ height: 0 },"fast", "linear", function() {
                $(this).remove();
            });
    };
    [...]
</script>

<div class="row even">
    <div class="col first">[....]</div>
    <div class="col">[....]</div>
    <div class="col last">[....]></div>
</div>
<div class="row odd">
    <div class="col first">[....]</div>
    <div class="col">[....]</div>
    <div class="col last">[....]></div>
</div>
<div class="row even">
    <div class="col first">[....]</div>
    <div class="col">[....]</div>
    <div class="col last">[....]></div>
</div>
<div class="row even">
    <div class="col first">[....]</div>
    <div class="col">[....]</div>
    <div class="col last">[....]></div>
</div>

It is just an example. Because of the overflow on the row class is hidden it will show nothing when the height is 0.

If you just wanna use a table it will be a little bit harder!

This answer is just a suggestion to use div's instead of table.. i also like to use css floats because its easier to make animations on elements then non-floated objects(is my opinion).

Upvotes: 2

Related Questions