How to implement a BLINK tag in AngularJS

One of the features of early HTML that is so uncool that it’s so extremely cool now that it has taken epic proportions, is that much celebrated as well as hated BLINK tag…

Now, it disappeared from most implementations due to the massive criticism it received, In 1996 Jakob Nielsen even described the element as “simply evil” in his Alertbox column Top Ten Mistakes in Web Design.

Anyways, its back for the ones who think it could be a fun little thing to add anywhere, and now with AngularJS… let me just add, that I think it would be a horrible idea to put it in any website short of being a tribute website to horrible websites from the 80′s…


var blink = angular.module('blink', [])
    .directive('blink', function($timeout) {
    return {
        restrict: 'E',
        transclude: true,
        scope: {},
        controller: function($scope, $element) {
            function showElement() {
                $element.css("display", "inline");
                $timeout(hideElement, 1000);
            }

            function hideElement() {
                $element.css("display", "none");
                $timeout(showElement, 1000);
            }
            showElement();
        },
        template: '<span ng-transclude></span>',
        replace: true
    };
});​

Using it from HTML would be as simple as this...


<div ng-app="blink">
    <blink>Forward Thinking</blink>
</div>​

You can check out the JSFiddle here...
http://jsfiddle.net/qy7Bt/59/

The initial implementation was created by Søren Kyndi-Wiuff and it was then later refined to support a more mature version of AngularJS by Misko Hevery, both guys heavy-weight contributors to AngularJS... helped along the way by Mr. Ganaraj who was kind enough to point out and illustrate deprecated parts of the AngularJS...

Check out AngularJS if you haven't done so yet and you are in the process of working on HTML systems, this is how HTML would have been if it had been created for Applications...
angularjs.org

About these ads
Tagged , , ,

6 thoughts on “How to implement a BLINK tag in AngularJS

  1. [...] keyboard shortcuts to any element by adding an attribute like key=’ctrl-s’?  You miss the <blink> tag?  All these things and more are [...]

  2. carlosz says:

    Rather than using display, I think you should use visibility, since display will make other elements move to fill the space left by the blinking tag, see http://jsfiddle.net/qy7Bt/84/

  3. [...] shortcuts to any element by adding an attribute like key=’ctrl-s’?  You miss the <blink> tag?  All these things and more are [...]

  4. Ben says:

    I’ve enjoyed for simple text throbbers, ex: “loading…”

  5. Ben says:

    I’ve used for simple text throbbers, ex: “loading…”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 522 other followers

%d bloggers like this: