Utilize jQuery to dynamically update the box-shadow property with inset added

I have a situation similar to this:

$('.inset').click(function(){

    if($('.inset').is(':checked')){
        $('.box-shadow').css('boxShadow','inset');
    }else{
        $('.box-shadow').css('boxShadow','');
    }
});

Essentially, when a checkbox is checked, it triggers one action and when it's not checked, it triggers another.

What I am aiming to achieve is that when the checkbox is checked, the boxShadow property (which currently is: box-shadow: 5px 5px 5px #000;) changes to

box-shadow: inset 5px 5px 5px #000;
. When it's unchecked, it should revert back to: box-shadow: 5px 5px 5px #000;.

The challenge here is that the other properties (5px 5px 5px #000) are not always static. Is there a way to dynamically handle this?

$('.inset').click(function(){

        if($('.inset').is(':checked')){
            $('.box-shadow').css('boxShadow','+inset');
        }else{
            $('.box-shadow').css('boxShadow','-inset');
        }
    });

Answer №2

Here is a simple solution:

$('.inset').click(function(){
    if($('.inset').is(':checked')){
        $('.box-shadow').css('box-shadow','inset 5px 5px 5px #000');
    }else{
        $('.box-shadow').css('box-shadow','5px 5px 5px #000');
    }
});

Alternatively, you can create two different CSS classes - one with inset and one without - and toggle between them.

Answer №3

Give this a shot:

$('.inset').on('change', function(){
    $('.box-shadow').css('boxShadow', function(i,old) {
        return old.indexOf('inset') === -1 ? old + ' inset' : old.replace(/\s+inset/,'')
    });
});

This code snippet utilizes the 'on' and 'css' functions from jQuery, as well as the 'replace' and 'indexOf' methods from JavaScript!

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 best way for me to make sure the element overflows properly?

How can I make the contents of the <div class="tags> element cause overflow so that one can scroll its contents instead of the element simply extending in height? I've experimented with different combinations of overflow-y: scroll and min- ...

Displaying a success dialog after closing a Bootstrap modal

I have set up a bootstrap modal containing a form. Upon submitting the form, the form content is hidden and a bootstrap alert message is displayed. However, upon clicking the bootstrap popup, the same alert message is shown in the popup instead of displayi ...

interaction between modernizr and ajax causing loading issues

I am currently utilizing modernizr.js and a customized ajax function on my page to refresh the content every x seconds. Below is the snippet of code for the functions being triggered. function reloadSlides() { jQuery.ajax({ url: document.locat ...

Ways to retrieve a designated object linked to a specific value within a JavaScript structure

I am facing a challenge where I need to set a javascript property object with values from another property object within the same instance. Currently, I have the following object: var PLAYER = { slides: { { slide_id: 60, slide_content: 'c ...

Automatic Email Reply that Automatically populates the recipient field with the sender's information

I'm curious to know if it's possible to create a mailto link that automatically populates the TO: field with the email of the original sender, without including the email address in the link itself. For instance: "a href="mailto:ORIGINALSENDER? ...

"Seeking clarification on submitting forms using JQuery - a straightforward query

My goal is to trigger a form submission when the page reloads. Here's what I have so far: $('form').submit(function() { $(window).unbind("beforeunload"); }); $(window).bind("beforeunload", function() { $('#disconnectform&apo ...

Save user entries in a database array

I'm working on developing a platform for advertisements where users can create detailed profiles with images. To achieve this, I need to store the information in an array within a backend database for future retrieval. Below is an example of the backe ...

Is there a way to modify the height and width of a div layer?

How can I adjust the height and width of the layer on the card? Also, I want only the close button to be clickable and everything else to be unclickable. Can anyone help me find a solution? <link rel="stylesheet" href="https://stackpath.bootstrapcdn. ...

Having trouble with jQuery show/hide not functioning properly?

My website has a sub-menu section with a shopping cart icon. When a user hovers over the icon, it reveals a hidden cart section. The user can then move the mouse into the cart section to remove items. The problem I'm facing is that if a user displays ...

Scaling CSS images to fit within a specific area without distorting them

Is there a way to ensure that an image fits within a specified area using CSS or other methods? For example, if I have images of various sizes and want them all to fit into a div of 150px by 100px without stretching or distorting them. I just want the imag ...

Toggle visibility of a div with bootstrap checkbox - enforce input requirements only if checkbox is marked

Lately, I've been facing a strange issue with using a checkbox that collapses a hidden div by utilizing bootstrap. When I include the attribute data-toggle="collapse" in the checkbox input section, the div collapses but it mandates every single one o ...

Create a log table specifically for tracking changes made to the drop-down menu

I need to create a Change log table that will track any changes made in the drop-down menu. For instance, I am working on a worksheet with a select menu called Results which includes options like Positive, Negative, Unknown. I want the system to log any ch ...

Populate your HTML with JSON data

I need some guidance on how to achieve a specific task. I have a PHP file that retrieves data from a MySQL database and returns it in JSON format. Now, I want to display this data in HTML with "data_from_json" replaced by "18.5". Any assistance would be gr ...

Tips on preventing the use of backslashes in JSON output from PHP

I'm encountering an issue with the code provided below. The console log is showing: "returningList{"view":0,"new":1,"random":1} result: "{\"view\":0,\"new\":1,\"random\":1}"" It seems that the JSON data is getting back ...

Transform HTML into PDF while maintaining the original letter spacing

We are in need of converting numerous files to enable search and word highlighting functionality in a web browser, as well as server-side indexing for the searchable words. I have previously utilized an online service like (Step 1, Step 2 on linked page) ...

Issues with JQuery `.click()` event

Check out this snippet of code I'm working with: $(".item").click(function () { alert("clicked!"); }); I also have (hypothetically; in reality it's more complex) the following HTML on my page: <a href="#" class="item"> ...

Is there a way to monitor and trigger a function in jQuery when a loaded PHP file is modified?

I am currently working on a dynamic dashboard that automatically updates every few seconds to display new information fetched from a PHP file. My goal is to trigger an alert only when there is a change in the data itself, rather than just a refresh. In ord ...

Guide on sending XML data to the browser with Node.js and Express

I am attempting to send an XML error message back to the browser using my nodejs / express application but for some reason the XML data is not being sent. var xmlFile = '<?xml version="1.0"?>'; xmlFile += '<StatusCode>ERROR</ ...

Ensure that the text box inside the div adjusts its size in accordance with the dimensions of the window, as the div is already designed

As a novice in HTML and jQuery, I am currently working on creating a portfolio site for a school project. One of the challenges I have encountered is designing a graphic that includes a text box within a resizable div element. My goal is to prevent excessi ...

Incorrect Alignment of Centered Boxes with CSS

I'm having trouble creating centered boxes with CSS. Currently, I have the following code: http://jsfiddle.net/LW7mN/2/ .trex-clear-all{ display: inline-block; width: 99%; height: 17px; font-size: 12px !important; text-align: -w ...