We Keep Coding

How to integrate a custom Screen Capture App inside my HTML Page?

I am trying to integrate a screenshot tool or a Snipping tool kind of application inside a HTML page that I developed.
Basically the app should allow me to snipe a part of my current webpage and save it in picture format. Or it can even capture the entire page also. Anything works.
For the record, the content of my webpage contains an iframe whose source is - https://www.mathxl.com/info/exercise.aspx?fromask=yes&dataid=f919d33b-99fd-4fb5-90a8-a8a4c9894795
The Screen Capture Application should capture the dynamic contents that I insert inside the loaded iframe flash content as well.
Any kind of suggestions or information about a 3rd Party API (even paid version works) would be helpful.
PS - I tried HTML2Canvas.js, it didn't work.

Prevent dowloading of files

I have made a small web page in which I have some modal windows (jquery.simplemodal). When those windows are showed they should display two pdf files ( downloaded from server ).
<div id="modal1"> - hiden modal window
<embed src="/FileDownload?id=100" width="100%" height="600px">
<embed src="/FileDownload?id=150" width="100%" height="600px">
</div>
<table>
<tr>
<td>
Modal Window 1
</td>
</tr>
</tale>
The problem I have is that when the page is loaded also is downloading all files from server.
From HTML point of view I had read that nothing is possible to do to avoid this.
Can you please tell me if is posible to do that with Javascript ( for example updating src's embed element when the modal window is first displayed )?
On http://stackoverflow.com I have found some topics about changing the properties of an element but nothing is working on me.
JavaScript: Changing src-attribute of a embed-tag
Can i open a modal window from file A and displaying file B on the modal window?
Thank you!
P.S. This is an Intranet application. I want just to avoid downloading 20-40 files (a few MB each ) every time the page is open. The other solution I am thinking is to use a Java applet but I think this would complicate this small project.

Using jQuery. I believe this is what you want to do: only load embed files if you click on the link which pops up the modal?
$("a").click( function (e) {
e.preventDefault();
$("#modal1").append("<embed id='100' src='/FileDownload?id=100' width='100%' height='600px'/><embed id='150' src='/FileDownload?id=100' width='100%' height='600px'/>");
$("#modal1").show();
});
And the Fiddle

The nature of Web browsers is to download files to a cache so that upon the next visit, or during page changes, display times are greatly reduced. As a web developer there is nothing you can do to prevent this. The user can turn this feature off in his own browser if he desires to keep his cache clean, but you and your site cannot. There are ways to impede a viewer from intentionally downloading an image or file such as disabling right clicks over an image, but there are ways for a savvy user to get around these methods as well.
PDF files especially need to be downloaded to speed up viewing. If this is turned off, the user experience will be so slow you will drive people away from your site.

Even if its impossible to completely protect your files, there are a few ways to make it harder to download your original PDF document, we have a few PHP scripts that may help you that you can find inside our desktop publisher (available in GPL and commercial).
Its free to download and you can grab the scripts even if you don't use the rest of the product. If you download it and as you publish your document you can expand advanced settings and tick "sign and obfuscate" and you should get the scripts necessary to protect your files.
http://flexpaper.devaldi.com/flexpaper_flip_zine.jsp

Open two iframes without full reload of the second iframe

I have an AngularJS application which runs under an iframe in a different website. I have the code of the website.
I need to open a new iframe to the same AngularJS application but to a different route. I don't want to load all the application again in the new iframe. I am looking for something that will duplicate existing instance of a window content, or maybe open a new iframe of the same application without loading the whole app again.
Here is the code explanation:
I have this html page:
<div>
<iframe src="www.myapp.com/books"></iframe>
</div>
www.myapp.com/books is an AngularJS application so it loads a lot of dependencies, execute a lot of code and make a few backend calls. I want to add a button that it's click will open another iframe to the html page:
<div>
<iframe src="www.myapp.com/books"></iframe>
<iframe src="www.myapp.com/names"></iframe>
</div>
The new iframe will open the same app but different route. Unfortunately this will cause a full loading of the application for the same iframe, and I am looking for a way to prevent this. Like cloning the same instance of the iframe and route to the new location without a full reload..
Any idea?

Lets talk JQuery on this one.
Say you have your nice iframe (iframes aren't actually very nice) element
<iframe id="original" src="www.myapp.com/books"></iframe>
take note of the id tag.
then you got your javascript, enclosed in tags
var newIframe = $("#original").clone();
$("body").append(newIframe);
LINK ---> Check this all out at JSFiddle <--- LINK!

The best thing to do is probably write the html/javascript/css of your application as text in the second iframe.
You can get the contents of the first iframe
page=$("#iframe1")).contents().find("html").html();
and then set it to your second iframe
var doc = parent.$("#iframe2")[0].documentElement;
doc.open();
doc.write(html);
doc.close();
You may not want to do a full copy like this, but I think this is a starting point.
I think it's mandatory that your application resides on the same domain of the website hosting it, or this will fail for cross-domain scripting security reasons. You would have to change the design of the whole thing if so, since you cannot manipulate an iframe on a different domain.
Information taken from How to insert html in iframe and Getting the html content of an iframe using jQuery
EDIT
What you want is probably not iframes. You can load the javascript for your application once in the main webpage. Then that javascript should download (or create) html elements, and inject them into a div. Doing so, the javascript for your application can manage as many subframes you want. The downside is that you must probably change a lot your application: now it is designed to be loaded as a webpage, and should be rewritten to be a js that manages some divs putting content into them. I don't see another solution, unfortunately.

Javascript running in facebox window

I'm modifying a website to have a pop up box appear when a user rates something prompting the user to login. Unfortunately the login process is something that I don't control and it uses a whole heap of javascript and redirects to do it and it seems that the javascript is failing.
Can javascript run in the modal box or is there a way around this?

You could try isolating the JavaScript by putting it in an inline frame [iFrame] on a separate html document
Just a thought. Haven't tested it.

Trigger click on embedded PDF

I have a PDF embedded in a web page using the following code:
<object id="pdfviewer" data='test_full.pdf#page=1&toolbar=0&statusbar=0&messages=0&navpanes=0'
type='application/pdf'
width='500px'
height='350px'>
The PDF itself is set to open in full screen mode which shows no controls. The user can advance the slides by clicking on the view.
What I'd like to have is some way to trigger that click so that I can advance 2 similar PDF:s side-by-side (one for the actual slideshow and one for the speaker notes). Is this possible to do in javascript and/or jQuery? I have tried using the click()-method but it doesn't get through to the embedded PDF.
Update: Can't find any info on it, so I guess I'm out of luck and have to try a workaround. Am currently juggling 3 embeds of the same pdf (current page, next page and previous page), hiding and showing them and loading more pages as the user clicks around.

I doubt it. Allowing web page scripts to pass input events to the PDF viewer could be a security risk (since the viewer generally has access to system file dialogues via things like Save As).