I am trying to make a web page which allows users to drag and drop images into Microsoft Office applications, specifically Powerpoint.
By default (as of FF3.5), Firefox will insert the source URL when an image is dropped rather than the image itself. After adding the following Javascript/jQuery code (derived from https://developer.mozilla.org/En/DragDrop/Drag_Operations),
$('img').attr('draggable', true).bind('dragstart', function (event) {
event.originalEvent.dataTransfer.effectAllowed = 'copy';
});
dragging and dropping works from Firefox to Word and Excel, but not to PowerPoint. For an example of what happens, see http://slides.html5rocks.com/#drag-and-drop. I have tested this with FF3.6 and FF9.
How can I make it work with PowerPoint?
Just drag'n'drop outside the boundaries of the ppt slide (to make sure you're not dropping on a predefined textbox) - and release the mouse button -no coding needed!
Firefox drag will drop the image at the center of te ppt slide.
Status quo
Sadly there is nothing you can do from within your browser and the application to enable drop support for PowerPoint.
This is something that needs to supported at source level in PowerPoint (and it seem to be if you don't drop the image on an existing element but right outside the slide frame you want to drop it onto - but probably depending on version).
If it (for some reason still) does not support the image part of the drop but just the link (and if there is no option provided for changing this behavior) there is little to do but to hope Microsoft will update PowerPoint with this support in the future, - or - check the following options for work-arounds if needed:
Add-ins
You can look into writing an add-in (or possibly just use a macro - you might need to lower security to medium [PDF] for macros) for PowerPoint that will take the link that is dropped and replace it with the image the link refers to.
Here is one place to get you started making add-ins if this is a viable option.
Here is a commercial framework that makes creating add-ins very simple.
(disclaimer in this regard: I am here assuming this will be possible due to add-ins such as this which allow you to show a live web page inside PP).
Pipe-line / work process
There is also the option of injecting a third-party applications in the pipe-line to do screen snapshots of the image and have it inserted automatically into PP.
SnagIt is such an application (and there are probably others) and it has free extensions that will allow you to integrate "snags" directly with PowerPoint.
Or (the perhaps too obvious option): simply copy the image in browser and paste it into PowerPoint.
What is your version of Powerpoint?
It's very important because image format support may be lacking.
If that's the case your code needs a minimum version warning addition.
Could also ask to convert image to suitable format.
It may even be the case that it's impossible to the version of Powerpoint you're using to support this in the way you want.
You could try to use html code.
This code might help you:
http://classroomtech.org.uk/2008/08/drag-and-drop-in-powerpoint/
Other possibilities are OLE object with a link to a image.
Could check how other Microsoft applications, that do something similar, handle things.
If that doesn't work you could try to generate an OLE object with a link to the image in it.
Related
I have a JavaScript/jQuery application that dynamically creates a catalog of my film collection, based upon a JSON file. For example, if you click the Titles button, the space below the button fills with all titles in the collection. Each title line also includes a link that uses the serial number as link context, providing a small body of film information that appears within a new window (=popup). All browsers (IE11, Edge, Firefox, Chrome) behave similarly to this point.
IE11 and Edge also show a JPEG image at the bottom of that film data, where that image is a link to another JavaScript application on my server that shows the JPEG image (up to) full screen.
Chrome does not acknowledge the JPEG image at all. Firefox shows an outline of the image but does not show the image nor acknowledge the link that it is to the other JS application.
I have gone through Chrome settings enabling my site for any action Chrome specifies. No change.
Similarly for Firefox. No effect.
The attached photo shows how the Microsoft browsers display my intended effect.
Any idea what browser rule I'm violating here?
4 Feb 2016 I'm adding this link to the application discussed as it is running on my server, which therefore allows access to both the JavaScript and JSON code. Although this is a private application of no use to anyone but myself I cannot understand why the techniques used operate only within the two Microsoft browsers. A Mac-using friend confirmed today that Firefox doesn't show the image, and Safari won't even enable the links on the first page! If there is something I'm doing wrong here, I'd love to know what it is!
http://www.michaelbroschat.com/film/discCatalog.html
I'm working on a Markdown text editor using a contenteditable and Rangy to easily add links and images. The problem is that rangy.createRange();, an important function in the Rangy library, cancels the ability to undo an action (text added in the contenteditable in my case).
I have browsed the Web to find a solution and I have found UndoManager, but I cannot find information about how to use it and if it has been added in Chrome (I'm working on a Chrome Packaged App so I don't care if Safari does not support it).
If somebody knows something about this piece of HTML5 it would be amazing.
Thanks in advance.
According to this link , none of the current browsers support the UndoManager spec. You can test that in your browser by trying to access document.undoManager which undefined in Chrome
Is there today with HTML5 a way to copy to clipboard, without browser plugins (and so without Flash nor java) nor short-term hacks, an image built in a canvas ?
The copy to clipboard would be initiated by javascript but having user confirmation or a dialog isn't a problem.
Solutions which don't work in Windows and Linux, or which don't work at least in Chrome and Firefox are without interest to me.
Ideally I would prefer a solution that doesn't impose to display the image (which is built in memory with document.createElement('canvas')) but that's not an absolute requirement.
As far as I'm aware, the Clipboard API is the only specification in this area. I've never used it and don't know how widely it's supported, but I suspect not widely. According to this quick and dirty test, the current versions of Chrome and Firefox fire the copy event. I believe the user has to initiate the copy (e.g., you say "press Ctrl+C to copy").
IE makes window.clipboardData available, but as far as I know you're limited to text and URLs.
So sadly, I think this is one of those answers that's basically: No, not yet.
I'm pretty new to writing Chrome extensions. I've noticed that all of the extensions I've seen (both sample and useful) do not use the standard OS drop down menu when you click on them. Their popups tend to be pretty different and use stylesheets. Is there any way to have the extension popup be an actual OS menu (in the vein of the context menu API)?
If not, is there any place that has a stylesheet + javascript that replicates the look of a normal menu (I'm using OS X)? I know that the 'Wrench' menu that you use for changing settings has a normal looking menu. I tried looking through the source of Chromium to see whether it was implemented the same way as an extension and if it had such a stylesheet but I could not find anything.
I haven't really gotten the answer I wanted for this question so I tried to hack something together myself. The following stylesheet reasonably approximates the OS X menu. The only issues are that the font is a little too short when compared to the actual menu and the gradient is a little bit off (the OS X menu is not smooth and I don't know how to do that in CSS).
You can find my attempt here
Chrome wrench menu isn't rendered using javascript and css, it is a native GUI element of your OS, so you won't be able to find any css styles in sources.
If you want to replicate the menu look you can search for some javascript library that does that (like this), but I've never seen something that replicates GUI menu exactly even for one OS.
Browsers can display certain media inline, and will provided they are sent with content-disposition: inline. What's the best way to detect whether the browser is capable of doing so with a particular type of media?
I am running into the question lately with PDFs and Mac/FF, which seems to refuse to display PDFs inline (actually, in iFrame), instead prompting a download. I don't mind the forced download; I'd just like to be able to anticipate it so that I can give the end user a nice "download" link rather than an iFrame that fails at displaying inline content. My current solution is just browser detection (sample code below), but surely there must be a better mode.
var isMacFF = window.navigator.userAgent.search(/Mozilla.*Mac/i) != -1
This doesn't directly answer the question, but something you need to be aware when analyzing any answer you get - you can NOT reliably 100% determine that due to assorted browser plug-ins.
Specifically, in case of FireFox, look at PDF Downloader as an example - it basically allows the user 100% full control over how PDF gets displayed.