Skip to content

andywer/jquery-dim-background

Folders and files

NameName
Last commit message
Last commit date

Latest commit

e6faea4 · Oct 18, 2016

History

54 Commits
Oct 22, 2013
Jun 27, 2014
Jul 3, 2014
Jun 27, 2014
Jul 3, 2014
Jul 16, 2013
Jul 3, 2014
Jan 21, 2015
Jan 21, 2015
Jan 21, 2015
Jan 21, 2015
Oct 18, 2016

Repository files navigation

jquery-dim-background

Build Status Bower version Coverage Status

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.

<script type="text/javascript" src="http://andywer.github.io/jquery-dim-background/jquery.dim-background.min.js"></script>

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

<script type="text/javascript">
    $('.myElements').dimBackground();
</script>

To switch back to normal:

<script type="text/javascript">
    $('.myElements').undim();
    // - or -
    $.undim();
</script>

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)

<script type="text/javascript">
    $('.myElements').dimBackground({
        darkness : 0.8            // 0: no dimming, 1: completely black
    }, function() {
        // do something
    });
</script>

Demo

Have a look at a basic example that shows what this plugin does.

License

This plugin is published under the MIT license. See license.

Have a lot of fun!