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
Related
Long time browser, first time caller....
I have recently re-written my website to use responsive images (which I am new to), but my s7 chrome seems to always load the "medium" sized image, which is the default src.
I have tried clearing cache and using incognito. It still appears that the medium image is loading, although the only way I'm deducing that is by selecting the image and loading in a new tab and reading the url. I'm not sure if this is accurate.
I've also tried changing the default src to the small image, but the medium is still loading.
However, on FF and Chrome desktop, even with developer tools set to mobile device, it seems to work correctly. Here's the relevant code:
<img
class="vertical"
src="../galleryphotos/doveinsnow_medium.jpg"
sizes=" (max-width: 675px) 271px,
(max-width: 1920px) 620px,
(min-width: 1921px) 1240px,
100vw"
srcset="../galleryphotos/doveinsnow_small.jpg 271w,
../galleryphotos/doveinsnow_medium.jpg 620w,
../galleryphotos/doveinsnow_large.jpg 1240w"
alt="Dove In Snow photograph"/>
Here is a link to the page with the above image, although every page on the site behaves the same way:
http://herschbachphotography.com/gallery_index/doveinsnow.html
What am I missing?
As far as I can see, everything is working well. I checked with Chrome Version 69.0.3497.100 (Official Build) (64-bit) and I can see all 3 versions of your image if I change the viewport from 675px to more than 1920px.
Here are 2 ways you could confirm which image is being shown.
If you place a different marker on each of the 3 images it will be easy to tell which one is being displayed.
Another way is to use Web Inspector (from within your browser, right click on your page then choose 'inspect')
Click the network tab, select img, then reload the page. You'll get full details of all the images on the page.
I hope this helps!
Website
I am using a Magento website which is not able to open the thumb-nail images on the mobile devices. I changed the css file for different resolutions inside the media block but still not able to open the images.
The images inside the red square are not opening in the mobile devices. Whenever i click on any of those images nothing happens.
The image are opening in the desktop for all size of display.
Is it happening because of wrong css code or some other reasons.
Your resolution for that size add proper image width and height in CSS.
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'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.
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.