Overriding embedit.in script to allow downloads of PDF - javascript

I'm a library and information science student and a true programming novice (I've only taken one introductory course in JS, PHP, and MySQL), so I would really love some help. I'm sorry that I might not have the right vocabulary to talk about this!
I am building a prototype of a digital thesis collection for a course, and I am using the embedit.in sitewide script so that users can view the PDFs linked to in each thesis record in an overlay viewer. The problem is that the overlay viewer does not give the user the option to download the PDF (although that is an advertised feature, there actually is no download button in the viewer for some reason), and the script works for the whole page, so I cannot provide an alternate link to the PDF that would allow users to download directly. I also can't see the script itself so I don't know exactly what it's doing. I really like the overlay viewer, but I want users to be able to download the PDFs as well. Ideally, I envision having two side-by-side links, one that says "Click here to view or print," which allows users to launch the viewer, and the other that says, "Click here to download," that does not launch the viewer and lets them download it. Is there anyway to write a script that would prevent the embedit.in script from working against a specific link on the page, without seeing the script itself?
Here is a bit of the HTML code from a sample thesis record page below, for a bit of context:
<h2>Development of the Black Community of Bedford-Stuyvesant</h2>
<div id="description">
<p><strong>Title:</strong> Development of the Black Community of Bedford-Stuyvesant<br />
<strong>Author:</strong> Austin Finigan, Jr.<br />
<strong>Date:</strong> 1974<br />
<strong>Subjects:</strong> African Americans--New York (State)--New York<br />
Brooklyn (New York, N.Y.)--History<br />
<br />
Click here to view or print PDF</div>
<script src="http://embedit.in/sitewide.054fbf300b0637d7d8cc525ff36789500da4f3c2.js" type="text/javascript"></script>

I just created two links and put them side-by-side, one that links to the PDF directly and opens the overlay viewer via the embedit.in sitewide script and the other that links to a new blank page with a redirect script to the PDF so that the browser's download dialog box launches when the page opens. I hate the blank page but it works.

Related

Display an iframe when hover certain content in a website

My team is developing a widget/sdk so people can embeed our code in their sites and display some useful things.
My question is:
once these owners embeed our code, is there a way for us to target certain content in their website?
We want to, for example, if the content in such sites include a hashtag with a word (say #stackoverflow), when the final user hovers that hashtag display an extra iframe on top of it, like a tooltip in the top of the word.
Is this doable?
We thought about creating a chrome extension so any the final user can have that functionality, but we're also wondering if that is doable when the 3rd party site embeeds our code too.
Thanks!
edit: just to clarify, the owner of the site has to embeed a .js file in their site to display our iframe.

Javascript onclick method in ArcGIS iframe is disappearing

I'm using ESRI's ArcGIS Web App to create a map that has several interactive features. By clicking on specific objects in my map, users will see a pop up (created using the Web App creation features) with information about the area they clicked on.
Some of those pop ups contain a link that should open up a new window to display an image (that I have hosted on my web server).
Here's where my problem begins. In the map builder, inside my ArcGIS online login where I set everything up, I have added the link control to the configured popups that tells it to use Javascript in an "onclick" to tell it to open a new window, of a specific size, and where to find the image to display. It all works fine in the builder. But as soon as I create the web app, it completely drops my "onclick".
And more-so, I tried to work around this by changing the href of the link to "javascript:myScriptHereTellingItToOpenANewWindow" and the web app then drops the "javascript:" part and changes it to "#" thus still not working when I click it, all it does is try to open a new browser tab and ignores the rest of the script written in the href.
I'm sorry I have to be somewhat vague because this is for a company project that has high security. Below is what little code I can share (cleaned up a little to hide confidential information).
In the ArcGIS Web Map builder, here is the code I have in my configured popup:
<a onclick="window.open('URL of image file I want to load','width=1000,height=202,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,copyhistory=no,resizable=yes');" style="cursor:pointer;" target="_parent">View Featured Line</a>
And as I said, that works fine in the editor. But once I chose to "Create a Web App from this map" it drops the "onclick" completely.
If I put it in the href tag, like below:
View Featured Line
Then when I "inspect source" in the web app, it looks like this (which doesn't work either):
View Featured Line

Displaying hidden images in the Pinterest Pin Preview pop-up with addThis plugin

I am currently unable to display images on the Pinterest Pin Preview screen that are hidden (with a display: none) on my page. On my page where the "Pin It" button sits there is a standard carousel, but I am looking for all images within that carousel to be shown on the Pin Preview pop-up.
I have the script include on my page as below:
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#username=xa-USERNAMEINHERE"></script>
<a class="addthis_button_pinterest left last" title="Pinterest"> </a>
When investigating into this issue I came across this post from 2012, which is essentially the same issue I am experiencing. However there is no follow up to it.
I have experimented with the image_container and image_include properties of addthis_config, but essentially I can't seem to find a way to show the hidden images.
Has anyone came across this problem?
I received a reply back from Pinterest Support, as follows:
Hi,
We do offer similar functionality when using our Pin It button in
"Any Image" mode. You can see the code used to generate it by going to
our Widget Builder:
http://business.pinterest.com/widget-builder/#do_pin_it_button
However, there's no way for us to automatically include hidden images.
The one additional functionality that we do offer is picking up the
image stored in the og:image tag on your page, if it exists, so if you
populate that tag with one of the hidden images, it would show up
first in the list. Hope this helps! Bill | Developer Support Engineer
So it seems that as of May 2014 this is not possible.

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

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).

Categories