HTML Elements Forums Window Dynamic content

This topic contains 6 replies, has 2 voices, and was last updated by Avatar Tünde Keller 2 weeks, 2 days ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #100740
    Avatar
    Tünde Keller
    Participant

    Can the content of the window be assigned/added through JavaScript?

    #100742
    Avatar
    Hristofor
    Participant

    Hi Tünde Keller,

    Yes, the content of the window element can be changed dynamically via JS in severall ways:

    1) innerHTML – setting innerHTML directly on the Window instance, for example:
    document.querySelector('smart-window').innerHTML = 'new content';
    2) appendChild(), removeChild() methods – using these methods you can append or remove HTML elements to the Window content section, for example:
    document.querySelector('smart-window').appendChild(document.createElement('div'));

    Furthermore, the content of the Window can be cleared using innerHTML or the clear() methods. See the official Window API for additional information.

    Best Regards,
    Christopher

    Smart HTML Elements Team
    https://www.htmlelements.com

    #100743
    Avatar
    Tünde Keller
    Participant

    Thanks, that worked great!

    Is it also possible to define where the element is positioned that I’m adding? Normally a position: absolute with left and right attributes  should do the trick, but when I try to apply those attributes/properties to an element and I append that element to the window, it just positions the element to the top center.

    #100745
    Avatar
    Hristofor
    Participant

    Hi Tünde Keller,

    You can append a container with position: relative; and place your desired HTML elements inside it and position them anywhere you want. For example:

    
    cosnt window = document.querySelector('smart-window');
    
    window.innerHTML = '<div id="myContainer"><div id="someElement">Your content goes here</div></div>';

    CSS:

    
    #myContainer {
    width: 100%;
    height:100%;
    position: relative;
    }
    
    #myContainer someElement {
    position: absolute;
    top: 50%;
    left: 50%;
    }
    

    Best Regards,
    Christopher

    Smart HTML Elements Team
    https://www.htmlelements.com

    #100747
    Avatar
    Tünde Keller
    Participant

    Hi Christopher,

    Can I do that without external CSS?
    I mean if I do this:

    <smart-window>
    <button style=”position: absolute; left: 20px; top: 60px;”>Hello</button>
    </smart-window>

    Then the button has the position applied. I’d like to do the same with document.createElement() and windowComponent.appendChild().

    #100749
    Avatar
    Hristofor
    Participant

    Hi Tünde Keller,

    You can do without the additional container and CSS but it will be harder for you without it, because you have to take in considuration that you have a header above the content section of the window.

    Best Regards,
    Christopher

    jQWidgets Team
    http://www.jqwidgets.com

    #100750
    Avatar
    Tünde Keller
    Participant

    Hi Christopher,

    The header size is not a problem in my case. Thanks for confirming, I found where the issue was (unrelated to Smart HTML Elements).

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.