How to override browser default download behavior for files? - javascript

Lots of times we have to download files from the net. In IE we get to see the ugly download progress bar. In firefox we get to see a pop-up window opening etc.
However, I have never seen this being over ridden in any manner.
Until recently on the site
> **thesixtyone DOT com**
If we get to download a song free and click on the ok link to start the download we get a pop up to select location in the default style of windows. Then we see the progress bar as shown below.
Any ideas on this? I am trying to see how these guys did this.
you can see the image http://highwaves.files.wordpress.com/2010/04/61-download-bar.jpg

I think it is Flash. Cross-browser is Javascript to do not work

You will probably want either an AJAX or Flash solution for this.
AJAX* solution - provided by jQuery
The asterisk here is because AJAX is not actually used, but does something similar in jQuery
Unfortunately I don't have a handy link for a Flash solution at present...but there should be plenty of tutorials for something about writing a download manager in ActionScript :)

Related

Edit opened HTML Page, with Javascript

I was looking into making Firefox addons, and I need some help.
Is it possible to edit an HTML page that is open in the browser with javascript?
For example:
User types in "google.com"
Addon is activated
Javascript changes contents of "google.com" to maybe say "Hello!" at the bottom.
Of course this isn't specifically what I want to do, but a push in the right direction on how to accomplish such a task would be great.
~Carpetfizz
From within a Firefox addon this is obviously possible as many extensions do this.
If you, however, simply want to modify the DOM and nothing else than I would recommend taking a look at greasemonkey. Loads of example scripts around to do this: http://userscripts.org/
And the added benefit, if written correctly they also work in Chrome and other browsers.
Yes, it is. You must find a tutorial about javascript DOM manipulation

Programmatically "open in Adobe Reader" from JavaScript

