Dim the background for all elements except for one

Seeking a way to create a dimmed-background effect by adjusting the opacity of all elements on the page except for one specific element. I've experimented with using the :not() selector as well as jQuery selectors to exclude certain elements, but have not been successful. Does anyone have suggestions on how to achieve this using SASS/Compass or potentially with jQuery?

Some of the approaches I've tried include:

.opacityFade:not(.classToExclude) {
   STYLES HERE
 }

or

   $('controlElement').click(function(){
     $(body).not('desiredTargetToExclude').toggleClass('classThatFadesStuffOut');
});

Ideally, I would prefer to avoid writing additional JavaScript and instead keep responsibilities separated. However, I'm relatively new to Front-End development and unsure of the best approach. Any advice is appreciated! Thanks!!

javascriptjquerycsssasscompass-sass

Answer №1

To achieve this effect, cover all elements with a blanket and then use the z-index property to bring the desired element forward in the DOM order.

.item {
    background: #f00;
    width: 100px;
    height: 100px;
    display: inline-block;
    margin: 10px;
}

.item.selected {
    position: relative;
    z-index: 200
}

.blanket {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.5;
    z-index: 100;
}

Remember that the element must have a non-static position for this to work properly.

Check out the code in action at http://jsfiddle.net/cyberdash/fCMaT/

Answer №2

One suggestion is to include an additional class in the non-dimmed/active div. I will create a fiddle for demonstration.

http://jsfiddle.net/nqT7V/

Using JQuery:

$(".item").click(function(){
    var $this = $(this);
    $this.parent().addClass("dimmed");
    $this.parent().find(".item").removeClass("active");
    $this.addClass("active");
});

$(".holder").click(function(e){
    if (e.target != this) return;
    var $this = $(this);
    if ($this.hasClass("dimmed")){
        $this
            .removeClass("dimmed")
            .find(".item").removeClass("active");
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the most effective method for incorporating access token authentication in a React application?

As a newcomer to React, I am working on implementing authentication using Express.js in my react web application. I have successfully set the token in response cookies on the backend with the HttpOnly flag, but unfortunately, I am unable to read it on the ...

javascriptnode.jsreactjsexpress

tips for selecting various API requests based on the selected drop down menu choice

Hey there! I'm looking to enhance my login page by adding a feature that allows users to select from a dropdown menu with different options. Each option will be linked to a specific API, and based on the API response, the user's ability to log in ...

javascriptjqueryhtmlcssapi

No entries found in the Nuxt/content module's array

<template> <div> <input v-model="searchQuery" type="search" autocomplete="off" placeholder="Search Articles" /> <ul v-if="articles.length"> ...

javascriptvue.jsnuxtjs

Add a span tag with the class "javascript" around the index of a character within a string

Within an element, I have a string as such: <p>I like trains and planes</p> Using jQuery's .text(), I extract the text and store it in a variable. var str = $('p').text(); I aim to identify a specific character, let's sa ...

javascriptjquery

Troubleshooting event binding problems with jQuery

<div id="parent"> <div id="children"> </div> </div> If we attach the same events to both parent and children elements: $("#parent").live({ mouseenter : Infocus , mouseleave : Outfocus }); $("#childre ...

javascriptjquery

How to Style a Diamond Shape with Content Inside Using CSS

Can someone help me figure out how to create a diamond-shaped background in HTML? I want the diamond shape to contain text and images, similar to what's shown in this screenshot. The example image uses a background image of a diamond, but I'm loo ...

css

Adjust the size of every card in a row when one card is resized

At the top of the page, I have four cards that are visible. Each card's height adjusts based on its content and will resize when the window size is changed. My goal is to ensure that all cards in the same row have equal heights. To see a demo, visit: ...

javascriptjquerycssangular

Fading CSS Hover Popup Display and Hide

I am looking to create a CSS-only popup for an image that will appear when a user hovers over the image with their mouse. After researching on various platforms, such as this thread, I have developed the following solution: a.tooltip span { width: 250 ...

css

Is there a way to create a clickable component for triggering an AJAX call without using a Submit button?

Just starting out with JS/JQuery programming, so please excuse any mistakes or unclear explanations. Any feedback is welcome, even if not requested specifically. I am working with multiple drop down lists that are populated dynamically by data from SQL Ta ...

javascriptjqueryhtmlajax

Tips on accessing the text content of a dt element with prototype

Below is some HTML code that I am working with: <dl> <dt><label>test</label></dt> <dd><input id="someid" type="checkbox" onchange="opConfig.reloadPrice()" class="product-custom-op ...

javascriptprototypejs

Guide on sorting an array within a specific range and extracting a sample on each side of the outcome

I need a simple solution for the following scenario: let rangeOfInterest = [25 , 44]; let input = [10, 20, 30, 40, 50, 60]; I want to extract values that fall between 25 and 44 (inclusive) from the given input. The range may be within or outside the inpu ...

javascriptarraystypescript

Extracting timestamped text data from a simulated chat interface

I am looking to gather chat data from Twitch clips. These are saved moments from livestreams where viewer reactions are captured. Take a look at this example clip: While I can scrape all the data by watching the video and utilizing query selectors, my goa ...

javascriptpythonnode.jsweb-scrapingtwitch

Is it possible to modify the value of a non-HTML attribute in an input field using jQuery?

I have a text input field that looks like this: <input type="text" value="" somethingSpecial="filename.txt" id="myID" class="box"> There is also a select list as shown below: <select name="type" class="form-select" id="type"> <option ...

jqueryattributes

Loop through an HTML table in order to emphasize variations in cells that contain multiple comparison items

I am interested in highlighting variances between the initial row of a table and all other rows based on columns. I have successfully managed to achieve this when each cell contains only one item/comparison. However, I would like to expand this to include ...

javascripthtml

Eliminate the horizontal overflow caused by the HTML video tag

I'm currently facing an issue with using a video as the background for a div on my website. The problem arises when I view it on a smaller resolution, causing overflow on the right side. I've been attempting to solve this without success... You ...

htmlcssvideo

Which JavaScript library or template engine would be most suitable for this scenario?

I am tasked with creating an invite your Facebook friends module that will display the names and photos of your friends, allowing you to message them. It is essential that this feature seamlessly integrates into my website's design, so I need to style ...

javascriptjqueryfacebookjson

What is the process for attaching an iterator to the name value of every element within a cloneNode?

Consider the following scenario: <div id="addNewMenuElementPart2"> Numerous elements with a name attribute are present here. </div> <div id="addNewMenuElementPart3Optional"></div> Additionally, t ...

javascript

Utilize Java to launch the HTML file in a web browser

I have a specialized need for my HTML files to be displayed on a platform that is browser-free. The solution that immediately comes to mind for me in this scenario is utilizing applet. Therefore, I am interested in having my HTML file (including CSS and JS ...

javahtmlcssswingapplet

Hide popup using HTML when clicking outside of it

Currently, I have implemented Bootstrap Popover with HTML content using the code snippet below. This code is based on the answer provided at . $(".song-status-link").popover({ html: true, placement: 'bottom', ...

jquerycsstwitter-bootstrap-3popover

Using ng-value does not trigger any updates to the Ng-model

After setting the input value Array property sum, it displays the value in the input field. However, when submitting the form, the Quantity property is not being received in the Order object. I noticed that if I change the value manually, then the Quanti ...

javascriptangularjs