title: Changing background color of a div based on its id
body: <p>Using Scott Robbin's PageSlide: <a href="http://srobbin.com/jquery-plugins/pageslide/" rel="nofollow">http://srobbin.com/jquery-plugins/pageslide/</a> I'm trying to make "more info" slides that will cover the whole screen from right to left.</p>
  
  <p>I'm getting full screen slides as I wanted but I'd like to be able to define the background color of each slide. This is set at the #pageslide CSS, which is common for each slide. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;head&gt;
  &lt;style&gt;
  
      body { 
          background: #f4f4f4;
          font: 14px/18px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
          color: #666; 
          -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
          -webkit-text-size-adjust: none;
      }
  
      a, a:visited { color: #C30; text-decoration: none; border-bottom: 1px dotted #C30; }
      a:hover { color: #900; border-bottom-style: solid; }
  
      p { margin-bottom: 20px; }
  
      #content {
          width: 940px;
          padding: 10px;
          margin: 0 auto;
      }
          #content h1 { color: #333; line-height: 1em; }
          #content ul { padding-left: 0; list-style: none; }
              #content ul li { margin-bottom: 20px; }
  
      .slide { display: none; }
          .slide a { background: #CCC; color: #333; font-weight: bold; padding: 5px 10px; border: none; }
          .slide a:hover { background: #aaa; }
  
      pre { border: 1px solid #CCC; background-color: #EEE; color: #333; padding: 10px 20px; }
  
      #pageslide {
      /* These styles MUST be included. Do not change. */
      display: none;
      position: absolute;
      position: fixed;
      top: 0;
      height: 100%;
      z-index: 999999;
  
      /* Specify the width of your pageslide here */
      width: 100%;
      padding: 10px;
  
      /* These styles are optional, and describe how the pageslide will look */
      background-color: #a90000;
      color: #FFF;
      }
  
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="content"&gt;
      &lt;h1&gt;PageSlide Demo&lt;/h1&gt;
      &lt;p&gt;Below are a couple of pageslides:&lt;/p&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;a href="#modal1" class="slideleft"&gt;First Slide. Red Background.&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#modal2" class="slideleft"&gt;Second Slide. Blue Background.&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#modal3" class="slideleft"&gt;Third Slide. Green Background.&lt;/a&gt;               
          &lt;/li&gt;
  
      &lt;/ul&gt;
      &lt;div id="modal1" class="slide" style="width:800px; padding:20px; "&gt;
          &lt;h2&gt;Slide 1&lt;/h2&gt;
          &lt;p&gt;This slide uses "modal" option set to "true". When using a modal pageslide, clicking on the main window will not close the window. You must explicitly call &lt;code&gt;$.pageslide.close()&lt;/code&gt;.&lt;/p&gt;
          &lt;p&gt;&lt;a href="javascript:$.pageslide.close()"&gt;Close&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="modal2" class="slide" style="width:800px; padding:20px; "&gt;
          &lt;h2&gt;Slide 2&lt;/h2&gt;
          &lt;p&gt;This slide uses "modal" option set to "true". When using a modal pageslide, clicking on the main window will not close the window. You must explicitly call &lt;code&gt;$.pageslide.close()&lt;/code&gt;.&lt;/p&gt;
          &lt;p&gt;&lt;a href="javascript:$.pageslide.close()"&gt;Close&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="modal3" class="slide" style="width:800px; padding:20px; "&gt;
          &lt;h2&gt;Slide 3&lt;/h2&gt;
          &lt;p&gt;This slide uses "modal" option set to "true". When using a modal pageslide, clicking on the main window will not close the window. You must explicitly call &lt;code&gt;$.pageslide.close()&lt;/code&gt;.&lt;/p&gt;
          &lt;p&gt;&lt;a href="javascript:$.pageslide.close()"&gt;Close&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;script src="jquery-1.7.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="jquery.pageslide.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      /* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
      $(".slideleft").pageslide({ direction: "left", modal: true });        
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>/*
   * jQuery pageSlide
   * Version 2.0
   * http://srobbin.com/jquery-pageslide/
   *
   * jQuery Javascript plugin which slides a webpage over to reveal an additional interaction pane.
   *
   * Copyright (c) 2011 Scott Robbin (srobbin.com)
   * Dual licensed under the MIT and GPL licenses.
   */
  
  ;
  (function (b) {
      function j(e, a) {
          if (0 === e.indexOf("#")) b(e).clone(!0).appendTo(c.empty()).show();
          else {
              if (a) {
                  var d = b("&lt;iframe /&gt;").attr({
                      src: e,
                      frameborder: 0,
                      hspace: 0
                  }).css({
                      width: "100%",
                      height: "100%"
                  });
                  c.html(d)
              } else c.load(e);
              c.data("localEl", !1)
          }
      }
  
      function k(b, a) {
          var d = c.outerWidth(!0),
              f = {}, g = {};
          if (!c.is(":visible") &amp;&amp; !h) {
              h = !0;
              switch (b) {
              case "left":
                  c.css({
                      left: "auto",
                      right: "-" + d + "px"
                  });
                  f["margin-left"] = "-=" + d;
                  g.right = "+=" + d;
                  break;
              default:
                  c.css({
                      left: "-" + d + "px",
                      right: "auto"
                  }), f["margin-left"] = "+=" + d, g.left = "+=" + d
              }
              l.animate(f, a);
              c.show().animate(g, a, function () {
                  h = !1
              })
          }
      }
      var l = b("body"),
          c = b("#pageslide"),
          h = !1,
          m;
       0 == c.length &amp;&amp; (c = b("&lt;div /&gt;").attr("id", "pageslide").css("display", "none").appendTo(b("body")));
       b.fn.pageslide = function (e) {
          this.click(function (a) {
              var d = b(this),
                  f = b.extend({
                      href: d.attr("href")
                   }, e);
              a.preventDefault();
              a.stopPropagation();
              c.is(":visible") &amp;&amp; d[0] == m ? b.pageslide.close() : (b.pageslide(f), m = d[0])
              $('body').css('overflow-y','hidden');
          })
      };
       b.fn.pageslide.defaults = {
          speed: 500,
          direction: "right",
          modal: !1,
          iframe: !0,
          href: null
      };
      b.pageslide = function (e) {
          var a = b.extend({}, b.fn.pageslide.defaults, e);
          c.is(":visible") &amp;&amp; c.data("direction") != a.direction ? b.pageslide.close(function () {
              j(a.href, a.iframe);
              k(a.direction, a.speed)
          }) : (j(a.href, a.iframe), c.is(":hidden") &amp;&amp; k(a.direction, a.speed));
          c.data(a)
       };
       b.pageslide.close = function (c) {
           var a = b("#pageslide"),
              d = a.outerWidth(!0),
              f = a.data("speed"),
              g = {}, i = {};
          if (!a.is(":hidden") &amp;&amp; !h) {
              h = !0;
              switch (a.data("direction")) {
              case "left":
                  g["margin-left"] = "+=" + d;
                  i.right = "-=" + d;
                  break;
              default:
                  g["margin-left"] = "-=" + d, i.left = "-=" + d
               }
               a.animate(i, f);
               l.animate(g, f, function () {
                  a.hide();
                  h = !1;
                  "undefined" != typeof c &amp;&amp; c()
              })
              $('body').css('overflow-y','scroll');
          }
      };
      c.click(function (b) {
          b.stopPropagation()
      });
      b(document).bind("click keyup", function (e) {
          "keyup" == e.type &amp;&amp; 27 != e.keyCode || c.is(":visible") &amp;&amp; !c.data("modal") &amp;&amp; b.pageslide.close()
      })
  })(jQuery);
  </code></pre>
  
  <p>Is there any way to set the background color based on div id (modal1, modal2, modal3)?</p>
  
  <p>Many thanks</p>