Mercurial > bottledash
changeset 6:3acc5164369e
resize content in height too
author | sean |
---|---|
date | Wed, 22 Jul 2015 10:47:55 +0200 |
parents | c49f7fe82743 |
children | c8cb2aa0b72c |
files | views/hello_template.tpl |
diffstat | 1 files changed, 21 insertions(+), 15 deletions(-) [+] |
line wrap: on
line diff
--- a/views/hello_template.tpl Wed Jul 22 10:25:27 2015 +0200 +++ b/views/hello_template.tpl Wed Jul 22 10:47:55 2015 +0200 @@ -24,7 +24,7 @@ # size of tiles # ################## - number_of_rows = 3 + number_of_rows = 2 ################# # viewport size # @@ -44,40 +44,46 @@ %> <script type="text/javascript"> - + var global_width; var global_height; var tile_width; var tile_height; - + var tiles = document.getElementsByClassName("tile"); var border_width = 1; var space_between_tiles = 8; - + var space_lr_borders; var space_lr_margin; - + function calc_tile_with(){ var tiles_per_row = Math.floor(tiles.length / {{number_of_rows}}); - var distance = (space_between_tiles*2) + (border_width*2) + var distance = (space_between_tiles*2) + (border_width*2); var tile_width = ((global_width / tiles_per_row ) - distance); return tile_width; } - + + function calc_tile_height(){ + var distance = (space_between_tiles*2) + (border_width*2); + var tile_height = ((global_height / {{number_of_rows}} ) - distance); + return tile_height; + } + function resize_content(){ global_width = document.getElementById("content").clientWidth; global_height = document.getElementById("content").clientHeight; - - + + tile_width = calc_tile_with(); - tile_height = (global_height / {{number_of_rows}}); - + tile_height = calc_tile_height(); + for(var tile = 0; tile < tiles.length; tile++){ tiles[tile].style.width= tile_width + 'px'; tiles[tile].style.height= tile_height + 'px'; } } - + window.onresize = function(){ resize_content(); } @@ -85,7 +91,7 @@ document.addEventListener("DOMContentLoaded", function(event) { resize_content(); }); - + </script> <style> @@ -94,7 +100,7 @@ padding: 0 auto; font-family: "Lucida Console", Monaco, monospace; } - + body { overflow: hidden; } @@ -191,4 +197,4 @@ % end </div> -</div> \ No newline at end of file +</div>