Dynamic content

[tundekeller94]

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

[Hristofor]

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

[tundekeller94]

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.

[Hristofor]

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

[tundekeller94]

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().

[Hristofor]

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

[tundekeller94]

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).

[Author]

Posts