Can an HTML element reference a second HTML element?

Need help Database
1

Hi guys,

In a previous question I had some issues getting my CSS to display in an HTML element. Now that I have solved the issue I have a second question which I feel is different enough to justify this new post.

This question relates to learning how an HTML element on a webpage can reference a second HTML element that is not on the page.

Specifically, I have some code (CSS and HTML) that I have tested and it produces the desired image. I want to display the image on my webpage, but instead of adding the code directly to an on-page HTML element, I want to reference the code. There are several reasons I want to do this, but for now I won’t go into them!

Here’s my setup: I have an empty HTML element on the webpage with the ID “open” and I have another off-page HTML element that contains the working code shown below. Is there a reason why the image is not displaying in then on-page HTML element?

<div id="open">
  <div class="container">
    <!-- Top left diagonal line -->
    <div class="diagonal diagonal-top-left"></div>
    <!-- Top right diagonal line -->
    <div class="diagonal diagonal-top-right"></div>
    <!-- Bottom left diagonal line -->
    <div class="diagonal diagonal-bottom-left"></div>
    <!-- Bottom right diagonal line -->
    <div class="diagonal diagonal-bottom-right"></div>
    <!-- Gray area with white inset border -->
    <div class="gray-area">
      <div class="inner-border"></div>
    </div>
  </div>
</div>

<style>
   #open .container {
  height: 200px;
  width: 200px;
  background-color: #f7f7f7;
  position: relative;
  border: 4px outset white;
  box-shadow: 0px 0px 2px 1px #A9A9A9;
  position: relative;
  !important;
}

#open .diagonal {
  height: 1px;
  width: 25px;
  background-color: #A9A9A9;
  !important;
}

#open .diagonal-top-left {
  position: absolute;
  top: 12px;
  left: 0px;
  transform: rotate(45deg);
  !important;
}

#open .diagonal-top-right {
  position: absolute;
  top: 10px;
  right: 0px;
  transform: rotate(-45deg);
  !important;
}

#open .diagonal-bottom-left {
  position: absolute;
  bottom: 13px;
  left: 0px;
  transform: rotate(-45deg);
  !important;
}

#open .diagonal-bottom-right {
  position: absolute;
  bottom: 10px;
  right: 0px;
  transform: rotate(45deg);
  !important;
}

#open .gray-area {
  position: absolute;
  top: 20px;
  left: 20px;
  height: calc(100% - 40px);
  width: calc(100% - 40px);
  background-color: gray;
  !important;
}

#open .inner-border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 4px inset white;
  !important;
}

</style>
2

If it is not on the same page, it doesn’t work. You can’t call other elements like that (without specific workarounds).

But you don’t need to call an element, this data can be in a state, or db.

3

I’m pretty sure Bubble’s HTML elements don’t work like other visual elements during render so what you’re trying to do won’t work.

You’ve already know that you can run your HTML inside a Bubble HTML element so why not create your divs in that off-page HTML element?

4

It definitely works, as a test I did this;

  1. I used two HTML elements: #onPage and another not on the page called #color-and-shape.
  2. I used the id attribute to style the #onPage element from within the #color-and-shape element.

This resulted in the #onPage element being styled to have a yellow background and a black circle in the middle.

The onPage code (put in an HTML element on the page)

  <style>
    #onPage {
      width: 110px !important;
      height: 100px !important;
    }
  </style>

And the offPage code (an HTML element not on the page titled color-and-shape .)

<div id="color-and-shape">
  <style>
    #onPage {
      background-color: yellow;
    }
    #onPage::before {
      content: "";
      display: block;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: black;
      margin: auto;
    }
  </style>
</div>

You may wonder why I want the separation of two elements. Well, I may have hundreds of identical onPage HTML element which, from time to time, need styling. So, I want the onPage HTML elements to have the size and for all CSS to be somewhere else so it can be used as a global styling.

So the question is, why can I create a yellow box with a circle but not the actual styling I want (see the css at the top of thread). I don’t know much about CSS so I don’t know if it’s div’s or tags or ‘style’ elements I need, I don’t mind if it works!

5

I think at this point if you want your questions to be fully effective, you should make a mock-up and a full length descriptive write-up with images so we know exactly what you are looking to do. I’ve tried to get you lots, but it’s getting hard to really understand what you are trying to do, and it limits our ability to help you.

