Webflow Combo-Class Names in Custom Code

Design help Custom code
1

hi guys,

I have to use an element I created in Webflow within a custom code. My question is how do I spell Webflow’s classes there?

For example here is the element’s combo class name:

Screen Shot 2021-06-21 at 22.45.11

  1. so when I write a code how do I actually write all these classes there:

$(‘.???’).click(function()

  1. is it important to use capital letters within the code if my classes/combo-classes start with a capital letter?

thank you!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Class names are lowercase with hyphens.

3

hi you mean that the spacing in a Webflow’s class name would be replaced with a hyphen. So the “Button Link” would be .button-link in the custom code, correct?

but what about combo classes that follow the main class?

4

Yep.

class1.class2 would represent a element with both class1 and class2.

Learn to use devtools then you can inspect elements, and test JavaScript as well.

1 Like
5

sorry I am mostly creating prototypes and sometimes using Webflow. Web development is not my main field.

your answer about class1 and class2 is a bit confusing to me. if we take my direct case. I have a class “Button Link” and combo classes “Center” and “Typeform”

do I actually write them in code this way:

$( ’.button-link.center.typeform’ ).click(function()

?

1 Like
6

Why not add an ID to the element you want to capture a click event on? That way you can change classes as needed and it is a more efficient method.

7

sorry this answer makes everything only more complicated. is there a way to transcript combo classes into custom code as in my case? what would I replace question marks in the following code if my class name is “Button Link” with two combo classes “Center” and “Typeform”:

$(’. ??? ’).click(function()

8

What happens when you test the selector in your previous post? You know you could share an actual URL with the element you want to target here in this thread.

9

I believe my question is pretty general. I posted a screenshot of the element so you would see the same name in the read-only link. when I test $(’.button-link.center.typeform’).click(function() it doesn’t work

10

Read the guidelines for posting to this category. Saves people from wasting time.

11

if I give this element an ID, can I replace the class name in the code with its ID then?

12

you know not every one is allowed to post clients’ projects everywhere especially if you signed a DNA. so hopefully we are all flexible here and not stubborn or something. if asked how to set a corner radius in Webflow to a circle, you wouldn’t need to see the whole project for that, or…? the same is here, it is a super general question.

13

The problem is I already answered your question about the selector. If you simply tested the selector in the console you would see that it in fact does target the selector.

14

sorry your answers didn’t help me specifically. thank you for your time anyways.

I would appreciate if someone knows a way to transcript combo classes into custom code as in my case? what would I replace question marks in the following code if my class name is “Button Link” with two combo classes “Center” and “Typeform”

$(’.???’).click(function()

15

That is the correct selector. Test it yourself.

16

alright, I see. so the problem is about my code snippet then. thanks for help and your time!

17

Thanks for asking about this and the replies!

The code works — but after any click within the modal, it turns off. And the background is scrollable again. Does this happen to you? Here’s my link