I’m trying to create some cool things from codepen.io and past them into bubble html but nothing is working out. Specifically, I’m trying to add this http://codepen.io/mmellado/pen/zBrVwk to a page but can’t find a way for it to work. suggestions?
1 Like
I can’t imagine that Bubble supports this functionality yet. You can, however, use the Animate actions in the workflow to accomplish some transitions to show/hide things. I’d love to be corrected, but this looks pretty far away from what I’ve seen Bubble support from the HTML element.
Did you get this to work? Great pen.
1 Like
Good question. Yeah, is this type of JS now viable with the new JS Plugins?
2 Likes
@isaiahparadis528 Have you been successful on your endeavor?
1 Like
Has there been any update on this? I’m trying to implement some things from codepen too. Are creating bubble plugins the answer to this kind of thing? I’ve tried using the css plugin that’s available and I’ve tried embedding the html in the body script and in an html element. Still no luck. Any suggestions?
Plugins are the way through this. I tried to insert JS in my app a week or so ago. I’m a fullstack dev, so I gave up and built a plugin.
3 Likes
Thanks for response @scott3. I do some front end development (html, css, js, ajax) but I haven’t worked with bubble’s plugin maker yet. Is the process nearly as simple as copying the code from codepen’s html and css scripts into the plugin creator? I’m not asking how to do the whole process just a little heads up so I know what to expect.
My goal is to add this ticker to my website: https://codepen.io/lewismcarey/pen/GJZVoG
i actually have the same question, I’m not sure how to approach building plugins, the manual is not clear
I am not a coder and would like to make use of the csstools plugin as well as the toolbox javascript and possible even change things on the page html header.
My limited understanding is that using the csstools plugin requires a workflow to allow it to “add custom style to head”; which would simply add the style settings to the page’s html header. So, if I were to want the styles to be permanent it would be better to set the style in the page header itself, but if I want a button to change the style, the csstools workflow is the way to do it.
My problem, as a non-coder, is I have no idea how to use these plugins or add the correct “calls” for elements. I am using
to help me understand the basics. I want to be able to take some code from there and put it into my bubble app. I’d also like to use this site to learn a bit of javascript and again put it into my bubble app to play around with some code snippets I find online.
One of the main issues I have is taking something I find from w3schools like this:
and translating it for use in my bubble app.
I get the basics and understand that
p.uppercase { text-transform: uppercase;} is using p.uppercase to reference the text. My assumption is to use in bubble the id attribute to reference the elements that I want the styling to be applied to  What I can't figure out is how to take my id attribute set on my bubble element and place it into the style sheet Any help would be greatly appreciated, even just a reference to a tutorial that details this or a quick explanation with examples would set me on the path to self sufficiency in this. CheersI will try to help get you started because you are the exact same place I was a couple weeks ago.
Beware regarding CSS that Bubble explicitly states several places in its docs that it does not support custom CSS, desen’t mean you can’t do it, just that you are on your own and bubble could change something that destroys everything you build at any time…
There are 2-3 places you can add css style properties.
- Settings, SEO/metatags, script/meta tags in header box
- In your page’s HTML header box that is at the bottom of the page element’s editor.
- In any html element that you place on a page.
The content between the style tags goes in one of those three places.
Then, to use/apply those styles, you use an html element on your page and put your “body” html in there. Not the body tags, just the html/css for each paragraph like in your example, the three p lines, with their tags. So the trick is to use html elements to display text that applies the css styles you defined, not a regular text element. You could theoretically design your entire page using html elements and writing all html, but again the huge caveat above.
To see how bubble restricts/overrides css, you can take that whole blob you got from w3schools and plop it in an html element. It will immediately render in the editor. You will think “that was simple” until you preview the page and see that bubble overrode all that html that rendered in the editor, it will just be plain text in preview or when the app runs!
My general advice is to work hard to use bubble’s built-in capabilities whenever and wherever posssible and only resort to js/css if there are no other options.
7 Likes
Thanks for the input. I am curious about not only how to use CSS on texts, but also on elements like groups and inputs. I believe for those I’d prefer to use the bubble element but have CSS to change it in some way when a button is pressed.
Do you know how to reference the element attribute id in CSS?
So instead of using the below for image
I could use an id attribute of a bubble image element I have already placed on the page?
Additionally, do you have any idea of how to do in in Javascript as well?
For example, I have the below Javascript I found on bubble forum (works well) and I was able to successfully alter portions of it.
For instance, referencing bubble elements placed on page using
“#vertically-centered-blue”
and then the css (“margin-top”)
I can figure out how to change those values but I could figure out how to change color
I tried .css(“background-color”) / .css(“color”)
and a few more that I found online but none worked —
I am hoping somebody could link to a page that provides the correct way to write the commands
You’re largely on your own on most fronts here because 95% of bubble users do not use or know js/css. Of the other 5% I’ve only seen a few people here on the forum who actually know all this stuff and bubble quite well, and they only occasionally chime in, so I just keep reading and learning on my own, both js and css.
Instead of css(“height”,“10vh”) see if you can use css(style=“height:10vh”). If so, you can probably use style=“height:10vh; width:50px; etc:etc;”. I don’t know for sure. What I do know for sure is that these are jQuery commands, so now you’ve added another level to your learning curve: bubble, css, js, jquery. So FYI when you’re googling for help, it often helps to add terms like “pure js” or “jQuery” in your search.
Just reiterating that it will be faster and better to do everything you can using native bubble commands instead. The example you’re using was someone’s request to change the height of an object. That’s not something native bubble can do so they were looking for a js/css workaround. Given their page layout, it may have worked flawlessly. Given another layout, it may break the page entirely. You just don’t know, so you end up investing a lot of time to figure that out.
More unsolicited advice: it will save you tons of time if you learn how to use your browser’s built-in developer’s tools, they all have them in some sort of “developer” item on the browser’s main menu. For example, “inspector” will display the html of each element on the page; “console” gives you a command prompt where you can enter commands on the fly just like the example you’re trying to figure out above to see/test its result realtime. Those will perhaps enlighten you the most.
For example, here is a screenshot of the element inspector for my page that has only one repeating group that contains only one little text entry “Message #1”. See how many levels of containers (divs) Bubble uses to contain that object? I count 10. When bubble changes that object, bubble adjusts all those higher containers (if necessary, and viceversa) AND the overall layout of the document using its own css. You may be able to change the size/color whatever of an object but when bubble redraws the screen it may overwrite whatever you changed, so you have to account for that. In your example, you are ONLY changing that bottom div, and you are hoping/expecting that bubble will change all the higher ones somehow without explicitly telling it to do so.
2 Likes
One important clarification: the reason I keep imploring you to fully exploit bubble’s capability first is because each browser interprets css commands differently, or may not support the command at all.
For example, w3schools.com includes some basic information at the bottom of each reference page regarding common usage scenarios. Here is a clip from their css border-width reference page:
Note that this does not specify android or iOS flavors of those browsers, some reference tools do clarify more details.
The point is that Bubble has developed elements and css to match them that will render correctly in probably 99% of browsers out there (a couple dozen). When you do css on your own, you may have to manually add several versions of each command that differs among browsers in your custom css. Otherwise, you may develop something that works perfectly in your browser/version, but completely breaks the page if you view it on a different browser that does not support one single command that you have in your css.
Here is an example of Bubble’s css for one element’s background image. You might assume that would be universal, it may or may not be. Each browser/version will evaluate each property and use the one line that it understands. If your code does not have that one line for that particular user’s browser/version, your page will not do what you intended only on that particular browser/version:
Its not the best example because the commands are all the same here, but hopefully you get the picture, imagine doing this for every line of your css.
So when you use the bubble platform as is, you benefit significantly by not having to do all this beforehand or worse, find the problem when something breaks. Or (common) Apple decides to change how iOS works when it updates to a new version. Either it will be you keeping on top of and responding to those changes and updating your css, or Bubble doing it for everyone automatically, faster, and better.
1 Like
Thanks for the replies. What you say makes total sense about using bubble for all it’s capable of doing. For the most part I am trying to build everything using strictly bubble and not using custom code for things.
However, there are a couple of places that I think it is necessary for me to use it, which has made me focus on trying to see how I could use it more. In that regard, I should really just try to seek it out for things I hit a brick wall on in bubble and otherwise just use bubble’s built in features.
Some things I am using it on that I feel are necessary is javascript for calendars that I am trying to customize for my apps purpose. Some other places are in scroll bars in menu’s. For example a side bar menu or a drop down group focus of header menu with scroll in the group focus.
Trying to implement those I ran into issues with different browsers. I think a lot of the times I try to understand how to code it, which helps my learning of bubble too, but end up not using the code as it seems too complicated.
I’m just trying to get a solid grip on how I could. I think your mentioning of jquery is going to help me understand a bit more, as I had no idea it was in the code.
Cheers
It is a benefit to the community to ask these questions and discuss the possibilities because this topic arises every few weeks. I chimed in with my opinion because you asked nice, detailed questions about issues I encountered recently too. Hopefully others will add to this thread so people like us that are trying to learn will benefit from others’ opinions and experiences so we don’t have to search for hours in the future.
2 Likes
Thanks for contributing to the discussion. I know I have found reading through past threads very helpful to get some different perspectives and filter through them to find an approach that works best for me. Without contributions from the community I would have never succeeded in learning bubble.
Sorry @boston85719, how you got the “run javascript” element to add code?
Thanks
You can also add your custom JS directly from the Customizer.
In order to do this, go to Appearance > Customizer > Custom CSS/JS and enter your code into the Custom JS text area.
Please not that is not possible to add Google Analytics codes in this area, because they have changed their methods. If you wish to use Google Analytics on your website, please install a plugin which supports GA.
I use the toolbox plugin
Once installed you can put an “expression” element on the page that stores code…it also has workflow actions to set code into
1 Like