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);
}

About

License

Latest Release

Version 1.02024-05-08