Search code examples
javascriptcssunobtrusive-javascript

JavaScript: clicked link should disappear in a spectacular way


I've programmed a PHP/PostgreSQL/Oracle script for internal usage at my work, where links are displayed as light-blue "tags", which can also be hidden by clicking an "x" near them:

alt text

This works pretty well sofar and my colleagues are already impressed.

The CSS-appearance for the "tags" I have stolen from Stackoverflow (since my own CSS/JS skills are very limited and also Imitation is the sincerest form of flattery):

a.hide {
        color:#3E6D8E;
        background-color: #E0EAF1;
        border-bottom: 1px solid #3E6D8E;
        border-right: 1px solid #7F9FB6;
        padding: 3px 4px 3px 4px;
        margin: 2px 2px 2px 0;
        text-decoration: none;
        font-size: 90%;
        line-height: 2.4;
        white-space: nowrap;
}

a.hide:hover {
        background-color: #e7540c;
        color: #E0EAF1;
        border-bottom: 1px solid #A33B08;
        border-right: 1px solid #A33B08;
        text-decoration: none;
}

a.tag {
        color:#3E6D8E;
        background-color: #E0EAF1;
        border-bottom: 1px solid #3E6D8E;
        border-right: 1px solid #7F9FB6;
        padding: 3px 4px 3px 4px;
        margin: 2px 2px 2px 0;
        text-decoration: none;
        font-size: 90%;
        line-height: 2.4;
        white-space: nowrap;
}

a.tag:hover {
        background-color: #3E6D8E;
        color: #E0EAF1;
        border-bottom: 1px solid #37607D;
        border-right: 1px solid #37607D;
        text-decoration: none;
}

Now I would like to enhance my script by few JavaScript lines and make the "tags" disappear in an interesting way, when an "x" near them has been clicked by the user (the links should still work of course). Maybe make them fly up or maybe even explode? Does anybody have an idea here or can share a nice trick?

I'd prefer not to use jQuery, because I haven't learnt it yet.

Thank you and I hope for your creativity :-) Alex


Solution

  • A pure javascript fadeout effect would be (for non-IE browsers at the moment..)

    var hides = document.getElementsByClassName('hide');
    
    for (var i = 0 ; i < hides.length; i++)
    {
        hides[i].onclick = function(evt){
            var el = this.parentNode;
            el.style.opacity=1;
            var el_timeout = setInterval(function(){
                el.style.opacity -= 0.05;
                console.log(el.style.opacity);
              if (el.style.opacity <= 0.05)
              {
                  el.parentNode.removeChild(el);
                  clearInterval(el_timeout);
              }
            },20);
        }
    }
    

    demo: http://jsfiddle.net/gaby/AkA5C/

    I have wrapped the tag and button in a <span></span> so that you can easily target both.