Forums | MacLife

Antonio · 2009-02-13 3:44 pm

Hiya!

I have a live test version of my site up, and everything's nearly in place, but there's this one thorn in my side right now, and that's IE's handling, or lack thereof, of my unobtrusive javascript.
If you have a look at the site in FF or Safari, you'll notice the skiplinks and breadcrumbs work perfectly, but in IE, neither works and my breadcrumbs don't render at all.
I'm using an event handler to replace window.onload- I thought that might be the culprit, but no. Removing that and having the breadcrumbs widget fly solo (taking all the other JS stuff out) via windows.onload
didn't work. Neither did adding it to the body's onload attribute in the markup. I thought it might also be the png fix in the conditional comment, so I tried removing that. Nada!
All my javascript files are similarly written, so if I can get one to work, they all should, and if not, well, not.

Any help figuring this out would be greatly appreciated. I've googled for some hours, and still haven't found a solution.

So, I'll leave you with the event handler I'm using (it's pretty typical), plus the code for the breadcrumbs, and the code for one other widget, so you get a feel for where I'm at.
(I've written all but the png fix, just to say if you look it up and it looks different, there's a reason).
If need be, I'll once again remove the png fix in the conditional comment as it may make it easier to examine the issue separately.

Thanks again. I know my javascript isn't perfect, but I think it's at least good enough to work.

If all else fails, I suppose I could add another conditional comment, nested with an li in the breadcrumbs ul tags:
"I'm sorry... IE just plain doesn't like me. Try coming back with Firefox?"

The live test site...

The eventHandler:

Code:

var event = {
    
    addEvent: function(obj, type, fn) {
        
        if (obj.addEventListener) {
            
            obj.addEventListener(type, fn, false);
            return true;
    
        } else if (obj.attachEvent) {
            
            var r = obj.attachEvent('on' + type, fn);
            return r;
    
        } else {
            
            return true;
        }
    
    }
    
}

The breadcrumbs:

Code:

/* an unobtrusive script to add breadcrumb navigation to the header and footer of each page */

event.addEvent(window, 'load', breadcrumbs);

function breadcrumbs() {
    
    /* get elements (ul) by classname */
    var crumbTag = document.getElementsByTagName("ul");
    
    for (var i=0; i < crumbTag.length; i++) {
        
       if (crumbTag[i].getAttribute("class") == "breadcrumbs") {
    
    var root = "/";
    var crumbSplitter = " / ";
    
    var path = location.href;
    var protocol = path.substring(0, path.indexOf("://") +3);
                           path = path.substring(path.indexOf("://") +3); 
    var siteName = path.substring(0, path.indexOf(root));
                           path = path.substring(path.indexOf(root));          
     
                           path = path.substring(path.indexOf(root) + root.length);
                   
    /* clean up the URL - cut it off at the question mark */               
    var questionMark = "";
    
                   if (path.indexOf("?") > -1) {
                    
                    questionMark = path.substring(path.indexOf + ("?"));
                    path = path.substring(0, path.indexOf("?"));
                    
                   }               
                                         
    var labels = new Array();
    var crumbTrail = path.split("/");
    var tracePath = root;
    var crumbs = 0;
    
    /* build the list items, append with anchor tags, and do it again for each new subpage */
       
    var crumb = document.createElement("li");
        crumb.setAttribute("class", "crumb");
                
                var label = "home";
                
                if ((labels[root] != null)) {
                    
                    label = labels[root];
                }
                
                if ((labels[tracePath] != null)) {
                    
                    label = labels[tracePath];
                    
                } 
                  
                if ((0 < crumbTrail.length) && (crumbTrail[0] != "index.html") && (crumbTrail[0] != "")) {
                    
                var crumbLink = document.createElement("a");
                      crumbLink.href = protocol + siteName + tracePath;
                      crumbLink.appendChild(document.createTextNode(label));
                      crumb.appendChild(crumbLink);
                    
                } else {
                    
                    crumb.appendChild(document.createTextNode(label));
                }
                
        crumbTag[i].appendChild(crumb);
        
        crumbs++;
        
        for (var crumbCanister = 0; crumbCanister < crumbTrail.length; crumbCanister++) {
            
            tracePath += crumbTrail[crumbCanister];
            
            if (crumbCanister + 1 < crumbTrail.length) {
                 
                tracePath += "/";
            }
            
            if ((crumbTrail[crumbCanister] != "") && (crumbTrail[crumbCanister].indexOf("index.html") == -1)) {
                
            var crumb = document.createElement("li");
                crumb.setAttribute("class", "crumb");
                
            if (crumbs > 0) {
                
                crumb.appendChild(document.createTextNode(crumbSplitter));
                
            }
            
            var label = crumbTrail[crumbCanister];
            
            if ((labels[crumbTrail[crumbCanister]] != null)) {
                
                label = labels[crumbTrail[crumbCanister]];
                
            }
            
            if ((labels[tracePath] != null)) {
                
                label = labels[tracepath];
                
            }
            
            if ((crumbCanister +1 < crumbTrail.length) && (crumbTrail[crumbCanister + 1] != "index.html") && (crumbTrail[crumbCanister +1] != "")) {
                
                var crumbLink = document.createElement("a");
                      crumbLink.href = protocol + siteName + tracePath;
                      crumbLink.appendChild(document.createTextNode(label));
                      crumb.appendChild(crumbLink);
                    
            } else {
                
                crumb.appendChild(document.createTextNode(label));
                
            }
            
           crumbTag[i].appendChild(crumb);
            
            crumbs++;
            
            }
            
        }
        
        }
    }
    
    
}

And just one more... a widget I threw together for journal entries:

Code:

/* a social bookmarking widget authored by Antonio Malcolm, copyleft 2009, all wrongs reserved, released under a GPLv3 license */

event.addEvent(window, 'load', shareIt);

function shareIt() {
    
    var imageDirectory = "images/socialBookmarks/"; /* change this to wherever you decide to store the icon images */
    
    var pageURL = document.url;  
      var encodedPageURL = escape(pageURL);
      encodedPageURL = encodedPageURL.replace("+", "%2B");
      encodedPageURL = encodedPageURL.replace("/", "%2F");
      
      var pageTitle = document.title;  
      var encodedPageTitle = escape(pageTitle);
      encodedPageTitle = encodedPageTitle.replace("+", "%2B");
      encodedPageTitle = encodedPageTitle.replace("/", "%2F");
    
    var digg = document.getElementById("digg");
    var propeller = document.getElementById("propeller");
    var stumbleupon = document.getElementById("stumbleupon");
    var delicious = document.getElementById("delicious");
    var technorati = document.getElementById("technorati");
    
    var diggImage = null;
    var propImage = null;
    var stumImage = null;
    var deImage = null;
    var techImage = null;
    
    var diggLink = document.createElement("a");
                      diggLink.href = "http://digg.com/submit?phase=2&url=" + encodedPageURL + "&title=" + encodedPageTitle;
                      diggImage = document.createElement("img");
                      diggImage.src = imageDirectory + "diggIcon.png";
                      diggLink.appendChild(diggImage);
                      digg.appendChild(diggLink);
                      
   var propLink = document.createElement("a");
                      propLink.href = "http://propeller.com/submit/?U=" + encodedPageURL + "/&T=" + encodedPageTitle;
                      propImage = document.createElement("img");
                      propImage.src = imageDirectory + "propellerIcon.png";
                      propLink.appendChild(propImage);
                      propeller.appendChild(propLink); 
    
    var stumLink = document.createElement("a");
                      stumLink.href = "http://www.stumbleupon.com/submit?url=" + encodedPageURL + "&title=" + encodedPageTitle;
                      stumImage = document.createElement("img");
                      stumImage.src = imageDirectory + "stumbleIcon.png";
                      stumLink.appendChild(stumImage);
                      stumbleupon.appendChild(stumLink);
    
    var deLink = document.createElement("a");
                      deLink.href = "http://del.icio.us/post?url=" + encodedPageURL + "&title=" + encodedPageTitle;
                      deImage = document.createElement("img");
                      deImage.src = imageDirectory + "deliciousIcon.png";
                      deLink.appendChild(deImage);
                      delicious.appendChild(deLink);
    
    var techLink = document.createElement("a");
                      techLink.href = "http://technorati.com/faves?add=" + encodedPageURL;
                      techImage = document.createElement("img");
                      techImage.src = imageDirectory + "technoratiIcon.png";
                      techLink.appendChild(techImage);
                      technorati.appendChild(techLink);
                      
}

Sorry if that's a lot, but I'd rather give too much info than not enough. Thanks again.

Antonio · 2009-02-13 9:27 pm

EDIT: I'm tinkering with the app right now, so if you pay it a visit, and notice some changes here and there, bear with me smile

sturner · 2009-02-14 1:59 am

Do you have the most upto date java on your windows box?

Antonio · 2009-02-14 2:14 am

I have the most up to date Java on my Virtual Box install of Windows XP, and one of my coworkers and I tested it out on his Windows workstation, which is up-to-date as well.

It still wouldn't prevent IE from running anything javascript (and I have no client-side java in my app).

I'm just a bit perplexed, as there's nothing wrong in my javascript code that I can find, and I've been through it over and over again with a fine tooth comb.

But maybe I need someone from outside the project, to look at it with fresh eyes? That happens sometimes.

Also, I realize IE is funny about the general environment, the XHTML in general, the declaration, the contentType, etc, etc... so I guess I'll be looking into that next sad
EDIT: Played around with that, and nope...

Last edited by Antonio (2009-02-14 3:04 am)

Booksley · 2009-02-14 9:48 am

Your site also doesn't like IE7...

Antonio · 2009-02-14 10:24 pm

Booksley wrote:
Your site also doesn't like IE7...

My site 'likes' IE 6 & 7 just fine, they just won't render my javascript widgets.
In fatc, the only noticeable difference I've found between the two is that 7 can render transparent pngs without a hack of some sort. Both required the same stylesheet to straighten the layout.

Last edited by Antonio (2009-02-15 9:17 am)

Antonio · 2009-02-14 10:46 pm

Well, WELL, I was wrong about something...

IE renders my socialbookmarking widget just fine!

Entry with socialbookmarking widget

I need to look at things a little differently now, to figure out why the one works and not the others. I've taken the same basic approach to coding them all.

If nothing else, I know it's not the event handler or the png fix...

Last edited by Antonio (2009-02-14 11:45 pm)

Antonio · 2009-02-15 9:29 am

OKAY,
I found my answers, none of which I like, but am just dealing with anyhow.

Got the breadcrumbs working, or at least a version for IE, because it doesn't seem to like getAttribute or setAttribute.

Of course, my options are:

1.) create a bunch of booleans within the widget(s) to test for IE

