I keep running across this loading image
http://georgia.ubuntuforums.com/images/misc/lightbox_progress.gif
which seems to have entered into existence in the last 18 months. All of a sudden it is in every application and is on every web site. Not wanting to be left out is there somewhere I can get this logo, perhaps with a transparent background? Also where did it come from?
You can get many different AJAX loading animations in any colour you want here: ajaxload.info
I believe the animation came from the Mac OS X loading screen. Here's a similar one with a transparent background:
alt text http://homepage.mac.com/xraydoc/.Pictures/spinner.gif
I think it's just a general extension to the normal clock-face style loading icon. The Firefox throbber is the first example of that style that I remember coming across; the only real difference between that and the current trend of straight lines is that the constituent symbols have been stretched to give a crisper look, moving back to more of a many-handed clock emblem.
Related
We are using a png/8 sprite on a client's website. He is reporting the image is appearing distorted for him and on other computers on the company.
Here's how it should look:
http://i.imgur.com/wfV7ReR.jpg
And here is the print screen the client sent us:
http://i.imgur.com/sWKDYKU.jpg
I have tried donloading and exporting it again, uploading again. The problem is: On our computers it looks fine, so it's hard to test it. Our client is viewing it in IE: 11 and Google chrome: 41.0.272.118.
Has anyone seen this type of error before?
It may be the device-pixel-ratio is better than 160dpi; that'd throw off some CSS used for spriting.
If this shows "1" for you and a different value for them, I'd dig farther on that one. You could probably test this by hitting the site with an iPhone or newer Android device; they have >1.0 pixel ratios.
http://www.devicepixelratio.com/
Edit: this would also show up across-browsers on their end, as it's tied to the hardware, and not IE11.
My bet in that case is the PNG is somehow broken.
graphicdesign.stackexchange.com might be more useful; I don't know if this is fixable in CSS. (Might be; look for hacks around image backgrounds as well.)
Looking around, if you have Photoshop, you might try saving the original image, then creating a copy and changing this setting:
Image -> Mode -> Check "RGB Color"
Alternatively, try opening the image in pixlr.com, change anything however slightly, then save and use that one.
My strong suspicion is something in the way the PNG/8 is saved (maybe the alpha channel) is the issue, not any CSS you've written. Good luck!
I don't remember how it started, although I believe it began after using 3D tools at one point. I was looking for TWO answers, if possible:
For some reason, I find this hard to describe in words, so following the description is a link to a screenshot.
When I open, or create a new image followed by pasting an image from the Clipboard, in Photoshop, there is this zone at the top-left of the image window containing a smaller image, which is surrounded by an area that appears to be transparent - but when clicked on, or the window itself is moved, this "picture-in-picture" feature disappears - then comes back after the dragging is finished.
SCREENSHOT: http://i.imgur.com/MJq8I1W.jpg
1) What is this "feature" named?
2) How do I turn it off?
Thank you!
I don't think I can tell what you hit, or where this is located from the image you shared... can you upload a more comprehensive interface snapshot? It feels like you simply have a duplicate layer on top of your main layer...
Perhaps take a look at your workspace settings and try going to essential and see if that preview panel goes away.
Very large images will not render in Google Chrome (although the scrollbars will still behave as if the image is present). The same images will often render just fine in other browsers.
Here are two sample images. If you're using Google Chrome, you won't see the long red bar:
Short Blue
http://i.stack.imgur.com/ApGfg.png
Long Red
http://i.stack.imgur.com/J2eRf.png
As you can see, the browser thinks the longer image is there, but it simply doesn't render. The image format doesn't seem to matter either: I've tried both PNGs and JPEGs. I've also tested this on two different machines running different operating systems (Windows and OSX). This is obviously a bug, but can anyone think of a workaround that would force Chrome to render large images?
Not that anyone cares or is even looking at this post, but I did find an odd workaround. The problem seems to be with the way Chrome handles zooming. If you set the zoom property to 98.6% and lower or 102.6% and higher, the image will render (setting the zoom property to any value between 98.6% and 102.6% will cause the rendering to fail). Note that the zoom property is not officially defined in CSS, so some browsers may ignore it (which is a good thing in this case since this is a browser-specific hack). As long as you don't mind the image being resized slightly, I suppose this may be the best fix.
In short, the following code produces the desired result, as shown here:
<img style="zoom:98.6%" src="http://i.stack.imgur.com/J2eRf.png">
Update:
Actually, this is a good opportunity to kill two birds with one stone. As screens move to higher resolutions (e.g. the Apple Retina display), web developers will want to start serving up images that are twice as large and then scaling them down by 50%, as suggested here. So, instead of using the zoom property as suggested above, you could simply double the size of the image and render it at half the size:
<img style="width:50%;height:50%;" src="http://i.stack.imgur.com/J2eRf.png">
Not only will this solve your rendering problem in Chrome, but it will make the image look nice and crisp on the next generation of high-resolution displays.
I've got a web page with two different floating divs (position: absolute) and both contains a flash movie. The two are overlapping and the one below is a lot bigger.
The problem is: on the LAST VERSION of FIREFOX for MACINTOSH (snow leopard) the flash movie on top is impossible to interact with!
Watch yourself (wait for the fullscreen video to close): http://clients.adrime.com/files/campaigns/3509758016/27221/IT_pourfemme.it_index.html
How can I fix this?
Thank you in advance
I know this is an old questions but I thought I'd throw a possible solution that I've come across.
I had a very similar issue as described above. Two SWF movies loaded into a page sitting on top of one another. The top most contents mouse position was always off by a decent margin making the buttons almost unusable.
One of my movies was 1000x650 the other 1200x650. The larger of the two had a left positioning equivalent to around -100px which appeared to be the same offset being seen in the top most movie.
By giving both movies the same left positioning, the issue was resolved. Most annoyingly this only occurred on Firefox on Mac / OSX.
Some other discussions around this subject can be found in the comments here:
http://snook.ca/archives/other/hit_bug_in_fire
It appears to be a consistent bug, I'm surprised it hasn't been addressed.
I am making digital instruments for a car. These instruments will be constantly updated by information through ajax. These instruments will be served from a server onboard the vehicle through WLAN (fast) to my iPhone 3G. Is imperative to the success of the project that the updating of the tachometer is smooth and very responsive. Otherwise, it will look retarded.
The first problem I encountered was when I made this demo where tachometer moves quickly back and forth between zero and a thousand RPM: http://www.kingoslo.com/instruments/ When viewed on my iPhone 3G, the arrow simply doesn't move back and forth smoothly enough.
This javascript works by changing the source of the arrow img-element (which is semi transparant {4 color png} floating on top the static picture of the scale {16 color png}, by the way).
I've been made aware of new image editing features in HTML5, and wondered if any of those, or any other methods will be more responsive. Also, I am getting an iPhone 4 for xmas, so that may be a bit faster, but I've got the feeling that it still will fall short for the current build, especially when I add the constant ajax updating that is required to keep the instruments change values as the driver drives along.
Thank you for your time. Any help is greatly appreciated.
Kind regards,
Marius
I think using canvas will result in much faster animation - it was created to handle drawing, whilst manipulating DOM elements is comparably expensive.
Mobile Safari is compatible with canvas.
Alternatively, you could try incorporating all the angles as one large CSS sprite, and then just manipulating its background-position CSS property (element.style.backgroundPosition in the JavaScript DOM API).