0

How to create a Website with HTML5 and JavaScript which gives you an overview over several Websites?

The shown web pages should be visible as tiles on the screen. Therefore they need to be displayed shrinked, like when I do a screenshot and size it down...

The browser window should look something like that:

++==============================================================++
|| shrinked website a | shrinked website b | shrinked website c ||
||--------------------+--------------------+------------------- ||
|| shrinked website d | shrinked website e | shrinked website f ||
||--------------------+--------------------+------------------- ||
|| shrinked website g | shrinked website h | shrinked website i ||
++==============================================================++

I don't want to use iframes, because i think they can't be sized down. The tiles don't have to be responsive, too.

Is this possible to implement somehow?

Kara
  • 6,115
  • 16
  • 50
  • 57
Tim Bittersohl
  • 149
  • 2
  • 11
  • 2
    you should use generated screenshots instead of loading full sites into an iframe... – Jerome Cance Jan 08 '13 at 16:26
  • I agree .. What you are talking about is responsive design with other live sites that may not be responsive (not to mention iFrames are a bad idea for a responsive design). Screenshots and simple CSS responsive layout will give you exactly what you need – Zak Jan 08 '13 at 16:35
  • 1
    Suppose you should take a look at some solution proposed here: http://stackoverflow.com/questions/757675/website-screenshots-using-php. After you have an image somehow - it should not make any problem to create a layout like you want. – Viktor S. Jan 08 '13 at 16:38
  • Then I would need up to date pictures of the websites. They should be created and filled in automatically somehow. But i don't want to use PHP actual. – Tim Bittersohl Jan 08 '13 at 16:38
  • Thanks FAngel, your link seems to have the solution – Tim Bittersohl Jan 08 '13 at 16:51

2 Answers2

2

You would have to use an iframe and use css to position each frame. More information on the iframe tag can be found here http://www.w3schools.com/tags/tag_iframe.asp

Note: loading 9 iframes, each containing a full webpage will really slow down the page and would result in an awful experience for the user.

SteveEdson
  • 2,485
  • 2
  • 28
  • 46
  • 1
    This wouldn't allow the website views to be shrunk though. – Richard Ev Jan 08 '13 at 16:27
  • Thanks, but I think iframes can't be sized down. – Tim Bittersohl Jan 08 '13 at 16:29
  • Ah, I'm thinking of the height and width of the iFrame, but yeah this wouldn't allow the content within the iFrame to be scaled down. – SteveEdson Jan 08 '13 at 16:39
  • 1
    In that case, can I ask why, if the frames are to be sized down, do they need to be usable / interactive (ie an iFrame)? Surely like others have suggested, taking screenshots of the sites would be a better alternative? – SteveEdson Jan 08 '13 at 16:41
  • They don't have to be responsive, but they need to be created automatically and best only with HTML5 and JavaScript – Tim Bittersohl Jan 08 '13 at 16:44
0

The solution to create the screenshots of the pages to be shown as tiles is in the following article:

Website screenshots using PHP

In there is also a description how to do this using no PHP, but only HTML5 and JavaScript

Then they just have to be sized down and filled in using JavaScript.

Thanks for your comment, FAngel

Community
  • 1
  • 1
Tim Bittersohl
  • 149
  • 2
  • 11