2.) break standards and write shoddy javascript which works in everything but is complete garbage

OR

3.) create separate scripts for IE and use server-side browser detection to test for IE.

And I've decided to use the third solution. Browser sniffing isn't what I wanted to resort to, but it's the best long-term solution, I think. It would be a huge pain in the arse to sift through a javascript file, especially a longer one, with a bunch of if/else statements if I ever need to update something. It's a pain, in the first place, to have to go in and add those. Better just to copy the code into a new file, make a few edits, then write JSTL tags which detect the browser and serve up the corresponding js. That should also keep page load times to a minimum, versus adding in a bunch of code which only makes one file much longer, for the sake of a one-size-fits-all solution.

And if IE 8 manages to get it right, I can just get rid of all that and use the compliant scripts, anyhow.
Or one can hope...

Last edited by Antonio (2009-02-15 9:30 am)

Nefarious · 2009-02-15 10:49 am

#3 does seem the best way.

It was interesting following the evolution of the thread.

Antonio · 2009-02-15 10:51 am

Nefarious wrote:
#3 does seem the best way.

It was interesting following the evolution of the thread.

I'm almost afraid to ask...

How so?

At least someone was following it. There didn't seem to be much response.

Nefarious · 2009-02-15 11:19 am

I like #3 for the simplicity's sake. From the client side, there's less going on. So, there should be fewer bugs.

