MFFloatawayMsg / 1.0 / js / mf-floataway-msg.js file last updated : 2024-03-02 |
---|
/*! methodfish package release
Project : MFFloatawayMsg
Release : 1.0
Release date : 2024-03-01 17:52:56
License : MIT
For more information please refer to https://methodfish.com/Projects/MFFloatawayMsg
*/
function addFloatawayMsg(message, positionCd, duration = 3000) {
if ( positionCd!='B' && positionCd!='T' ) {
console.error('invalid position code - must be B or T');
return;
}
let floatingMessageContainer = document.querySelector('#floatingMessageContainer'+positionCd);
if ( !floatingMessageContainer ) {
floatingMessageContainer = document.createElement('div');
floatingMessageContainer.id = 'floatingMessageContainer'+positionCd;
floatingMessageContainer.className = 'floatingMessageContainer';
if ( positionCd=='B' ) floatingMessageContainer.style.bottom='20px';
else floatingMessageContainer.style.top='20px';
document.body.appendChild(floatingMessageContainer);
}
// Create a new element for the message
const messageElement = document.createElement('div');
messageElement.classList.add('floatingMessage');
messageElement.textContent = message;
if ( positionCd=='B' ) messageElement.style.bottom='-10px';
else messageElement.style.top='-10px';
floatingMessageContainer.appendChild(messageElement);
// Trigger reflow to enable transition
floatingMessageContainer.offsetWidth;
// Fade in the message
messageElement.style.opacity = '1';
if ( positionCd=='B' )messageElement.style.bottom = '0';
else messageElement.style.top = '0';
// Auto-hide the message after a duration
setTimeout(() => {
// Fade out and remove the message after the specified duration
messageElement.style.opacity = '0';
if ( positionCd=='B' )messageElement.style.bottom = '-10px';
else messageElement.style.top = '-10px';
setTimeout(() => {
floatingMessageContainer.removeChild(messageElement);
}, 500); // Ensure the message is fully faded out before removal
}, duration);
}
Also see
articles/Implementing-a-Monaco-Editorsquarearticles/iConnectionTestsquarearticles/javascript-camerasquarearticles/list-editsquarearticles/minifierssquarearticles/opayosquarearticles/table-drag-sortersquarearticles/typewatchsquareprojects/MFCalendarPopupsquareprojects/MFChartColumnsquareprojects/MFColorPickersquareprojects/MFColorPickerBasicsquareprojects/MFColumnGradientsquareprojects/MFFloatawayMsgsquareprojects/MFPanelssquareprojects/MFSelectorsquare
Comments
New Comment