Guide on creating a darkening effect for lights

Seeking assistance on how to create a light-off effect when clicking on any of my textboxes.

I discovered this concept on the following website:

What I aim to achieve is that upon clicking a specific textbox, it will be highlighted. Upon clicking the same textbox again, the light-off effect should be removed.

Is there anyone who knows how to accomplish this?

Here's the HTML code:

 <input type="text" readonly id="myname1" style="width:1000px; height:30px !important " />
 <br />
 <br />
 <input type="text" readonly id="myname2" style="width:1000px; height:30px !important " />

And here's the script code:

<script>
$(function(){
    $('#myname1').on('click', function(){
        alert(1)      
    })    
})
$(function(){
    $('#myname2').on('click', function(){
        alert(2)      
    })    
})
</script>

Answer №1

Here is my solution:

HTML:

<input type="text" readonly id="myname1" style="width:1000px; height:30px !important" />
<br />
<br />
<input type="text" readonly id="myname2" style="width:1000px; height:30px !important" />
<div id="overlay"></div>

CSS:

#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background-color: rgba(0,0,0,.5); /* Semi-transparent */
}

.highlight {
    position: relative;
    z-index: 11;
}

JavaScript:

$(function () {
    var lightsOff = false;
    $('#myname1,#myname2').on('click', function () {
        lightsOff = !lightsOff;
        $('#overlay').fadeToggle(1000); /* Choose desired delay */
        if (!lightsOff)
            setTimeout((function() {
                $(this).removeClass('highlight');
            }).bind(this), 1000); /* Same delay */
        else
            $(this).addClass('highlight');
    })
})

Demo: http://jsfiddle.net/AP6kr/

Answer №2

Check out this simple version I just put together and feel free to experiment with it.

To start, we create an overlay that covers the entire screen using a black background. Next, we add another div where our desired content will appear. This second div has a z-index: 1 to ensure it is on top of the overlay.

After that, all you need to do is use fadeIn and fadeOut to achieve the desired visual effect.

Remember: This is just a basic example, feel free to explore and customize it further. This serves as a good starting point for your own experiments.

HTML:

<div class="overlay"></div>
<div class="highlight">Test
    <br/><span class="on">On</span> | <span class="off">Off</span> 
</div>

CSS:

html, body {
    height: 100%;
    margin: 0;
}
.overlay {
    background: black;
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    top: 0;
    display: none;
}
.highlight {
    width: 100%;
    background: white;
    z-index: 1;
}

jQuery:

$(".on").click(function () {
    $(".overlay").fadeIn();
});

$(".off").click(function () {
    $(".overlay").fadeOut();
});

VIEW DEMO HERE

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

Is there a way to include a button at the top of the Notiflix.Loading() overlay for closing or stopping it?

I've integrated the "notiflix" library into my project, and I'm currently using notiflix.loading.pulse() for a lengthy process. While this works perfectly fine, I would like to add a button (for closing/stopping the process) on top of the loading ...

The function to save a mongoose schema is not valid

I encountered an issue with the StripeToken.save function while using the code snippet below. After double-checking my model, I can't seem to pinpoint what went wrong. var mongoose = require('mongoose'); var Schema = mongoose.Schema; var s ...

What causes the console.log function to behave in this manner?

When using the node.js interpreter, if you run the code: console.log("A newline character is written like \"\\ n \"."); //output will be:- // A newline character is written like "\ n ". However, if you just enter the following in ...

JavaScript - Imported function yields varied outcome from module

