Is there a way to "stream" a specific part of my website to a separate window?

Is there a way to stream a specific container from my webpage to another window?

The scenario is similar to a Point of Sale system, where there is an operator-facing display and a second customer-facing display.

The operator-facing display will show all the toolbars, menus, and other elements, while the customer-facing display will only display a particular container from the operator's window.

For example, the Operator Display will have the complete webpage content, but the Customer Display will only showcase the #output container.

Operator Display

<div id="toolbar">
    <ul>
         <li><button>Action 1</button></li>
         <li><button>Action 2</button></li>
    </ul>
</div>
<div id="output">
   //OUTPUT GOES HERE
</div>

Customer Display

<div id="output">
   //OUTPUT GOES HERE
</div>

Is there a solution for achieving this functionality?

Answer №1

When you mentioned "stream" in quotation marks, it led me to believe that you were seeking alternative solutions for the issue at hand.

https://i.sstatic.net/pDC3i.gif

In web browsers, you have the capability to easily launch a new window and manage it from the main page. I have put together a brief code snippet demonstrating a scenario where you can add items on one window and view them on another.

The following lines are crucial:

const posWindow = window.open("about:blank", "customerDisplayWindow", "height: 50,width: 50");
posWindow.document.body.innerHTML = '<h2>Items</h2><ul id="item-display"></ul>';

There are cleaner ways to achieve this functionality rather than directly manipulating the document, but this should give you a good starting point.

https://jsfiddle.net/jhd5L8wa/1/

I recommend exploring the MDN documentation on Window.open() (paying particular attention to the third argument, windowFeatures) to gain more insight into how the opened window will appear and function.

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

Struggling with the navbar-toggler in Bootstrap 4 Beta 2?

As part of my Bootstrap practice, I have implemented a navbar on my webpage. However, I am facing issues with the nav-bar toggler not working for small screens and the icon navbar-toggler-icon not appearing. Below is my current navbar code: <nav class ...

Can anyone point out where the mistake lies in my if statement code?

I've encountered an issue where I send a request to a page and upon receiving the response, which is a string, something goes wrong. Here is the code for the request : jQuery.ajax({ url:'../admin/parsers/check_address.php', meth ...

Div blur event for editing content

Utilizing a content editable div as an input control has presented some challenges for me. Unlike a textarea or input element, the div does not send information to the server automatically. To work around this issue, I have implemented a solution where I u ...

Analyzing string values in Cypress

When attempting to compare two values within a page and make an assertion, my goal is to retrieve the value of one text element and compare it with another value on the same page. While I find this process straightforward in Java/selenium, achieving the ...

Animating nested ng-repeat loops

Trying to animate a list of elements divided by rows (the parent ng-repeat) and columns (the child ng-repeat) has been quite challenging. While I was able to achieve the desired animation with individual ng-repeats, the same cannot be said for nested ng- ...

The state in a functional component in React fails to update after the initial axios call

Issue : The value of "detectLanguageKey" only updates after selecting the language from the dropdown twice. Even after selecting an option from the dropdown for the first time, the detectLanguageKey remains empty and is only updated on the second selectio ...

What causes the Woocommerce checkout button to be blocked on the checkout page?

I am perplexed by WooCommerce's decision to block this section of the screen with an overlay. Under what circumstances would it do so? checkout page screenshot ...

Filtering the data in the table was successful, but upon searching again, nothing was found. [Using Angular, Pagination, and

Having a table with pagination, I created a function that filters the object and displays the result in the table. The issue arises when I perform a new search. The data from the initial search gets removed and cannot be found in subsequent searches. Bel ...

What is the best way to redirect to a specific page when logging out of a website?

To begin, let me outline the situation at hand. We have two distinct websites - website-A and website-B. Each of these websites is hosted on separate domains. A user has the ability to log in to website-B's homepage through the login page of webs ...

Reactjs slider causes unexpected useState behavior

I created an autoplay Slider with three cards using the useEffect hook. However, the manual "previous" and "forward" buttons are not functioning correctly. The useState function is not updating values as expected, leading to unexpected changes in state. ...

My stored variable in the php session is not being recalled properly

Currently, my PHP script is generating new files based on user input. I want all documents to be created using the initial input to ensure consistency. In the first PHP script, I set the variable as follows: session_start(); $_SESSION["FirstName"] = $_POS ...

Unable to refresh the fullcalendar section following an ajax post click

Currently developing a calendar using fullcalendar. I have created an ajax button that retrieves events from another php page. The first click on the ajax button works fine, displaying a nice month calendar with events. However, my issue arises when I cl ...

What methods could I use to prevent the WYSIWYG buttons from automatically linking?

I've been working on creating an editor but I'm facing a small issue. Every time I click on a button (such as bold or italic), it follows a link instead of performing the desired action. Here's a snippet of what I've tried so far: fu ...

The Vue router requires a page reload to see changes and does not have access to the this

When navigating through router-link, the App.vue page opens initially, but the URL changes immediately without displaying the content. Reloading the page is necessary to view it. If you navigate programmatically, you may encounter an error stating 'Ca ...

Display various React components for widgets

I am looking to display multiple instances of a widget in html. I have 3 divs with the same id, each with different attributes, and I want to render my react component three times on the page. Currently, I am only able to display the first component. Here ...

Incorporating Paged.JS functionality into a React/JS web application

My attempt to showcase my html page using paged.js in a react project has hit a snag. The html loads perfectly when accessed from local host (not via npm start, but the live server extension on vscode). However, following the steps outlined on this website ...

What is the best way to select the child of the second-to-last child?

In the structure of my HTML code, I have an unordered list with a class "menu" containing several list items and corresponding anchor tags like this <ul class="menu"> <li> <a href="#1"></a> </li> <div&g ...

Alter the data displayed by the Radio button using Angular when the Submit button is clicked

I've encountered an issue where I need to alter a div based on the selection of a radio button. Currently, it changes instantly upon button click, rather than waiting for submission. My desired outcome is for the value to be submitted when the button ...

Is it possible to execute an ajax function at regular intervals until a specific condition is fulfilled?

My application consists of two JSP pages. One is responsible for the UI, while the other processes the response. UICounter.jsp: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Page</titl ...

Animated CSS sidemenu (utilized as a filtering panel for a table)

Hi there, I'm having some trouble with CSS Animation. I recently started developing websites and am using Bootstrap 4 along with Animate.css for animations. My goal is to have an icon button expand sideways to reveal a div containing select elements f ...