0

I'm trying to add touch icons for a webpage. This page is handled by a CMS (LifeRay) and since I don't have access to the templates I can't add the elements to my head element by altering the template. Thus, I thought that I could maybe create the elements in the DOM by using JavaScript.

I tried this:

var touchIcon57 = document.createElement('link');
touchIcon57.setAttribute('rel', 'apple-touch-icon');
touchIcon57.setAttribute('sizes', '57x57');
touchIcon57.setAttribute('href', 'icon57x57.png');
document.getElementsByTagName('head')[0].appendChild(touchIcon57);

var touchIcon72 = document.createElement('link');
touchIcon72.setAttribute('rel', 'apple-touch-icon');
touchIcon72.setAttribute('sizes', '72x72');
touchIcon72.setAttribute('href', 'icon72x72.png');
document.getElementsByTagName('head')[0].appendChild(touchIcon72);

var touchIcon114 = document.createElement('link');
touchIcon114.setAttribute('rel', 'apple-touch-icon');
touchIcon114.setAttribute('sizes', '114x114');
touchIcon114.setAttribute('href', 'icon114x114.png');
document.getElementsByTagName('head')[0].appendChild(touchIcon114);

var touchIcon144 = document.createElement('link');
touchIcon144.setAttribute('rel', 'apple-touch-icon');
touchIcon144.setAttribute('sizes', '144x144');
touchIcon144.setAttribute('href', 'icon144x114.png');
document.getElementsByTagName('head')[0].appendChild(touchIcon144);

var touchIcon512 = document.createElement('link');
touchIcon512.setAttribute('rel', 'apple-touch-icon');
touchIcon512.setAttribute('sizes', '512x512');
touchIcon512.setAttribute('href', 'icon512x512.png');
document.getElementsByTagName('head')[0].appendChild(touchIcon512);

This adds the elements to my DOM, but when I try to add it to my home screen in my iPhone, there is no icon.

bfavaretto
  • 71,580
  • 16
  • 111
  • 150
konkretmusik
  • 19
  • 5
  • 4
    You mean JavaScript is not an effective or pretty way for adding elements to the dom doing what _you're_ doing. Don't blame the language for your code smell. this code can be re-factored to be much smaller and simpler. First, use an array, second, use objects for the properties, don't use setAttribute for this sort of thing where you don't have to here, and append to the body and not to the head. Elements appended to the body are invisible – Benjamin Gruenbaum May 23 '13 at 17:49
  • *"Don't blame the language for your code smell."* NAILED it! –  May 23 '13 at 17:53
  • @BenjaminGruenbaum I think the bigger concern is that the user is saying the code that's being used (regardless of prettiness) doesn't actually do what is needed. He also can't append elements to the body. Whatever CMS you're using has to have a separate area that will allow you to edit the HEAD area if dynamically injected touch icons won't work. Try looking for that in the product's documentation. – 1nfiniti May 23 '13 at 17:54
  • A little bit of re-factoring leads to this .. http://jsfiddle.net/sushanth009/YmaRg/3/ – Sushanth -- May 23 '13 at 17:54
  • @Sushanth-- Nicely Done! here is my solution assuming this is what OP _actually_ wanted. http://jsfiddle.net/3zsH2/ – Benjamin Gruenbaum May 23 '13 at 17:58
  • @BenjaminGruenbaum do you even know what an apple-touch-icon is? – 1nfiniti May 23 '13 at 17:59
  • @mikeyUX Yeah, but that won't run on jsfiddle would it? I tried to create something similar that'd illustrate the point :) – Benjamin Gruenbaum May 23 '13 at 18:00
  • http://jsfiddle.net/rlemon/YmaRg/5/ I tossed my hat into the ring. please note the comment on 'sizes' attribute – rlemon May 23 '13 at 18:01
  • 1
    @BenjaminGruenbaum The point is that dynamically injected link elements added to the head are not being recognized by the iOS device. The rest is irrelevant.... Great job, you made his JS cleaner and more efficient. It still doesn't do what he needs. – 1nfiniti May 23 '13 at 18:02
  • 1
    @mikeyUX hence why this is all taking place in the comments ;) At least we are helping – rlemon May 23 '13 at 18:04
  • @rlemon fair enough I suppose. Though I'm still undecided about whether or not that's actually true ;) – 1nfiniti May 23 '13 at 18:06
  • Sounds like a bug to me. – Shmiddty May 23 '13 at 18:08
  • 1
    cleaner, faster, more readable and maintainable code is always a plus. providing examples of how code could be re-factored to better in all of these areas is definitely help, maybe ill timed, but it is help. – rlemon May 23 '13 at 18:10
  • 1
    also, you might want to try fully qualifying your urls. – Shmiddty May 23 '13 at 18:12
  • I agree with @rlemon ...and it's not like it's entirely unrelated to the question, since OP decided to use the question to complain about JS not being a pretty or effective solution. FWIW, we can also take advantage of `forEach` to eliminate the `head` variable. http://jsfiddle.net/YmaRg/6/ –  May 23 '13 at 18:13
  • Sure, we can tell the OP how to refactor for readability/maintainability. But a great part of the discussion in the comments is unrelated to the actual question because of a silly rant in the question. I'm editing it out. – bfavaretto May 23 '13 at 18:23
  • @konkretmusik might be worth looking into http://stackoverflow.com/questions/7885393/apple-touch-icon-isnt-showing-up-on-the-home-screen – rlemon May 23 '13 at 19:15
  • The markup looks clearer, however each icon is uploaded to the CMS via the database so each url looks something like this: "http://domain.com/documents/27618/27691/icon144x144.png/a75a3025-ab42-46d7-859a-222cf47cfae9?t=1369312420316" So the markup have to look a bit different in order to incorporate that. Anyway, does anyone know WHY I can't use this method to add apple touch icons? – konkretmusik May 23 '13 at 21:20
  • @rlemon that isn't really what I was asking for. – konkretmusik May 23 '13 at 21:22
  • @konkretmusik how so? "Doesn't work on iOS homescreen" and that issue deals with one of the (presumably multiple) reasons for this error. "[Not] really what I was asking for" !== "Sorry, that wasn't my issue but thanks for trying" – rlemon May 23 '13 at 21:54
  • @rlemon I wasn't being ungrateful for any help offered (sorry if you took it that way), I just found the discussion a bit vague. In any case, I can't really test anything of the different suggestions in that discussion since I am restricted by the CMS. Maybe the problem is due to the virtual directory suggested in that discussion, but I haven't read anything decisive on that yet. – konkretmusik May 23 '13 at 22:25

0 Answers0