I have got Aurelia CssAnimator working and thats fine however I assumed it would act on any div and anything within that div however all the times I tried to make a div with other tags inside have animations nothing worked. I had this and because it has in side the div it fails to work.
<require from="./animateOnChange"></require>
<div animateonchange.bind="messageStrong">
<strong>${messageStrong}</strong>
${messageStrong}
</div>
What I wanted to animate is a div that has a bootstrap alert class as per:
<template>
<div animateonchange.bind="messageStrong">
<div class="alert alert-${alertType}" role="alert">
<strong>${messageStrong}</strong> ${message}
</div>
</div>
</template>
I assumed wrongly that anything that sat within the div being animated would also be animated. Its not so.
How would I make these message alerts disappear after 10 seconds ie fade out using javascript? I have bootstrap 3..
Related
I was reading bootstrap Collapse docs and decided to try horizontal collapse. Here is the code of a Vue component that used same code as bootstrap docs:
Vue component:
<template>
<section>
<div>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapsId" aria-expanded="false" aria-controls="collapsId">
Toggle width collapse
</button>
</div>
<div>
<div class="collapse collapse-horizontal" id="collapsId">
<div class="card card-body" style="width:50%;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>
</section>
</template>
But the transition to expand the .card does not work correctly. At first the .card has the whole height of the page and then suddenly it expands completely to 50% width! If I use style="width:500px;" instead of style="width:50%;", that works correctly. Could any developer please help me why it does not work with relative width? Bootstrap docs said:
Feel free to write your own custom Sass, use inline styles, or use our width utilities.
But that does not work correctly!
I have the following divs and want that when clicking on id="child" it should NOT execute a get to "/modal/closed" and NOT replace the id="modal". That is, do nothing HTMX related.
<div id="modal" hx-trigger="click"
hx-swap="outerHTML" hx-target="#modal" hx-get="/modal/closed" hx-params="none">
<div id="child">
</div>
</div>
Right now I have it working using the trigger "click consume" but need to specify an hx-get to an HTTP path that returns nothing (/nop).
Is there a cleaner way to do this?
<div id="modal" hx-trigger="click"
hx-swap="outerHTML" hx-target="#modal" hx-get="/modal/closed" hx-params="none">
<div hx-trigger="click consume" hx-swap="none" hx-get="/nop">
</div>
</div>
This can be solved using the event modifier "target:#modal" to indicate we are only interested on the click event originated from the id="modal".
This way clicks over id="child" that bubble up to id="modal" will be ignored.
<div id="modal" hx-trigger="click target:#modal"
hx-swap="outerHTML" hx-get="/modal/closed" hx-params="none">
<div id="child">
</div>
</div>
It works this way due to attribute inheritance in htmx https://htmx.org/docs/#inheritance. Placing the hx-trigger attribute on the outer-most div, means that element will listen for the event in all of it's children. When you add the same attribute to a child div with the consume modifier it stops the event bubbling up.
So the solution here would be to remove the hx-trigger from the outer div. In fact, if what you are trying to do is close a modal, you can add a close button somewhere else in the div. Something like this:
<div id="modal">
<button id="close" hx-trigger="click"
hx-swap="outerHTML" hx-target="#modal" hx-get="/modal/closed" hx-params="none">Close</button>
<div id="child">
</div>
</div>
Now when you click on the child div the event bubbles up and it's not caught by the sibling close button.
I try to use custom scrollbar using vuebar on dynamic Vue elements. Since v-if destroys and recreates elements, vuebar is not activated after that. On example provided you can see scrollbar works till you change tabs. I know you can use v-show and it starts working, but that solution is impossible to implement in nested components with complicated relations.
<div class="vuebar-element" v-bar v-if="tab==0">
<div>
tab 0
</div>
</div>
<div class="vuebar-element" v-bar v-if="tab==1">
<div>
tab 1
</div>
</div>
http://jsfiddle.net/ebwdnqfs/2/
After reading comment from #ssc-hrep3 I discovered that putting whole thing into
< transition > tag magically solves the problem.
<transition>
<div class="vuebar-element" v-bar v-if="tab==0">
<div>
tab 0
</div>
</div>
<div class="vuebar-element" v-bar v-if="tab==1">
<div>
tab 1
</div>
</div>
</transition>
Could someone explain me, why the following code doesn't work?
<template>
<div class="modal">
<transition name="slide-in">
<div #click.stop class="modal__container">
<div #click="close" class="modal__button">
<span class="modal__button--close">Close</span>
</div>
</div>
</transition>
<transition name="fade-in">
<div #click="close" class="modal__overlay"/>
</transition>
</div>
</template>
I'm trying to create modal with two different animations (slide-in for text area and fade-in for modal overlay).
If i delete the element with class modal and edit code to the following everything works fine.
<template>
<transition name="slide-in">
<div #click.stop class="modal__container">
<div #click="close" class="modal__button">
<span class="modal__button--close">Close</span>
</div>
</div>
</transition>
</template>
Referencing Vue.js documentation on transitions
Vue provides a variety of ways to apply transition effects when items are inserted, updated, or removed from the DOM
That means that DOM nodes that transition applies classes to, should be those which are inserted/updated/removed.
Since it is a modal window, I assume that it has v-if directive applied in parent component to handle it's visibility. In order for transition to work, it should wrap DOM element that will be updated.
You can understand it more easily if you move code of your modal window into the parent component. Just for better visualization of elements tree and transition's behavior.
In first example, conditional rendering (v-if) applies to <div class="modal">, which is not wrapped with transition - therefore no animation will be triggered. At the same time, nested nodes are wrapped with transition, but there is nothing that will update or remove them. They are statically displayed and inserted initially on component's creation. Nothing to animate.
In order for it to work as expected following structure would be advisable:
<template>
<transition name="fade-in">
<div
class="modal__overlay"
#click="close"
>
<transition name="slide-in">
<div
v-if="containerVisible"
class="modal__container"
#click.stop
>
<div #click="close" class="modal__button">
<span class="modal__button--close">Close</span>
</div>
</div>
</transition>
</div>
</transition>
</template>
This solution expects modal__overlay to have position: fixed; style and variable containerVisible to be set to true inside mounted hook of modal component.
I am trying to have a menu bar to get stick to top when user scrolls up. It sticks fine at the top. But, it floats to left.
code: http://www.bootply.com/y801SV4HAu
How to fix menu so that if sticks to top and center (margin-left is currently set to auto to make it center)?
<div class="container" style="padding:0">
<div id="menu-header" class="affix">
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<span style="color:white">Menu bar here<i class="glyphicon glyphicon-menu-right"></i></span>
</div>
</div>
</div>
</div>
The above does what you want it to do. Cassie was correct in suggesting a container div, but with the added style padding:0 for the way you want it to look. so that it aligns with page title.
When position: fixed is applied to the header upon scrolling down, the margin: auto no longer affects it, so it moves back over to the side. You'll have to find another way to center that div. There are probably a ton of ways to do this; the simplest offhand might be to put it inside a .container div.