I never used Animate On Scroll so I donât know how it works. But if you set the JS command in the main ID Attibute (rather than passing by a condition) the data-aos attribute is indeed set on page load.
hey @boston85719 did you got a fix on this? Can you may share your editor how you did it - also having the problem the last two days⊠
and you know how f*ckedup this is⊠( đ„ Classify: A tiny plugin that brings CSS power to Bubble - #104 by boston85719 )
No I never solved it. Had to abandon the task.
1 Like
Hello,
Im struggling with making a group 100% height of his parent element.
Here is my actual setup.
- parent.IDAttribute : {addClass: âparentGroupâ}
- child.IDAttribute : {addClass: âdynamicHeightâ}
HTML element :
.parentGroup .dynamicHeight { height:100% !important; background-color: red !important; }Result :
We can see that the child turn red which means CSS is applied but the child height is still its original height.
When inspecting the element I can see that Classify is adding a child div to the child element, so Im guessing my child element dynamicHeight is 100% of bubble-r-box and not 100% of parentGroup
Classify doesnât add/remove HTML. What you see is Bubbleâs engineâs structure. All elements are wrapped up in .bubble-r-box divs and those that have a similar vertical position are wrapped up in .bubble-r-line divs.
So youâre right when you say that the child has 100% height of the .bubble-r-box. Iâve been messing with elementsâ height a few time and I must say itâs a challenge to overcome Bubbleâs engine.
If the height of the parent is known and static, you could set the childâs height to the same value in px. So it would overflow its parent box and line (I think the overflow is visible by defaultâŠ)
Thanks for the reply.
The height of the parent will depend on the amount of text (which is variable) there is on the left container. So I guess in my use case it will not work 
Any other way to make a child div 100% height of the parent div ?
There are 2 ways I think that could work to set both bubble-r-line and bubble-r-box 100% height:
1. Refer to the bubble-r-line and bubble-r-box according to their position as child. Looking at your screenshot above your CSS would look like:
.dynamicHeight,
.parentGroup > .bubble-r-line:nth-child(1),
.parentGroup > .bubble-r-line:nth-child(1) > .bubble-r-box:nth-child(3) {
height: 100% !important;
}
Indeed for this to work, the line and the box position as children must remain the sameâŠ
2. Using javascript, you can refer to the bubble-r-line and bubble-r-box starting from the child. It might be less performant but probably more reliable than the 1 solution.
Classify also supports javascript commands from the ID field. It also provides some useful references of surrounding elements. So instead of adding a class like {addClass: âdynamicHeightâ}, you could write [fullHeight(p)] where fullHeight() would be a custom function you write and p is the data provided by Classify (see below)
In an HTML element somewhere in the page, youâd write the following:
<script>
function fullHeight(p) {
[p.self, p.box, p.line].forEach(e => e.style.height = "100%");
}
</script>
âŠwhere p.self refers to the child element, p.box to the parent .bubble-r-box and p.line to the parent bubble-r-line div.
By making all elements 100% of their parent, I suppose that youâll get what you wantâŠ
1 Like
Hey salut @julienallard1
Do you think I can add this kind of effect with your plugin?
I tried to add one without success. I copy/paste the css code in html header :
and the command in the elementid but nothing happens:
Iâm missing something 
maybe you can help!
hey allo @Sarah_Esteve. Montpellier France ou Montpellier Québec? 
The CSS you copied paste is written in SASS; itâs a faster way to write CSS but in the end, that needs to be compiled in pure CSS. The browser doesnât understand SASS so that must be the reason.
I converted by hand the shutter-out-vertical part so you can try again.
If it still donât work, try putting the CSS into an HTML element on the page rather than in the pageâs header element.
.shutter-out-vertical {
-webkit-transition: color 300ms;
transition: color 300ms;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
.shutter-out-vertical:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #2098d1;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition: 300ms ease-out;
transition: 300ms ease-out;
}
.shutter-out-vertical:hover:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
Hey @julienallard1 sorry I tought I d respond
Try this morning, maybe I did somethin wrong because itâs not working :
Sarah
PS : Iâm from France 
Classify is case sensitive; addClass needs an uppercase C. 
oh god⊠it is working so nice !
hope youâll join the platform when it will be ready 
Génial! On aime ça des petits problÚmes faciles à régler comme ça!
2 Likes
Yes carrément ! Merci encore à toi
Another question. Iâve an uggly scrollbar there that I want to make disappear 
I already have an html element on my page, and I added the code to make the scrollbar disappear as I saw in another post, but seems my magic is in vacation
(didnât forgot the case sensitive thing 
this time
What did I do wrong @julienallard1
Maybe your adding the scrollClass to the wrong element?
In your CSS, try to target the children of the .scrollClass element instead. Like: .scrollClass * and .scrollClass *::-webkit-scrollbar. This will disable the scrollbar for any children element that could have oneâŠ
Ultimately, if you write html *::-webkit-scrollbar { display: none; }, that would disable all scrollbars on the page.
Disable or not display? Because I want it usable but not visible
I meant âhiddenâ not disabled. My bad
1 Like
it worked!! thx !
3 Likes
Nice!
1 Like