Alex
KPCKevin Powell - Community
•Created by Alex on 10/5/2024 in #front-end
Styling cells that span multiple rows
I'm attempting to build a timetable using HTML tables and apply a class that visually indicates the current event using a bit of js.
Each row represents 30 minutes, and different events last for different amounts of time.
I've worked out how to apply the styles to cells in a given row, and worked out some logic for selecting the right
<tr> based on the current time, but longer events span multiple rows and only receive the styling while the first 30-minute chunk (i.e. the row that the cell starts in) has the class applied.
Is there any way to apply a class/style to a cell by applying styles to one of the rows it spans? If not, any advice on the cleanest way to apply styles to those cells? Right now, the best I can come up with is putting a data attribute on every cell for the time window its in and comparing it to the current time, which feels a bit ridiculous.
Thanks!
https://codepen.io/Beanie127/pen/dyxXyLO191 replies
KPCKevin Powell - Community
•Created by Alex on 5/30/2024 in #front-end
Tracking cursor position over window rather than individual elements
I've been playing with an effect where a partially masked element positioned over the mouse adds filters in a glowy blob over a background grid of dots. See the codepen at https://codepen.io/Beanie127/full/RwmKvmz.
The problem I'm having is that when the cursor is over any element other than the div in the background, the circle positions relative to the cursor's offset over the element that the mouse is over, rather than relative to the whole viewport.
I've tried creating a new contentless element that sits at the top of the z-index and tracking the cursor's position on that element, but then the cursor can't interact with any elements underneath, so it's degrading UX.
I've also tried putting the event listener that's tracking the cursor position on the window, or on the document, rather than on a particular element, but that doesn't seem to change anything.
2 replies