CODEWITHSUNDEEP
jqueryhtmlcsswordpress
LukePatrick
LukePatrick

Reputation: 39

Creating a Fake Computer Screen Within a Screen in Website

I've begun working on a website for a grant-funded documentary. Within the documentary, one of the characters is building a website about a topic. For the real website, tthey want to put his computer (which is an hand-drawn graphic by the project's artist) around the website design & content as a frame.

To put it another way, when a user visits the actual website, they'll see the character's "screen" with the real design inside of it. In way, it's simulating a computer with a web design inside of my proper web design.

Cue "Inception" score.

Alright, now for the fun part. How in the heck would you go about this? I need to:

  1. Maximize screen real estate within the frame, obviously. However, I also need a way for the whole kit and caboodle to resize well for different monitors.
  2. Create this thing in such a way that it loads posts and videos well. In essence, I need it to not be sloppy on every device it encounters. Obviously, I'll ditch the concept for mobile, so just talking desktop.

I also have to do it all in WordPress, specifically using Genesis.

Let me know what you think! jQuery is more than acceptable here if it helps, as is any hair-brained idea you have.

Thanks!

/EDIT #3 -- Solved/

Link to site is: http://www.blackbirdsfell.com

Upvotes: 0

Views: 2205

Answers (3)

sam_7_h
sam_7_h

Reputation: 800

Pressing F11 in most browsers enters full screen mode. This will hide both the task bar and the browser URL bar.

In order to create everything else just use several DIVS. 1 div for the url bar, 3 divs for the centre. 1 being in the center(this the website design) and the other 2 on either side creating the computer effect and the last div below. This would be the task bar. Set all your sizes in percentages and make the width 100%. This will make it easily and quickly fit on all monitor sizes.

HTML

<div id="top_bar">INSERT TOP PART OF THE COMPUTER SCREEN</div> 
<div id="left_bar">INSERT LEFT PART OF THE COMPUTER SCREEN"</div> 
<div id="main">INSERT WEB DESIGN"</div> 
<div id="right_bar">INSERT RIGHT PART OF THE COMPUTER SCREEN"</div> 
<div id="bottom_bar">INSERT BOTTOM PART OF THE COMPUTER SCREEN"</div>

CSS

*{ margin: 0; padding: 0; } 
#top_bar{ width:100%; } 
#left_bar{ float: left; width: 20%; } 
#main{ float: left; width: 60%; } 
#right_bar{ float: left; width: 20%; } 
#bottom_bar { width: 100%; position:absolute; bottom:0; }

The percentages will not be correct. This will be something that you will have to play around with until it fits correctly.

The position: absolute; and bottom: 0; will force the bottom bar to always stay exactly at the bottom. I presume this will help sell the effect and so added that too.

Upvotes: 3

yeyene
yeyene

Reputation: 7380

Wanna check this one out?

You can adjust all the frames' width and it can also loads dynamic contents.

One DEMO http://layout.jquery-dev.net/demos/nested_simple.html

SOURCE http://layout.jquery-dev.net/demos.cfm

Upvotes: 1

adnrw
adnrw

Reputation: 1040

I'd just use an iFrame to show the actual content, and then take the illustration and put it around it on the parent page. You could build "navigation" (back button? and working Page Titles?) into the illustration too, that would be pretty simple and pretty cool.

You'll probably want some JS involved to handle resizing of content (in the iframe) and the illustration will probably need to be split up a bit so parts can be resized properly?

Upvotes: -2

Related Questions