title: Change an ID to a Class in JS
body: <p>Ive loant some javascript, to see pictures at my site.
  But i want to be able to see more pictures, at every site.
  - And for that i need to change the ID to a class instead.
  Is that possible?</p>
  
  <p>JavaScript</p>
  
  <pre class="lang-js prettyprint-override"><code>function toggle(div_id) {
  var el = document.getElementById(div_id);
  if ( el.style.display == 'none' ) { el.style.display = 'block';}
  else {el.style.display = 'none';}
  </code></pre>
  
  <p>}</p>
  
  <pre class="lang-js prettyprint-override"><code>function blanket_size(popUpDivVar) {
  if (typeof window.innerWidth != 'undefined') {
      viewportheight = window.innerHeight;
  } else {
      viewportheight = document.documentElement.clientHeight;
  }
  if ((viewportheight &gt; document.body.parentNode.scrollHeight) &amp;&amp; (viewportheight &gt; document.body.parentNode.clientHeight)) {
      blanket_height = viewportheight;
  } else {
      if (document.body.parentNode.clientHeight &gt; document.body.parentNode.scrollHeight) {
          blanket_height = document.body.parentNode.clientHeight;
      } else {
          blanket_height = document.body.parentNode.scrollHeight;
      }
  }
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>var blanket = document.getElementById('blanket');
  blanket.style.height = blanket_height + 'px';
  var popUpDiv = document.getElementById(popUpDivVar);
  popUpDiv_height=blanket_height/2-150;//150 is half popup's height
  popUpDiv.style.top = popUpDiv_height + 'px';
  </code></pre>
  
  <p>}</p>
  
  <pre class="lang-js prettyprint-override"><code>function window_pos(popUpDivVar) {
  if (typeof window.innerWidth != 'undefined') {
      viewportwidth = window.innerHeight;
  } else {
      viewportwidth = document.documentElement.clientHeight;
  }
  if ((viewportwidth &gt; document.body.parentNode.scrollWidth) &amp;&amp; (viewportwidth &gt; document.body.parentNode.clientWidth)) {
      window_width = viewportwidth;
  } else {
      if (document.body.parentNode.clientWidth &gt; document.body.parentNode.scrollWidth) {
          window_width = document.body.parentNode.clientWidth;
      } else {
          window_width = document.body.parentNode.scrollWidth;
      }
  }
  var popUpDiv = document.getElementById(popUpDivVar);
  window_width=window_width/2-150;//150 is half popup's width
  popUpDiv.style.left = window_width + 'px';
  </code></pre>
  
  <p>}</p>
  
  <pre class="lang-js prettyprint-override"><code>function popup(windowname) {
  blanket_size(windowname);
  window_pos(windowname);
  toggle('blanket');
  toggle(windowname);     
  </code></pre>
  
  <p>}</p>
  
  <p>CSS</p>
  
  <pre><code>#blanket {
  background-color:#111;
  opacity: 0.8;
  filter:alpha(opacity=65);
  position:absolute;
  z-index: 1000;
  top:0px;
  left:0px;
  width:100%;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>#popUpDiv {
  position:absolute;
  background-repeat:no-repeat;
  z-index: 1001;
  text-align:center;
  left:0;
  top:0;
  </code></pre>
  
  <p>}</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="blanket" style="display:none;"&gt;&lt;/div&gt;
                  &lt;div id="popUpDiv" style="display:none;"&gt;
                      &lt;a href="Index.html" onclick="popup('popUpDiv')"&gt;
                      &lt;img id="imageid" src="bigPicture.png" alt="picture"/&gt;&lt;br /&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;a href="#" onclick="popup('popUpDiv')" class="pic"&gt;&lt;img src="smallPicture.png" alt="picture"/&gt;&lt;/a&gt;
  </code></pre>