Positioning Container/HTML via a script

Help & Support
1

Hi, I’m trying to create an html ui for the first time. As objects are clicked on I’d like to have a small html box appear. I’m having a little trouble understanding how to dynamically change the position of the box.

by css asset:

.container {
 float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}

in my script on a click event I run some code which creates the html which works fine.

    var style = document.createElement('style');

    // append to head
    document.head.appendChild(style);
    style.innerHTML = this.css.resource || '';
    
    // Add the HTML
    this.div = document.createElement('div');
    this.div.classList.add('container');
    this.div.innerHTML = this.html.resource || '';
    
    document.body.appendChild(this.div);

I’m not sure how to access it and change the position.

I tried using querySelector but getting a null:

  var container= this.div.querySelector('.container');

Any help would be appreciated.

2

Hi, not sure but have you tryed this.div.enabled=true;

3

Hi @noah_mizrahi,

I think the querySelector method works only on document element and not on individual elements. So you can use it like this:

document.querySelector('.container');
4

That was it. Thank you.

var container = document.querySelector(’.container’) gives me the container and if I want to dynamically change it I use something like:

container.style=“top:16px;”;

1 Like