CODEWITHSUNDEEP
jquerycssonclickbrightnesscss-filters
Eagle Jow
Eagle Jow

Reputation: 37

Turn CSS Filter Brightness On and Off on Click

I'm setting up a page with a button that dims parts of the page. I've modified some code I found here: http://www.jankoatwarpspeed.com/use-jquery-to-turn-off-the-lights-while-watching-videos/

But I am very bad at javascript/jQuery and I'm not sure how to get it to do what I need it to.

Here's the script:

$(document).ready(function(){
    $("#shadow").css("height", $(document).height()).hide();
    $(".lightSwitcher").click(function(){
        $("#shadow").toggle();
        if ($("#shadow").is(":hidden"))
            $(this).removeClass("turnedOff");
        else
            $(this).addClass("turnedOff");
    });
});

And here's a jsfiddle: http://jsfiddle.net/e2b7dxa0/

I'd like it so that anything with the "shadow" id dims when the light switch is clicked. Right now anything with that id is hidden until the light switch is clicked and I'd like it to be visible whether or not the switch is on or off. I only want the switch to toggle the brightness filter in the CSS.

Also, there is something in the jQuery that causes the height to expand to the height of the page and I'd like to remove that.

Upvotes: 1

Views: 2367

Answers (2)

Man Programmer
Man Programmer

Reputation: 5356

http://jsfiddle.net/e2b7dxa0/2/

$(".lightSwitcher").click(function(){

        if ($("#shadow img").hasClass("brightness")){
            $("#shadow img").removeClass("brightness");
            $(this).removeClass('turnedOff')
        }

        else{
            $("#shadow img").addClass("brightness");
            $(this).addClass('turnedOff')
        }
    });

Upvotes: 1

hjpotter92
hjpotter92

Reputation: 80639

Put your brightness filter in a separate class, and apply that class to #shadow object when the button is clicked.

$(document).ready(function() {
    $(".lightSwitcher").on('click', function() {
        $(this).toggleClass("turnedOff");
        $('#shadow').toggleClass('filter');
    });
});
.lightSwitcher {
    position:absolute;
    z-index:101;
    background-image:url(http://i.imgur.com/pyMBQnZ.png);
    background-repeat:no-repeat;
    background-position:left;
    outline:none;
    text-decoration:none;
    margin-left: 70%;
}
#lightswitch {
    height: auto;
}
.filter {
    -webkit-filter: brightness(50%);
    -moz-filter: brightness(50%);
    -o-filter: brightness(50%);
    -ms-filter: brightness(50%);
    filter: brightness(50%);
}
.turnedOff {
    color:#ffff00;
    background-image:url(http://i.imgur.com/nuKtnZZ.png);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="lightSwitcher"><img id="lightswitch" src="http://i.imgur.com/3nawaAf.png"></a>

<div id="shadow">
    <img src="https://placeimg.com/320/240/nature">
</div>

Upvotes: 2

Related Questions