Search results

Positions

The toast position can be updated based on predefined positions or customizable positions. The predefined position combinations are updated in the X and Y position properties.

Predefined

X Positions

  • Left
  • Center
  • Right

Y Positions

  • Top
  • Bottom

In multiple toast display, the new toast position will not be updated on dynamic change of property values until the old toast messages removed. The toast occupies full width when you set the width to ‘100%’, so the X positions will not affect the changes when the width is ‘100%‘.

Custom

Custom X and Y positions can be given as pixels/numbers/percentage. The number value is considered as pixels based on the top and left values updated in the toast.

Source
Preview
index.js
index.html
ej.base.enableRipple(true);

//Initialize Toast component
var toast = new ej.notifications.Toast({
    title: 'Matt sent you a friend request',
    content: 'You have a new friend request yet to accept',
    target: document.body,
    icon: 'e-laura',
    position: { X: 'Right', Y: 'Bottom' }
});
//Render initialized Toast component
toast.appendTo('#element');
toast.show();

var listObj = new ej.dropdowns.DropDownList({
    index: 5,
    // set the placeholder to DropDownList input element
    placeholder: 'Select a position',
    // set the height of the popup element
    popupHeight: '200px',
    // bind the change event
    change: valueChange
});
listObj.appendTo('#position');

var radioButton = new ej.buttons.RadioButton({ label: 'Target', name: 'toast', value: 'Target', change: checkboxChange });
radioButton.appendTo('#radio1');

var radioButton1 = new ej.buttons.RadioButton({ label: 'Global', name: 'toast', value: 'Global', checked: true, change: checkboxChange1 });
radioButton1.appendTo('#radio2');

var radioButton2 = new ej.buttons.RadioButton({ label: 'Position', name: 'toastPos', value: 'Position', checked: true, change: checkboxChange2 });
radioButton2.appendTo('#dropdownRadio');

var radioButton3 = new ej.buttons.RadioButton({ label: 'Custom', name: 'toastPos', value: 'Custom', change: checkboxChange3 });
radioButton3.appendTo('#customRedio');

function toastShow(timeOutDelay) {
    setTimeout(
        function () {
            toast.show();
        }, timeOutDelay);
}

document.getElementById('show_Toast').onclick = function () {
    if (customFlag) {
        setcustomPosValue();
    }
    toast.show();
};

document.getElementById('hideToast').onclick = function () {
    toast.hide('All');
};
var customFlag = false;

function checkboxChange(e) {
    if (this.checked) {
        toast.hide('All');
        toast.target = '#toast_pos_target';
        toastShow(1000);
    }
}

function checkboxChange1(e) {
    if (this.checked) {
        toast.hide('All');
        toast.target = document.body;
        toastShow(1000);
    }
}

function checkboxChange2(e) {
    if (this.checked) {
        toast.hide('All');
        document.getElementById('dropdownChoose').style.display = 'table-cell';
        document.getElementById('customChoose').style.display = 'none';
        setToastPosValue(listObj.value.toString()); customFlag = false; toastShow(1000);
    }
}

function checkboxChange3(e) {
    if (this.checked) {
        toast.hide('All');
        document.getElementById('dropdownChoose').style.display = 'none';
        document.getElementById('customChoose').style.display = 'table-cell';
        setcustomPosValue(); customFlag = true; toastShow(1000);
    }
}

//Setting Toast Custom Position
function setcustomPosValue() {
    toast.position.X = parseInt((document.getElementById('xPos')).value, 10);
    toast.position.Y = parseInt((document.getElementById('yPos')).value, 10);
}

//Setting Toast Position
function setToastPosValue(value) {
    switch (value) {
        case 'topleft':
            toast.position.X = 'Left'; toast.position.Y = 'Top'; break;
        case 'topright':
            toast.position.X = 'Right'; toast.position.Y = 'Top'; break;
        case 'topcenter':
            toast.position.X = 'Center'; toast.position.Y = 'Top'; break;
        case 'topfullwidth':
            toast.width = '100%'; toast.position.X = 'Center'; toast.position.Y = 'Top'; break;
        case 'bottomleft':
            toast.position.X = 'Left'; toast.position.Y = 'Bottom'; break;
        case 'bottomright':
            toast.position.X = 'Right'; toast.position.Y = 'Bottom'; break;
        case 'bottomcenter':
            toast.position.X = 'Center'; toast.position.Y = 'Bottom'; break;
        case 'bottomfullwidth':
            toast.width = '100%'; toast.position.X = 'Center'; toast.position.Y = 'Bottom'; break;
    }
}

function valueChange(e) {
    toast.hide('All'); setToastPosValue(e.value.toString()); toastShow(1000);
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Toast</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Toolbar Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
        <div class="row" style="padding-top: 20px" id="toast_pos_target">
            <div id="toast_pos"> </div>
            <div id="toast_pos_property">
                <table style="width: 100%">
                    <tbody><tr>
                        <td>
                            <div style="padding:25px 0 0 0;">
                                <input id="dropdownRadio" type="radio">
                            </div>
                        </td>
                        <td>
                            <div style="padding:25px 0 0 0;">
                                <input id="customRedio" type="radio">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td id="dropdownChoose" colspan="2">
                            <div id="dropdown" style="padding-top:25px;">
                                <select id="position">
                                    <option value="topleft">Top Left</option>
                                    <option value="topright">Top Right</option>
                                    <option value="topcenter">Top Center</option>
                                    <option value="bottomleft">Bottom Left</option>
                                    <option value="bottomright">Bottom Right</option>
                                    <option value="bottomcenter">Bottom Center</option>
                                </select>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" id="customChoose" style="display: none">
                            <form id="formId" class="form-horizontal">
                                <div class="e-row">
                                    <div class="e-float-input">
                                        <input class="e-input" id="xPos" name="Digits" value="50" digits="true" data-digits-message="Please enter digits only." required>
                                        <span class="e-float-line"></span>
                                        <label class="e-float-text" for="Digits">X Position</label>
                                    </div>
                                </div>
                                <div class="e-row">
                                    <div class="e-float-input">
                                        <input class="e-input" id="yPos" name="Digits" value="50" digits="true" data-digits-message="Please enter digits only." required>
                                        <span class="e-float-line"></span>
                                        <label class="e-float-text" for="Digits">Y Position</label>
                                    </div>
                                </div>
                            </form>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div style="padding:25px 0 0 0;">
                                <input id="radio1" type="radio">
                            </div>
                        </td>
                        <td>
                            <div style="padding:25px 0 0 0;">
                                <input id="radio2" type="radio">
                            </div>
                        </td>
                    </tr>
                </tbody></table>
                <div id="toast_btn" style="padding-top: 25px">
                    <button class="e-btn e-control" id="show_Toast" style="margin-right: 15px"> Show Toast </button>
                    <button class="e-btn e-control" id="hideToast"> Hide All </button>
                </div>
            </div>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

See Also