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

Home Layout & InterfacejQuery plugin to dim the current page except for some user-defined top elements

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

10 years ago Views

5036

1505

andywer

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 inclusi

<script type="text/javascript" src="https://raw.github.com/andywer/jquery-dim-background/master/jquery.dim-background.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>

License

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

Have a lot of fun!

Tag: highlight