homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Shrinking high resolution site to display in smaller monitors
Making 1920x1080 lobby displays available for users to see in their browser

5+ Year Member

Msg#: 4061668 posted 9:23 pm on Jan 15, 2010 (gmt 0)

Hi all,

I've been trying to wrap my brain around this and need some ideas on how to accomplish it. We've just finished creating an in-house lobby television system that displays building information and an employee directory. There are two TVs (1080p) hooked up to a single small media box running Firefox fullscreen in each window. The browsers are pointed to a script on our webserver which serves the displays as a 1920x1080 webpage and uses various AJAX trickery with PHP to rotate pages and fetch weather updates, etc. In addition, we have a news ticker and an alert system.

In short, what I would like to do is be able to take the website those screens point to and shrink it such that it can be displayed on a desktop computer running at a standard resolution... something like 1024x768. The aspect ratio would need to stay the same even if I need to add bars to the top and bottom, and I'd like to preserve all the formatting and display elements including the ticker and weather updates. The users in our building would like to be able to check what's going on without heading to the lobby to see the screens, and it would be great if we could box in what's being displayed on our intranet site somewhere.

I've looked at using a webcam that points to the screens, but that seems like a clunky solution considering what's being displayed is a website that any user could just browse to if it weren't for the resolution. Asking users to browse to the site and hit CTRL - to shrink it down won't work. I thought about using a PHP script to take screenshots and shrink them down, but it wouldn't preserve the news ticker.

Is there any way to tell a browser to just shrink a page? Could I somehow frame in the 1920x1080 page and show it at a smaller resolution?



WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member

Msg#: 4061668 posted 9:39 pm on Jan 15, 2010 (gmt 0)

You could probably use something like the Yahoo UI Library to get the size of the viewport (you don't NEED to use YUI, but it provides nice cross-browser methods), and if the size is less than 1920x1080, then apply some style that causes the page to be smaller.

For example:

var w = YAHOO.util.Dom.getViewportWidth();
if (w < 1920) {
YAHOO.util.Dom.addClass(document.getElementsByTagName('body')[0], 'desktop');

Then your CSS rules could be something like:

body {
width: 1920px;
body.desktop {
width: 1024px;


5+ Year Member

Msg#: 4061668 posted 11:53 am on Jan 16, 2010 (gmt 0)

With a bit of reworking perhaps, you could use relative width's instead of fixed width's also: body {width:100%;} although I guess it would get a bit tricky to maintain aspect ratio via css alone. But how important is that really? The users on computers can scroll a bit, just have it set up to display fully on the tv's and let the comps scroll would be simplest.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved