I'm currently testing drag & drop. Drag & dropping an image from my desktop works fine, but I'm facing a problem : when I drag & drop an "online" image (from another website, or even from the same webpage using a , the variable e.dataTransfer.files is empty.
To sum up what I'm trying to do : You drag an image from your desktop to my page (inside a special zone), then it displays the image inside a <canvas>. I'd like to be able to drag an image from my page also, to say something like "Hey, you can first try with these images !".
For the basics of drag & drop, I got inspiration from this tutorial : http://www.html5rocks.com/en/tutorials/dnd/basics/
Because drag&drop online is interpreted as link, not as file transfer. You must first save the picture on your desktop and it will then be intepreted as real drag&drop.
But, since you already have the pictures on your page, you could reach your goal by filling your canvas with your existing images (e.g. using javascript).
P.S.: Drag&Drop works the way you want only if you use 2 different browsers, for example drag a picture from IE into FF. For that you need load your page in 2 different browsers.
Related
I'm in Firefox and I'm looking at a page which has several how-to sections. Each of these has an animated git showing a user following the instructions.
The animation goes by too fast for me to be useful. I just want a way to pause the animation so that I can zoom in and see the details better. Then resume the animation.
I tried clicking on the GIF, and I get just the GIF, but it still is animated and I can't control it.
What I'd like is some way to have FF open the image so that I can pause and resume the image. Some reliable FF extension or plug-inAn would be best. An item in the context menu would be nice (using about:config). Or an item in the Settings/Applications list for images in general, or .gif files in particular (also using about:config). Or some application where I can open the app and drag the image from FF into the open app's window.
What I've tried is:
Changing how FF processes the click on the image. Its Settings does not show anything related to images in the Applications section. I can't find a way to configure FF to add more file types to this section. Anybody know how to do this?
I can view the image in WMP (Windows Media Player), but this is a clumsy process. First, I have to save the image somewhere, then I have to open the folder where I saved it, then do an Open With.... Then since WMP isn't on the list of apps, I have to do Select Another App, and scroll down to WMP and select that. I don't want to make this the default for all GIF files, so I have to do this for each animated GIF.
Once I've done this, WMP comes up and I can do what I want.
I tried a drag and drop from my image in FF to an open WMP window, but there's no response there.
I tried RealPlayer. I can do an Open With and RealPlayer is on the list of apps. But RealPlayer shows the image without animating it. RealPlayer also has an Open command and I paste in the URL of the image, but it's the same result.
I loaded the Toggle Animated Gif extension for FF. This is not satisfactory because I can either run the animation or show the GIF without any animation. I want to be able to freeze the animation in the middle of it.
Same difficulty here. Unfortunately, there's no such Firefox extension for now. The closest one is https://addons.mozilla.org/en-US/firefox/addon/gifpuase. It allows to pause a GIT, but not to resume - so not enough for you.
While I also prefer Firefox, but for this I suggest Chrome and Gif Scrubber: https://chrome.google.com/webstore/detail/gif-scrubber/gbdacbnhlfdlllckelpdkgeklfjfgcmp. Not immediate, but powerful.
I was just watching some street view images in this website where if you refresh everytime it loads up a new image. Then I realized a image was too beautiful and I was trying to save that image somehow, and it is when I came to know that I can't right click and same street view (Panorama) images. I thought maybe going to developer tools then network might help but it requires to be opened before I load up the page or I have to refresh the page which is disasters in this case.
I know the images loads up on browsers gets saved in the data folder of the browser. But I don't know how to retrieve them or is there any other ways I can save the image?
I have a window.open code to launch inappbrowser on phonegap. I use it for displaying image.
This inappbrowser has EnableViewPortScale=yes, so it's totally zoomable.
However, it seems like there is zoom-out-limit in inappbrowser. Here is the code.
window.open(myFullImageUrl, '_blank',
'location=no,EnableViewPortScale=yes,presentationstyle=pagesheet');
It's already zoomed-in a little. I can zoom-in-and-out because of EnableViewPortScale=yes for sure.
However, it seems like there is zoom-out-limit.
when i load up 1024x768 photo, it doesn't show fully zoomed-out photo(on both iOS and Android), but it's like 120%-ish already zoomed in.
I Just created stackoverflow account, so i can't upload photo. sorry!(it says i need 10 reputations to upload image)
There is no true solution for this issue.
So what I did is I just continue using inAppBrowser, but just instead of directly loading image from Amazon server(that's where I stored all images), I just made my window.open to go to another my URL and attach that url as a parameter after '?'.
The reason why I did this is because then I can force the Image web-view to have brief Javascript and CSS to render this dang-image correctly.
And as you guys know, this page must have meta-data that allows user-scale true, and must NOT have max-scale value.
So, Yep. Long story short, If you DIRECTLY load up the image in the inAppBrowser of phonegap, there is NO WAY you can force the image to start with 'not even slightly zoomed-in, but perfectly zoomed-out to the max'. Your own Page, Your own JS and CSS is the way to go guys.
I think I could be doing something wrong in photoshop. I'm trying to create a banner for my website.
I created a new image in photoshop, then filled the background with a color I picked #E06205
I then saved the image as a jpeg.
On my webpage, I created a div and gave it a background color
background-color:#E05206;
When I open the page in Safari and Chrome it's beautiful. Matches perfectly.
However, when I open the page in FireFox, the colors don't match. I can't figure out why that is.
By the way, this is definitely a problem with the image I created. When I compare the same image side by side, Firefox gives me the 'wrong' color
Your issue is in the color profile you are using for the image. Make sure when you save the image you use Save for Web & Devices…
To read more if you want you could travel to this website:
http://css-tricks.com/color-rendering-difference-firefox-vs-safari/
You should save your images with "Save for Web & Devices" option of "File" menu in Photoshop. You can get many options and image types in this option as per your requirement.
I set out to make a quick Mac OS X dashboard widget. I read the documentation and was pleased to find out they use simple HTML, JS, and CSS. I created my widget and it works when I open the .html file in Firefox, but it does not work when I install the widget to the dashboard.
The widget is simple: it displays the most recent image from a weather web cam stream. The image URLs look like this: http://webcam.com/stream.jpg?1274213999617. The timestamp is appended to the URL and the server automatically responds with the latest image for that time. I did not write the server script.
The widget appears to be loading correctly, but the web cam image will not load. Notice the blue question mark in the upper left. The image should appear over the square background image. Is there any special procedure for loading external images into a widget?
alt text http://img.skitch.com/20100518-pfesqbaby8dcg6yet8wjay7n1c.jpg
You should look here for some important settings:
Dashboard Info.plist Keys