So if you want more fruitful answers, please offer up a full description and lots of details with sketches and mock-ups.

Thx

3 Likes
6

Yes good point, thank you for suggesting it. I will do a little video tomorrow as that’s probably easiest. I honestly think it’s something which is easy to do but I’m probably not explaining clearly.

7

Ahh okay, I thought you were trying to style the Bubble HTML element.

Not very sure what exactly you are trying to achieve but have you tried applying/removing classes to apply visual styles instead?

8

@troy.roberge @ihsanzainal84

Hi guys, if you have a minute would you mind looking at this quick video showing my issue?

Feel free to look at (or edit) the demo project, see page named “2-windows”

9

i had make some changes on your code now it’s working please check

10

Thank you, I see what you did, you have made the names different in the second window, thank you for doing this.

Current all the CSS is in the window’s HTML element, do know know if it is possible to move the CSS to another HTML element? I have tried this below but it’s not working …

I simplified the window HTML element and added an ID Attribute “A1”.

a1
a1731×569 41.4 KB

Then I added the CSS to the other HTML element. The result is no image displays.

a1b
a1b718×566 32.4 KB

11

now I can’t see this code in your app
please make two different HTML and paste this code again and let me know I will check and help to you

1 Like
12

@bubbledeveloper1 Thank you so much, I have been going round in endless circles with this. Apologies for removing the code, please see the index page which has a tidy project for you to work with, it has the code for the window which you can copy/paste.

13

Hi, I think I have figured out how to link the HTML to a ‘style HTML’ element (2 elements). Weirdly I am not using an ID Attribute, but it works. I will update this thread when 100% complete with a solution.

14

Just remember that the id attribute of an element should be unique.
If you want to add one element more that once you should change the id for every instance of that element.
If you want shared styles you can use classes: <style>.myelement{background: red;}</style> <div class="myelement"></div>

15

Thank you @dorilama

16

I have hit another snag. Simply put, I have an HTML element with four ‘arrows’ inside. I want to have them all hidden and only show one (never more) if a custom state is triggered. I assume I need to use an ‘if’ statement to access my custom state, I guess something like (if) myPage’s custom state is ‘arrowUP’ then show “arrow-up”.

I can’t get this to work and I wondered how to approach this? Below are the four ‘arrows’ .

<!-- Arrow Up -->
<svg width="200" height="200" class="arrow-up">
  <line x1="0" y1="100%" x2="50%" y2="0%" stroke="black" stroke-width="1" />
  <line x1="100%" y1="100%" x2="50%" y2="0%" stroke="black" stroke-width="1" />
</svg>

<!-- Arrow Down -->
<svg width="200" height="200" class="arrow-down">
  <line x1="0" y1="0" x2="50%" y2="100%" stroke="black" stroke-width="1" />
  <line x1="100%" y1="0" x2="50%" y2="100%" stroke="black" stroke-width="1" />
</svg>

<!-- Arrow Left -->
<svg width="200" height="200" class="arrow-left">
  <line x1="100%" y1="0" x2="0%" y2="50%" stroke="black" stroke-width="1" />
  <line x1="100%" y1="100%" x2="0%" y2="50%" stroke="black" stroke-width="1" />
</svg>

<!-- Arrow Right -->
<svg width="200" height="200">
  <line x1="0" y1="0" x2="100%" y2="50%" stroke="black" stroke-width="1" />
  <line x1="0" y1="100%" x2="100%" y2="50%" stroke="black" stroke-width="1" />
</svg>
17

This one is easy. Just put each arrow in a conditional, and only show the code based on whatever condition it is.

18

If you want to do this with a single html element it’s going to be unpleasent to work with. Basically you could write only the code for the default arrow and then change the html with conditionals (eg. when my state is 1 HTML is {{code for arrow}}). Needless to say that any click events (or others) that you may need for your workflow are not present in the editor and you need workarounds.

You can create a plugin that renders the elements conditionally and triggers the events you need in the editor. This way you use the element with a better and faster experience in the editor.

You can just create 4 html elements and use them as they were bubble buttons. You have all the display properties, you can use conditionals, you can create workflows on click because each arrow is a separate element.

19

Do you mean to have 4 x HTML elements and show/hide as needed?

20

Thank you for your suggestion. So far you are correct, it has been very hard to get then to display. I will opt for creating 4 html elements and use them as they were bubble buttons unless @troy.roberge has a neat solution.