title: jquery toastmessage multipe positions, how to change position class at runtime?
body: <p>I am using jquery toastmessage <a href="http://akquinet.github.com/jquery-toastmessage-plugin/" rel="nofollow">http://akquinet.github.com/jquery-toastmessage-plugin/</a> 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:</p>
  
  <pre><code>&lt;div class="toast-container toast-position-top-right"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>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: </p>
  
  <pre><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);
  </code></pre>
  
  <p>also tried to use:</p>
  
  <pre><code>$("div.toast-container").removeClass(toast-position-top-right).addClass(toast-position-top-center);
  </code></pre>
  
  <p>I think I am using the selctor wrong, because i get this error:</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: toast is not defined</p>
  </blockquote>
  
  <p>How do I properly select that class? Any alternative ideas how to enable multiple positions? TIA</p>