How can I "stream" a section of my webpage to another window? - javascript

I want to stream a certain container on my webpage to another window.
The setup is similar to a Point of Sale system. ie an operator-facing display and a second customer-facing display.
The operator-facing display will have a window with all the toolbars, menus etc. While the customer-facing display will only show a certain container from the first operator-facing window.
As below: The Operator Display will contain the full webpage content. While the customer display will only contain 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 anyway to do this?

Since you put "stream" in quotes, I assumed that you are looking for different solutions for this problem.
In browsers you can easily open a new window and control it from main page, I've created a small snippet which implements a case, where on one window you can add items and display them on another one.
These lines are most important:
const posWindow = window.open("about:blank", "customerDisplayWindow", "height: 50,width: 50");
posWindow.document.body.innerHTML = '<h2>Items</h2><ul id="item-display"></ul>';
You could come up with much cleaner solution than modifying document but you get the idea.
https://jsfiddle.net/jhd5L8wa/1/
I suggest reading MDN page about Window.open() (especially third argument, windowFeatures) to learn more about how opened window will look and behave.

Related

Switch element class after a click from a previous page

I'm stuck since a long time so I'd like some help to solve my problem.
I have 2 pages. From the first page A, I have <a href> that link to an other page. Here is the link :
<div class="sucre" id="sucreFirst"><img src="_img/slide06.jpg" width="634" height="308" alt=""/></div>
On the other page B, I have a menu that hide and show content withe CSS class.
Here is the code for the menu :
<div id="menu_G">
<p>Le mariage de 2 expériences</p>
<p>Né d'une conviction</p>
<p>Des DRH militants</p>
</div>
As you can see, the page B is set to show the titre1 first.
<div class="ON" id="Titre1">content</div>
<div class="OFF" id="Titre2">content</div>
<div class="OFF" id="Titre3">content</div>
When I clic on the link from the page A i'll like it change property of the titre3 class to ON.
To resume, when I clic on the link from page A I'd like it show the titre3 content of page B.
I've tried many things but it always link to titre1.
Thanks for reading,
Alfred
Well, you have multiple ways to acheive your goal, so I'll give you an idea and a start point.
What you actually need to do is transferring information from the source page to the target page, the information transferred will be the element to turn ON and the elements to turn OFF.
One of the simple ways to send data between pages is by a URL Query String. You can create the Query String by simply adding it to the link.
Modify your link to:
href="ecole2.html?on=1&firstOFF=2&secondOFF=3"
The part from the ? is the query string, its structure is:
?key=value&key=value&key=value...&key=value
Now, when entering ecole2.html with this link, you'll be able to get those 3 variables (on, firstOFF and secondOFF) by a query string parser (you have many ways to do it).
Create a function which will get the parameters and will set the visibility upon them, something like:
function setVisibility(onElement, firstOffElement, secondOffElement)
{
document.getElementById(onElement).className='ON';
document.getElementById(firstOffElement).className='ON';
document.getElementById(secondOffElement).className='ON';
}
Call this function with each parameter when the page loads (onload event) and you're done.
<body onload="setVisibility(on, firstOff, secondOff)">
when on for example will be the string "Titre"+onParsedVariableFromQueryString
Here is a jsdiffle with a parsing URL function and actual parsing of three variables defined in the same way explained above. As the question is not directly about URL parsing, I see no need posting the actual parsing method code here.
With the above logic and examples I'm sure you can progress by your own.

Checking to see if element is visible

