Should JavaScript/jQuery objects disappear when download hyperlink is clicked - javascript

We use Atalasoft's web image viewing SDK to display TIF images in a web page. We recently upgraded to their client-side, JavaScript/jQuery based component and discovered some odd behavior. After initializing the control, if a link is clicked to a resource that should be downloaded, the control(s) clear themselves out. The issue exists in Chrome and IE 11 that I have tested.
Since it is a paid SDK, the easiest way to test this is to go to their demo at:
http://www.atalasoft.com/demos/dotimagewebdemo/
Once the page finishes loading, open a developer console and paste in the following (simply adds a download link to a file on their site):
$("body").append($("<div style='position:absolute;right:5px;top:5px;'><a href='/Gallery/WebViewingDemo.zip'>DOWNLOAD</a></div>"))
Clicking the download link will wipe out their controls on the page.
Adding download to the anchor tag resolves the issue in Chrome, but not IE.
Adding target='_blank' resolves the issue in both, but creates an ugly blank window first (that in my experience does not always close).
I am setting headers server-side to tell the browser to download the file rather than displaying it.
I guess my questions are two-fold:
Is it normal for JavaScript/jQuery based objects to disappear/destroy/whatever when a link is clicked to download a file or is this a problem with their implementation?
and
What is the best solution for this (preferably without the blank page showing up)? We need to support mainly Chrome, FF, and IE (most popular desktop versions).
Thanks in advance!

Related

Opening Preview in Safari From Brackets

I'm new to using Brackets. I'm currently using it to write Javascript code and I would like to open my website previews in Safari. Currently when I click the lightening bolt to preview my website opens up in Google Chrome. I prefer to view my code in Safari is there a way to change this? I checked settings but I was not able to find anything that could change the browser that previews my code.
As of Brackets v1.14 you can't.
Live Preview connects Brackets to your browser. It launches a preview
of your HTML file in the browser, then updates the preview instantly
as you edit your code.
In this early version of Brackets, Live Preview only works with Google
Chrome and updates live as you edit CSS or HTML files. Changes to
JavaScript files are automatically reloaded when you save.

How to show pdf in browser and allow to download/open it by adobe reader?

I need to make possible to preview the pdf file in the browser window for example in and to make some button which allow to open it in Adobe Reader program for edit purpose.
The problem I encountered is that if browser know how to treat PDF's files it will not allow me to download it, and always open it in a new tab. and if I config browser not to open PDF file inside browser it allow me to download file but it will not show me the PDF inside
any body have some Idea how can i combine this two requirements in one html page?
i need the solution for Internet Explorer 11
It's possible but there's a bit of plumbing involved. Basically, you don't link to the PDF directly, you link to an HTML page that uses an object element to display the PDF in most of the window. You can then have a header that holds a button that calls a JavaScript to fetch the PDF and save it locally. My example uses download2.js for that part. It even works in IE 11 though I don't think it will work in anything lower than IE 8.
See the example at the URL below.
http://practicalpdf.com/solutions/practicalpdf/preview-with-button/wrapper-with-button.html

Use window.open to a tab in the background (not switch focus)

I'm using the following code to open a new tab on click of a PDF download.
The problem is the new tab becomes the main tab often before the PDF loads.
How can I make the view stay on the current window (PDF) and open the new tab but not switch to it?
Note: In Chrome and Opera they understand the HTML5 download tag so the PDF simply downloads and the current window redirects - All good! So this is only a problem on IE & Firefox.
<h2 style="text-align: center;"><a href="http://cdn2.hubspot.net/hub/155045/file-847580737-pdf/Stepping_into_a_new_age_of_marketing_with_CRM_FINAL_APPROVED.pdf" onclick="casestudiesopen()" download><strong>Click here to download your eBook</strong></a></h2>
<script>
function casestudiesopen() {
window.open("http://www.workbooks.com/case-studies");
}
</script>
Well, I'll advise you to read this Stackoverflow answer, which is, in a way, quite similar to yours (the purpose anyway) :
Javascript disable switches current tab functionality in browser
JS/JQuery is indeed very powerful but also have its limits. Imagine a web page always requesting and keeping focus once you've opened it. I think you would be really annoyed, among other things.
That's why browsers prevent those kind of actions. Common browsers at least. Meaning, there's no way to prevent a browser like Firefox, Chrome, IE & Co. to focus a table since it depend of user's parameters.
You'll have to find a way to workaround your problem. I can propose this answer since it seems to have worked for the other guy.

Linking between pages and loading JavaScript using jQuery Mobile

I'm working on my first jQuery Mobile site, which is a (prototype for) a Location Based Game in Brisbane, Australia: www.jsjensen.dk/soleil/
My question is based on viewing from a mobile device, but a desktop device have very similar problems. I have tested with Chrome and Safari on iPhone, iPad, and Mac. Same problem everywhere.
I think it's related to how jQuery Mobile loads and displays pages, but I'm not using multiple pages in one HTML document, but have multiple HTML document.
If you go to the website above and then click "QUESTS" in the menu, followed by "Stairway to Knowledge" you will end on /soleil/quest01.html (desktop) and /soleil/#/soleil/quest01.html. That "#/soleil" really confuses me!
In this first try the JavaScript for handling answers in the text input is not loaded. That means nothing happens when you press "Unlock".
Now, if you reload on desktop or edit the address on iOS to /soleil/quest01.html (which is the actual and real file) it will reload the page with the right JavaScript loaded and initialized.
Now I'm able to go back (pressing "QUESTS" in the menu) and then go to another page (e.g. "Citadel of Fun") with the same problem: the JavaScript not loading. If I go back to the other one ("Stairway to Knowledge") the JavaScript is, however, still loaded and working just fine.
So what happens here? I'm pretty sure my linking/coding is correct, but it's just a basic understanding of jQuery Mobile that I'm missing. Can I change something to make this work? It could really be awesome!
So, I found a way to fix it, but not really a solution to the original problem.
I've added rel="external" to the tags pointing to the pages where I had problems. In this way it will not use the AJAX system to load these pages, but do it in a regular way. This solved my problem, but now I can't make any fancy transitions.

Opening a WMV file with window.open, in firefox; how can I prevent blank window from opening or close after file downloads?

When you download a file on CNET.com, a message will display on the page to wait a moment and the download will start; if it doesn't, click the link. That's very similar to the page with which I'm working.
The user clicks a link and this page appears with a similar message to CNETs. The only difference is the file is a WMV file and it automatically opens and plays. It works fine in IE. It's not working correctly in Firefox. In Firefox, if the user goes Tools->Options->Applications and selects "Use Windows Media Player" for Windows Media Video File, it plays in the external WMP. If the user uses the WMP plugin, however, the page opens up a blank window and then plays the video in the external WMP.
window.open("test.wmv");
Is there a way to prevent it from opening a window or how can I close the window after the wmv is downloaded and played?
Thank you very much.
Update
I found a link, here, that may be related to this issue. It states that the blank window is a bug with how Firefox handles the WMP plugin, with respect to ASX files. The only difference between the link and my question is one file is of type WMV and the other is of type ASX. The link is dated 2007 and the problem is reported on Firefox 1.5, but perhaps it still has merit. Maybe Mozilla has not addressed this bug, ever (FYI: I'm using Firefox 9.0.1).
I'm starting to think there is no direct solution. I can put a disclaimer, inform the user to turn off the WMP plugin in Firefox. Would a modal window or iFrame be helpful?

Categories

Resources