Forum Academy Marketplace Showcase Pricing Features

🔥 Classify: A tiny plugin that brings CSS power to Bubble

@anthony.schanen @Christophe_HK

It is actually possible. I know I haven’t written the documentation for this, but the plugin supports javascript commands as well.

Classify normally works by inserting commands inside curly brackets ({addClass...}), but you can also run a javascript command by using square brackets instead.
So for exemple, if you had a condition on an element when hovered that changed the ID attribute to [console.log('hey')], every time the element would be hovered, “hey” would print out in the console.
Additionally, Classify provides the variable ‘p’ to be used with the command that contains nodes in the context of the element.

Back to your question Anthony, in javascript you would normally write something like myDivElement.dataset.aos = "fade-up"; to add the property. With Classify, you can refer to the actual element using p.self. So to add the data property you need to write [p.self.dataset.aos = "fade-up"] (notice there’s no semicolon).

*Currently, you can only insert a single javascript command. If you need to do more, you can write an external function in an HTML element and call it out from the ID attribute: [myFunction(p)].

Hope this help.

4 Likes

Wow, awesome @julienallard1 ! Thanks for this info!

That was great help. I sincerely appreciate it.

Strangely all the animations trigger immediately on page load instead of on user scroll. Not sure if this has to do with adding an attribute via JS but this gets me going at least. Now to just debug this a little.

@Christophe_HK
do you have any insight on why this may be happening? I know you mentioned you’ve used AOS before with bubble. Just wondering if there was a trick or some kinks to remove to get it working as intended

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… :frowning: 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.

image

  • parent.IDAttribute : {addClass: “parentGroup”}
  • child.IDAttribute : {addClass: “dynamicHeight”}

HTML element :

.parentGroup .dynamicHeight { height:100% !important; background-color: red !important; }

Result :

image

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 :confused:

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:
image

I’m missing something :confused: maybe you can help!

hey allo @Sarah_Esteve. Montpellier France ou Montpellier Québec? :slightly_smiling_face:

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);
}

@Sarah_Esteve for the sake of sharing knowledge, perhaps you could share if you made it work?

Hey @julienallard1 sorry I tought I d respond
Try this morning, maybe I did somethin wrong because it’s not working :


image

Sarah
PS : I’m from France :slight_smile:

Classify is case sensitive; addClass needs an uppercase C. :wink:

oh god… it is working so nice !

hope you’ll join the platform when it will be ready :slight_smile:

Génial! On aime ça des petits problèmes faciles à régler comme ça!

:+1:

2 Likes

Yes carrément ! Merci encore à toi

Another question. I’ve an uggly scrollbar there that I want to make disappear :woman_mage:

image

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 :confused:

image

image
(didn’t forgot the case sensitive thing :upside_down_face: 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