Script works perfectly on desktop, but fails(?) in iOS

chriskobar · March 1, 2012, 5:44pm

Using the great work of others, I have created a script to find links in a certain div on the page, store that info, and create new links/buttons in a footnote section (div) near the bottom of the page. The script also adds a class to external links (for CSS color coding) and capitalizes the first letter of the link within the “button” portion of the link. Works great on the desktop (Safari, Webkit…), but the script seems to oddly fail on iOS (iPhone 4S). The odder thing is that I’m not getting any error messages and, while no links are created in the rendered source, a space is rendered that would hold the new links, so somewhere along the way the iOS browser is identifying the height of the to-be-created links, yet not actually creating them. Very strange. Any ideas? Here’s the code:

The page can be viewed at: http://arlington.kritereon.com/index.php#!Watch

(Note that the #!Watch is added to help the browser more easily refresh the LESS files that use the LESS.js client-side compiler. This has had NO effect on anything else with iOS and it seems HIGHLY unlikely to have anything to do with this.)

!function( $ ){

// Footnotes
/*
Title:			footnote printing
Author: 		Laurens van Heems
Blog post: 		http://blog.vicompany.nl/printing-links-better-with-jquery
Comment:		Added and modified by Charlie Morris on 9/13/2011
				I changed the thisLink variable so that it grabs the whole URI, not
				just the relative link.  I also addded the ability to ignore certain
				anchors with the class "ignore"
*/
//==================================================

function footnoteLinks(container, target) {

    // only append list if there are any links
    if($(container + " a").length != 0){
        // append list to the target
        $(target).append("&lt;ol id='printlinks'&gt;&lt;/ol&gt;");
    }

    var myArr = []; // to store all the links
    var thisLink;   // to store each link individually
    var thisLinkText; // to store the text of each link individually
    var thisClass;   // to store each link's class individually
    var num = 1; // to keep count

    // loop trough all the links inside container
    $(container + " a").each(function(){
        thisLink = $(this).get(0).href;
        thisLinkText = $(this).text();
        thisClass = $(this).attr("class");
        // if current link has class "ignore" then ignore it
        if(thisClass == "ignore"){
            return true;
        }
        // if current link is not already in the list, add current link to the list
        if($.inArray(thisLink, myArr) == -1){
            //$(this).after("&lt;sup&gt;" + num + "&lt;/sup&gt;");
            $("ol#printlinks").append("&lt;li&gt;&lt;a href='" + thisLink + "'&gt;&lt;span class='footnotePills'&gt;" + thisLinkText + "&lt;/span&gt;&lt;span class='footnoteURI wrap'&gt;" + thisLink + "&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;");
            myArr.push(thisLink);
            num++;
        }else{
            //$(this).after("&lt;sup&gt;" + parseInt($.inArray(thisLinkText, thisLink, myArr) + 1) + "&lt;/sup&gt;");
        }
    });
}

// look for links in first argument, copy the to second argument
footnoteLinks(".articles", ".footnotelinks");

// check to see if link is external and, if so, add a class
$("a[href*='http://']:not([href*='"+location.hostname.replace
       ("www.","")+"'])").each(function() {
   $(this).addClass('externalLink');
});

// Lettering
/*
Title:			Lettering.js
Author: 		Dave Rupert
URL:			http://daverupert.com/
Github:	 		https://github.com/davatron5000/Lettering.js
*/
//==================================================

$(".footnotePills").lettering();

// Text Wrapping
// Write script to add the "wrap" class to any text that begins with "http://"

}( window.jQuery )