SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Beginner: How to set zoom ratio for Chrome TV browser?

    From Implementation Tips - Google TV Web Developer's Guide - Google Code they give the following js snippet.

    Code:
    function init() {
    
      var w = screen.width;
      var h = screen.height;
    
      var bw = window.innerWidth;
      var bh = window.innerHeight;
    
      var wRatio = bw/w;
      var hRatio = bh/h;
      var ratio = (wRatio + hRatio) / 2;
    
      document.getElementsByTagName('body')[0].style.zoom = ratio;
    }
    Can somebody explain to me what I manipulate in the js to change the zoom ratio? I don't want my webpage for Chrome TV to zoom as much. I'm a designer and have little js experience. Thanks!
    Last edited by dwdesign; Jul 26, 2011 at 10:08. Reason: missing question mark

  2. #2
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there something you want to change it to? What this is doing is actually changing a css property for body, so if you want a static zoom property, you don't even need javascript for this. Otherwise, it's just about calculating the zoom ratio that you do want, and putting that value in the ratio var. We could help you more with the code if you let us know what kind of zoom you want.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    If the ratio is 1, you don't want that to change much.
    When it's 0.5 we might want the ratio to go up to somewhere like 0.65 instead.

    So, what we can do is to take the difference between 1 and the current ratio, and increase it by a little bit.

    Code javascript:
    var ratioFactor = 0.3;
    var ratio = (wRatio + hRatio) / 2;
    ratio += (1 - ratio) * ratioFactor;

    So, if the ratio starts out as being 1, 1-ratio is 0, so there is no change there.

    If the ratio is 0.8, it will be 0.2 that is multiplied by 0.3, which add 0.06 on to is, resulting in a slightly larger ratio of 0.86
    If the ratio is 0.5, there will be 0.5*0.3 added on to it, that being 0.15, so the ratio will end up being 0.65

    Here's a table to summarise the increase in the ratio, where the ratio brought 30% closer towards 1

    Code:
    Before  After
    1       1
    0.9     0.93
    0.8     0.86
    0.7     0.79
    0.6     0.72
    0.5     0.65
    0.4     0.58
    0.3     0.51
    0.2     0.44
    0.1     0.37
    I don't have Chrome TV to test with, so you might need the effect to be stronger (increase it from 30% to something larger) or you might need the complete opposite to occur, for the zooming effect to become weaker, in which case you can use a negative zoom factor.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for all the helpful responses. My developer or JS skills are so limited and appreciate the help.

    What I first did was take an existing page layout and set the ratio like:

    Code:
    document.getElementsByTagName('body')[0].style.zoom = .75;
    via window.onload or body.onload. But because I used the onload event trigger, it zoomed to size after loading and that behavior wasn't desired. Fortunately the Chrome TV browser supports CSS Zoom, and I simply added a zoom style and percentage to the body tag (other PC browsers ignore this).


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •