Plugin Update: CSS Tools (Free Version)

That would be great, thanks. My use case doesn’t involve RGs but I’m sure your example(s) would still be helpful to understand the way it works.

I’m battling a hard deadline currently and the weekend will be super busy too so it will probably be next week when I have time. If you didn’t do anything in the meantime, I’m happy to see if I could be of help!

Yes, that’s fine. Much appreciated.

How do you get this DetectionPad element?
I’m guessing that’d help me change an elements size upon mouse over or hover? is that possible?

Detection Pad can be found here :slight_smile:

Added Open New Window -

image

3 Likes

Hi! great stuff @jarrad!
Is there a way to change the direction of the size change? I have a menu that should open from the left - which means that the group from the right of it should diminish in width - the plugin works but it lowers the width from the right side of the element - is there a way to change it to the left?
Hope i’m being clear :slight_smile:
Thanks

Hey @yonimn, check out this demo. It has a few examples of CSS Tools and MoveIt! . if you want to go all out, you can even allow each user to customize their own menu locations using Mousey Mousey, Here is the demo showing storing an element for a user. .

Hi @jarrad,
really nice stuff there. I just got the moveit plugin, Thanks!

They sure are available on the free tiers, if your app was already open when you purchased it start off by refreshing your browser. Next head to the plugin store and find the plugin in the list, hit install, then MoveIt! :slight_smile:

Hi @jarrad,

How do you reproduce this 2 simple features in this simple page in Bubble:
https://boundless-theme-apparel.myshopify.com/
:exploding_head:
feature 1 : woman image goes full screen, but page remains scrollable
feature 2 : footer is positioned at the bottom, but page remains scrollable beyond footer

Cheers,
Patrick

Hi @jarrad
First, Thanks for this plugin, I (finally) managed to have a map covering the entire main page at different resolutions :star_struck:

One question though : when I resize the page window, I need to reload the page for the map to be resized to the right dimensions.

Do you know how can I avoid that so in case the window is resized the map adjust automatically ?

Thanks!

I just added Add/Edit/Remove Head HTML Tags,

USAGE:

when you add something, in this case a script, eg.

<script> function alertMe(msg){ window.alert(msg) } </script>

You can include an ID like this,

<script id="myScriptID"> function alertMe(msg){ window.alert(msg) } </script>

This way if you want to Edit or Delete the script, you can use its ID, myScriptID in the action.

Works for any HTML Tag you need,

<script>

<style>

<link>

<meta>

//Just to name a few!!
5 Likes

Seems like this stopped working. Was there a Bubble update that broke this?

It’s working fine. feel free to send a message here if your still experiencing issues.

Hi everyone wanted to let everyone here know that there seems to be some general plugin code issues with bubble. I was getting errors in my console for air date time picker but it’s happening for other plugins as well. I’ve raised a bug report and Emmanuel is aware of it. Just wanted to get that out here for everyone so they know they’re not the only ones it’s happening to.

Everything should be fixed now

Could I use this plugin to implement these patterns: http://www.heropatterns.com/

I’m curious to dip my feet into the wonders of CSS + Bubble (aka I know a tiny bit about CSS and I would like to learn more).

You can already use those patterns in a HTML block I believe. Just add the <style> script to the beginning and end of the code.

Hi, @jarrad is the feature “change Element Width and/or Height” available, without the time dependence?
I need to change a group height when icon A is clicked and then come back to the initial group height when icon B is clicked. So, I don’t want the group to retract/expand over time but I want the effect to be triggered by an event (a click to be more specific).

Thanks!