CODEWITHSUNDEEP
javascriptcss
Jonathan Bishop
Jonathan Bishop

Reputation: 79

Fixed ratio page auto scale

I have this table. I need to style it to always be in 16 by 9 ratio withn the top row taking up a fixed amount and the bottom row taking up the rest of the page. A single font size across the whole table and the whole thing centered with page when the screen isn't 16 by 9 

<body class="clock">
        <table class="clocktable">
            <tr>
                <td id="clock" class="time">
                00:00:00</td>
                <td id="timer" class="timing">
                00:00:00</td>
            </tr>
            <tr>
                <td colspan="2" id="eventnotes" class="notesevent">
                Here</td>
            </tr>
        </table>
    </body>

The solution need to work on desktop browsers as well as mobile. I know i could do it with java script and resize every element based on the page width, However I feel that there should be a better way.

Upvotes: 1

Views: 116

Answers (2)

Jonathan Bishop
Jonathan Bishop

Reputation: 79

Have decided to use Javascript and jQuery. The table is styled to 100% width and height of page. The bottom row fills the page because the top row has its height specified.

function resize() 
{
    var textheight = (($(window).width()) / 10);
    clocktable.style.fontSize = (textheight) + 'px';
    clock.style.height = (textheight*1.2) + 'px';
}

$(document).ready(function() {resize()});
$(window).resize(function() {resize()});

Here is my script.

Upvotes: 1

Ozan
Ozan

Reputation: 3739

I am guessing you are having problems with accessing keys of the javascript objects. You can use Object.keys for this. You can use jQuery.each to iterate through an array. See my code below

var json = {
  "20:34:05": {
    "192.168.1.208": "foo"
  },
  "20:34:12": {
    "192.168.1.208": "bar"
  },
  "20:34:21": {
    "192.168.1.210": "bar foo"
  }
}


$.each(Object.keys(json), function(i, val) {
  var time = val;
  var ip = Object.keys(json[val])[0];
  var message = json[val][ip];

  console.log(time + " " + ip + " " + message);
})

Upvotes: 1

Related Questions