Suggon
KPCKevin Powell - Community
•Created by Suggon on 6/30/2024 in #front-end
`<br>` vs. `white-space`
If I'm aiming for accessibility for specifically multi-line quote/speech, which among the two would be more preferrable? For the first option, I do have a processor to prefix every newline with a
<br> , but the CSS way seems clean on paper.
https://codepen.io/Suggon/pen/yLWdMXj?editors=1100
Suggestion for a more semantic tag is also welcome, but please note that I have a limited number of usable tags.3 replies
KPCKevin Powell - Community
•Created by Suggon on 6/27/2024 in #front-end
Issue with JQuery event handler
Hello. I'm animating a navbar which responds to mouse and keyboard events using JQuery event handlers to ensure a proper UX. Most part is done, however there remains one last issue where clicking/focusing on a link and un-hovering right after, the "highlighter element" returns back to its initial location.
https://codepen.io/Suggon/pen/MWzqByj?editors=0010
The highligher is a live element conrolled by JS. In order to animate moving towards the target, I used the
.on('mouseenter focusin', function() method which is working nicely. Out of intuition, I also used .on('mouseleave focusout', function() for its "reverse" - that's the one which did not work. The apparent reason being that it's listening to EITHER mouseleave OR focusout. So assuming we clicked on a link to gain a focus state, the highlighter doesn't retain itself, since the mouseleave event is fired despite the element being still on focus state.
I thought of googling the issue but got lost on words on how exactly to search for it. Much appreciated if someone could help me out.4 replies
KPCKevin Powell - Community
•Created by Suggon on 12/21/2023 in #front-end
Animating `aspect-ratio` property
(this is a simplified version of my earlier post here)
Pen link: https://codepen.io/Suggon/pen/NWJKZXE
i've designed a two-column image layout with two checkboxes to toggle how the images are laid out. "Merge" merges the two images using
translate and "Clip" sets the aspect-ratio of card__hero image to 2/3.
Merging is nice and fine and animates smoothly, but animating the clipping is turning out to be trickier than expected. is animating aspect-ratio possible to achieve with pure CSS?9 replies