Axim Posts - Answer Overflow

Axim

•Created by Axim on 3/9/2025 in #front-end

removing crossing path in svg

Hi Im trying to make some simple svgs, but when doing a cross sign (x) there's some path that is overlapping but cant find where since Im only using the cubic bezier command for rounded tips. Here's my jsfiddle (it's the last svg): https://jsfiddle.net/qh87nk3u/3/

1 replies

KPCKevin Powell - Community

•Created by Axim on 2/8/2025 in #front-end

Add several animations

Im trying to add several animations to an element by using JS because it's a dynamic element, the problem is the element.style.animation apparently only allows one declaration I cant add by using string concatenation like this :

js element.style.animation += "my_other_animation 1s ease-out"

js element.style.animation += "my_other_animation 1s ease-out"

I also can't declare them both (comma separated) because one is added when dragging and the other when the element is created. Since the declaration above takes precedence the other one is overwritten so how to add several animations ? I thought maybe adding custom props for each animation and adding class with both animations declared using the custom props? but Is there a way in JS ?? thx fiddle here : https://jsfiddle.net/dhea7rqk/1/

3 replies

KPCKevin Powell - Community

•Created by Axim on 7/16/2024 in #front-end

set parent radius same value as child circle radius

So I wanted to make some kind of button that have an image(circle) inside it and some text next to it, I wanted the size to be dependent on the circle image and the parent radius has to match the circle image radius so it will fit perfeclty, here's my attempt: https://jsbin.com/cewodeyiso/1/edit?html,css,output The problem here is that the border-radius is calculated on a hard coded value of the circle width, I wanted it to work no matter what the auto width of the circle is. Any insight on how to do it?

6 replies

KPCKevin Powell - Community

•Created by Axim on 5/23/2024 in #front-end

linear-gradient border

Im trying to apply a linear-gradient border to an element, so I just have a div and the ::before element with position absolute but the problem is the ::before wont go behind the div even with z-index:-1; Here's a quick jsbin to see what Im talking about : https://jsbin.com/cujusodumi/edit?html,css,output

5 replies

KPCKevin Powell - Community

•Created by Axim on 5/13/2024 in #front-end

mousedown event set on parent but keeps getting child element

Basically the title, when having the mousedown event on a parent I only want the target to be the parent wherever I click on the parent but Im getting the child as the target when clicking even though there's no event set on the child. Here's a jsbin to illustrate it: https://jsbin.com/bopoboqire/edit?html,css,js,output If anyone can help me understand why it's behaving like that pls

4 replies

KPCKevin Powell - Community

•Created by Axim on 10/26/2023 in #front-end

(Css Spec) Clarification on containing block definition

Guys I have a little question about containing block, By definition containing block is the nearest ancestor that is a block container(containing only block-level or inline-level boxes) or which establishes a formatting context but here in this code :

<DIV id="div1">
    <P id="p1">This is text in the first paragraph...</P>
    <P id="p2">This is text
      <EM id="em1"> in the 
        <STRONG id="strong1">second</STRONG>
      paragraph.</EM>
    </P>
</DIV>

<DIV id="div1">
    <P id="p1">This is text in the first paragraph...</P>
    <P id="p2">This is text
      <EM id="em1"> in the 
        <STRONG id="strong1">second</STRONG>
      paragraph.</EM>
    </P>
</DIV>

The spec says that the containing block for strong element is the second paragraph(id=p2), but if we follow the definition shouldnt the 'em' element be the containing block since it contains only inline-level elements therefore being the nearest block container? Anyone can enlighten me on this 🧐

30 replies

Gaming

Programming