Problem using blur.js on bootstrap navbar in Wordpress

[Roejkum]

Hi

I'm trying to integrate the blur.js on my bootstrap navbar-default in a wordpress theme I'm developing (http://itu.dk/people/mron/wordpress/). I want everything behind the navbar to be blurred as you scroll down the site. I should probably mention that I'm fairly new to programming.

I have linked to the file on my server from functions.php, and included the following code in my header.php, but within the body tag:

<script>
        $(document).ready( function() {
            $('.navbar-default').blurjs({
                source: 'body',
                radius: 30,
            });
        });
</script>

It isn't working, and I don't know why. Have I done anything wrong?

[redpandatronicsuk]

Have a look at this: http://abduzeedo.com/ios7-frosted-glass-effect-html-5-and-javascript

[Roejkum]

Thanks! However there seems to be some problems with that solution (when resizing the window). Also I can't get that working either. Would it be impossible to implement the blur.js as I'm describing?