https://github.com/andywer/jquery-dim-background

jQuery plugin to dim the current page except for some user-defined top elements.
https://github.com/andywer/jquery-dim-background

Last synced: 8 months ago
JSON representation

jQuery plugin to dim the current page except for some user-defined top elements.

• Host: GitHub
• URL: https://github.com/andywer/jquery-dim-background
• Owner: andywer
• License: mit
• Created: 2013-05-15T10:39:03.000Z (about 13 years ago)
• Default Branch: master
• Last Pushed: 2017-04-01T15:46:56.000Z (about 9 years ago)
• Last Synced: 2024-10-30T08:03:47.480Z (over 1 year ago)
• Language: JavaScript
• Homepage: http://andywer.github.io/jquery-dim-background/demo/basic.html
• Size: 5.85 MB
• Stars: 44
• Watchers: 4
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

          
jquery-dim-background

=====================

[![Build Status](https://travis-ci.org/andywer/jquery-dim-background.svg?branch=master)](https://travis-ci.org/andywer/jquery-dim-background) [![Bower version](https://badge.fury.io/bo/jquery-dim-background.svg)](http://badge.fury.io/bo/jquery-dim-background)

 [![Coverage Status](https://img.shields.io/coveralls/andywer/jquery-dim-background.svg)](https://coveralls.io/r/andywer/jquery-dim-background?branch=master)

jQuery plugin to dim the current page except for some user-defined top elements.

Usage

-----

Include the script in your website first. Add this script tag after your jQuery inclusion.

```html

```

Usage is simple. You can dim your website, but keep some elements on top of the curtain:

```html

    $('.myElements').dimBackground();

```

To switch back to normal:

```html

    $('.myElements').undim();

    // - or -

    $.undim();

```

You can also provide a callback function that is called when the animation completes and you can overwrite default options:

(You may find the available options in the `jquery.dim-background.js` file. Have a look at `$.fn.dimBackground.defaults`)

```html

    $('.myElements').dimBackground({

        darkness : 0.8            // 0: no dimming, 1: completely black

    }, function() {

        // do something

    });

```

Demo

----

Have a look at a [basic example](http://andywer.github.io/jquery-dim-background/demo/basic.html) that shows what this plugin does.

License

-------

This plugin is published under the MIT license. See [license](https://raw.github.com/andywer/jquery-dim-background/master/LICENSE.txt).

Have a lot of fun!