I've spent hours on this and can't figure it out, so help would be appreciated.
I have a carousel that uses a foreach loop to create the items. One of the requirements, however, is that the div housing the carousel should have its color changed on the data used from the foreach.
<div class="p-0 col-lg-6 text-light d-none d-sm-block w-50 h-100">
<div id="carousel" class="carousel d-flex flex-column justify-content-center align-items-center w-100 h-100 rounded bg-danger" data-bs-ride="carousel">
<div class="carousel-inner justify-content-center" role="listbox">
#foreach($marketingItems as $marketingItem)
<div class="carousel-item text-center h-100 {{ $loop->first ? 'active' : '' }}">
#if($marketingItem->image != null)
<div class="item">
<img src="{{get_marketing_image($marketingItem->image)}}"
alt="{{$marketingItem->image}}" class="img-thumbnail pb-5">
</div>
#endif
The above is an example of one item, I want to change the background color of the div id: carousel using my $marketingItem->bg_color and replace the bg-danger.
I found this:
$("#carousel").on('slide.bs.carousel', function () {
document.getElementById("carousel").style.backgroundColor = "red";
});
But that doesn't seem to work... Please help! Thanks..
Try to change your js like :
$(document).ready(function(){
$("#carousel").on('slide.bs.carousel', function () {
document.getElementById("carousel").style.backgroundColor = "red";
});
});
Managed to figure it out, redid the css and managed to get it inside the box. Had some bootstrap stuff that was applying a margin and what not. Thanks for the help!
Related
<div ngClass="{{isDecisionHistory? 'card border-bottom-0':'card'}}">
<div class="card-header pl-2" (click)="isDecisionHistory = !isDecisionHistory"
[attr.aria-expanded]="!isDecisionHistory" aria-controls="collapseBasic">
<i class="rca-icon ml-0 align-middle h3">{{isDecisionHistory ?'arrow_down':'arrow_up'}}</i>
Decision History
</div>
<div id="collapseBasic" [collapse]="isDecisionHistory">
<div *ngIf="!!decisionHistory_rowData; else nodata">
<app-ag-grid
[rowData]="decisionHistory_rowData" [columnDefs]="decisionHistory_columnDefs">
</app-ag-grid>
</div>
</div>
</div>
With the above code, my grid width is getting reduced as the default 200px is being given for ag-header-cell.
But when i remove this thing : id="collapseBasic" [collapse]="isDecisionHistory" from 7th line, the width is fine. How to handle this?
I am creating various cards using fetch API, this cards are holding details like (Author, Title, Cover Image, etc.).
There is a lot of cards renders there once API call my struggle is how to get specific card data/details like ( author, title etc.) of clicked card. when user clicked any of the card from these set.
HTML
<div class="row" id="ShowReports">
<div class="col-lg-3 col-md-4 col-sm-6 mt-3" onclick="show(this)" id="card">
<div class="card p-1">
<img src="https://d3i5mgdwi2ze58.cloudfront.net/znuxxu2npw851eeboqayu3e35udn" alt="image"
class="bookimg" width="150" height="200">
<h6 class="mb-3 booktitle">${title1}</h6>
<p class="mb-0 bookpara" name="author">Author : ${author1}</p>
<p class="mb-3 bookpara" name="pages">Pages : ${pages1}</p>
Download1
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mt-3" onclick="show(this)" id="card">
<div class="card p-1">
<img src="https://d3i5mgdwi2ze58.cloudfront.net/znuxxu2npw851eeboqayu3e35udn" alt="image"
class="bookimg" width="150" height="200">
<h6 class="mb-3 booktitle">${title2}</h6>
<p class="mb-0 bookpara" name="author">Author : ${author2}</p>
<p class="mb-3 bookpara" name="pages">Pages : ${pages2}</p>
Download2
</div>
</div>
</div>
javaScript
function show() {
var details = this.innerHTML
console.log(details)
}
Don't know what is the right approach or method to this...
UPDATED
We need to assign unique id to data elements. For example: id="${id}-author". Note that id is from your card id
<div class="col-lg-3 col-md-4 col-sm-6 mt-3" onclick="show(${id})" id="card">
<div class="card p-1">
<img src="https://d3i5mgdwi2ze58.cloudfront.net/znuxxu2npw851eeboqayu3e35udn" alt="image"
class="bookimg" width="150" height="200">
<h6 class="mb-3 booktitle" id="${id}-booktitle">${title1}</h6>
<p class="mb-0 bookpara" name="author" id="${id}-author">Author : ${author1}</p>
<p class="mb-3 bookpara" name="pages" id="${id}-pages">Pages : ${pages1}</p>
Download1
</div>
</div>
After that, we can implement show function like below
function show(id) {
const author = document.getElementById(id + "-author").innerHTML;
const booktitle = document.getElementById(id + "-booktitle").innerHTML;
const pages = document.getElementById(id + "-pages").innerHTML;
console.log({ author, booktitle, pages })
}
If you don't want to modify HTML, you also can try this way
onclick="show({ author: ${author}, booktitle: ${booktitle}, pages: ${pages} })"
And you need to have params corresponding to your data name
function show({ author, booktitle, pages }) {
console.log({ author, booktitle, pages })
}
OLD ANSWER
onclick="show(this)"
this in this context is referred to the global one, but from my understanding of your question, you're trying to get scoped context, so the change could be
onclick="show(event)"
To access the innerHTML from that click, you can try this way
function show(event) { //the param needs to be passed properly
var currentElement = event.target || event.srcElement;
var details = currentElement.innerHTML
console.log(details)
}
P/s: If you want to keep the global context on this, you also need to pass the param on show function.
# Nick Vu thanks for your comment your approach is quite logical and great well what i have did is, I have assigned a unique id to every card div while calling API and then target its childnode's innerHTMLS.
HTML
<div class="col-lg-3 col-md-4 col-sm-6 mt-3" id="card">
<div class="card p-1" id="second" onclick="show(id)">
<img src="https://d3i5mgdwi2ze58.cloudfront.net/znuxxu2npw851eeboqayu3e35udn" alt="image"
class="bookimg" width="150" height="200">
<h6 class="mb-3 booktitle">${title2}</h6>
<p class="mb-0 bookpara" name="author">Author : ${author2}</p>
<p class="mb-3 bookpara" name="pages">Pages : ${pages2}</p>
Download2
</div>
</div>
</div>
javascript
function show(e) {
console.log(e)
var details = document.getElementById(e)
console.log(details)
console.log(details.childNodes[1].src)
console.log(details.childNodes[3].innerHTML)
console.log(details.childNodes[5].innerHTML)
console.log(details.childNodes[7].innerHTML)
}
this is working around what i want as output.. thanks. Or may be at last i can do forEach loop of childnodes to make it more short.
I'm trying to figure out how to resolve the problem with hiding/showing elements when I'm changing the column size.
You can see - there is some user avatar and round badge with the number of other (hidden) users. After click on it popover is shown:
What I want to achieve:
When column width is changed then more/fewer avatars are visible and number in the round badge is changed (if all of the avatars are still not visible)
Data for popover is changed and it's consistent to displayed information
Let's get to the code (data is hardcoded at the moment):
Column that I talked about:
<div class="fixed-size-column-130">
<div class="d-flex align-items-center flex-row">
<div class="profile-image-holder d-flex justify-content-center align-items-center m-r-5">
<i class="cc-icon cc-icon"></i>
</div>
<div *ngIf="diary.Approvers.length > 1" class="round-badge cc-grey-100-bg cc-grey-200-txt">
<a [ngbPopover]="popContent" placement="right">+{{diary.Approvers.length - 1}}</a>
<ng-template #popContent><app-approvers [approvers]="testApprovers"></app-approvers></ng-template>
</div>
</div>
</div>
Popover:
<div *ngFor="let user of approvers">
<app-approver [user]="user"></app-approver>
</div>
Single user in popover:
<div class="d-flex align-items-center p-3 border-bottom">
<a class="profile-image-holder d-flex justify-content-center align-items-center mr-3">
</a>
<div class="d-flex flex-column">
<p class="mb-0 small-txt bold">{{user.firstName}}</p>
<p class="mb-0 small-txt">{{user.lastName}}</p>
</div>
</div>
I don't know how to handle this. I was thinking about ngIf directive but IMO there has to be a better way to achieve my goal. Can someone help me, please?
STACKBLITZ example: https://stackblitz.com/edit/angular-gjunnt-ykjiqy
Calculate how many elements can occupy in the container. and make a subarray of profile based on this value. Call the same in the window resize
#HostListener("window:resize", ["$event"])
onResize(event) {
this.totalOccupy();
}
ngOnInit() {
this.totalOccupy();
}
totalOccupy(): any {
let space = Math.floor(
this.divToMeasureElement.nativeElement.offsetWidth / this.itemWidth
);
this.displayApprovers = this.testApprovers.slice(0, space);
}
Full Solution: stackblitz
See the difference by resizing the output window
I have some cards who are supposed to be inline, but I have to use a display none on them. When I click on a specific button, I want to display these cards; but when I do that, each cards appears to take a row when I want to have them on the same row
<div class="row" id="menu_lv2r">
<div class="col-lg-2">
<div class="card card-chart">
<div class="card-header">Character 1</div>
<div class="card-body card-body-top">
<img class="card-img" alt="character_image" src="./images/char1.jpg"/>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="card card-chart">
<div class="card-header">Character 2</div>
<div class="card-body card-body-top">
<img class="card-img" alt="character_image" src="./images/char2.jpg"/>
</div>
</div>
</div>
</div>
Theses were my 2 cards examples
If I let the code like that, they are all inline which is what I want
Now If I add some css to hide them
#menu_lv2r{
display: none;
}
The row with the 2 cards disapeared which is still fine.
But now, when I use some Js to print them again, they appear in one row each.
var elt = document.getElementById('menu_lv2r');
elt.style.display = "inline";
Thanks for your help
You should use display: flex for parent element.
elt.style.display = "flex";
It's the default value for bootstrap class .row.
Just use flex instead of inline. Everything works fine
i am trying to make a whole div clickable, i did the following
<a href=""><div class="col-lg-3 col-md-6 col-sm-6 col-12 item-mb">
<div class="service-box1 bg-body text-center">
<img src="img/service/service1.png" alt="service" class="img-fluid">
<h3 class="title-medium-dark mb-none">Electronics</h3>
<div class="view">(19,805)</div>
</div>
</div></a>
but he div is not becoming clickable, can anyone please tell me whats wrong in my code?
Try
<div class="col-lg-3 col-md-6 col-sm-6 col-12 item-mb" onClick="javascript:window.location='//stackoverflow.com'">
<div class="service-box1 bg-body text-center">
<img src="img/service/service1.png" alt="service" class="img-fluid">
<h3 class="title-medium-dark mb-none">Electronics</h3>
<div class="view">(19,805)</div>
</div>
</div>
First of all, you can't have a div inside a. I mean, technically in some environments it works, but its against specification, so you can't rely on that structure. If you want to have a div wide link you better have your a absolutely positioned and stretched to fit your div
You can use javascript, in the code below I created a function that adds click event handlers instead of using a tags which can't be put inside each other.
Also included an example of how to style the div (see clickable css class).
function addLink(divId, url){
let div = document.getElementById(divId);
div.setAttribute('data-link-url', url);
link1.addEventListener('click', function(e){
window.location = this.getAttribute('data-link-url');
});
}
addLink('link1', 'https://stackoverflow.com');
.clickable{
cursor: pointer;
}
<div id="link1" class="clickable">
<div class="service-box1 bg-body text-center">
<img src="img/service/service1.png" alt="service" class="img-fluid">
<h3 class="title-medium-dark mb-none">text</h3>
<div class="view">(19,805)</div>
</div>
</div>