I don't see any chance for IE to join the standards. So, two sets of code is enough. IE and the rest.

I'm not a modern coder, so for what its worth, these are my conjectures.

Antonio · 2009-02-15 11:23 am

Heh, I was asking more of why the evolution of the thread was interesting lol

As for the rest, I agree whole-heartedly. IE is a bastard to work with. Otherwise, if it's compliant, every other browser just works.

Nefarious · 2009-02-15 12:09 pm

ah, hard to say why it was interesting. it just was. smile

b_dubb · 2009-04-04 5:10 pm

interesting because how often do outsiders get a look into someone's head as they try to solve a problem over time. i frequently have this experience when looking at my own threads as well as others

b

Forums | MacLife

#1 2009-02-13 3:44 pm

IE no likey my javascript :o/ Ideas, anyone?

Code:

Code:

Code:

#2 2009-02-13 9:27 pm

Re: IE no likey my javascript :o/ Ideas, anyone?

#3 2009-02-14 1:59 am

Re: IE no likey my javascript :o/ Ideas, anyone?

#4 2009-02-14 2:14 am

Re: IE no likey my javascript :o/ Ideas, anyone?

#5 2009-02-14 9:48 am

Re: IE no likey my javascript :o/ Ideas, anyone?

#6 2009-02-14 10:24 pm

Re: IE no likey my javascript :o/ Ideas, anyone?

Booksley wrote:

#7 2009-02-14 10:46 pm

Re: IE no likey my javascript :o/ Ideas, anyone?

#8 2009-02-15 9:29 am

Re: IE no likey my javascript :o/ Ideas, anyone?

#9 2009-02-15 10:49 am

Re: IE no likey my javascript :o/ Ideas, anyone?

#10 2009-02-15 10:51 am

Re: IE no likey my javascript :o/ Ideas, anyone?

Nefarious wrote:

#11 2009-02-15 11:19 am

Re: IE no likey my javascript :o/ Ideas, anyone?

#12 2009-02-15 11:23 am

Re: IE no likey my javascript :o/ Ideas, anyone?

#13 2009-02-15 12:09 pm

Re: IE no likey my javascript :o/ Ideas, anyone?

#14 2009-04-04 5:10 pm

Re: IE no likey my javascript :o/ Ideas, anyone?

Board footer