title: JavaScript "Toaster Popup" class works awesome in FireFox fails in IE
body: <p><strong>SOLVED:</strong> SEE "CORRECTED SOLUTION" Area (below)</p>
  
  <p><strong>--------------------------------- ORIGINAL TEXT ---------------------------</strong></p>
  
  <p>I've created a JavaScript toaster popup to show info about an individual row.  It works great in FireFox...but it goes down in flames in IE.</p>
  
  <p>...suggestions and help appreciated.</p>
  
  <p><strong>WHAT I THINK IS FAILING:</strong>
  I think I declared the "Toaster" class wrong and IE isn't doesn't recognize it as an array.  As such, when I call "PopUp(clientId)" on the toaster it fails becuase it doesn't traverse the array.</p>
  
  <p>Additionally, FireFox populates the array correctly in the documents "ready" function...but I'm not sure IE is doing so.</p>
  
  <p>Lastly, since I am still new to JavaScript it (obviously) could be HOW I am creating the classes (as well).</p>
  
  <p><strong>WHERE IT FAILS:</strong>
  The code fails because the value of "target" is null.  This variable is null because IE doesn't seem to traverse the Toaster (array).</p>
  
  <pre><code>this.PopUp = function(clientId) {
  
      var target = null;
  
      jQuery.each(this, function() {
          // Hide previous
          if (jQuery(this)[0].IsUp)
              jQuery(this)[0].PopDown();
  
          if (jQuery(this)[0].ClientId == clientId)
              target = jQuery(this)[0];
      });
  
      // Show current
      target.PopUp();
  }
  </code></pre>
  
  <p><strong>THE FULL CODE SET:</strong>
  Thanks for the help...</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;script src="../Includes/JavaScript/jQuery/Core/jquery-1.3.2.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;style type="text/css"&gt;
          .toast
          {
              width: 100%; 
              position: relative;
          }
          .toastBorder
          {
              width: 100%; 
              position: absolute;
              border-radius-topright:.5em;
              border-radius-topleft:.5em;
              -moz-border-radius-topright:.5em;
              -moz-border-radius-topleft:.5em;
              -webkit-border-radius-topright:.5em;
              -webkit-border-radius-topleft:.5em;
              background-color: #FFFFCC;
              border: 1px solid #969696;
              border-bottom-color: White;
              display:none;
              height: 0;
              bottom: 0;
          }
          .toastForm
          {
              display:none;
          }
      &lt;/style&gt;
  
      &lt;script type="text/javascript"&gt;
  
          // CLASS DEFINITION:
          function Toast(clientId, height, speed) {
  
              // PROPERTIES
              this.IsUp = false;
              this.IsDown = false;
              this.ClientId = clientId;
              this.Height = height;
              this.Speed = speed;
  
              // METHODS
              this.PopUp = function() {
  
                  if (this.IsUp) { return; }
                  this.IsUp = true;
                  this.IsDown = false;
  
                  var speed = this.Speed;
                  var action = '+=' + this.Height + "px";
  
                  // Border
                  jQuery('#' + this.ClientId).children('div.toastBorder').fadeIn('fast', function() {
                      jQuery(this).animate({ height: action }, speed, function() {
                          // Form
                          jQuery(this).children('div.toastForm').fadeIn('fast');
                      });
                  });
              }
              this.PopDown = function() {
  
                  if (this.IsDown) { return; }
                  this.IsUp = false;
                  this.IsDown = true;
  
                  var speed = this.Speed;
                  var action = '-=' + this.Height + "px";
  
                  // Form
                  jQuery('#' + this.ClientId).children('div.toastBorder').children('div.toastForm').fadeOut('fast');
  
                  // Border
                  jQuery('#' + this.ClientId + ' div.toastBorder').animate({ height: action }, speed, function() {
                      jQuery(this).fadeOut('fast');
                  });
              }
          }
  
          // CLASS DEFINITION:
          function Toaster() {
              // PROPERTIES
  
              // METHODS
              this.PopUp = function(clientId) {
  
                  var target = null;
  
                  jQuery.each(this, function() {
                      // Hide previous
                      if (jQuery(this)[0].IsUp)
                          jQuery(this)[0].PopDown();
  
                      if (jQuery(this)[0].ClientId == clientId)
                          target = jQuery(this)[0];
                  });
  
                  // Show current
                  target.PopUp();
              }
              this.PopDown = function(clientId) {
  
                  jQuery.each(this, function() {
                      if (jQuery(this)[0].ClientId == clientId)
                          jQuery(this)[0].PopDown(); // Hide current
                  });
              }
              this.Add = function(toast) {
  
                  var found = false;
  
                  // No duplicates are allowed
                  jQuery.each(this, function() {
                      if (jQuery(this)[0].ClientId == toast.ClientId)
                          found = true;
                  });
  
                  if (!found)
                      this.push(toast);
              }
          }
  
          // CLASS DEFINITION: Toaster inheritance
          Toaster.prototype = new Array();
  
          var myToaster;
          var myToast;
  
          // DOM EVENT: Document.Ready()
          jQuery(document).ready(function() {
  
              if (myToaster == null)
                  myToaster = new Toaster();
  
              myToaster.Add(new Toast("row1", 100, 200));
              myToaster.Add(new Toast("row2", 100, 200));
              myToaster.Add(new Toast("row3", 100, 200));
              myToaster.Add(new Toast("row4", 100, 200));
              myToaster.Add(new Toast("row5", 100, 200));
  
              // These BOTH return true in IE...
              //alert(myToaster.Items instanceof Array);
              //alert(myToaster instanceof Array);
  
              // This is for the button example
              if (myToast == null)
                  myToast = new Toast("row3", 100, 200);
          });
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;br /&gt;
      I need help on the following:
      &lt;ul&gt;
          &lt;li&gt;
              This works GREAT in FireFox
          &lt;/li&gt;
          &lt;li&gt;
              IE doesn't seem to recognize the Toaster class as being an array.
          &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div style="width: 300;"&gt;   
          &lt;label style="display:block;color: #660000;"&gt;INDIVIDUAL pieces of toast work fine in IE:&lt;/label&gt;
          &lt;input type="button" value="Down (row 3)" onclick="myToast.PopDown();" /&gt;
          &lt;input type="button" value="Up (row 3)" onclick="myToast.PopUp();" /&gt;
      &lt;/div&gt;
  
      &lt;br /&gt;&lt;br /&gt;
  
      &lt;label style="color: #660000"&gt;Clicking a row IS SUPPOSED TO toggle a "piece of toast" for that row.&lt;/label&gt;
      &lt;br /&gt;&lt;br /&gt;
  
      &lt;table cellpadding="0" cellspacing="0" width="500" style=" border: solid 1px black"&gt;
          &lt;tr&gt;
              &lt;td align="center" style="border-bottom: solid 1px black;"&gt;
                  Header
              &lt;/td&gt;
              &lt;td align="center" style="border-bottom: solid 1px black;"&gt;
                  Header
              &lt;/td&gt;
              &lt;td align="center" style="border-bottom: solid 1px black;"&gt;
                  Header
              &lt;/td&gt;
              &lt;td align="center" style="border-bottom: solid 1px black;"&gt;
                  Header
              &lt;/td&gt;
              &lt;td align="center" style="border-bottom: solid 1px black;"&gt;
                  Header
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td colspan="3"&gt;
                  &lt;div id="row1" class="toast"&gt;
                      &lt;div class="toastBorder"&gt;
                          &lt;div align="center" class="toastForm"&gt;
                              &lt;br /&gt;
                               Hello
                              &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr onclick="myToaster.PopUp('row1');"&gt;
              &lt;td align="center"&gt;
                  Data
              &lt;/td&gt;
              &lt;td align="center"&gt;
                  Data
              &lt;/td&gt;
              &lt;td align="center"&gt;
                  Data
              &lt;/td&gt;
              &lt;td align="center"&gt;
                  Data
              &lt;/td&gt;
              &lt;td align="center"&gt;
                  Data
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td colspan="3"&gt;
                  &lt;div id="row2" class="toast"&gt;
                      &lt;div class="toastBorder"&gt;
                          &lt;div align="center" class="toastForm"&gt;
                              &lt;br /&gt;
                               Hello
                              &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
                              &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr onclick="myToaster.PopUp('row2');"&gt;
              &lt;td align="center"&gt;
                  Data
              &lt;/td&gt;
              &lt;td align="center"&gt;
                  Data
              &lt;/td&gt;
              &lt;td align="center"&gt;
                  Data
              &lt;/td&gt;
              &lt;td align="center"&gt;
                  Data
              &lt;/td&gt;
              &lt;td align="center"&gt;
                  Data
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td colspan="3"&gt;
                  &lt;div id="row3" class="toast"&gt;
                      &lt;div class="toastBorder"&gt;
                          &lt;div align="center" class="toastForm"&gt;
                              &lt;br /&gt;
                               Hello
                              &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr onclick="myToaster.PopUp('row3');"&gt;
              &lt;td align="center"&gt;
                  Data
              &lt;/td&gt;
              &lt;td align="center"&gt;
                  Data
              &lt;/td&gt;
              &lt;td align="center"&gt;
                  Data
              &lt;/td&gt;
              &lt;td align="center"&gt;
                  Data
              &lt;/td&gt;
              &lt;td align="center"&gt;
                  Data
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td colspan="3"&gt;
                  &lt;div id="row4" class="toast"&gt;
                      &lt;div class="toastBorder"&gt;
                          &lt;div align="center" class="toastForm"&gt;
                              &lt;br /&gt;
                               Hello
                              &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr onclick="myToaster.PopUp('row4');"&gt;
              &lt;td align="center"&gt;
                  Data
              &lt;/td&gt;
              &lt;td align="center"&gt;
                  Data
              &lt;/td&gt;
              &lt;td align="center"&gt;
                  Data
              &lt;/td&gt;
              &lt;td align="center"&gt;
                  Data
              &lt;/td&gt;
              &lt;td align="center"&gt;
                  Data
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td colspan="3"&gt;
                  &lt;div id="row5" class="toast"&gt;
                      &lt;div class="toastBorder"&gt;
                          &lt;div align="center" class="toastForm"&gt;
                              &lt;br /&gt;
                                  Hello
                              &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr onclick="myToaster.PopUp('row5');"&gt;
              &lt;td align="center"&gt;
                  Data
              &lt;/td&gt;
              &lt;td align="center"&gt;
                  Data
              &lt;/td&gt;
              &lt;td align="center"&gt;
                  Data
              &lt;/td&gt;
              &lt;td align="center"&gt;
                  Data
              &lt;/td&gt;
              &lt;td align="center"&gt;
                  Data
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>HERE IS THE CORRECTED SOLUTION:</strong></p>
  
  <pre><code>// CLASS DEFINITION:
  function Toast(clientId, maxHeight, speed) {
  
      // PROPERTIES
      this.ClientId = clientId;
      this.MaxHeight = maxHeight;
      this.Speed = speed;
  
      // METHODS
      this.IsUp = function() {
          return (jQuery('#' + this.ClientId).children().height() &gt; 0) ? true : false;
      }
      this.PopUp = function() {
  
          if (this.IsUp()) { return; }
  
          var speed = this.Speed;
          var action = '+=' + this.MaxHeight + "px";
  
          // Border
          jQuery('#' + this.ClientId).children('div.toastBorder').fadeIn('fast', function() {
              jQuery(this).animate({ height: action }, speed, function() {
                  // Form
                  jQuery(this).children('div.toastForm').fadeIn('fast');
              });
          });
  
          this.IsUp(true);
      }
      this.PopDown = function() {
  
          if (!this.IsUp()) { return; }
  
          var speed = this.Speed;
          var action = '-=' + this.MaxHeight + "px";
  
          // Form
          jQuery('#' + this.ClientId).children('div.toastBorder').children('div.toastForm').fadeOut('fast');
  
          // Border
          jQuery('#' + this.ClientId).children('div.toastBorder').animate({ height: action }, speed, function() {
              jQuery(this).fadeOut('fast');
          });
  
          this.IsUp(false);
      }
  }
  
  // CLASS DEFINITION:
  function Toaster() {
      // PROPERTIES
      this.Items = new Array();
  
      // METHODS
      this.PopUp = function(clientId) {
  
          var target = null;
  
          jQuery.each(this.Items, function() {
              if (jQuery(this)[0].ClientId != clientId) {
                  if (jQuery(this)[0].IsUp()) {
                      jQuery(this)[0].PopDown(); // Hide previous
                  }
              }
  
              if (jQuery(this)[0].ClientId == clientId) {
                  target = jQuery(this)[0];
              }
          });
  
          if (target != null) {
              if (target.IsUp() == false)
                  target.PopUp();
          }
      }
      this.PopDown = function(clientId) {
          jQuery.each(this.Items, function() {
              if (jQuery(this)[0].ClientId == clientId)
                  jQuery(this)[0].PopDown(); // Hide current
          });
      }
      this.Add = function(toast) {
  
          var found = false;
  
          // No duplicates are allowed
          jQuery.each(this.Items, function() {
              if (jQuery(this.Items)[0].ClientId == toast.ClientId)
                  found = true;
          });
  
          if (!found)
              this.Items.push(toast);
      }
  }
  
  var myToaster;
  var myToast;
  
  // DOM EVENT: Document.Ready()
  $j(document).ready(function() {
  
      if (myToaster == null)
          myToaster = new Toaster();
  
      myToaster.Add(new Toast("row1", 125, 200));
      myToaster.Add(new Toast("row2", 125, 200));
      myToaster.Add(new Toast("row3", 125, 200));
      myToaster.Add(new Toast("row4", 125, 200));
      myToaster.Add(new Toast("row5", 125, 200));
  });
  &lt;/script&gt;
  </code></pre>