Clicking this button will change the show attribute
<p>Clicking this button will change the <b>show</b> attribute <button class="button is-info" id="btn1">Change the show attribute</button></p>
<ch5-image
id="ex1-img"
debug
refreshRate="5"
url="https://picsum.photos/200/300/?random">
</ch5-image>
$('#btn1').click(function(){
var img1 = document.querySelector('#ex1-img');
var attrVal = img1.getAttribute('show');
if ('true'===attrVal || ''===attrVal || null==attrVal || typeof attrVal==='undefined') {
img1.setAttribute('show','false');
} else {
img1.setAttribute('show','true');
}
});
The following buttons hide/show two of the ancestors of the ch5-image element by adding/removing a css class defining display:none
If the ancestor becomes visible again before the refresh interval has passed the ch5-image will display briefly the last image before refeshing a new one
If at least a refresh interval passed while the ancestor becomes is hidden the ch5-image will override its source with an empty value and display nothing until the next refresh
<p> The following buttons hide/show two of the ancestors of the ch5-image element by adding/removing a css class defining display:none</p>
<p>If the ancestor becomes visible again before the refresh interval has passed the ch5-image will display briefly the last image before refeshing a new one </p>
<p>If at least a refresh interval passed while the ancestor becomes is hidden the ch5-image will override its source with an empty value and display nothing
until the next refresh</p>
<ch5-button id="ex2-btn1" label="hide/show grandparent"></ch5-button>
<ch5-button id="ex2-btn2" label="hide/show parent"></ch5-button>
<div id="grand-parent">
<div id="parent">
<ch5-image
id="ex2-img"
debug
refreshRate="5"
url="https://picsum.photos/200/300/?random">
</ch5-image>
</div>
</div>
$('#ex2-btn1').click(function(){
var gp = $('#grand-parent');
gp.toggleClass('c-hide');
});
$('#ex2-btn2').click(function(){
var p = $('#parent');
p.toggleClass('c-hide');
});
.c-hide{
display:none;
}