0

I have a one page document that has several images which need to load only on Android 2.3 phones and IE8/9 because the picturefill.js project doesn't work properly on those devices.

I am successfully using this script once within one of my instances of picturefill code:

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
  // Do something!
  document.getElementById('theimage').innerHTML = '<img src="http://placehold.it/200x200">;
}

I need to use it a few more times on the page but have problems when I paste the exact code above more than once.

Is there a way to turn the above into a function that can be called to call different images for each instance of the unique images? I would need to use the above script to call at least 6 unique images across the page.

micah
  • 1,937
  • 6
  • 27
  • 40
  • Your strategy is flawed, see [How do I detect Opera/Safari/IE?](http://www.jibbering.com/faq/#detectBrowser). There is no standard for user agent strings, they can contain anything. Many browsers masquerade as other browsers and devices. Far better to use code that isn't dependent on browser sniffing. Note that [user-agents.org](http://www.user-agents.org/) lists about 2,500 UA strings. – RobG Sep 28 '12 at 02:02

1 Answers1

1

Once the code has executed once you don't need the first 2 lines, as they are already set and redefining them can cause errors. Just use the if statement where necessary.

First Time

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
  // Do something!
  // Redirect to Android-site?
}

every subsequent time

if(isAndroid) {
  // Do something!
  // Redirect to Android-site?
}
user1289347
  • 2,397
  • 1
  • 13
  • 16
  • Curiously, I already tried this! When I reload the Android browser, it doesn't appear in the 2nd instance of the script. – micah Sep 28 '12 at 01:28
  • try putting alert(isAndroid); before the second instance to see if the variable is still set at that point in the document. Make sure the variables are declared outside of any other functions so they are global. – user1289347 Sep 28 '12 at 01:29
  • OH, I found my problem. I was targeting the same ID as the first one. This is the solution! Thank you so much for replying! :) – micah Sep 28 '12 at 01:32
  • Regarding the statement `redefining them can cause errors`: declarations are processed before any code is executed, so multiple declarations of the same identifier in the same context have no adverse effects. – RobG Sep 28 '12 at 01:54
  • @user1289347 I was curious if this method could be extended so that it detects Gingerbread vs. Ice Cream Sandwich. I assume I'd need to extend the 2nd variable to make that happen, correct? – micah Sep 28 '12 at 02:32
  • @micah yes you should be able to get it from that string http://stackoverflow.com/questions/5293394/get-android-os-version-from-user-agent – user1289347 Sep 28 '12 at 02:35
  • @user1289347 great! now i just gotta figure out how to get it into code properly and i can detect the OS versions. i appreciate it! – micah Sep 28 '12 at 02:41