I need to display a toastr message within a particular div, class or id. By default it is body. I have figured out that I need to change the target. But I cannot seem to make it work.

Say for example I want to display toastr inside this div:

<showerror> </showerror>

This is the code I am using:

toastr.options = {
    "closeButton": false,
    "debug": false,
    "newestOnTop": false, 
    "progressBar": false, 
    "positionClass": "toast-top-right",
    "preventDuplicates": false, 
    "onclick": null,
    "showDuration": "300", 
    "hideDuration": "1000", 
    "timeOut": "5000", 
    "extendedTimeOut": "1000",
    "showEasing": "swing",
    "hideEasing": "linear",
    "showMethod": "fadeIn",
    "hideMethod": "fadeOut",
};

$('#submitform').submit(function(e){
    e.preventDefault(); 
    console.log($('#ques1').val());
    if($('#ques1').val()==null){
        toastr.error('Please select a question', 'Error!');
   }
});

Could anyone please help.

I need to display a toastr message within a particular div, class or id. By default it is body. I have figured out that I need to change the target. But I cannot seem to make it work.

Say for example I want to display toastr inside this div:

<showerror> </showerror>

This is the code I am using:

toastr.options = {
    "closeButton": false,
    "debug": false,
    "newestOnTop": false, 
    "progressBar": false, 
    "positionClass": "toast-top-right",
    "preventDuplicates": false, 
    "onclick": null,
    "showDuration": "300", 
    "hideDuration": "1000", 
    "timeOut": "5000", 
    "extendedTimeOut": "1000",
    "showEasing": "swing",
    "hideEasing": "linear",
    "showMethod": "fadeIn",
    "hideMethod": "fadeOut",
};

$('#submitform').submit(function(e){
    e.preventDefault(); 
    console.log($('#ques1').val());
    if($('#ques1').val()==null){
        toastr.error('Please select a question', 'Error!');
   }
});

Could anyone please help.

• javascript
• jquery
• css
• toastr

• can you paste some of your code here .. – Anant Dabhi Commented Feb 13, 2017 at 7:22
• I have added the jquery code I am using to display the toastr which add the toastr to the top right corner of the body. But I want it inside my choice of div or tag – Ankan Kumar Giri Commented Feb 13, 2017 at 7:29

2 Answers 2

It's simple just set the a new class name to "positionClass" inside toastr.options

toastr.options = { 
    ....
    "positionClass": "your-classname-here",
    ....
};

here is a Fiddle

Old question, but if anyone es across that problem: this is the real solution, while the marked answer only puts a class on toastr, this one makes the tostr really rendered inside a container and displays it in the top center of that container (instead of body)

toastr setup:

toastr.options = { 
    ....
    'positionClass': 'tostr_absolute toastr_top_center',
    'target'='.show_error';
    ....
};

Target can be any CSS selector. positionClass can be anything that helps you to style the toastr - it can be multiple classes, like in this example!

HTML markup:

<div class="show_error"></div>

        

CSS:

.show_error{
    position:relative;
}
.tostr_absolute{
    position: absolute !important;
}
.toastr_top_center {
    top: 0;
    right: 0;
    width: 100%;
}

the error-container needs to be positioned (relative), in order to get the toastr positioned absolute inside of it!