Hey folks! I''ve been testing out this little bit of code that I wrote & modified from a previous jQuery implementation of a favicon link fetcher. Basically, all it does is pull the favicon.ico from any external links contained on my page and appends them to the end of the link. It''s quite simple, and works wonderfully _except_ in IE7. Here''s the code: http://pastie.org/218226 In FF3 and Safari 3 the onError event is properly observed, and the image is removed from the DOM when there is no favicon available at the external site location. However, IE7 does not remove the image, and I get the typical grey box of missing-image ugliness. Is there something that I''m missing? If not, is there a way to force IE7 to not display the image if it does not exist at the remote location? Merci! -Joel. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
On Thu, Jun 19, 2008 at 12:19 PM, Joel Perras <joelperr-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > Basically, all it does is pull the favicon.ico from any external links > contained on my page and appends them to the end of the link. It''s > quite simple, and works wonderfully _except_ in IE7.Say, that''s pretty neat! I managed to get it working on IE by inserting a string rather than an Element object. (A bit icky from a standards perspective, I realize, but then IE is an icky browser.) Exactly why the former works and the latter doesn''t is a mystery to me, so if anybody knows more, do tell :) You can still keep configuration and readability by using Prototype''s very cool String.interpolate. Here''s what I came up with: favicon = ''<img class="#{className}" src="#{src}" alt="#{alt}" onerror="#{onError}" />''.interpolate({ className: ''favicon'', src: link.href.replace(/^(http:\/\/[^\/]+).*$/, ''$1'') + ''/favicon.ico'', alt: ''external link'', onError: ''javscript:$(this).remove()'' }); Very cool idea. I may just have to look for places to use this now :) :Dan --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
On Thu, Jun 19, 2008 at 1:21 PM, Dan Dorman <dan.dorman-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> I managed to get it working on IE by inserting a string rather than an > Element object.Okay, I got it working with an Element object too, by moving the onError attribute to an event handler: var favicon = new Element(''img'', { className: ''favicon'', src: (link.href).replace(/^(http:\/\/[^\/]+).*$/, ''$1'') + ''/favicon.ico'', alt: ''external link'' }).observe(''error'', function() { $(this).remove(); }); :Dan --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
On Thu, Jun 19, 2008 at 1:21 PM, Dan Dorman <dan.dorman-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > I managed to get it working on IE by inserting a string rather than an > Element object.Okay, sheesh, so I really wanted a version that added the favicon as a background image to the link rather than as a standalone image element. Ergo: Event.observe(window, ''load'', function() { // Find all external links (begin with absolute URL) $$(''a[href^="http://"]'').each(function(link) { if (!link.hasClassName(''nofav'')) { link.favicon = new Element(''img'', { src: link.href.replace(/^(http:\/\/[^\/]+).*$/, ''$1'') + ''/favicon.ico'' }).observe(''error'', (function() { $(this).setStyle({ backgroundImage: ''none'', padding: ''0'' }); }).bindAsEventListener(link)); link.setStyle({ backgroundImage: ''url('' + link.favicon.src + '')'', backgroundPosition: ''left'', backgroundRepeat: ''no-repeat'', paddingLeft: ''20px'' }); link.favicon = null; } }); }); --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Yep, I remember similar complaints about IE and #writeAttribute (which new Element uses internally for setting "options"). This is one of the reasons why using on* attributes is usually discouraged. - kangax On Jun 19, 3:48 pm, "Dan Dorman" <dan.dor...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> On Thu, Jun 19, 2008 at 1:21 PM, Dan Dorman <dan.dor...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > I managed to get it working on IE by inserting a string rather than an > > Element object. > > Okay, I got it working with an Element object too, by moving the > onError attribute to an event handler: > > var favicon = new Element(''img'', { > className: ''favicon'', > src: (link.href).replace(/^(http:\/\/[^\/]+).*$/, ''$1'') + ''/favicon.ico'', > alt: ''external link'' > > }).observe(''error'', function() { $(this).remove(); }); > > :Dan--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
It works perfectly. Bloody brillant and simple solution as well! I owe you one internet beer. -Joel. On Jun 19, 3:48 pm, "Dan Dorman" <dan.dor...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> On Thu, Jun 19, 2008 at 1:21 PM, Dan Dorman <dan.dor...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > I managed to get it working on IE by inserting a string rather than an > > Element object. > > Okay, I got it working with an Element object too, by moving the > onError attribute to an event handler: > > var favicon = new Element(''img'', { > className: ''favicon'', > src: (link.href).replace(/^(http:\/\/[^\/]+).*$/, ''$1'') + ''/favicon.ico'', > alt: ''external link'' > > }).observe(''error'', function() { $(this).remove(); }); > > :Dan--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---