I attempted to dynamically change the background image style for the div below:
Below is my code snippet for implementation:
render: function() {
var divImage = {
backgroundImage : "url(" + this.state.song.imgSrc + "),url(" + this.state.nextImgSrc + ");"
};
return (
<li>
<div ref="image-pane" className="player" style={divImage}></div>
</li>
)
}
Appreciate any assistance offered. Thank you!
To change the backgroundImage, I have created a version that utilizes onClick:
React.createClass({
getInitialState: function () {
nextImg: false,
},
handleClick: function () {
this.setState({ nextImg: !this.state.nextImg })
},
render: function() {
var imgUrl = this.state.nextImg ? this.state.nextImgSrc : this.state.song.imgSrc;
var divStyle = {
backgroundImage: 'url(' + imgUrl + ')'
}
return (
<li>
<div ref="image-pane" style={divStyle} onClick={this.handleClick} className="player"></div>
</li>
)
}
});
It's important to note that
backgroundImage: 'url(' + imgUrl + ')'The issue you are experiencing is a result of having a trailing semicolon in your CSS style. For more information, please refer to react issues #2862.
I am currently learning ReactJS and struggling with a simple logic problem (I'm not very good at JS). I have a form that includes fields for name, email, and message. @ContactUsNew = React.createClass getInitialState: -> message: @props.mess ...
I have a div container that is centered in the middle of another container. I managed to adjust it for one slide, but the issue arises when I create multiple .html files using the same css file - the height of the container does not meet my expectations. I ...
Is there a more effective way to center the "i" element within this div without using specific pixel margins that adjust based on hover? Below is my code snippet: HTML: <div class="nav-collapse"> <i class="fa fa-bars fa-2x" id="bars"></ ...
Currently, I am working on a scrolling animation page that is optimized for mobile devices. One issue I am encountering is when an element is larger than the screen size, such as when an image is wider than the mobile device. In this scenario, the user can ...
In the structure of my code, I have a WYSIWYG editor enclosed in a table within a div element: <div class="mydiv"> <li> <table>My WYSIWYG</table> </li> </table> Within the WYSIWYG editor itself, there a ...
How do I hide the list item with iconsrc="/_layouts/15/images/delitem.gif" image when this div is injected by a first party and I am a third party trying to conceal it? $("<style> what should be inserted here ???? { display: none; } </style>") ...
I am working with an HTML table that contains a single TR tag and two TD tags. Each TD has two HR tags creating horizontal lines, along with some text. I am looking for a way to keep the text aligned at the top of the TD and the horizontal line at the bott ...
Can an image bullet style loaded via a URL be resized using JavaScript code like this: var listItem = document.createElement('li'); listItem.style.listStyleImage = "url(some url)"; listItem.style.listStylePosition = "inside"; I aim to increase ...
I am currently working on creating a navigation menu. Check out the code snippet here: http://jsfiddle.net/genxcoders/ZLh3F/ /* Menu */ .menu { height: 100px; float: right; z-index: 100; } .menu ...
Below is a list I have: <ul id="orderlist"> <li id="2"> <span class="pull-right value">Ready</span> <img src="" class="img-responsive"> Filet Mignon <small>2 servings</small> <small ...
Is there a way to instruct TypeScript on the prop types that a component is receiving? For example, if multiple is set to true, I would like TypeScript to expect that selectValue will be an array of strings. If it's not present, then TypeScript should ...
In my current setup, I have a Textfield component nested within other components where I pass a function pointer down to it as a prop. The challenge I'm facing is that the function responsible for passing the contents of the Textfield back up to the r ...
Need help with showing and hiding divs based on image clicks. Have 2 images (Image_A and Image_B) and 2 hidden Divs (Div_A and Div_B). If Image_A is clicked, show Div_A. If Image_B is clicked, hide Div_A and show Div_B. This should work both ways, ensurin ...
I've developed a large application using reactjs and redux. My main concern is how can I minimize the page size? I am aware of code splitting in webpack, but my impression is that it's mainly for multi-page applications. In my case, I only have ...
Currently exploring the material-ui Dialog feature. Material-UI Dialog documentation Attempting to make the dialog draggable across the viewport seems not supported in material-ui by default, as highlighted in this issue. Experimenting with react-dragga ...
I've encountered an issue with my form and song state while trying to add a new field called "appleMusicId". Unfortunately, every time I add this field, it seems to reset the values of timeDescription and sceneDescription. I've spent hours tryin ...
I'm currently utilizing ASP.NET Core Identity within my project. I have a form that includes fields for Name and Username. The issue arises when attempting to save values from the Name field, as it triggers an error stating that they are not in the co ...
We've implemented babel and lerna to maintain specific elements of our react web app separately. While the setup has been effective thus far, we're encountering styling issues when generating the static build. The main project is not processed t ...
As I am not familiar with jQuery, I came across this script while searching for a time picker. If anyone could guide me on how to incorporate this code into my HTML page to enable the time picker functionality, I would greatly appreciate it. /* jQuery t ...
My hamburger menu is fully functional using CSS alone. However, when the menu opens, it doesn't fill the entire screen as I would like. Currently, my page content appears below the open menu, creating a cluttered look. https://i.sstatic.net/EtTsr.png ...