nbartlomiej/foggy

jQuery plugin for blurring page elements

foggy's Issues

Can't pass var into options.

Hi there! Great script this one. But i'm having some problems with vars.

Heres my code:

var blurTotal = Math.abs(parseInt( ( 90 - 100 ) ) );

$('.desvendar').foggy({
blurRadius: blurTotal ,
opacity: 0.8,
cssFilterSupport: true
});

I want that the blurRadius print the number 10, but its printing the word blutTotal.

Any ideas why that?

CDN

It would be nice if this were available via CDNjs or another CDN

Disable background

Hello

Is it possible to disable the links that is in the blurred part?

Thank you

Button Offset

Hello,

I added a margin above, above my button, but the problem is that there is a repercussion at the end of the DIV

My button arrives on my footer and I want to make it disappear at that moment.

Do you have an idea?

Thank you

performance issue

Thanks for adding the reset so quickly.

However I do realize there is a 3-4 seconds delay if the DOM gets fancy.

Why is so lazy?

I'm using this options but my browser stop working for about 1 or 2 seconds when I ran.

$('.container').foggy({
    blurRadius: 2,          // In pixels.
    opacity: 0.8,           // Falls back to a filter for IE.
    cssFilterSupport: true  // Use "-webkit-filter" where available.
});

My question is: is this normal or I'm doing something wrong?

window focus binding hijacked

I did a foggy on a fullscreen div on window.blur. on window.focus it should have foggy(false) but the focus event never gets triggered. I suspect foggy is hijacking the focus and stopping the bubble somewhere

Can't target an img tag directly in IE8

While targeting img tag it wouldn't work in IE8. Only option is to wrap img in wrapper element, which might result in unexpected behaviour.

blur effect with duration

Hi,

Really liking the plugin, is there a way to gradually fade the blur effect in.

Im using this to blur the background of the entire page, when an event happens, it seems a bit "instant" and visually breaks the effect im trying to create of it being smoothly transitioned in.

Cheers

Erase table style

When using foggy on a table, the table style is not working anymore.
You can see that td have been collapsed, and header became out of the table

Foggy in NPM

Hey @nbartlomiej,

I noticed that you have a package.json in the project, but foggy is nowhere to be found on npm. Is it under a different name there?

Not working in IE 8

bug (with fix): foggy for responsive web pages

Found out foggy had problems with responsive web pages.
When the target to blur had right/left margins the foggy was in absolute position comparing to the whole width, resulting in positioning the blurred div, not on top of the target element, but to left of it.

For example:
Try airbnb.com, using Dev Tools load the foggy and run foggy for all $('body').children(). You will see the issue on the footer and some more elements (attached an img).

The Fix:
in BlurPass function, add 'width: 100%' to the css.

DOM event binding lost after Foggy is applied and removed

Hi, here is a weird issue for the foggy plugin.

When I bind a click event using jquery binding, after I apply the foggy and then remove the effect, the event is gone and the element is no longer clickable.

For the source code I uploaded,

Alert Button and Button with onclick is working on page load.
After I Apply Foggy Blur/Remove Foggy Blur, the Alert Button is not working any more.

I will email the source code.

When blurRadius is set to zero, content is not reverted to its original state.

For browsers that do support the blur filter, when blurRadius is set to zero, the filter is set to 0px, and in some rare cases, this causes some instability.

For browsers that don't support the blur filter, when blurRadius is set to zero, the relative divs and absolute divs are not cleaned up or removed from the DOM.

A fix for both of these was included in pull request #17.

[enhancement] Add missing bower.json.

Hey, maintainer(s) of nbartlomiej/foggy!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library nbartlomiej/foggy is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "nbartlomiej/foggy",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Support for disabling / toggling the blur effect

As of now there's no easy way to disable the fog effect.

It should be possible to e.g. call foggy with "false"

$('selector').foggy(false)

This should bring back the original, unblurred content (and the DOM should look exactly the same as before foggy's actions).

Firefox issue

Great plugin, saved me some headaches!

Currently I'm having a problem with firefox and getting the blur to fire. The test page is located here: http://loiseau-noir.com/seb/home.html

If you click on the black circle, it opens up a new menu, and the image in the background should blur. In Chrome it works perfectly, however in Firefox no blur event fires.

Is it due to conflicting plugins or something else?

Thanks!