but we should move this over to #796428329531605032

lol, i thought i was in there

many such cases

İt's modifying css and value for more than one place on the page at the same time. That's the bit I think is common to your case too.

Yeah, and you're correct! But that is only half of what needs to be done 🙂 The guy in the video is using

hx-swap-oob

and I tried that too, which works great for the first click on a nav-link. It swaps in our html with the added

.active

class as expected, and we have styled it with a different color so that it shows this is the page the user is currently on. So far so good. However, the issue presents itself if we now click on another nav-link to navigate to a different page. We add the class to this new nav link, as we should, but the class is still remaining on the previous one. So now we have 2 highlighted nav links. So basically, there needs to be a way to remove it from the previous nav link, as well. Or perhaps, toggle it. @User provided me with some useful links and the hyperscript

take

command looks like it can be used for accomplishing this.

Could

hx-boost

check hrefs and add an

.active

class or something to any links that match?

I'm pretty new to htmx so I haven't figured out how to use that yet

but at first glance it doesn't look like it. happy to be proven wrong tho

Draft of Issue 11 of This Week in HTMX: https://e139c19b.this-week-in-htmx.pages.dev/issue/11/ Feedback welcome. @User This issue features a message from you. Please feel free to reach out if you'd like them left out/amended/(any other issue). My DMs are open.

I was thinking it could be a feature to add. But I wouldn’t want to 7b myself. Though it wouldn’t degrade nicely - you’d still have to add the css class on the server for a full page refresh

I have no understanding of what the potential implications or downsides of it would be but it's likely a common use-case. Just in case you're curious about Unpoly's implementation of it: https://unpoly.com/up-nav. It seems they have the functionality available especially with nav-items in mind.

Let's say I have a "start" button and i want to put an indicator exactly on it (so it would say "loading" instead of "start" while in flight). How would you accomplish this with htmx? If I just put the indicator image somewhere it takes space and makes the display jarring.

overlay? z-index ?

I guess I can use a progress bar somewhere visible globally too.

i'll be damned. that worked beautifully. I put the indicator on the outermost element and the whole page has an indicator now.

That’s quite neat. Replicating that behaviour might work as an extension. Thinking about the server side though, for a full page refresh I’d probably be adding the class on the server so I think OOB might be the way to cover both cases. Part of me thinks there’s some template inheritance tricks that could be done (depending on your stack)

Does missing have a demo site online?

https://missing.style/ https://missing.style/demos

Teşekkür

looks nice. cool name too. missing.css

I use FastAPI and Jinja2 and last time around testing Unpoly I also used

a[up-history="true]

on the nav-links to update the browser URL field to the html containing the new content. We only grab a specified fragment (#div) from the html but the template contains all the necessary Jinja

{% includes... %}

statements to rebuild the whole page in case of a refresh.

up-current

is automatically added to the correct nav-link by Unpoly, which is decided by the current browser URL, and highlights the correct page. Not sure if that answers your question so please elaborate if I completely misunderstood what you meant :p

Yeah. I was thinking with jinja then for navigation links then inherit from a nav.html that hard codes an OOB swap. Then have that inherit from your base for non-htmx requests.

But I suppose includes work just as well

(Also obligatory plug for https://github.com/lllama/dark-star not because I think it’s ready for use but because I’m curious what people think)

yeah that's pretty much exactly how I did it last time, iirc. the recipe is basically base.html - contains the skeleton - pulls in the navbar html e.g.

{% includes nav.html %}

- pulls in the main content e.g.

{% block main-content %}

- the main-content block contains a div fragment to be used as a nav-link target nav.html - contains the nav links - the nav links contain the spice to pull in a fragment from the href and put it in the target. - the nav links also update the browser url, to let

up-current

know which page it is on, and in case of a page refresh nav-link-1.html - contains

{% extends base.html %}

in case of page refresh - contains

{% block main-content %}

to be pulled in to

base.html

- the main-content block contains a div fragment to be used as a nav-link target

darkstar looks like it could be useful for organization, i'll give it a test for my next project

That looks sensible. I suppose we have the advantage/disadvantage of doing whatever works

Hello all, I have been thinking about migrating app from unpoly to htmx. What's the htmx equivalent of unpoly's compiler? https://unpoly.com/up.compiler

you probably want

htmx.onLoad()

for adding js functionality to elements added dynamically