I have a utility function in my codebase that helps parse URL query parameters, and it is located within my `utils` package. Here is the code snippet for the function: export function urlQueryParamParser(params: URLSearchParams) { const output:any = {}; ...

Is there a glitch in the Selenium Java CSS Selector functionality?

Everything seems to be working smoothly with that code! It successfully locates and clicks on my button within the span tag. driver.findElement(By.cssSelector("span[id$=somePagesCollection] a")).click(); However, after clicking the button, an input field ...

Is it possible for me to use @import to selectively choose what I need and disregard the rest?

If I am utilizing SASS and wish to incorporate a significant portion of another existing stylesheet, whether it is in SASS or CSS format, I have the option to import that particular sheet using @import, then employ @extend to apply some of its rules. Is ...

Transform the snake code by incorporating a visual image as the face of the serpent

Can someone help me change the snake's face to an image instead of a color fill in this code? And how can I add arrows for mobile compatibility? (function() { // Insert JS code here })(); // Insert CSS code here This code snippet includes functi ...

provide a hyperlink to the icon located in front of the navigation bar

I'm struggling to come up with a suitable title for this issue. What I am trying to achieve is placing a small icon in front of the navbar so that visitors can click on it and be directed to another site. Initially, I attempted to place the icon using ...

Craft a hierarchical JSON structure out of a different nested JSON object [PAUSE]

Looking to transform an existing JSON object into a new object structure. Here is the current JSON object: { "name": "Parent", "children": [ { "name": "Child1", "children": [ { "name": "GrandC ...

Utilizing AJAX to showcase individual PHP files

My PHP elements are not being displayed in the code, and I need to figure out why. Below is the HTML code I am currently using: <div class="tablocation"> <ul class="css-tabs"> <li><a class="current" href="/wp-content/themes ...

Chrome extensions using Cross-Origin XMLHttpRequest

Chrome extensions API states that cross-origin calls using the XMLHttpRequest object should be allowed with proper permissions: An extension can communicate with remote servers beyond its origin by requesting cross-origin permissions. Following the Goog ...

Challenge in Decision Making

I am curious why this type of selection is not functioning properly for html select options, while it works seamlessly for other input types like Radios or checkboxes. Any thoughts? $('#resetlist').click(function() { $('input:select[nam ...

Abnormal scrolling issues observed on handheld devices like mobile phones and tablets

I recently added a parallax effect to the hero section of my website, and while it works perfectly on desktop, I encountered some scrolling issues when viewing it on mobile or tablet devices. Sometimes the scrolling behaves as intended, and other times it ...

Transform HTML into PNG with Canvas2image, followed by the conversion of PNG into BMP

Is there a direct way to convert HTML to BMP? After searching online, it seems that there isn't a straightforward method. So, I decided to convert HTML to PNG using canvas JS and then use PHP to convert the file from PNG to BMP. I have a question abou ...

What is the most effective way to extract "sub" values from a Python dictionary?

How can I effectively retrieve values from a Python dictionary? The full function and dictionary code are provided below Context Upon researching, it seems that using the get() method should work. However, my current code only returns "None" for the "ti ...

The alignment of the label on the Watu Quiz does not match with the Radio Button

I've encountered an issue with a Watu quiz I created where the labels are not aligning with the radio buttons. Any suggestions on how to style this and fix the alignment? You can view the page here. Here is a screenshot for reference: https://i.sst ...

What steps do I need to take in order for my web controls to show up on top of an activex

I'm currently facing a challenge in designing a website with activex reports. Even though I recommended switching to another reporting tool or technology, we're still using activex for now. I've noticed that graphical activex objects displa ...

Ensure that you patiently wait for the axios method to finish execution before moving on to the

I am currently learning vue.js and struggling with the concept of promises. I need to initialize a variable with data from an API call, but I want to ensure that the Axios call is generic: { data: { list: [], }, methods: { ShowList: function ...

Encountering an issue with npm start when attempting to launch the local host server for a React.js project

Encountering an issue with npm start Error message: 'Equipment' is not recognized as a command, operable program or batch file. internal/modules/cjs/loader.js:983 throw err; ^ Error: Module not found 'C:\Users\Home\Deskto ...

Design and execution of webpage structure

My website features a single-page layout with fixed navigation that allows users to easily navigate up and down the page using #. However, when the page loads I want it to display the second section of content instead of the top section. Is there a way to ...