Develop Reference

How do I check if the page is scrollable when the user first accesses it in React?

I want to display scrollbar when the user first accesses each page
So I tried the code below:
function App() {
const app = document.querySelector("#root");
const [scrollHeight, setScrollHeight] = useState(app?.scrollHeight);
useEffect(() => {
setScrollHeight(app.scrollHeight);
}, [scrollHeight])
if (scrollHeight > window.innerHeight) {
/* show scrollbar and do something */
}
return (/* some components */);
}
Isn't there a better idea?

In page.css or wrapper html element of Page component, you can set.
For page.css:
{ overflow: auto }
For wrapper html element:
"<div style={{overflow: 'auto'}}>"
Document link: overflow css

Is it possible to make a dark/light mode button that changes the inner css colors on all pages?

Currently I am practicing doing a light/dark mode button for a website I am building with HTML and CSS. The website is in dark mode initially as you open it. But how can I make it that when a user clicks the "light-mode" button for all pages to become dark/light mode based on what he has set?
I am currently running this method:
$(document).ready(function() {
$("#light-mode").click(function() {
$("body").toggleClass("light-mode-bgr");
$("h1").toggleClass("light-mode-text");
$(".message-disc p").toggleClass("light-p");
$("p").toggleClass("light-mode-text");
$(".img-rad label p.maybe").toggleClass("light-mode-btn");
$(".buttons button[type='next']").toggleClass("light", "disabled");
$(".buttons button[type='button']").toggleClass("light-ret");
$("input[type=radio]:checked+label>p").toggleClass("light-radio");
$("input[type=text]").toggleClass("light-inp");
$("input[type=tel]").toggleClass("light-inp");
$("input[type=num]").toggleClass("light-inp");
$("input[type=number]").toggleClass("light-inp");
$("textarea").toggleClass("light-inp");
console.log("clicked");
});
});
but obviously this is not changing the inner css, its only changing classes with the toggle I am using, and if I refresh the page on light-mode, that style is gone back to the default dark-mode style.
How can I make it so that it fully changes the inner css so that it applies to all pages in my website? If so is it possible with JQuery?

found a video https://www.youtube.com/watch?v=wodWDIdV9BY and followed the steps, it required me to change a lot of my css into variables:
:root {
--color-purpe: #FFA14A;
--color-purple-hov: #DE8430;
--body-bgr: #2B3549;
--h1-orange: #ffffff;
--black-labels: #ffffff;
--bas-orange: #7D63DE;
--bas-org-hov: #7D63DE;
--bas-red: #C34437;
--bas-red-hov: #b03628;
--disbaled: #a0a0a0;
}
.lightMode {
--color-purpe: #7D63DE;
--color-purple-hov: #7D63DE;
--body-bgr: #ffffff;
--h1-orange: #E18127;
--black-labels: #000000;
--bas-orange: #FFA14A;
--bas-org-hov: #DE8430;
--bas-red: #C34437;
--bas-red-hov: #b03628;
--disbaled: #a0a0a0;
}
and then I used this function to make it work:
let lightMode = localStorage.getItem('lightMode');
const lightModeToggle = document.querySelector('#light-mode');
// check if light mode enabled
// if off turn on
// if on turn off
const enableLightMode = () => {
document.body.classList.add('lightMode');
localStorage.setItem('lightMode', 'enabled');
}
const disableLightMode = () => {
document.body.classList.remove('lightMode');
localStorage.setItem('lightMode', null);
}
if (lightMode === 'enabled') {
enableLightMode();
}
lightModeToggle.addEventListener('click', () => {
lightMode = localStorage.getItem('lightMode');
if (lightMode !== 'enabled') {
enableLightMode();
console.log(lightMode);
} else {
disableLightMode();
}
});
so when I click the toggle, light mode is applied and changes the :root values into the .lightMode class values and gives me the result I wanted.
The function also stores the value in localStorage so when I refresh the page it doesnt go back to the default "dark mode" style.

onClick remove borders and on next click add them again CSS,Preact

Hello using a table kind of like this
https://jsfiddle.net/vw19pbfo/24/
how could i make a trigger onClick that removes borders on first click and on second click add them back but that should only happen on the row that is being clicked on and not affect the other. I have tried to have a conditional css on the first and last <td> but that affected every border but i only want to affect the clicked one

function removeBorders(e){
var target = e.target || e.srcElement;
target.parentElement.classList.toggle('without-border');
};
Working JSFiddle: https://jsfiddle.net/andrewincontact/su86fhxo/9/
Changes:
1) to css:
.my-table-row.without-border td {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
2) to html:
onclick=removeBorders(event) instead onClick=this.removeBorders()

One way would be to check the <td> element's parent and add/remove a custom class, like so:
function removeBorders(e) {
var row = e.parentElement;
if (row.className.indexOf("has-borders") === -1) {
row.classList.add("has-borders");
} else {
row.classList.remove("has-borders");
}
};
Working JSFiddle: https://jsfiddle.net/d380sjrh/
I also changed onClick=this.removeBorders() to onclick="removeBorders(this);".

JSFiddle: https://jsfiddle.net/4qdstec7/
Use React's state to set and unset the selected class.
const Row = ({ children }) => {
const [selected, setSelected] = useState(false);
const onClick = e => setSelected(!selected);
return (
<tr
className={selected && 'selected'}
onClick={onClick}
>
{children}
</tr>
)
}
Developing in React requires a shift in thinking from traditional web development. Please take some time to read this excellent post from the React team.

Remove focus from AG-Grid

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;
}

Changing cursor to wait on table sort

I am using React Bootstrap Table and I am trying to add a loading cursor when the user clicks the sort button.
While I am using that specific table, the problem seems more universal in that the DOM is unavailable when the table is sorting so anything I do to the cursor only happens after the table is done sorting. If the table contains a lot of items this can take a few seconds.
Is there any way add a loading cursor before the sorting starts?
Here is what I have tried so far in terms of React-Bootstrap-Table:
stopSortLoading = () => {
if (document.querySelector('.table-container').classList.contains('loading-pointer')) {
document.querySelector('.table-container').classList.toggle("loading-pointer")
}
}
startSortLoading = () => {
if (!document.querySelector('.table-container').classList.contains('loading-pointer')) {
document.querySelector('.table-container').classList.toggle("loading-pointer")
}
}
render() {
const options = {
onSortChange: this.startSortLoading,
afterTableComplete: this.stopSortLoading
};
I have also tried adding an onClick to a parent div i.e.
<div className='table-container' onClick={() => {
if (!document.querySelector('.table-container').classList.contains('loading-pointer')) {
document.querySelector('.table-container').classList.toggle("loading-pointer")
}
}}>
...table code
</div>
Nothing I have tried has any effect until AFTER the table is sorted.