Loading... Cancel

Javascript: Delete child element with Effect.Fade (Effect.Fade and Element.remove) R

July 23rd, 2006

hi all,
let’s think you have a list of rows… when user click on delete button it sends a Ajax post request on server… after receiving JSON or XML response… it display a visual effect of destroying that row…
using Script.aculo.us you can make it with in a few seconds… new Effect.Fade(…) right!!!
but i think you DOM tree will not get that advantage as you are giving to your user… user could see visual disappearance of some object… but it is actually not deleting from DOM tree… you just hidding them… !!!

though you can use element.removeChid( childElement ) … but it is not much interactive approach as you want to show a visiual effect….

so here is my code snap… hope you will enjoy… and your visitor will happy as well as DOM tree will happy…

deleteElement: function(divId, options) {
try {
var element = $(divId);
var oldOpacity = element.getInlineOpacity();
var options = Object.extend({
from: element.getOpacity() || 1.0,
to:   0.0,
afterFinishInternal: function(effect) {
if(effect.options.to!=0) return;
var rootElement = $(BnChat.userListDiv);
rootElement.removeChild(effect.element);
effect.element.setStyle({opacity: oldOpacity});
}}, arguments[1] || {});
return new Effect.Opacity(element,options);
}
catch(e) {
// goes your exception handling
}
},

Total 2 responses found

Close
  •   Administrator

    Thu Jan 70 06:33

    hi harry,
    thank you for visiting my blog.
    this bunch of code is depending on script.aculo.us javascript library. if you already have script.aculo.us you can include this function in your own page and u can start using it...
    best regards,
    nhm tanveer hossain khan (hasan)

  •   Harry

    Thu Jan 70 06:33

    How will I use this code snap in my javascript? Is it purely javascript or it has some server side call ??
    I have this table and I want to delete a row from that table, but I want to have fading effect. How can I use this code ?