Generating a Simulation of a Computer Screen Embedded Within a Webpage

I have taken on the task of creating a website for a grant-funded documentary project. In this documentary, one of the characters is depicted as building a website about a specific topic. The idea is to display his computer, which is a hand-drawn graphic by the artist working on the project, as a frame around the actual website design and content.

In simpler terms, when users visit the website, they will see the character's "screen" with the real web design inside it. Essentially, it creates the illusion of a computer within my own web design.

Cue dramatic "Inception" soundtrack.

Now comes the exciting part - how would you approach this challenge? I need to:

  1. Maximize screen space within the frame while ensuring that the design adapts well to different screen sizes.
  2. Create a seamless experience for loading posts and videos without compromising quality or layout. Specifically focusing on desktop devices, as mobile devices are out of scope for now.

All of this needs to be achieved using WordPress, particularly relying on the Genesis theme framework.

Share your thoughts! Feel free to suggest any creative solution, including the use of jQuery.

Thank you!

/EDIT #3 -- Solved/

Link to the site:

jqueryhtmlcsswordpress

Answer №1

Did you know that pressing F11 in most browsers will take you to full-screen mode, hiding both the taskbar and browser URL bar?

To create a computer screen effect, use multiple DIVS. One for the URL bar, three for the center (one for website design and two on either side), and one for the taskbar. Set sizes in percentages and width to 100% for compatibility with 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 percentage values may need adjusting to fit correctly. Use position: absolute; and bottom: 0; to ensure the bottom bar stays at the bottom for added effect.

Answer №2

Curious to see what this is all about?

Easily customize the width of each frame and enjoy loading dynamic content as well.

Take a look at a live DEMO here

Check out the SOURCE here

Answer №3

One possible solution would be to use an iFrame to display the main content, while wrapping the illustration around it on the parent page. It could also include interactive elements like a back button and dynamic page titles for added functionality.

To ensure a seamless experience, JavaScript might be necessary to handle resizing of both the content within the iframe and the different parts of the illustration. This way, everything can adapt properly regardless of screen size or resolution.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The loading of jQuery AJAX is restricted within the <select> tag

<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".region").load('getRecords.php?start=regions'); }); </script> </hea ...

jqueryajaxdrop-down-menu

Dealing with ng-repeat and button alignment across Chrome, Edge, and Firefox

Can someone help me understand this strange behavior I am experiencing across all browsers? <div style="margin-top:5px"> <button translate="clear" ng-click="xyz.clear()" class="btn btn-default"></button> <butt ...

htmlcssangularjs

Using jQuery to Retrieve an Element's Class Through an AJAX Call

For my website, I am using ajax to load pages by replacing the content in the main tag. The issue arises when working with Wordpress, as each page has its own set of body classes for styling purposes. My goal is to replace the old page's body classes ...

javascriptjqueryhtmlajaxwordpress

How do I activate Angular/Backbone/jQuery intellisense in VSCode for a project that does not have a package.json file?