I have a list of apps that are listed on a non angular page. The list of apps that are available depends on what subscription level was paid for. If the subscription level does not have an app purchased the app is still listed however there is an overlay over the app. (please see picture).
The html looks like this:
<div class="apps-item apps-no-border disabled">
<div class="apps-name">
<span>Interactive Event Diagrams</span>
</div>
<div class="divider">
<div class="apps-description">Interactive Event Diagrams is an indispensable online tool, allowing website visitors to view your meeting rooms and create their own customized event layouts according to their specific needs, all while using your venue’s available inventory. Users
can email and save diagrams or images for future reference.</div>
<div class="apps-image-preview">
<img alt="Interactive Event Diagrams" src="/Content/Images/AppsPreview/interactive_event_diagrams.png">
</div>
<div class="apps-action">Not Purchased</div>
<div class="overlay"></div>
</div>
</div>
Now if an app is purchased the overlay element is shaded gray in the html and is not view-able on screen. (Ex. no grey shading over Hotel Venue Explorer) I want to be able to check and see if the overlay is seen or not seen.
I've tried this:
elm = element.all(by.css('div.apps-item')).get(5);
expect(elm.$('div.overlay').isDisplayed()).toBeTruthy();
However the expect is returning false.
Other apps html, notice the grey over the overlay class
If your div.overlay is always present in the DOM, then its hard to check if its displayed because it will always be there in the DOM and your css and javascript might be handling the display property(like add overlay if its needed or don't add when its not needed). Also checking isDisplayed function for an empty html element doesn't work as far as i know.
In order to verify it you can check for css attributes that are responsible for the greying out functionality. Here's how -
elm = element.all(by.css('div.apps-item')).get(5);
//Use your css attribute that greys the apps-item div like height, width, color, etc...
expect(elm.$('div.overlay').getCssValue('background-color')).toEqual('grey');
expect(elm.$('div.overlay').getCssValue('width')).not.toBeNull(); //If you know the width then you can check for equality or greaterThan(someVal).
expect(elm.$('div.overlay').getCssValue('height')).not.toBeNull();
Hope it helps.

Zeroclipboard, triggered by any element with class="copy"

I've looked through this site along with many others and I can't see the answer anywhere.
I currently have a site with multiple buttons and a preview pane. The text shown in the preview pane differs depending on the button that the user is currently hovering over.
<body>
<div="preview_pane"> <!--ALL TEXT IS SHOWN HERE --> </div>
<div id="button_group">
<div class="copy_me" id="stock1"></div> <!--THIS SHOWS STOCK TEXT-->
<div class="copy_me" id="stock2"></div> <!--COMPLETELY DIFFERENT TEXT-->
<div class="copy_me" id="stock3"></div> <!--YET SOME OTHER DIFFERENT TEXT-->
<div class="copy_me" id="stock4"></div> <!--OTHER COMPLETELY DIFFERENT TEXT-->
</div>
</body>
What I want to do is have zeroclipboard create the flash overlay on any button with the class copy_me. All of these buttons need to copy the text shown in the preview pane.
This way when the user hovers over the button the text in the preview pane will change and then when they click, the text in the preview pane will be copied to the users clipboard.
I can't manually add the script to every button as there will be over 50 stock text buttons.
I have no experience in flash or javascript (only dabbled in jQuery) so this is something completely new for me.
Any help will be greatly appreciated.
answered a similar question at https://stackoverflow.com/a/26200988/3471658
Try using http://www.steamdev.com/zclip/ it allows you direct access to jquery and you can use your own logic in the return statement.
include jquery.zclip.js
download and save ZeroClipboard.swf
Here is a snippet:
$(".class-to-copy").zclip({
path: "assets/js/ZeroClipboard.swf",
copy: function(){
return $(this).attr("data-attribute-with-text-to-copy");
}
});
Make sure you change the path of the swf.
I looked at the api docs for zeroclipboard right quick, and I you want to use the glue method, and pass an array of dom nodes. In this case, you want all the nodes with the class name "copy_me", so:
var clip = new ZeroClipboard();
clip.glue(document.getElementsByClassName('copy_me'));
You mentioned jQuery. This should make things easier for you:
var client = new ZeroClipboard($('.copy_me'));
See:
https://github.com/zeroclipboard/zeroclipboard/blob/master/docs/instructions.md
Also see:
http://jsfiddle.net/rimian/45Nnv/

Loading user control dynamically in two directions

I am developing a commenting like platform where user can post comments and other users can reply on that comments. But these comments can be replied in two directions (Reply & Expand). The idea is that user can reply and user can also expand that discussion. Please see image.
I have developed a control which will be added dynamically whenever user will Reply or Expand a comment.
If user will reply on control a new control will be added under that message (comments) and if user Expand that message (comments) then a control with expanded reply (message) will be added on right side of that messages (comments). More than one user can Expand a message and users can also reply on expanded message.
I am not sure that what should be the place holder or container in which these control should be added.
Should I use Server Table control and create TableRows and TableCells
dynamically?
What container should I use so page don't get too heavy?
Should I create divs and adjust its position on runtime and add control in each
div?
Other question on which I am not clear are:
More than one user can expand a message, in this case how to handle
UI. Hide/Show controls or any other solution.
Should I show horizontal scrollbar on Expansions or is there other
solutions?
Any help/suggestion?
Thanks.
you can do this in different ways, i am not going to give you code cause i want you to try and learn. So you can do all this with JQuery, you don't need Asp.net controllers, cause sometimes they are complicated to work with.
So 1º step:
You can create a simple table with 2 Columns and N rows depending on the number of messages you have (try filter some, Example: you have 100, show only 10 and have a "next page") or use some plugin table that hold bigdata for you.
2º Step:
when you reply a message create an <tr> in you table to place the "reply of first message" (note: you need to create a structure to handle you navigation on the table easily with ID's)
3º Step:
in your second column have like a <div> prepared to receive and show the expand message when user click "expand" and clean it always when a new message is expanded.
That should work for you, there are others ways but try to think in something simple
Other Questions:
1º - I didn't understand the question, but if your site will run on a server, user1 and user2, ... userN use the same page but render in different places, you just need to reload data to let everyone known that someone comment or reply or whatever in a message.
2º - UI its your choice, see what is best for you ;)
enjoy ;)
I think other answer is to complicated. For me it's seems like you need
<div class="rowContainer">
<div style="float:right">
<uc:YourControl>
</div>
<div>
for row of your expandable controls.
When user will quick on expand button page will add another one of YourControls to div.rowContainer with parent another div with float right:
<div class="rowContainer">
<div style="float:right">
<uc:YourControl>
</div>
<div style="float:right">
<uc:YourControl>
</div>
<div>
When user will add another row of messages add another row container with div.rowContainer:
<div class="allMessagesContainer">
<div class="rowContainer">
<div style="float:right">
<uc:YourControl>
</div>
<div>
<div style="clear:both">
<div class="rowContainer">
<div style="float:right">
<uc:YourControl>
</div>
<div>
</div>
clear:both is important since is breaking float to next line.
I think wolud be goo to create 3 controls:
1. <uc:YourControl> with single message
2. Control from div.rowContainer to easy append messages to the left, just add another one to server div with float:right inside same control.
3. Control for all messages to easy adding messages in next row. Just add another row control to container.
Also floating of controls will not force user to scroll to the left infinitely. It's not nice and they hate that.
And just one more: asp.net is not really for this kind of sites. Things get quickly complicated. What if button in one of nested controls should do something on Page?
Should you add method to Page and cast it on control? ((MyPage)Page).DoSomeWork()
What if type of Page change? Create interface? Maybe delegate instead. Where put him? In the Page? Control? Create event and bubble it's through all parents? Some context class?
And not mention with necessity of reinitialization of dynamic controls tree every-single-time post back is send.
1 MSG
2 MSG
Response
...etc...
... you can do like this :)
When it comes to CSS, simple is better.
My suggestion, if you must have it this way in terms of layout:
<div class="row">
<div class="message"><FirstMessage /></div>
<div class="message"><ExpandedFirstMessage /></div>
</div>
<div class="row">
<div class="message"><Reply /></div>
...etc...
</div>
You create a div for each "row" or expanded responses, using a div with class "row.". Then, each message has its own div with class "message", using the following CSS:
.message {
width: 200px; // or whatever size you want here
height: 100px; // or whatever size you want here
display: inline-block; // This is the important part!
...etc // your extra padding, margin, whatnot.
}
Inline-block allows you to avoid floats and whatnot, which should make things a lot simpler. (As a bonus, people with RTL reading order will have this work automatically for them.)
Now, here's your problem.
From the image you've described, it looks as though anyone can reply to any message, or expand any message; this means, logically, that the grid layout you've described might not work well. (For instance, what if someone replies to Expanded First Message, and someone else expands Reply to First Message? You would have to Message usercontrols that would be vying for the same space. How would that work?) I would suggest implementing a different design that would accommodate your usage flow, unless you have something more specific planned.
I hope this answer helps you. Good luck.

