Databases
StackOverflow2013
Postsdbo
POAutomatically set the scale of an element based on the height of the viewport
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAutomatically set the scale of an element based on the height of the viewport
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload