0

How do I apply these css to the body with my current javascript code

-webkit-filter: blur(20px);
-moz-filter: blur(15px);
-o-filter: blur(15px);
-ms-filter: blur(15px);
filter: blur(15px);
opacity: 0.95;

Here is my javascript

<script>
    $("a:nth-child(4)").click(function () {
        $(".artists").animate({width:'toggle'},500);                 
});
</script>
1
  • 1
    body as in <body> tag? and when? onclick of a:nth-child(4)? Commented Sep 28, 2013 at 5:15

3 Answers 3

4

Add a class for this and then apply it on click

CSS

.urClass{
  -webkit-filter: blur(20px);
  -moz-filter: blur(15px);
  -o-filter: blur(15px);
  -ms-filter: blur(15px);
  filter: blur(15px);
  opacity: 0.95;
}

JS

$("a:nth-child(4)").click(function () {
    $(".artists").animate({width:'toggle'},500);
    $('body').addClass('urClass');                 
});
Sign up to request clarification or add additional context in comments.

4 Comments

and how do you remove the class on reclick?
@MichaelStClair use a toggle.
@MichaelStClair by $('body').toggleClass('urClass');
the way to close it, and the original button are not blurred
1

better to just use .addClass even if you have 1 or more. It's more maintainable and readable.

If you really have the urge to do multiple css props then use

$("a:nth-child(4)").click(function () {
    $(".artists").animate({width:'toggle'},500);
    $('body').css({
                 '-webkit-filter': 'blur(20px)', 
                 '-moz-filter': 'blur(15px)', 
                 '-o-filter: blur(15px)', 
                 '-ms-filter': 'blur(15px)', 
                 'filter': 'blur(15px)', 
                 'opacity': '0.95'
                 });               
});

Comments

0

If you want to do it without jQuery:

<script>
    window.onload = function() {
        var anchors = document.getElementsByTagName('a');
        for(var i = 0; i < anchors.length; i++) {
            var anchor = anchors[i];
            anchor.onclick = function() {
                alert('ho ho ho');
            }
        }
    }
</script>

And to do it without jQuery, and only on a specific class (ex: hohoho):

<script>
    window.onload = function() {
        var anchors = document.getElementsByTagName('a');
        for(var i = 0; i < anchors.length; i++) {
            var anchor = anchors[i];
            if(/\bhohoho\b/).match(anchor.className)) {
                anchor.onclick = function() {
                    alert('ho ho ho');
                }
            }
        }
    }
</script>
If you are okay with using jQuery, then you can do this for all anchors:

<script>
    $(document).ready(function() {
        $('a').click(function() {
            alert('ho ho ho');
        });
    });
</script>

And this jQuery snippet to only apply it to anchors with a specific class:

<script>
    $(document).ready(function() {
        $('a.hohoho').click(function() {
            alert('ho ho ho');
        });
    });
</script>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.