We Keep Coding

redering dynamic data from array of objects on an html page and want to flip the specific box. On front page i want to show image and heading

I am rendering dynamic data from array of objects on an html page. i want to flip the specific box. On front page i want to show image and heading while on the back page i want to show the paragraph. I am attaching the HTML and JavaScript file.
The HTML code
<div class="row rwOneOurservices ourServicesContainer" ></div>
JavaScript where I am rendering my data from an array of objects
const FnRenderOurService = () => {
if (ElourServicesContainer) {
ElourServicesContainer.innerHTML = "";
for (singleOurService of ourServices) {
ElourServicesContainer.innerHTML += `
<div class="col-sm-3 col-10 ourServiceElement" onclick="FnShowService('${singleOurService.id}')" id="${singleOurService.id}">
<div class="row">
<div class="col-md-4 col-12">
<img
src="${singleOurService.serviceImg}"
alt=""
/>
</div>
<div class="col-md-8 col-12">
<h5>${singleOurService.serviceName}</h5>
</div>
</div>
<div class="row">
<div class="col-12">
<p>
${singleOurService.serviceShortDesc}
</p>
</div>
</div>
</div>
`;
}
}
};
How to apply flip on every grid separately (might be on the basis of 'Id')?

Left align element with centered and variable width element in top row

I would like to find a way to left align <p> with centered <img> in the top.
As images are centered and my page contains different images with different widths, it seems to be a bit challenging.
Here is my html structure:
<div class="row">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 my-auto">
<div class="d-flex flex-row justify-content-center">
<img class="img-fluid d-flex flex-wrap align-items-center" id="image-id">
</div>
</div>
<div class="col-md-8">
SOME CONTENT
</div>
</div>
<div class="collapse collapse-information">
<div class="row row-collapse m-0">
<!--What I want to be left aligned with img tag-->
</div>
</div>
</div>
</div>
A way to do it would be to get the distance between image's div and border of centered image and to report this measure as a left-margin on the element I want to be aligned.
To solve it, I tried to use margin measurments based on window width but it as not working.

While working to have a clean question, I went through https://developer.mozilla.org/en/docs/Web/API/HTMLElement/offsetLeft.
The interresting part is that, javascript allows a dynamic measurement I can also dynamically attribute to other elements.
// get left offset
var leftDistanceLogo = document.querySelector("#image-id").offsetLeft;
// assing as margin to the following element
document.querySelector('.row-collapse').style.marginLeft = leftDistanceLogo + "px";
Last interesting point, this code should wait until the end of page loading (otherwise offet will be equal to 0), so I called it in a structure like:
window.addEventListener("load", function (event) {
setTimeout(() => {
var leftDistanceLogo = document.querySelector("#image-id").offsetLeft;
document.querySelector('.row-collapse').style.marginLeft = leftDistanceLogo + "px";
}, 0);
});

How to hide panel-body is empty?

I want to hide panel-body if it is empty.
Here's the example: BootPly
Code Javascript:
$(function() {
$('#container').load(function() {
if($.trim($(this).contents().find("container").find('panel-body').length) == 0) {
$(this).hide();
}
});
Code HTML:
<div class="container">
<div class="row clearfix">
<div class="col-md-9 column">
<div class="panel panel-primary">
<div class="panel-heading">Content</div>
<div class="panel-body fixed-panel">
<div class="form-group">
</div>
</div>
</div>
</div>
</div>
</div>

How about something like this? http://www.bootply.com/bKb0isdzKA
$(function() {
$('.form-group').each(function() {
if ($(this).is(':empty')) {
$(this).closest('.container').hide();
}
});
});
You had a few issues. For one, you were using #container as your selector, despite container being a class. Additionally, you were checking to see if body-panel was empty, but it contained a child div, so it would always have HTML content.
The code above will loop through each .form-group and hide the parent container if it's empty.
If this isn't exactly what you had in mind, let me know and I can make adjustments.

React: Nested onclick also triggers parent

I used the react version of the slick carousel to make a Netflix like carousel.
You can click on a tile and that tile then expands to show the details of that tile.
Example:
This works great thanks to Slicks ability to handle dynamic heights.
I want to add a close button the expanded section (as seen in the far right). But that is where I have an issue.
If I add a close button with a onClick handler, it will always trigger the parent Onclick which shows the expanded section.
The showExpanded onclick function just sets a showDetails state.
So my question is:
How can I set a state by clicking on the close button, without also triggering the wrapping parent.
I tried event.preventDefault() and event.stopPropagation() but that didn't do the trick.
Tile click looks like this:
expandTile(){
this.setState({
showDetails: true,
closeTile: false
});
}
Close button click function as I have it now:
closeTile(e){
e.preventDefault();
e.stopPropagation();
const showDetails = this.state.showDetails;
if(showDetails){
this.setState({
showDetails: false,
closeTile: true
});
}
}
Update: added JSX:
return (
<div className={s.itemPreWrapper} key={`${el.title}-item-${index}`}>
<div className={`${s.item} ${showDetails ? s.showDetails : ''}`}
onClick={self.state.expandItem}
data-index={index}
<div className={s.itemCaret}></div>
<div className={s.imgWrapper}>
<img src={el.itemImage}/>
</div>
<div className={s.overlay}>
{el.title}
</div>
<div className={s.expandedTile} style={{left: '-'+offset+'px'}}>
<div className={s.etItem}>
<div key={`subitem-${index}`} ref="subItem">
<div className="row">
<div className={`${s.etClose}`} onClick={self.state.closeTile}><span></span></div>
<div className="col-xs-12 col-sm-3">
<div className={`${s.etImage}`}>
<img src={el.itemImage} alt="product image" className="img-responsive"/>
</div>
</div>
<div className="col-xs-12 col-sm-9">
<div className="row">
<div className={`${s.etContent} col-xs-12 col-sm-6 col-lg-8`}>
<h2>{itemTitle}</h2>
<p> {el.description}</p>
</div>
<div className={`${s.etMedia} col-xs-12 hidden-sm col-sm-5 col-lg-3`}>
{media}
</div>
</div>
</div>
<div className="col-xs-12 col-md-11">
{optionsElem}
</div>
</div>
</div>
</div>
</div>
</div>
);

A click event is essentially the result of a mousedown event followed by a mouseup event on the same element, which can propagate around even if stopPropagation is called on a click event.
One solution is to call it on mousedown as well; in its simplest form:
<div onMouseDown={e => e.stopPropagation()} ... />

The solution that worked for me was to place a call to event.stopPropagation() in your child onClick method. This will prevent the parent from being called.

Rearranging the order of divs in an RSS using jQuery

I need to rearrange the div order of an RSS. Each item has 3 divs. I will need to move the div with the class "itemDate" before the div with the class "itemTitle" (see markup below). Should I use the function .each(); is there a jQuery out of the box solution for this or do I need to write my own function?
<div id="RSS">
<div class="col-md-3 item">
<div class="itemTitle"></div>
<div class="itemDate"></div>
<div class="itemContent"></div>
</div>
<div class="col-md-3 item">
<div class="itemTitle"></div>
<div class="itemDate"></div>
<div class="itemContent"></div>
</div>
<div class="col-md-3 item">
<div class="itemTitle"></div>
<div class="itemDate"></div>
<div class="itemContent"></div>
</div>
</div>

There is a function in jQuery called prependTo, which moves a element to the beginning of a given target. Check it out the example below.
$('.itemDate').each(function(){
$(this).prependTo($(this).parent());
});
This code just move every itemDate into the beginning of every respective parent.