Currently, I find myself at a standstill trying to enable code autocompletion for popular libraries like BackboneJS, Angular, and jQuery. Unfortunately, the recommended method provided by the VS Code official documentation is not accessible to me (which in ...

jqueryangularjstypescriptvisual-studio-codetypescript-typings

Error: Attempted to search for 'height' using the 'in' operator in an undefined variable

I came across the following code snippet: $('.p1').click(function(){ var num = 10; var count = 0; var intv = setInterval(anim,800); function anim(){ count++; num--; ...

javascriptjquery

The PHP include function seems to be failing to insert my PHP file into the webpage

When attempting to include the tabnav_Browse.php page, located in the includes directory, and the Browse_Page1.php file, located in the Browse directory, by adding this code to the <?php include ("../includes/tabnav_Browse.php"); ?>, nothing is displ ...

javascriptphpjqueryhtmlajax

Retrieving information from a Vue component using AJAX

One of the components in my Vue project is named "testrow". It contains a form with two selections: "description" and "parameter". I need to make sure that the "parameter" changes based on the selected 'description' value stored in my database. T ...

jqueryajaxvue.js

JavaScript method being called twice during the second execution

Current Project Setup: I am currently utilizing jQuery, Bootstrap, and Font Awesome in this particular webpage. The setup involves creating a text box for user input. Upon finishing their input and hitting the 'enter' key, the item is then added ...

javascriptjquerytwitter-bootstrapfont-awesome

Problem with Bootstrap5 tooltips

Utilizing bootstrap 5 on my website, I encountered an issue with tooltips (taken from the official documentation website): https://getbootstrap.com/docs/5.1/components/tooltips/#examples Despite extensive searching on Google and Stackoverflow, none of the ...

cssnode.jstooltipbootstrap-5

JQuery value does not transfer to Angular 2 textarea

My Angular 2 application features an input textarea field: <textarea id="projectDescription" required [(ngModel)]="projectDescription" [formControl]="createNewForm.controls['projectDescription']" style="margin-bottom:-2%;width:50%;"></t ...

jqueryhtmlangular

Utilizing jQuery to reset a toggle feature

I have created a custom clickToggle function, but I am facing an issue with it. The function currently toggles between opening and closing a div based on the clicks. The problem arises when the div is closed by clicking outside of it without activating th ...

javascriptjqueryhtml

Achieving a transparent background in WebGLRender: A guide

I've been experimenting with placing objects in front of CSS3DObjects using the THREE.NoBlending hack. However, in the latest revisions (tested on r65 and r66), I only see the black plane without the CSS3DObject. Here is a small example I created: in ...

javascripthtmlgraphicsthree.js

Enhance your website with a MultiItem Bootstrap Carousel SlideShow next to a Basic SlideShow feature

As I'm designing a website, my goal is to showcase products using sliders. I've implemented both a simple Carousel slideshow and a multi-item Slide Show on the same page. The multi-item Slide Show has a specific CSS class associated with it. The ...

htmlcsstwitter-bootstrapasp.net-corebootstrap-4

Handling a JSON payload within an ASP.NET MVC controller

When using jQuery post to send a json-object to my asp.net server, I am receiving a string that looks like this: "'{\"refNr\":\"124460\",\"dokid\":1}'" I am struggling to find a method that can extract the data in ...

jqueryasp.net-mvcjson

Display endless data within a set window size

I am looking to create a fixed-size window for displaying text from the component <Message/>. If the text is longer, I want it to be scrollable within the fixed window size. See screenshot below: Screenshot export default function AllMessages(){ ...

javascriptcssreactjs

preserving the status of checkboxes based on an array of binary values

I am trying to figure out how to restore the state of checkboxes in an ORACLE APEX tabular form. The selection is made in the first column using the APEX row selector f01. After saving the checkbox state in a collection and then transferring it to an arra ...

javascriptjqueryarrayscheckboxoracle-apex

JQuery can recognize both keyup() and change() events when it comes to making AJAX requests from the

I am working on a search form that triggers an AJAX request and includes both <input type="text"> and <select></select> form elements. Initially, I had set up the AJAX request to be triggered when someone starts typing using the followin ...

ajaxjquerykeyup

Suggestions for dynamically labeling input information

Explaining this concept with words can be tricky, so I'll attach a photo for clarification. Let me elaborate. Your understanding would mean a lot to me. https://i.sstatic.net/yEeLg.png Once all the parts within the circles are checked, When you cl ...

jqueryajaxjsp

Using Jquery and CSS to add a class with a 1-second delay when the mouse enters

I have successfully implemented the addClass function in my code, but I'm encountering issues when attempting to use delay or setTimeout functions. It's important to note that I'm avoiding the use of webkit attributes in CSS. If anyone has ...

javascriptjquerycss

How can I align a mapped button to appear on the opposite side of the data using Tailwind CSS?

I've been struggling to find a straightforward solution to this issue for a while now. Let me break it down - I need to display some data on the left side of a post card component with a button located right next to it. Here's an illustration: ...

cssreactjsnext.jstailwind-cssshadcnui