Is there a way to adjust this script to change the box-shadow color of #player1?
<script type="text/javascript>
$(window).ready(function(){
var sourceImage = document.getElementById("art");
var colorThief = new ColorThief();
var color = colorThief.getColor(sourceImage);
document.getElementById("player1").style.['box-shadow'] = "rgb(" + color + ")";
});
</script>
Additionally, what should be included in the CSS code after
#player1 {box-shadow:() 5px;}
Update
There is no need to set a default value for the box-shadow property of #player1 in your CSS, as it will be dynamically assigned using JavaScript when the page loads (Am I right in assuming that was your intention?). You can try the following approach:
Check out the demo (RGB values are hardcoded)
$(window).ready(function(){
var sourceImage = document.getElementById("art");
var colorThief = new ColorThief();
var color = colorThief.getColor(sourceImage);
document.getElementById('player1').style['boxShadow'] = '10px 10px 5px rgba('+ color[0] + ', ' + color[1] + ', ' + color[2] + ', 0.5)';
});
However, Internet Explorer does not support .style['boxShadow']. As an alternative, consider utilizing jQuery with the following code:
See the demo here (RGB values are hardcoded)
$(window).ready(function(){
var sourceImage = document.getElementById("art");
var colorThief = new ColorThief();
var color = colorThief.getColor(sourceImage);
$('#player1').css('box-shadow', '10px 10px 5px rgba('+ color[0] + ', ' + color[1] + ', ' + color[2] + ', 0.5)');
});
This implementation also works flawlessly in Internet Explorer.
I have a PHP variable named $TillArray that contains an array. I am trying to pass this array to a Javascript function in order to display an Alert message for each item within the array. Below is the code I have been using: <script type="text/javasc ...
I am encountering an issue with a POST request involving user credentials being sent from a Login page to the API Server. The code looks like this: loginUser(creds) { //creds is in the form of { username: bob, password: 123 } var request = { ...
When it comes to a datatable on a page, I am facing a unique challenge. I want the datatable to be refreshed with a clear state (no column order, etc.), but if the page is accessed by pressing the back button, it should retain its state. I have experiment ...
Every time I execute the javascript/php code below, I encounter an issue where I keep receiving "undefined" when trying to alert the 'userid' property of the json object. However, if I turn the json object into a string using stringify(), it corr ...
When working on my Django application, I've noticed that the CSS code being loaded differs from what is written in the files. What could be causing this discrepancy and how can it be fixed? ...
Currently, I am updating my WordPress website with a goal of minimizing the number of plugins used. To achieve this, I prefer writing code only for essential functionalities. In order to optimize my work with php, css, and javascript files, I have been exp ...
Currently I am constructing a generic data table using react and material-ui. My programming background is in c# and java, as well as some early experience with javascript. However, I am encountering syntax issues within reactjs. Here is the particular pi ...
Having trouble updating the innerHTML attribute for both elements with ids containDiv and status. For some reason, it only changes containDiv but not status. The console shows an error "Cannot set property innerHTML of undefined", indicating that the eleme ...
I am attempting to recreate this image using CSS. Unfortunately, I haven't had success achieving those detailed edges with text. Is it feasible to accomplish this effect in CSS, and if so, what approach would be best? ...
How can we modify this code to achieve the functionality where, upon clicking the search button, the map zooms in closer to the address entered by the user, similar to how it works on Google Maps? The goal is to replicate the search feature from the Goog ...
Looking to create a horizontal menu with a responsive background image. Struggling with the issue of the 'ul' menu being misaligned with the background image when in full-screen mode. Attempted to use separate 'div' containers for the ...
Currently, I am working with an Ionic app that is connected to SalesForce Mobile SDK. Due to the lack of support for the SDK and certain plugins in Ionic Serve, I have resorted to running the app in Android Studio using an Emulator - specifically, the Andr ...
My table has 4 columns with different widths: column 1: fixed width of 500px; column 2: calc(33% - 165px); column 3: calc(33% - 165px); column 4: calc(33% - 165px); Despite having the same value for the last 3 columns, their actual widths are different. ...
I'm attempting to implement a roll-up feature for a div when the mouse is over another div. The issue I'm facing is that the roll-up div closes even if the mouse just exits through the bottom border. Is there a way to achieve this using JavaScrip ...
After deciding to dive into the world of application development using the MEAN Stack, I encountered a major roadblock. For the past hour, I've been struggling to set up a basic route, only to face failure at every turn. Whenever I try to access my ...
What is the process of creating an object that can eliminate itself automatically? var item = []; function selfDestruct() { this.destroy = () => { this = false; } } function initialization() { item[0] = new SelfDestruct(); item[0].destroy( ...
When I need to redirect to a tel:**** link in ZK and then redirect the user to another page after the call, I encounter a problem. Every time I click on the link, ZK interprets it as leaving the browser, which results in my client session ending automatica ...
I am looking to display a newly added record in a select box once it has been inserted into the table. Below is my Laravel HTML code: <div class="form gorup"> <select class="form-control" > <option @click="called" ...
In my AddressController, I have a function called loadCity along with other CRUD functions: public function loadCities(Request $request) { $provinceId = $request->province_id; $cities = Province::where('province_id' ...
Access.js import React from 'react' export default class Access extends React.Component { componentWillMount(){ import ('./styles/access_page.css'); } .... <Link to="/new-account">Sign Up</Link> } Cr ...