https://htmx.org logo
Powered by
# htmx-general
  • l
    well...no, probably not... (As you may have noticed, I'm not a developer, I'm primarily a designer but I'm doing the best that I can). I also don't immediatly know how to do that.
  • m
    can you describe what you are trying to accomplish? Maybe we can give you an easier way to do it.
  • l
    Well, as I said before basically this: 
    I created page transitions with a Javascript animation library which functions are triggered when the DOM settles
    (by means of a function, every animation "lives" in it's own function).
    Problem is, I have two seperate animations (one for page transitions and one for menu transitions).
    and they keep on interfering with each other... So basically: When I trigger a regular button, animation 1 triggers (a div obscures the page) at that point HTMX swaps the content and the div slides out of of view. With the menu, animation 2 triggers and it opens a fullscreen menu and when a button in the menu is pressed, HTMX swaps the content and the menu rolls upward revealing the page. Right now with your fix it is partially ok (as before they always triggered both when both were triggered once before). But it still breaks when the same animation is triggered multiple times in succession. Switching between them works OK now though.
  • m
    Can you post the code? It sounds like you might want to listen for the events on a particular element, rather than globally. Hyperscript is good for this, but you can use plain old javascript too.
  • l
    This is the code (functions are triggered by using "onclick" attributes in the HTML)
    Copy code
    var transitionpage = document.querySelector(".animation_veil");
var data = JSON.parse(transitionpage.getAttribute('data-pg-ia'));


function pagetranstion() {

    pagetransitionEvent = htmx.on("htmx:afterSettle", function(evt) { pagetranstionout() });
    pgia.play(transitionpage, 'page_transition_ease_in', data);
}

    function pagetranstionout() {
        setTimeout(function(){
            pgia.play(transitionpage, 'page_transition_ease_out', data);
        }, 350);

    setTimeout(function(){
        removeMenutransitionEventHandler();
    }, 350);
}

function removePagetransitionHandler() {
        htmx.off("htmx:afterSettle", pagetransitionEvent);
}


//menutransition functions

var menutransition = document.querySelector(".menu_hamburger_button");
//var data = JSON.parse(menutransition.getAttribute('data-pg-ia'));


function menutransition_function() {

    menutransitionEvent = htmx.on("htmx:afterSettle", function(evt) { pgia.play(menutransition, 'menutransition'); });
    setTimeout(function(){
        removePagetransitionHandler();
    }, 350);
}

function removeMenutransitionEventHandler() {
        htmx.off("htmx:afterSettle", menutransitionEvent);
}
    I tried hyperscript a while back (this: 
    _=on htmx:afterSettle call doSomething()"
    but is seemed to have no effect...
  • m
    yeah, so when you add
    Copy code
    js
  htmx.on("htmx:afterSettle", ...)
    that's going to be global for all requests. If you can target a specific element with the listener instead the two event handlers won't conflict.
  • l
    It's in the queue. 🙂 I got the library what I'd consider "rc-complete" yesterday, so it's on to that series of posts - while juggling a main job with a (figurative) fire and a second with a looming deadline. (Oh, yeah - and family, too... LOL)
  • c
    @User Once I switched to version 1.5.0, it is working.....
  • l
    Problem is, both events swap the same element (the ui context is different but the "mechanical" process is the same). So even if I did that I suspect I'd still have the same problem.
  • c
    Hello, I am trying to update my breadcrumb when I navigate to a new link using htmx. The problem is that the breadcrumb is at a different part of the DOM and I would need to remove the existing 
    active
    flag from one element and add it to another based on the 
    path
    perhaps? Has anyone done anything like this? Just struggling trying to coordinate the disparate actions.....
  • m
  • m
    simplest thing is to "expand the target" to include the breadcrumbs
  • c
    I don't have the option to do that but I did read through this.....
  • m
    next you can use out of band responses
  • c
    I am struggling in trying to orchestrate it all together...
  • m
    OK, an oob response that targets the breadcrumb would work then
  • c
    I want to update an 
    active
    class but I can't see how you would only do that....
  • m
    I would just replace the whole thing with a re-rendered breadcrumb. It'll be just as fast
  • c
    I was hoping that I could somehow introspect the response so that I could toggle the breadcrumbs.....
  • m
    you could also trigger an event that you catch that tells you which breakcrumb to highlight
  • c
    But I am worried about adding breadcrumbs to a simple navigation....
  • c
    Okay, so I suspected that would be the ultimate answer....
  • m
    expanding the target is really gonna be the simplest thing 🙂
  • m
    but if that can't possibly work we can figure something out for you
  • m
    you could also to it entirely client side
  • c
    I am not as familiar with the hyperscript and didn't see how I could toggle classes....
  • c
    I am sure there is a simple way but I don't have it yet....
  • c
    My UI is too complex to expand but I see where that makes things more simplistic....
  • m
    Copy code
    html
<div _="on click take .active from <a/> in me for the event's target">
  <a>breadcrumb 1</a>
  <a>breadcrumb 2</a>
  <a>breadcrumb 3</a>
  ...
</div>
  • c
    I have an out shell and I am treating my `content area as the dynamic content provided by htmx....It is working beautifully but I now need to get the shell parts updated accordingly as well....
1...429430431...1146Latest