const cards = document.getElementsByClassName('card');
for(const card of cards){
card.style.backgroundColor = 'red'
}
the style property is not working correctly. It was working two line before now it's not working. Please help me to find the solution.
You have to give some height or padding on the cards. Then it will be shown.
for (const card of cards) {
card.style.backgroundColor = 'red'
card.style.padding= '20px'
}
Related
I'm learning to use Angular 12 and trying to build a sidenav. I know I can use angular material, but I don't want to use the css associated with it.
I'd like to use this in my project. But can't understand how to convert the JS to be used in the angular 12 project.
I've placed the javascript in a menu.js under my assets/js folder. But can't understand how it's used with the component.js since it isn't a actual function, but a document.queryselectorall.
let arrow = document.querySelectorAll(".arrow");
for (var i = 0; i < arrow.length; i++) {
arrow[i].addEventListener("click", (e)=>{
let arrowParent = e.target.parentElement.parentElement; //selecting main parent of arrow
arrowParent.classList.toggle("showMenu");
});
}
let sidebar = document.querySelector(".sidebar");
let sidebarBtn = document.querySelector(".bx-menu");
console.log(sidebarBtn);
sidebarBtn.addEventListener("click", ()=>{
sidebar.classList.toggle("close");
});
Your code is old school. You need to get used to the Angular approach.
Basically what your code is doing is toggling a CSS class on an element on click. Here's how you do that in Angular:
In your HTML file:
<button (click)="toggleSidebar()">Toggle Sidebar</button>
<!-- the show-me class is added when showSidebar is true -->
<div class="sidebar" [class.show-me]="showSidebar">I am a sidebar</div>
In your .ts file:
showSidebar = false;
toggleSidebar() {
this.showSidebar = !this.showSidebar;
}
And then add your animation styles in your .styles file:
.sidebar {
// styles
}
.sidebar.show-me {
// styles
}
For reference, check out this StackBlitz Link
I have css animation #keyframes class..
/*
Animation classes.
*/
.example-enter {
animation: flasher 0.5s;
}
#keyframes flasher{
from {
opacity: 0.2;
}
to {
opacity: 1;
}
}
I am applying this .example-enter css class to div when array.map is having new added data. like below..
<div className="example-enter"> ... </div>
The question is when I added new Array to state, react will create new div, and gives animation to last added div only. But I want very first element to be animated, not last one when added new state to array.
You can check out demo in above stackblitz link to check out more details and see there when we add new list only last div is animated but i want to animate very first element to animate because that first div element is i added to array. using.. setTodoState( prev => [newTodoState, ...prev ]);
I guess the problem is on this line, you're using index as key for your LineItem.
todoState.map((item, index) => <LineItem key={index} todoList={item} index={index}/>)
React does not recomment using indexes for keys, read more here.
You need to have some sort of id to uniquely identify your todo items and use that id as key when you do your todoState.map((item) => .... So you'll have to make your todo item as an object and not a string.
In your TodoForm, we'll add a generateId and use this functions return value for our new todo's id.
TodoForm.tsx
function generateId() {
// https://stackoverflow.com/a/8084248/8062659
return Math.random().toString(36).substring(7);
}
const sendTodoItem = (e) => {
if(todoInput.trim().length > 0){
const text = todoInput.trim();
const id = generateId();
addNewTodoState({ text , id }); // notice here
setIsDisabled(false);
setTodoInput('');
}else{
setIsDisabled(true);
}
}
Now on you TodoListLineItem, we'll remove the index from map and use the current todo's id as key.
TodoListLineItem.tsx
todoState.map((item) => <LineItem key={item.id} todoList={item}/>)
We also have to update your Line-Item to display the text property of the current todo.
Line-Item.tsx
<p>{todoList.text}</p>
Check this link for a demo.
--
Because we're using now an object as a todo item, I believe you should also make changes on some parts of the app, like the model and the delete feature. But the changes above should be sufficient to achieve what you want as described on your post.
A simple approach is to add the animation class with useEffect and remove it after the duration of the animation.
import React, {useEffect, useState} from 'react'
const YourApp = props => {
const [animate, setAnimate] = useState(false)
const [todoState, setTodoState] = useState([])
useEffect(() => {
setAnimate( true )
setTimeout( () => { setAnimate( false ) }, 500 )
}, [todoState])
return <div className={ animate ? "example-enter" : null } > ... </div>
}
Each time you update todoState, it will apply the animation class for 0.5s basically.
My issue is react-leaflet tooltips overlapping. When hovering over either a marker or the corresponding list on the right-hand side, the tooltip above it increases in size. However, I want the tooltip to appear layered above other tooltips.
I tried changing the style z-index in styling, but that doesn't work. I found a suggestion to change the Tooltip pane instead, but that didn't work either. It seems like changing the pane doesn't update.
Default pane reference: https://leafletjs.com/reference-1.5.0.html#map-pane
render() {
var job = this.props.job;
var icon_to_use = pointerIcon;
var css_class = 'tooltip-normal';
var paneToUse = 'tooltipPane';
if (this.props.selectedJob === this.props.id) {
css_class = 'tooltip-bold';
paneToUse = 'popupPane';
}
return (
<div>
<Marker position={[job.lat, job.lng]} pane={'markerPane'} icon={icon_to_use}>
<Tooltip permanent={true} pane={paneToUse} direction {'top'} offset={L.point(-10, -15)}>
<div className={css_class}>
{job.location}
</div>
</Tooltip>
</Marker>
</div>
)
}
The way I'm deciding which Tooltip should currently be active is by checking if this.props.selectedJob equals the current id. This works perfectly fine for assigning the css class in this line: css_class = 'tooltip-bold';, but not for the next line where I'm assigning the popupPane.
Even though I'm assigning the pane in the Tooltip component, they don't change in the actual application. Is there any way to dynamically make one tooltip overlay another based on hovering?
I found a solution, and I figure I'll post it here in case someone else comes across this. I simply had to set the tooltip className to a class with a certain index. Here's the basic idea (leaving out some unnecessary stuff):
if(condition){
tooltipCssClass = 'front-tooltip-class';
}
return (
<Tooltip permanent={true} className={tooltipCssClass} direction={'top'} offset={L.point(-10, -15)}>
...
</Tooltip>
)
CSS:
.back-tooltip-class {
z-index: -100;
}
.front-tooltip-class {
z-index: 100;
}
I am implementing Drag and Drop in React.js. How to pass custom react component in I am implementation Darg and Drop in React.js. I want to have my custom react component as a preview image of my draggle component. How to pass custom react component in setDragImage. I do not want an image.
onDragStart = (e, index) => {
this.draggedIndex = index;
this.draggedItem = this.state.list[index];
e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData("text/html", e.target.parentNode);
e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
};
The expected result is a custom preview component.
Thanks in advance
Was searching for the same thing until I finally stumbled upon the answer. Hope this helps someone (TSX):
private onDragStart(e: React.DragEvent) {
let image: JSX.Element = (<></>); // <== whatever you want here
var ghost = document.createElement('div');
ghost.style.transform = "translate(-10000px, -10000px)";
ghost.style.position = "absolute";
document.body.appendChild(ghost);
e.dataTransfer.setDragImage(ghost, 0, 0);
ReactDOM.render(image, ghost);
}
(This is a little over-simplified as you also need to remove the ghost from the DOM after a drop).
I'm using AG Grid on a website. When the user clicks a cell, it is focused and gets a blue outline.
I need to remove this focus when the user clicks certain other elements on the site, but I don't know how to do it. Is there a method or property to set for that?
Add the following snippet to your css
.ag-cell-focus, .ag-cell {
border: none !important;
}
Example - https://next.plnkr.co/edit/xO5N5u84U8n4HgK5
Angular2+ DEMO
ngAfterViewInit(){
let body = document.body;
body.addEventListener("mouseup", (e) => {
let container = this.agGrid._nativeElement;
if (!container.contains(e.target))
{
this.gridApi.clearFocusedCell();
}
})
}
JavaScript DEMO
var body = document.body;
body.addEventListener("mouseup", (e) => {
let gridDiv = document.querySelector('#myGrid')
if (!gridDiv.contains(e.target))
{
gridOptions.api.clearFocusedCell();
}
})
Apple below code to the global style.css file
.ag-cell-focus {
--ag-range-selection-border-color: transparent !important;
}