The iOS safari browser has a handy option that appears whenever you open a PDF page in the browser
If you have Adobe Reader installed, a button will appear that says:
Open in "Adobe Reader"...
However, if you open up the PDF document where the HUD (address bar, etc) is hidden, like in a phone gap application, or a quick and dirty "Add to Home Screen app" using the following meta:
<meta name="apple-mobile-web-app-capable" content="yes" />
then, obviously, the button will not appear.
I want to still open the PDF document in Adobe Reader. Does anyone know a way to do this programmatically?
I want to include jsPDF in a phonegap application, and save the results, and this would be the easiest way to do that.
Thanks in advance!
With some fantastic help from Vince Parsons (and others), I've solved this problem.
Using a PhoneGap Plugin, you can create / expose a JavaScript call, which is then processed in Objective-c.
Here's the two lines you need (yes, only two lines!), and a subsequent explanation:
self.docInteractionController = [UIDocumentInteractionController interactionControllerWithURL:[NSURL fileURLWithPath:myDocumentPath]];
[self.docInteractionController presentOpenInMenuFromRect:CGRectMake(0,100,1,1) inView:UIApplication.sharedApplication.keyWindow animated:YES];
Explanation
Your input will be the file location.
In my case it's inside the app sandbox, so it looks something like:
/var/mobile/Applications/B16-HU83-GU1D-1D3NT1F13R/Documents/DocumentToExport.pdf
If you want to use an external URL, you can (with adjustments), but for my purposes it was internal.
So, with my file location as an input (let's call my input variable myDocumentPath), you just need to declare a document controller:
self.docInteractionController = [UIDocumentInteractionController interactionControllerWithURL:[NSURL fileURLWithPath:myDocumentPath]];
this creates a UIDocumentInteractionController using the interactionControllerWithURL method, which needs an NSURL variable.
We create that NSURL variable using the fileURLWithPath method, passing it our myDocumentPath.
The next line calls presentOpenInMenuFromRect Which takes a rectangle and a viewport:
[self.docInteractionController presentOpenInMenuFromRect:CGRectMake(0,0,1,1) inView:UIApplication.sharedApplication.keyWindow animated:YES];
the rectangle is created at position 0,0 with a width and height of 0,0 (GCRectMake(0,0,1,1))
and the viewport is taken from the PhoneGap application: UIApplication.sharedApplication.keyWindow
I'm reeling with joy and amazement that this only took two lines of code to fix. Granted, there's not a way to do it with JavaScript only, but it's still pretty elegant, and works great.
You can open your PDF using PhoneGap InAppBrowser(http://docs.phonegap.com/en/2.5.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser) if the PDF is opend from the server using a URL or if its from local device, you can use the PDFViewer plugin: https://github.com/phonegap/phonegap-plugins/tree/master/iOS/PDFViewer.
Bothways the native default PDF reader will be used to open the PDF.
I really searched for an ready-to-use solution and gave up at one point. There are a few old repositories on GitHub and some articles building on the two lines of the green marked answer - but nothing works satisfying for me.
That's why i forked the cordova-plugin-file-opener2 to change the iOS behavior and this works perfect for me. To allow also parallel usage of the forked plugin, i've renamed it creatively to cordova-plugin-file-opener3. It provides the same features as version 2.0.1 of the forked plugin except that on iOS the "Open In"-Dialog is shown.
The change to the plugin was trivial. Just replaced one method call and did some renaming. Don't know why it was so hard to find a working solution - but maybe that i didn't search the right way.
You can find the repository here:
https://github.com/napolitano/cordova-plugin-file-opener3
Feel free to use it.

Pinterest "Pin it" button breaking 'back' in Internet Explorer

I recently found out that in Internet Explorer (v9 at least), the "Pin it" button for Pinterest is breaking 'back' functionality in the browser. Right-clicking on it shows an entry like 'http://assets.pinterest.com/pidget.html' as the previous page.
Looks like Pinterest is adding an iFrame and IE is adding its address to the history. Clicking 'back' doesn't do anything. Is this a known issue and is there a fix for this?
well, as a temporary solution (other than removing the 'pin it' button), from reading their code, I believe (not tested) that you could add a part to the <script> call to disable logging, like this ...
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js" data-pin-do-not-log="true"></script>
This works but doesn't apply for me because I load the script asynchronously and I use a load command, so what I did was I copied the pinit.js file locally to the server, and changed the part that says
if(a.v.config["do-not-log"]||a.a.doNotLog===true)
to
if(a.v.config["do-not-log"]||a.a.doNotLog===true||true)
looks like it's doing some sort of log in an iframe.
I was having the same problem. I added the website to my list of restricted sites by going to "Tools", then "Internet options", then "Security". It seems to have solved the problem.
I've raised it with PInterest here https://help.pinterest.com/requests/884162
Thier response. Pretty much a brush off.
Hi ,
Information on how to add the Pin It button to your website or product pages is available here:
http://pinterest.com/about/goodies/
More advanced documentation is available here:
https://help.pinterest.com/entries/21101982
We regret that we're unable to provide coding support. Because issues with adding the Pin It button can be caused by conflicts with different parts of your setup it is usually best when someone that is familiar with your setup troubleshoots it. You may also want to try searching the web to see if others have had similar issues especially people that are using a similar site platform or language.
We request that you use our help articles to get the information you need as quickly as possible. If there’s additional information you’d like our team to know, you can reply to this message.
Thanks for writing and happy pinning!
The Pinterest Team
This was a temporary bug when we first pushed the new Pin It button and should no longer be an issue, since we removed the logging frame shortly after it was reported. Sorry for the trouble!

How to get a live preview of my website

cssdesk, jsbin and such do a wonderful job of showing a live preview side by side with your code. I wonder if there is a way to just get the live preview.
Ideally, I would open my text editor or ide on one monitor, and a browser on another monitor, and while I adjust the code in my ide, and save my document, the browser would sense the change, and update the page.
Would this need to built as a browser extension, maybe it can be built in javascript and offered for free to any developer who would like to use it.
I feel like this would be a great feature for firebug or something.
There is LiveJS, which does exactly this:
http://livejs.com/

Can javascript capture image download times in the client?

With javascript event timers, you can relatively easily determine how long it too for the page to render in the browser, especially when using tools like Jiffy. However, is it possible to capture more granular events such as individual image/object download times using javascript in the page? I am fairly sure this is not possible, but wanted to confirm with the javascript guru's of SO.
Thank you in advance.
Sadly, unless you load the images using the javascript image object manually instead of in the markup, I don't believe this is possible. that's why you usually see this functionality in things like firefox plugins
You could look at the Net tab in Firebug. I don't know if it can give you same information via Firebug Lite in other browsers or not.
If what you want to time can be put into an event that has a callback, you can check the time before and after. So anything you do with Ajax you can time. What exactly are you trying to time? Can you be more specific?
I'm not totally familiar with this jQuery plugin, but it may be of help to you:
http://plugins.jquery.com/project/timers

Categories

Resources