Facebook FBML Questions

I have a client looking to create a Facebook page very similar to http://www.facebook.com/enchantment
Inside the "Enchantment" page, you can see that there is a list of sub-tabs, "Enchantment, Blurbs, Excerpts, Order". I'm looking to create the same style, but I can't seem to figure out how. I've looked through the code and it appears they're using the "FBML Static" application for the main tab, and there's a ton of javascript to show and hide the tabs that I highly doubt was all written by hand.
Does anybody have any experience with this? Thanks in advance.
You will have to create a Facebook application via the My Applications link in the developers page. After you have filled in all the of the fields your app page should be up and running.
Now you need to begin developing the actual app on your website (you will have to specify the link in your application settings). Go through the Developer documentation, as they have quite a good documentation.
So, in order to actually create those tabs, its actually very simple, all you have to do is utilize FBMls clicktoshow and clicktohide attributes. Essentially all you need is the following code:
Link 1
Link 2
Link 3
<div id="nav1">
//content for first tab
</div>
<div id="nav2">
//content for second tab
</div>
<div id="nav3">
//content for third tab
</div>
When Facebook 'imports' this (only via FMBL, I'm unsure if this works with iframe) it conveniently does all the work and converts the above links to something like:
<a href="#" clicktoshow="nav1" clicktohide="nav2, nav3" class="test"
onclick="(new Image()).src = '/ajax/ct.php?app_id=7146470109&action_type=3&post_form_id=fd583a515fe76b1d3d300e974aba931d&position=16&' + Math.random();FBML.clickToHide("app7146470109_nav2");
FBML.clickToHide("app7146470109_nav3");
FBML.clickToHide("app7146470109_nav4");FBML.clickToHide("app7146470109_nav5");FBML.clickToHide("app7146470109_nav6");
FBML.clickToHide("app7146470109_nav7");FBML.clickToHide("app7146470109_nav8");FBML.clickToShow("app7146470109_nav1");return false;">Test</a>
But, you only have to worry about the first part, as Facebook takes care of the second. As you can see it is a fairly straightforward process.
They're probably just capturing the click event, and simply showing and hiding different divs based on that. You can create a static FBML tab, and do something like this inside of it:
<ul>
<li><a id="afoo" href="#foo" onclick="gotoFoo(this); return false;">Foo</a></li>
<li><a id="abar" href="#bar" onclick="gotoBar(this); return false;">Bar</a></li>
</ul>
<div id="foo">
This is content of the foo tab
</div>
<div id="bar" style="display:none;">
This is content of the bar tab
</div>
<script>
var foo = document.getElementById('foo');
var bar = document.getElementById('bar');
var afoo = document.getElementById('afoo');
var abar = document.getElementById('abar');
var gotoFoo = function(target) {
abar.removeClassName('selected');
bar.setStyle({display: 'none'});
afoo.addClassName('selected');
foo.setStyle({display: 'block'});
};
var gotoBar= function (target) {
afoo.removeClassName('selected');
foo.setStyle({display: 'none'});
abar.addClassName('selected');
bar.setStyle({display: 'block'});
};
</script>
I haven't created any styles for you, but what the code above does is it hides and shows the "foo" and "bar" divs depending on what you click on. It also adds the class name "selected" to the anchor tag that was clicked on so that you can set some styles to give a visual cue as to which tab is currently active. You'll definitely want to add some styles to pretty this up.
I hope this helps.
You cannot see directly the code since the code written in FBML gets parsed by Facebook before it's delivered to the browser and transformed into HTML; that's why you see a lot of JavaScript.
Actually it doesn't look so complex so I believe it was actually written by hand with JavaScript.

Categories