Javascript-triggered CSS effects

Question

I'm working on a small project where if the user enters the Konami code on a site, a filter is applied to every element (for now, will be better in the final version). Right now I have:

    <script type="text/javascript">
        var success = function() {
            var css = 'div { -webkit-filter: blur(10px); }',
                head = document.getElementsByTagName('head')[0],
                style = document.createElement('style');

            style.type = 'text/css';
            if (style.styleSheet){
                style.styleSheet.cssText = css;
            } else {
                style.appendChild(document.createTextNode(css));
            }
        }
        var konami = new Konami(success);
    </script>

and I'm using http://snaptortoise.com/konami-js/ which has successfully run when used with a redirect instead of a function (documentation says I can create a new Konami with the method shown above, or with a url string to be used as a redirect).

I've gotten javascript alert messages to show, but cannot implement this filter. What did I do wrong?

Blender · Accepted Answer · 2013-02-06 23:04:38Z

2

Keep the class in your stylesheet:

.blurred {
    -webkit-filter: blur(10px);
}

And then add it to your <body> tag:

var success = function() {
    document.body.className = 'blurred';
};

edited Feb 6, 2013 at 23:04

answered Feb 6, 2013 at 22:58

Blender

300k55 gold badges462 silver badges512 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Explosion Pills · Accepted Answer · 2013-02-06 22:59:56Z

2

You never append style to the head:

head.appendChild(style);

http://jsfiddle.net/ExplosionPIlls/2mTJf/

answered Feb 6, 2013 at 22:59

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Comments

earl3s · Accepted Answer · 2013-02-06 23:01:54Z

0

You need to add head.appendChild(style).

JS Fiddle http://jsfiddle.net/NMetj/

answered Feb 6, 2013 at 23:01

earl3s

2,3731 gold badge23 silver badges25 bronze badges

Collectives™ on Stack Overflow

Javascript-triggered CSS effects

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related