Is it possible to dynamically change the color of a box shadow using an event handler?

I'm currently in the process of developing an application that consists of six distinct topics organized within a flexbox structure, complete with a box-shadow effect.

My objective is to dynamically alter the color of the box-shadow through an event handler, ensuring that it matches the color of the button associated with the selected topic by the user. For instance, upon clicking the "Technology" button, the box-shadow should transition from #D1D1D1 to #6699FF).

Despite my efforts of extensively researching on MDN and Treehouse to uncover a solution, I have been unsuccessful thus far.

The jQuery code supplied within this inquiry fails to execute properly; any assistance provided would be greatly appreciated!

This is a summary of what I've managed to compile up until now: 

$(“.buttons”).click(function(){
  var color = $(this).css(“background-color”);
  var box-shadow = “0 5px” + color;
  $(this).parent().css("box-shadow”);
});
/* =================================
  Page Styles
==================================== */

* {
box-sizing: border-box;
}

body {
font-size: 1.2em;
font-family: 'Varela Round', sans-serif;
color: #fff;
background: #f2f2f2;
padding-left: 5%;
padding-right: 5%;
}

header {
text-align: center;
color: #000;
font-size: 1.2em;
}

.topics {
padding: 10px;
background: #fff;
  border-radius: 25px;
margin: 45px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
text-align: center;
box-shadow: 0 2.5px 0 0 #d1d1d1;
}

.technology {
color: #fff;
padding: 15px;
margin: 5px;
background: #6699FF;
border-radius: 3px;
}

.business {
color: #fff;
padding: 15px;
margin: 5px;
background: #32BC67;
border-radius: 3px;
}

.entertainment {
color: #fff;
padding: 15px;
margin: 5px;
background: #9F60FF;
border-radius: 3px;
}

.shopping {
color: #fff;
padding: 15px;
margin: 5px;
background: #F44658;
border-radius: 3px;
}

.sports {
color: #fff;
padding: 15px;
margin: 5px;
background: #FE9900;
border-radius: 3px;
}

.weather {
color: #fff;
padding: 15px;
margin: 5px;
background: #FFC100;
border-radius: 3px;
}

/* =================================
  Flexbox
==================================== */

.articles {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    background: #fff;
    border-radius: 25px;
    flex-wrap: wrap;
    justify-content: space-around;
    text-align: left;
    box-shadow: 0 0 10px #D1D1D1;
}

.article-1 {
  display: table-cell;
  background-color: #fff;
  width: 300px;
  height: 200px;
  border-radius: 3px;
  border-color: #D1D1D1;
  border-width: 1px;
  padding: 50px;
  margin: 25px;
  box-shadow: 2px 2px 10px #D1D1D1;
}

.article-2 {
display: table-cell;
    background-color: #fff;
    width: 300px;
    height: 200px;
border-radius: 3px;
    border-color: #D1D1D1;
    border-width: 1px;
    padding: 50px;
    margin: 25px;
    box-shadow: 2px 2px 10px #D1D1D1;
}

.article-3 {
display: table-cell;
    background-color: #fff;
    width: 300px;
    height: 200px;
border-radius: 3px;
    border-color: #D1D1D1;
    border-width: 1px;
    padding: 50px;
    margin: 25px;
    box-shadow: 2px 2px 10px #D1D1D1;
}
<!DOCTYPE html>
<html>

<head>
<title>Daily News</title>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/page.css">
<link rel="stylesheet" href="css/flexbox.css">
</head>

<body>
<header>
</header>

<nav class="topics">
<nav class="technology">Technology</nav>
<nav class="business">Business</nav>
<nav class="entertainment">Entertainment</nav>
<nav class="shopping">Shopping</nav>
<nav class="sports">Sports</nav>
<nav class="weather">Weather</nav>
</nav>

<section class="articles">

<section class=article-1>
</section>

<section class=article-2>
</section>

<section class=article-3>
</section>

</section>

</body>

</html>

javascriptjqueryhtmlcss

Answer №1

It seems like you missed adding the buttons class to your buttons and there was a small mistake in using the .css() method. The correct usage should be .css("box-shadow", boxShadow);. Additionally, there are some other minor issues with your code. Here is an updated example that works:

$(".buttons").click(function(){
  var color = $(this).css("background-color");
  var boxShadow = "0 5px " + color;
  $(this).parent().css("box-shadow", boxShadow);
});
/* CSS Styles */
/* Your CSS styles go here */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
<title>Daily News</title>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="#your_custom_css_file.css">
</head>

<body>
<header>
</header>

<nav class="topics">
<nav class="technology buttons">Technology</nav>
<nav class="business buttons">Business</nav>
<nav class="entertainment buttons">Entertainment</nav>
<nav class="shopping buttons">Shopping</nav>
<nav class="sports buttons">Sports</nav>
<nav class="weather buttons">Weather</nav>
</nav>

<section class="articles">

<section class=article-1>
</section>

<section class=article-2>
</section>

<section class=article-3>
</section>

</section>

</body>

</html>

Answer №2

Whenever necessary:

$('.buttons').click(function(){
  var color = $(this).css('background-color');
  var boxShadow = '0 5px' + color;
  $(this).parent().css('box-shadow', boxShadow);
});

A revised version could look like this:

$('.buttons').click(function(){
  var temp = $(this);
  temp.parent().css('boxShadow', '0 5px ' + temp.css('backgroundColor'));
});

Using just one String argument with .css() retrieves a single style property. With two arguments, it assigns one style property. By passing an Object as an argument, multiple style properties can be assigned through iteration.

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

Client request: receive a daily update detailing the differences between two databases

Today, a customer requested that I provide daily reports on the changes between two tables in our database. I am currently contemplating the most efficient and intelligent way to fulfill this request. Should I create a SQL procedure? Or perhaps an HTML p ...

htmlsqlreport

Is there a way to fetch API data selectively rather than all at once?

Hello everyone, I successfully managed to retrieve data from the Star Wars API in JSON format and display it on my application. Initially, I set the state as 'people.name' to obtain the name object. However, this also rendered unwanted data when ...

javascriptreactjsapi

Error in JSON due to the presence of an unexpected token within the

I am facing a challenge with my PHP code, where I take a list of filenames or empty strings and store them in an array. This array is then converted to JSON and saved in a database successfully. However, the problem arises when this array is also stored wi ...

javascriptphpjson

How can you use a single parameter in a JavaScript function to swap the values of two numbers

Here's the challenge I'm facing: I need to create a function that will output 5 when given a(0), and 0 when given a(5). a(0) = 5 a(5) = 0 It should look like this: Hint: Use the following function structure function A(num){} something ...

javascript

Combining HTML with multiple .ts files in Angular

I've been dedicating time to enhancing an Angular application, particularly a sophisticated table with intricate styling and functionality. Within my component file, there is a whopping 2k lines of code that includes functions for text formatting, ta ...

htmlangulartypescriptfiledivide

TinyMCE is substituting the characters "<" with "&lt;" in the text

I am currently using Django with placeholder tags: I am attempting to insert a flash video into my TinyMCE editor, but it is replacing the '<' symbol with < in the code, preventing it from loading properly and only displaying the code. I ...

javascriptpythondjangotextboxtinymce

Click on the link to see the jQuery effect in action

I'm trying to achieve a fade-out effect on the current page followed by fading in a new one. The fade-in effect is working fine, but when I click on the link, the new page loads without first fading out the existing content. The div that I want to app ...

javascriptjqueryhyperlink

What is the best way to retrieve the latest state after applying useEffect to trigger an onChange event for an element?

I am encountering an issue with an input field in my component that requires an onChange event to update the state. Despite binding the onChange event on mounting the component, the state remains unchanged as the onChange event seems to have the initial st ...

javascriptreactjs

Tips for sending a large list as Ajax data in an MVC model

My morning was spent in vain as I attempted different "workarounds" that were suggested, usually for more specific scenarios than the one I am facing. My goal is to simply pass an ASP.NET MVC model using the JQuery load method. It seems promising when I us ...

jqueryajaxasp.net-mvc

Videos embedded using the React HTML video tag are not automatically playing on mobile devices

I have implemented a jsx variable to insert a video into my html. Despite following the advice to include muted defaultMuted, and playsinline (which I have already done), the videos autoplay on safari, chrome, and firefox on my computer but not on mobile ...

javascripthtmlreactjshtml5-video

Is there a callback or event that can be used to ensure that getComputedStyle() returns the actual width and height values?

Currently, I find myself in a situation where I need to wait for an image to load before obtaining its computed height. This information is crucial as it allows me to adjust the yellow color selector accordingly. Question: The process of setting the yello ...

javascripthtmlcss

The PHP-based registration process is malfunctioning

Trying to simply register, but I'm encountering an issue where the file is named Login.html/.php instead of just Login.html. Below is my HTML form in Login.html: <!DOCTYPE html> <html> <head> <title>Register/ Login</title&g ...

phphtmlmysqlxampp

The issue of jquery noConflict not functioning properly in a php include() statement is

Having trouble with jquery.noConflict not working when loading from an external file using php includes? Also noticing that some scripts may not be fully loading as well. Mainfile.php <script type="text/javascript" src="js.jquery/jquery.1.8.2.min.js"& ...

jqueryphp-include

Preserve setTimeout() Functionality Across Page Refreshes and Navigations

I am trying to display an alert message after a 15-minute delay, but the functionality is disrupted when the page refreshes or if I navigate to a different page. This all takes place on a single web page. When a specific button is clicked, it should trig ...

c#javascriptasp.netajax

Implementing jQuery to emphasize selected radio buttons

When dealing with a static HTML page, the following code works perfectly: $("input:checked").addClass("highlight"); However, the same code does not work for pages that are populated using AJAX. Are there any alternative solutions to highlight radio butt ...

jquery

Tooltip remains visible even after formatting in highcharts

I have successfully hidden the datalabels with 0 values by formatting them. However, after formatting the tooltips for 0 valued data in a pie chart, there is an issue where hovering over the 0 valued portion shows a white box as shown in the picture. I hav ...

javascriptjquerycsshighcharts

The React getTime() method does not properly update the state

I am attempting to update the state of the component Demoss using an external function called getTime(). My goal is to start updating the time in the state time when the page loads. In order to achieve this, I have called it in the componentDidMount meth ...

javascriptreactjs

The themes showcased in the Bespoke.js documentation and demo exhibit unique designs

Recently, I stumbled upon an incredible HTML5 framework for presentations. For more information, you can check out the documentation here. You can also view a demo of the framework by visiting this link. However, I was disappointed to find that the caro ...

javascripthtmlpresentationbespoke.js

Is it possible to preserve the <canvas> elements to use for future animation frames?

Currently, I am working on a graph visualization project that involves complex calculations being done on an HTML5 canvas. My goal is to create an interactive animation where the graph remains fixed, but additional elements are overlaid as the mouse moves ...

javascripthtmlcanvas

Tips for implementing multiple selectors in YUI

Is there a way to use multiple selectors in YUI (YUI 2) similar to jQuery? $('h1, h2, el1, el2, .content, .title').css('color', 'red'); How can I achieve the same in YUI without having to individually add classes using YAHOO ...

javascriptyuiyui2