Button disabled unless the checkbox is clicked, how do you also disable hover?
Is it possible to add conditionals to css elements in vanilla, or is that something sass/scss picks up? I'd like button:hover to also be disabled unless yes = true, that's it lol.
51 Replies
You can use
button:not([disabled])
to select buttons that aren't disabled, so you can attach hover events to thatI like that solution personally but ya you could also have the
class:yes
and then define it in the css .yes
I'd probably go with Z's solution though.Oh that's neat. Is that an scss only thing or can I use that in vanilla css
that is css
:not() is i mean if that is what you mean not me, thats svelte >.>;;
ah perfect that works exactly how I wanted it to
sideNote if you want to have disabled attrib fade away if false you can do this
hey b1 is it possible to hide a component until I hit a checkbox and click the button?
the whole !yes logic was confusing to me so you might have to switch it lol
naming things is hard but a yes var for a boolean?
>.>;;
input[type="checkbox"]:not(:checked) ~ button { display: none; }
Purely CSS assuming button is a sibling to the checkbox. Using this you can allow the button to be a child of a sibling, and you can also use :has()
if you want the checkbox as a child, you want what are the base siblings for one to check if it has a checked checkbox, then select the sibling and find the button
Scripting would be a better option howeveryou can just put them in a if/else block
ah yes.. my bad, I was overthinking it lol
hah happens
I mean there is 10 ways from sundays to do most things, like Z over here with solid CSS solutions 😄
Important part is don't mix up too many patterns in the same project, that is how its easy to get lost ever looking back or talking about it.
Def try out different ways though, like I mean you could do conditional slots too (though looks like slots might be going away in Svelte5 :o), since Kit you could use load() and only render the component based on a query param. Like endless xD
yeah, trying to find a style I like and stick with that, rather than mixing and matching
Not really sure how I go about this component part though, but that may have to be new post
Scripting is usually the way you want to handle interactivity because you can add accessibility
basically {if} componentOne is checkbox=yes and button clicked -> reveal componentTwo
Which is sad because I love to replace JavaScript with CSS even for complex things but it's only ever for fun
by scripting you mean handle it in js?
Yes
So this question I think stays relevant to the topic.
I think I have to import the 2nd component to my 1st component for this to work, as I tried it in the +layout.svelte and it wasn't working. I'm trying to find a way to show the 2nd component once I click the START button in the 1st component. I tired the below but it doesn't make sense.. Would it be an onclick?
I guess why components
first off 😄
uhh so basically I'm doing this
Like I make a component to separate concerns or reusability typically right?
just messing around lol
right but understand why you are doing what you are doing
Well it's effectively 4 separate apps, is how I've viewed it
{#if button disabled={!yes} && checked={yes}}
this is invalid btw
well looks it xD
you would just want {#if yes}
but again naming has me a bit confused but 😄yeah it's failed I just left it in there to show you how shit I am
lmao
lol na all good
but to also give you an idea of wtf I'm trying to do
click button -> reveal 2nd block
so check enables button
start enables next box
yeah
checkbox = {yes} -> button activates -> click button -> next box appears
interesting, can I not import a component into another?
oh wait, typo lmao
nvm, still doesn't work
ah shit nevermind, it works, but it brings the 2nd app into the 1st app.. Ah man, I'm trying to do too much shit at once lol
Yea idk you are playing and breaking things that is what counts a lot of the time.
yeah I mean this is just to see what I can do etc but I'd be curious how I solve that
Also I'm not quite sure why you are doing what you are doing.
Seems like lots of React brain shit
no offence to you
probably, I'm just dicking around
I'm not really sure how to do this in svelte
haha yea I revert to my previous comment
fuk around and find out is key... keep doing what you doing
I want to hit the button on the 1st block, unlock the 2nd block, hit button 2nd block, unlock 3rd block etc..
I just need to now figure out how I hit button on block 1 and have block 2 appear in block 2 😄
ah screw it, let's go build soemthing actually useful 😂
Personally since you are using Svelte/Kit I would take advantage and learn how to make a real website 😄
Like each project as /path/ or learn query params and real forms 😄
I was going to comment you are using a "form" now and would be great if you tried using it fo real no e.prevent default and what not.
but yea that is my brain not trying to send you down the rabbit hole lol
<div class="form">
yeah I get it, I was just about to rebuild my portfolio in svelte, i dunno, im at a loss of project ideas, too many to choose, brain overload
that is why finding one you want is key
something you could see yourself using or just a topic that you are passionate on
its not easy ngl but still best
ugh no idea, gaming and sport is all I find interesting, then just wanting to build functional apps
So you wanna build more Apps than Website I take it.
you do use the term very deliberate it seems 😄
I mean you see the pointless crap I make 🤣
I just want to learn hahaha
honestly mate I have no idea what I should be doing, I'm winging it, I have no mentor (I do but he's on vacation)
I say app, but I call anything in vscode an app
what do you consider a website, and an app? out of curiosity, then we can close this coz I've derailed it again lmao
maybe that's where I'm going wrong, I'm trying to build apps, rather than just building websites with content on them
I mean its a fine line ig any more these days. One I kinda have issues with honestly. People think their websites need to be "apps" lol or what not.
Don't mistake me I love PWA's so yea. But to me a App is the litteral term Application/Software.
Figma is an App
Github is a Website with Apps xD
idk if that is the best one ... its Sunday I'm toasted.
fair
I should focus on building websites, with concepts in them, instead of just throwing up a blank page and trying to build a form in it or whatever
I'm gonna make an MPA gallery site and get the hang of routing, simple project
thanks b1!