I'm getting some weird black spots with a custom map page (via the Google Maps API v2.x) I have created. (Click SERVICIOS and then the icon farthest south to generate image shown below.) The issue seems to only appear when using Internet Explorer. I'm wondering if this is a common problem and if there is a common fix?
Any ideas?
Thanks.
UPDATE
In this picture the browser is IE 8.0.6001.18702
Its hard for me to get specific details about the computer because my client took this screenshot, I have been unable to reproduce these black spots.
removed dead ImageShack link
This is completely related to the zooming feature in IE8. Ask your client to set his zoom level back to 100% and the black spots magically disappear. This is probably why not everyone can reproduce this problem, because it's a local browser setting. But even now (months later), when I follow your link -- or if I simply go to maps.google.com, do a search, and get the Marker/InfoWindow -- if I have the zoom level set to > 100%, I see those black shadow pieces where Google's javascript is trying to piece together the drop-shadow. So QED: Microsoft STILL has a bug in their scaling algorithm for transparent PNGs in IE8.
Weird black spots on custom Google Map with IE http://img340.imageshack.us/img340/751/googleblackholes.jpg
This black (png?) bug might be related to this issue:
IE 8 Black bug
What version of IE are you running? (Note that only some part of the drop shadow seems to be affected.)
I failed to reproduce this error (IE6,7,8,FF,Chrome), but I can offer you to try GMaps Utility Library. It allows to create custom info windows using css (live example that use ExtInfoWindow library extension). This library adds you an opportunity to create info windows without transparency which I think is a current problem.
I've tryed to look what google map API doing with info window at IE8 and found that it add CSS filter:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="http://maps.gstatic.com/intl/ru_ALL/mapfiles/transparent.png");
Wich reproduce shadow under the info window based on transparent png image, maybe at your client computer this opportunity (filter) disabled, so I think the best solution is to use library i suggested.
Also you can try ie7-js library that has IE-PNG fix transparent functionality.
I had this blackspot too. It is generated by the <li>.
Remove the <li> and </li> around the affected area and it will disappear.
Related
I'm created a very large map with many poly areas (over 20 coordinates each) for regions within the map. However, you can't add css to the AREA tag as I was told it's not a visible element. What I want to do is when the user hovers over an area on the map, I want it to be "highlighted" by applying a 1px border to the specific AREA element. Is there a way of doing this? No, I'm not going to resort using rectangles.
Not possible with CSS.
You might check out the Map Hilight jQuery plugin, though.
EDIT 10.2011
ImageMapster is a more recent, and more powerful plugin you should also check out.
If you want to be able to use arbitrary shapes and still use styles, have you considered trying SVG?
I'm not an SVG master but here's an example I whipped up: http://jsfiddle.net/tZKuv/3/. For production you may want to replace the default stroke with none, I used gray so you can see where it is.
The disadvantage is that you'd lose the ease-of-use area/map gives you, but I imagine you can accomplish your goal if you go this route. I added cursor: pointer to the polygon and you can add onclick handlers to simulate the href of <area>.
An obvious caveat is browser support. This seems to be working in Chrome, and I am pretty sure it should work in IE9 (jsfiddle's not working in IE9 at the moment), but previous versions of IE don't support SVG.
Update: Made a quick test page to test IE9. It does indeed work as expected. Here's the source.
Update again: This would also solve the zooming problem you asked about in another question.
Nope, there is no way to do this as you describe. I've researched it and tried. What you can do is set up mouseover events on the various segments and swap some overlay image that is shaded in the same area.
On this website (tested in close-to-latest
Opera, Firefox and Google Chromium on Mageia Linux 3 Cauldron and on Firefox on my Arch Linux VM), the expanders/[+] signs of the navigation menu on the left get shifted a little
upwards and downwards when the sub-menu is expanded/collapsed. That's not the case if the expander in question the last one in the sub-tree (for example, under "Humour" →
"Recommendations").
Why and how can it be avoided? Is it because of the different character in the text? I tried setting it to monospace - it did not help.
It works fine here, but the CSS and generated
DOM are different.
(Note: this is my permanent site while this is the
temporary/testing one. They look mostly the same now, but do not use exactly the same markup, CSS and JS.)
The problem is that I'm trying to make jqTree look more like what I had in the old
jQuery Treeview, and it won't cooperate. I spent an entire day on it yesterday,
and while I fixed many problems, I still have this one.
I tried using Firefox's Firebug, Opera's Dragonfly, and the equivalent tool in Google
Chromium has, but I lack the necessary skills to understand what goes wrong.
It appears that the jQuery Treeview authors tried to optimise performance by using a single image with a different background-position which makes it hard to debug, and I didn't get rid of it yet.
Any pinpoint to the problem, and/or a fix will be appreciated.
I am reconstructing a massive collection of medical modules that were created in Flash. All of the modules are being redesigned for cross platform enjoyment (js and HTML5). I have been searching for a library or plugin that will add arrows(with rollover capabilities) and text above an image when the user clicks a button. I have had little luck.
The closest package I have found is Zoomify, but it's still not what I am looking for. They are asking for too much money for maximum development capabilities. I was really hoping to find a JQuery plugin or javascript library that would allow me to fully customize the interface. Here is a screenshot of an OLD FLASH module:
The red arrow corresponds to the link selected on the left. The new design is much more appealing but the underlying idea is the same, click buttons point to the objects.
If there is no such library or plugin should I create a simple javascript image viewer and store overlay coordinates in a database? Or is that overkill? I have hunderds of these things to do... maybe thousands :( Any help/direction would be greatly appreciated.
What you are asking for is provided by CSS, which enables one to place text directly on top of an image or other rendered HTML. The key CSS properties to investigate are:
position set to 'absolute'
values for at least two of top, right, bottom or left
use z-index to specifying layering/order
Lightbox is a good option "Lightbox is a simple, unobtrusive script used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers."
I'm working on a prototype system which will act as a proof of concept that an existing system can be made a lot more interactive.
It basically emulates our main software package but over the internet using JSONP requests to update a load of images and Raphael vectors to make it look like everything's running.
I'm having trouble on Chrome however with Raphael not drawing vectors "off-screen". What I mean by "off-screen" is that the main app runs through an iframe as it relies on cross-domain long poll comet through AJAX to get communicate back and forth. Below is an image demonstrating what I mean.
Here I've scrolled a long a little bit in the iframe to look at the bits "offscreen" and you can hopefully see that the grey arrows aren't rendered. I've used Chrome's developer tools to highlight over the SVN tag, showing that it's only given 450px by 810px to the SVG tag, which is the same size allocated for the iframe.
It's worth pointing out that it renders fine in Firefox. Any ideas?
I've had a similar problem and found a bug report for the WebKit project that seemed related:
https://bugs.webkit.org/show_bug.cgi?id=64823
According to the comments, it's a bug in the rendering engine and there's no workaround aside from losing the iframe or resorting to other means of scrolling the SVG viewport (like moving all the elements within the SVG element).
On the upside, version 16.0.912.21 has been released to the beta channel today and it seems that the bug has been fixed. I've also checked the latest chromium build (17.something) and the bug hasn't resurfaced. I'm guessing the fix should find its way into the stable channel in a couple of weeks.
We're having the following weird (well...) behavior in all versions of Internet Explorer browsers when using javascript slideshows.
You can see what I mean here http://www.tospirto.net/index.php?ID=photo_gallery&Rec_ID=481
In the last 3 images there are white lines and artifacts created by the browser.
This is true as I said for all versions of Internet Explorer.
Have you seen this before??
Do you ave any idea what is causing this???
Thank you
I can see the artifacts - strange! This is a known issue in IE's JPEG rendering algorithm. If you enlarge the pictures in Photoshop, you will see that the artifacts are restricted within encoding blocks. (Pardon me, but I assume you know roughly how JPEG is encoded.)
Try encoding the images with a different quality, or even in a different format (like PNG, even though that would give you larger files). You can find other thoughs on how to solve this here:
http://forum.jquery.com/topic/ie-dead-pixels-when-fading-images
It's a bug in the alpha filter, which is how transparent fades are implemented in IE (before version 9, which finally supports proper CSS opacity). When used directly on an image, any pixel with the RGB values 2,5,10 (aka #02050A) is treated as transparent.
This is how 1-bit transparency from eg. GIF is implemented in the alpha filter. Evidently Microsoft think this particular colour is so seldom used no-one will notice. Oops.
Avoid the bug by putting the alpha filter (or fade script that uses it) on a container <div> instead of on the image itself.
Alternatively, you can use an AlphaImageLoader filter (same hack as for transparent PNG loading on IE6) to load the image, or just get rid of the alpha filter when you're not in the middle of a fade (you still see the bug during fade but at least it doesn't appear at 100%).
OK I found what was wrong after some searching.
The effect is called swiss army image artifacts and you can find more about it here: http://www.dynamicdrive.com/forums/showthread.php?t=34462
Another great bug from explorers :)
The solution is on the referenced article which is to remove absolute blacks using the levels tool on the photoshop for example. Did a batch change using actions in photoshop for all pictures and works like a charm.