How to set HTML + CSS hidden display？

Help & Support
1

I want to control the HTML + CSS hidden display by the button, how do I do it

var Ui = pc.createScript('ui');

Ui.attributes.add('css', {type: 'asset', assetType:'css', title: 'CSS Asset'});
Ui.attributes.add('html', {type: 'asset', assetType:'html', title: 'HTML Asset'});

Ui.prototype.initialize = function () {

    // create STYLE element
    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 || '';
    
    // append to body
    // can be appended somewhere else
    // it is recommended to have some container element
    // to prevent iOS problems of overfloating elements off the screen
    document.body.appendChild(this.div);
    
    this.counter = 0;
    
    this.bindEvents();
};

Ui.prototype.bindEvents = function() {
    var self = this;
    // example
    //
    // get button element by class
    var button = this.div.querySelector('.button');
    var closeBtn = this.div.querySelector('.Closebutton');
    var counter = this.div.querySelector('.counter');
    var container = this.div.querySelector('.container');
    // if found
    if (button) {
        // add event listener on `click`
        button.addEventListener('click', function() {
            ++self.counter;
            if (counter)
                counter.textContent = self.counter;
            
            console.log('button clicked');

            // try to find object and change its material diffuse color
            // just for fun purposes
            var obj = pc.app.root.findByName('chamferbox');
            if (obj && obj.model && obj.model.model) {
                var material = obj.model.model.meshInstances[0].material;
                if (material) {
                    material.diffuse.set(Math.random(), Math.random(), Math.random());
                    material.update();
                }
            }
        }, false);
    }
    
       if (closeBtn) {
        // add event listener on `click`
        closeBtn.addEventListener('click', function() {
          

            console.log('closeBtn clicked');
      
      
            
        }, false);
    }

    if (counter)
        counter.textContent = self.counter;
};
1 Like
2

So you need the HTML to turn on and off based on a certain button press @chuxinhao?

3

I’m not sure what you need exactly since you have the code.
But, when I tried using html, nothing worked until I specified “position: absolute;” in the style.

4

Hi @chuxinhao,

Here is an example on how to set your HTML/CSS state in your click handler to show/hide:

        // add event listener on `click`
        closeBtn.addEventListener('click', function() {

           container.style.display = container.style.display === 'block' ? 'none' : 'block';
            
        }, false);
3 Likes
5

In addition to @Leonidas’s answer, in case you want to disable only specific parts of your HTML, you can use different CSS files to display different items as and when required. You can switch CSS files like so.

Above initialize, add an attribute to hold your CSS file just like the default one.

Next, when you need to switch the files, do this -

style.innerHTML = this./*attributename*/.resource || '';

Make sure to do this in your initialize function, as the STYLE element is only defined there.
Hope this helps!

1 Like
6

[thanks](javascript::wink:

1 Like