Question

I am using jquery toastmessage http://akquinet.github.com/jquery-toastmessage-plugin/ however I have reached a limitation, and that is that the plugin only allows to have one position per page. The plugin outputs the following container:

<div class="toast-container toast-position-top-right"></div>

As a workaround I am trying to change that class at run-time, ideally I would be able to create multiple of these containers and call them by ID, since I don’t want to change the plugin, I am trying to change the class at run-time after the constructor gets called by using the following code:

$().toastmessage('showToast', {
        text     : message,
        stayTime : 1500,
        sticky   : false,
        position : 'top-center',
        type     : 'notice'
    });

    $(".toast-container").removeClass(toast-position-top-right).addClass(toast-position-top-center);

also tried to use:

$("div.toast-container").removeClass(toast-position-top-right).addClass(toast-position-top-center);

I think I am using the selctor wrong, because i get this error:

Uncaught ReferenceError: toast is not defined

How do I properly select that class? Any alternative ideas how to enable multiple positions? TIA

Answer 1

Fixed it by using two functions that toggle the class attribute:

$("*[class*='toast-position-top-center']").removeClass('toast-position-top-center').addClass('toast-position-top-right');

$("*[class*='toast-position-top-right']").removeClass('toast-position-top-right').addClass('toast-position-top-center');

Still not ideal, but it’s a quick workaround.