jakiestfu / blur.js Goto Github PK

Blur.js doesn't work with MooTools that I use for a menu

On Firefox it work very good but on Google Chrome it give me an exception "cannot access local image", How to fix it ?

Do you feel like adding the functionality to blur all html content, including text, inline images and videos is appropriate for this script?

If so, got any ideas?

I just noticed that blur.js doesn't work on a site that I built if you're viewing it in iOS's Private Browsing Mode. What's worse is that it actually breaks all following JS, but doesn't throw any errors. Any idea if there's something I can do to work around this?

Demo (all files locally) loaded in latest Chrome v43 gives JS error "Cannot access local image". Fx works fine.

Chrome is completely blocking the script, if you want to access the target also as source. Firefox instead still shows an error, with an information about JS access to file://.

Any fix?

Hi,

do yo think it would be possible to get blur.js working together with vegas.js (https://github.com/jaysalvat/vegas) or do you think it's impossible?

I'm want't to add blur.js to this template: http://stephenmuscat.com/twilli_air/1.3.0/

Any ideas?

Many greets!

Could you add a LICENSE file so people can be sure to use it? Thanks!

This might help you if you are unsure: https://github.com/blog/1530-choosing-an-open-source-license

I am finding that attempting to blur multiple images in direct succession (like in a jQuery.each() function) results in the first image failing. Since this is the case, it would be very useful to have an onFinished() method for the plugin to provide some form of notification as to when it is ok to blur another image. Any thoughts?

Hello,
is there a way to have the draggable background behavior
but without being able to drag the div ?

This would be awesome helpful if you have a fullscreen background image but want to keep things look transparent when resizing the page.

Best Regards
Marc

Hi so I have a page with many layered divs, and I would them ALL to be blurred my a floating object. However body does nothing, and as I proceed through all the div's classes that are under the floating blurring div, only the ONE class that I list is blurred.

Should I assign a common cass to all elements or list al the classes in the target field?

On line 37: netscape is not defined. Causes an alert box with the error to appear.

When running blurjs, there is noticeable lag. Using Web Worker to transform image would fix the lag :)

If I use code:

.main {
    display: block;
    margin: 0 auto;
    width: 1000px;
    background: url(../images/bg.jpg) no-repeat;
    background-attachment: fixed;
    background-position: top center;
}

            $('.textbox').blurjs({
            source: '.main',
            radius: 20,
            overlay: 'rgba(255,255,250,0.4)'
            }); 

blur.js incorrectly calculates the background-position: top center; position of the .textbox 's blured background. I have blured window not at the same location then background of .main

Blur background position depends on the width of the browser window.

It's not working on phoneap 3.3. Is it because it uses webkit-filter and phnehap doesnt spport that?

i'm confused .... i don't understand what is meant by target and source. Also, i see "body" listed for source in all the demos. I don't use body.

I just want to blur the background for a div that has one or more background images assigned.
e.g.

<div id="mydiv">this div has 2 layered background-image(s) that i want blurred </div>

$("#mydiv".blurjs(); // blur it!

This doesn't work. Please clarify, thanks.

hi, i just try and follow all instruction, but when i insert the selector to target i found this
, how i can fixed this, thank's

Getting the following error in the chrome javascript console

$('#container').blurjs({source: 'body',radius: 10});
[

It would be nice to use blur.js when there is a background video. Like on my site.

How can I have multiple targets for blurring?

Not an issue, more of a feature request. Would it be possible to use a direct image src path as the source for the blur?

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?

Hi.
I want use smth like
$('#blur-target').blurjs({
source: '#blur-source',
radius: 20
});

$('#blur-target2').blurjs({
    source: '#blur-source2',
    radius: 20
});

But only last div is blurred.
How make it work with 2 diffrent sources?

Uncaught TypeError: Cannot read property 'replace' of undefined

Going off the rough explanation from the readme, I tried my luck and tried to create a small demo. It turned into this:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="jquery-1.11.1.js"></script>
        <script type="text/javascript" src="blur.js"></script>
        <style>
            body {
                background-image: url("http://localhost:8080/cdn/theme/images/bg.jpg");
                background-repeat: no-repeat;
                background-position: center center;
                background-attachment: fixed;
                height: 100%;
                width: 100%;
                color: white;
            }

            .block {
                height: 250px;
                position: absolute;
                top: 200px;
                left: 100px;
                right: 100px;
                background: rgba(0,0,0,0.6);
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div class="block">ovo</div>
        </div>
        <script>
            jQuery(function($){
                $(".block").blurjs({
                    //source: 'body',
                    radius: 5,
                    overlay: 'rgba(255,255,255,0.4)'
                });
            });
        </script>
    </body>
</html>

Upon launching, I got the "cannot access image" error. On further reading, it was due to the netscape object not being defined.

What am I doing wrong here - or, what exactly can I do to fix it?

Can you help me？

http://tobe.moe/

Hi,

I LOOOOVE this script, and this is not an issue at all. I just need this for a slider, and currently I have to fade the whole slider (which leaves a blank space for like .8s) - I'd like to be able to change the image/source by like fading them? Is this, or will this be possible? It would be hugely awesome!

Thanks you so much 👍

please add bower.json and register it in bower

I've got this script working fine, but it's causing some JS errors if I try to minify it. Any chance you could provide a minified version?

Hi,

I really want to use your script in a Wordpress theme I am developing, but calling the blurjs() function on my desired object, I get the following error in my console.

GET http://{PATH}/one 404 (Not Found) blur.js:279
(anonymous function) blur.js:279
x.extend.each jquery.js:3
x.fn.x.each jquery.js:3
jQuery.fn.blurjs blur.js:193
(anonymous function) core.blur.js:2
c jquery.js:3
p.fireWith jquery.js:3
x.extend.ready jquery.js:3

Do you have any idea what I am doing wrong?

Thank in advance,

Elliott

hi, i wanna know why the code below is like this:
if(options.overlay != false) {
ctx.beginPath();
ctx.rect(0, 0, tempImg.width, tempImg.width);
ctx.fillStyle = options.overlay;
ctx.fill();
}
my point is that why u draw a rectrangle using the img'width to make it a squre?

On chrome when I scroll down the target elements don't get new blurred images till the mouse hover them, but when I open the library website blurjs fixed background example It works on the same browser, why do I get redrawing issue with blurjs?
JS:
$('.panel').blurjs({
radius: 2,
overlay: 'rgba(255,255,255,0.4)',
draggable: true
});
CSS:
body{
background: url('../images/1.png');
background-position: top left;
background-repeat: repeat;
background-attachment: fixed;
}

For default the image is much larger than the screen, so I added background-size: 100% 100% in order to only fit the screen, but when I do that it doesn't seem to update the blurjs div so it blurs the image without changing the image size

When I use blur.js on a page and use the Chrome inspector, the inspector locks up and if left long enough, it will crash. Appears to only happen in Chrome, but I can successfully reproduce it on several machines.

Hi, its possible to blur an base64 based image?

thanks

Want to use the plugin but don't want to step on any toes.

thanks