title: Automatically set the scale of an element based on the height of the viewport
body: <p>To scale an element with CSS based on various viewport heights is tedious to say the least, and should IMO not be needed. Then again, I might be totally wrong.</p>
  
  <p>I am wondering if it is at all possible to use jQuery in order to automatically set the scale of an element based on the height of the viewport?</p>
  
  <p>I have checked every link I can find here on Stackflow to no avail and I have checked out <a href="http://ricostacruz.com/jquery.transit/" rel="nofollow">http://ricostacruz.com/jquery.transit/</a> which seems like a viable option but I don't know how to calculate the height and turn it into a value so I can use it for CSS transformation scale.
  I am not sure, but I might need "check points" so that a specific height will be a preset value.</p>
  
  <p>I will also need to be able to adjust the scale manually so I can adjust the scaling to make the element fit most viewports.</p>
  
  <p>This is my example:
  <a href="http://testsiten.se/modernaglas/images/showcase/bedroom/" rel="nofollow">http://testsiten.se/modernaglas/images/showcase/bedroom/</a></p>
  
  <p>I need the whole content within the class .scales to scale according to the height of the viewport and also update if orientation is changed.</p>
  
  <p>The width is the same as the height so it shouldn't pose a problem since it won't ever be wider than the height.</p>
  
  <p>I do NOT want to change the height of <code>.scales</code> as that would break the whole design.</p>
  
  <p>I have done some real crappy CSS media queries, which haven't been cleaned up since I figured it just HAVE to be easier to do all of this with jQuery.</p>
  
  <p>This is my CSS.</p>
  
  <pre><code>body, html{ background-color: #333333; font-family: tahoma; margin: 0; padding: 0; }
  img{background: none}
  h1 {font-size: 18px; margin: 0; font-weight: normal; text-align: center}
  #ChangableElements {width: 958px; margin:0 auto; }
  #navigation {background-color: #bdc7c9; color: #6e7377;padding: 7px 8px 5px 21px;}
  #navigation div div {display: inline-block;}
  #navigation div div span{display: block;}
  .nav_glas, .nav_ram {display: inline-block;font-size: 13px;text-align: center;}
  .nav_glas div, .nav_ram div{padding: 1px 13px 0 10px;}
  .nav_glas div a, .nav_ram div a{display: inline-block; margin: 8px 0 10px;}
  .nav_ram{float: right;}
  .work_area {margin-bottom: 0; background: url("images/bg_image.png") repeat scroll 0 0 transparent; height: auto;width: 958px;}
  
  .border, .grid{margin-top: 0px;position: absolute;top: 0;}
  .grid_on {width: 50px}
  .headers h1{display: inline-block;}
  .headers h1:first-child{float: left; margin-left: 10px; }
  .headers{display: block!important;padding: 0 !important;}
  
  
  .hidden {display: none;}
  </code></pre>
  
  <p>One of my Media Queries</p>
  
  <pre><code>@media only screen and (min-device-width : 719px) and (max-device-width : 721px) and (orientation : portrait) { 
  div.scales
  {
     transform: scale(0.37);
     -ms-transform: scale(0.37); /* IE 9 */
     -webkit-transform: scale(0.37); /* Safari and Chrome */
     -o-transform: scale(0.37); /* Opera */
     -moz-transform: scale(0.37); /* Firefox */
     transform-origin: top center;
     -ms-transform-origin: top center;
     -webkit-transform-origin: top center;
     -o-transform-origin: top center;
     -moz-transform-origin: top center;
  }
  }
  </code></pre>
  
  <p>This is my jQuery:</p>
  
  <pre><code> &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
      function changeImage(el, img_url) {
          $(document).find(el).attr('src', img_url);
      }
      $(document).ready(function(){
          // add color btns event
          $('.nav_glas').find('a.spegel').click(function(){
              changeImage('#mirror', 'images/spegel.png');
          });
          $('.nav_glas').find('a.vit_traskiva').click(function(){
              changeImage('#mirror', 'images/vit_traskiva.png');
          });
          $('.nav_glas').find('a.vitt_glas').click(function(){
              changeImage('#mirror', 'images/vitt_glas.png');
          });
          $('.nav_glas').find('a.metall_glas').click(function(){
              changeImage('#mirror', 'images/metall_gra.png');
          });
          $('.nav_glas').find('a.gult_glas').click(function(){
              changeImage('#mirror', 'images/gult_glas.png');
          });
          $('.nav_glas').find('a.rott_glas').click(function(){
              changeImage('#mirror', 'images/rott_glas.png');
          });
          $('.nav_glas').find('a.svart_glas').click(function(){
              changeImage('#mirror', 'images/svart_glas.png');
          });
      });
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      function changeImage(el, img_url) {
          $(document).find(el).attr('src', img_url);
      }
      var app = {
          isActive: function(el){
              if($(el).hasClass('active')) {
                  return true;
              }
              else {
                  return false;
              }
          },
          whoActive: function(){
              return $('.active').attr('id');
          },
          change_grid: function(image){
              changeImage('#grid', image);
          }
      }
      $(document).ready(function(){
          // add color btns event
          $('.nav_ram').find('a.vit').click(function(){
  
              $('a').removeClass('active');
              $(this).addClass('active');
              changeImage('#border', 'images/vit_el.png');
              app.change_grid('images/grid_vit.png');
  
  
          });
          $('.nav_ram').find('a.silvermatt').click(function(){
              $('a').removeClass('active');
              $(this).addClass('active');
              changeImage('#border', 'images/silver_el.png');
              app.change_grid('images/grid_silvermatt.png');
          });
          $('.nav_ram').find('a.svart').click(function(){
              $('a').removeClass('active');
              $(this).addClass('active');
  
              changeImage('#border', 'images/svart_blank_el.png');
              app.change_grid('images/grid_svart.png');
          });
  
          // grid_turn_on event
          $('.grid_turn_on').click(function(event){
  
              var grid_on = $('.grid_on'); // div el
              var grid = $('#grid');
              var is_hidden = false;
  
              if(grid.hasClass('hidden')) {
                  is_hidden = true;
              }
              else {
                  is_hidden = false;
              }
  
              log(app.whoActive());
              switch (app.whoActive()) {
                  case 'vit':
                      log('is vit');
                      if(is_hidden) {
                          grid.removeClass('hidden');
                          grid_on.find('span').empty().append('Ja/Nej');
                          grid_on.find('img').attr('src','images/grid_on.jpg');
                          changeImage('#grid', 'images/grid_silvermatt.png');
                      } else {
                          grid.addClass('hidden');
                          grid_on.find('span').empty().append('Ja/Nej');
                          grid_on.find('img').attr('src','images/grid_off.jpg');
                      }
  
  
                      break;
                  case 'silvermatt':
                      log('is silver');
                      if(is_hidden) {
                          grid.removeClass('hidden');
                          grid_on.find('span').empty().append('Ja/Nej');
                          grid_on.find('img').attr('src','images/grid_on.jpg');
                          changeImage('#grid', 'images/grid_silvermatt.png');
                      } else {
                          grid.addClass('hidden');
                          grid_on.find('span').empty().append('Ja/Nej');
                          grid_on.find('img').attr('src','images/grid_off.jpg');
                      }
  
                      break;
                  case 'svart':
                      log('is svart');
                      if(is_hidden) {
                          grid.removeClass('hidden');
                          grid_on.find('span').empty().append('Ja/Nej');
                          grid_on.find('img').attr('src','images/grid_on.jpg');
                          changeImage('#grid', 'images/grid_svart.png');
                      } else {
                          grid.addClass('hidden');
                          grid_on.find('span').empty().append('Ja/Nej');
                          grid_on.find('img').attr('src','images/grid_off.jpg');
                      }
                      break;
                  default:
                      if(is_hidden) {
                          grid.removeClass('hidden');
                          grid_on.find('span').empty().append('Ja/Nej');
                          grid_on.find('img').attr('src','images/grid_on.jpg');
                      }
                      else {
                          grid.addClass('hidden');
                          grid_on.find('span').empty().append('Ja/Nej');
                          grid_on.find('img').attr('src','images/grid_off.jpg');
                      }
              }
  
  
  
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>And this is my HTML.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width"&gt;
      &lt;title&gt;mirror&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="scales" id="ChangableElements"&gt;
          &lt;div class="work_area"&gt;
              &lt;img src="images/grid_svart.png" alt="" id="grid" class="grid"&gt;
              &lt;img src="images/svart_blank_el.png" alt="" id="border" class="border"&gt;
              &lt;img src="images/vitt_glas.png" alt="" id="mirror"&gt;
          &lt;/div&gt;
          &lt;div id="navigation"&gt;
              &lt;div class="nav_glas"&gt;
                  &lt;h1&gt;Välj färg på glas/skiva&lt;/h1&gt;
                  &lt;div&gt;&lt;a class="spegel"&gt;&lt;img src="images/pic1.jpg" alt=""&gt;&lt;/a&gt;&lt;span&gt;Spegel&lt;/span&gt;&lt;/div&gt;
                  &lt;div&gt;&lt;a class="vit_traskiva"&gt;&lt;img src="images/pic2.jpg" alt=""&gt;&lt;/a&gt;&lt;span&gt;Vit träskiva&lt;/span&gt;&lt;/div&gt;
                  &lt;div&gt;&lt;a class="vitt_glas"&gt;&lt;img src="images/pic3.jpg" alt=""&gt;&lt;/a&gt;&lt;span&gt;Vitt glas&lt;/span&gt;&lt;/div&gt;
                  &lt;div&gt;&lt;a class="metall_glas"&gt;&lt;img src="images/pic4.jpg" alt=""&gt;&lt;/a&gt;&lt;span&gt;Metallgrått glas&lt;/span&gt;&lt;/div&gt;
                  &lt;div&gt;&lt;a class="gult_glas"&gt;&lt;img src="images/pic5.jpg" alt=""&gt;&lt;/a&gt;&lt;span&gt;Gult glas&lt;/span&gt;&lt;/div&gt;
                  &lt;div&gt;&lt;a class="rott_glas"&gt;&lt;img src="images/pic6.jpg" alt=""&gt;&lt;/a&gt;&lt;span&gt;Rött glas&lt;/span&gt;&lt;/div&gt;
                  &lt;div&gt;&lt;a class="svart_glas"&gt;&lt;img src="images/pic7.jpg" alt=""&gt;&lt;/a&gt;&lt;span&gt;Svart glas&lt;/span&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="nav_ram" id="tfoot"&gt;
                  &lt;div class="headers"&gt;
                      &lt;h1&gt;Spröjs&lt;/h1&gt;
                      &lt;h1&gt;Välj färg på dörrens ram&lt;/h1&gt;
                  &lt;/div&gt;
                  &lt;div class="grid_on"&gt;&lt;a class="grid_turn_on" &gt;&lt;img src="images/grid_on.jpg" alt=""&gt;&lt;/a&gt;&lt;span&gt;Ja/Nej&lt;/span&gt;&lt;/div&gt;
                  &lt;div&gt;&lt;a class="vit" id="vit"&gt;&lt;img src="images/pic2_1.jpg" alt=""&gt;&lt;/a&gt;&lt;span&gt;Vit blank&lt;/span&gt;&lt;/div&gt;
                  &lt;div&gt;&lt;a class="silvermatt" id="silvermatt"&gt;&lt;img src="images/pic2_2.jpg" alt=""&gt;&lt;/a&gt;&lt;span&gt;Silvermatt&lt;/span&gt;&lt;/div&gt;
                  &lt;div&gt;&lt;a class="svart" id="svart"&gt;&lt;img src="images/pic2_3.jpg" alt=""&gt;&lt;/a&gt;&lt;span&gt;Svart blank&lt;/span&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>As one can see I have alot of elements inside the .scales and there is also a background image in there. This is why I need it to scale rather than to set the height because there are so many elements dependent on the scale of the .scales.</p>
  
  <p>I hope I made myself understood now. :D</p>
  
  <p>Edit:
  Finally learned some jQ in order to get this functional.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $(document).ready(function(){
              $(window).on('resize', function(){
                  var vpheight = $(window).height();
                  var vpwidth = $(window).width();
  
          if(vpwidth&gt;vpheight) {
            // Landscape
              var height = $(window).height() * 0.00148;
              var width = height / 2 * -958;
              $('.scales').css('transform', 'scale(' + height + ')');
              $('.scales').css('-ms-transform', 'scale(' + height + ')');
              $('.scales').css('-webkit-transform', 'scale(' + height + ')');
              $('.scales').css('-o-transform', 'scale(' + height + ')');
              $('.scales').css('-moz-transform', 'scale(' + height + ')');
              $('#ChangableElements').css({'left': width  + 'px'});
          } else if(vpwidth &lt;=720 &amp;&amp; vpheight &gt; 569 ) {
              var height = $(window).height() * 0.000675;
              var width = height / 2 * -958;
              $('.scales').css('transform', 'scale(' + height + ')');
              $('.scales').css('-ms-transform', 'scale(' + height + ')');
              $('.scales').css('-webkit-transform', 'scale(' + height + ')');
              $('.scales').css('-o-transform', 'scale(' + height + ')');
              $('.scales').css('-moz-transform', 'scale(' + height + ')');
              $('#ChangableElements').css({'left': width  + 'px'});
          } else {
            // Portrait
              var height = $(window).height() * 0.000895;
              var width = height / 2 * -958;
              $('.scales').css('transform', 'scale(' + height + ')');
              $('.scales').css('-ms-transform', 'scale(' + height + ')');
              $('.scales').css('-webkit-transform', 'scale(' + height + ')');
              $('.scales').css('-o-transform', 'scale(' + height + ')');
              $('.scales').css('-moz-transform', 'scale(' + height + ')');
              $('#ChangableElements').css({'left': width  + 'px'});
          }
          }).resize()
      });
      &lt;/script&gt;
  </code></pre>
  
  <p>The weird vpwidth &lt;=720 &amp;&amp; vpheight > 569 is for forcing my Samsung Galaxy S3 function properly. Strange resolution...</p>