PDA

View Full Version : Code that works for FF, not IE



Agent Moose
12-22-2007, 11:11 PM
I have created a Code Index, that basicly takes topics from a page and sorts them to make it easy for viewers to read. But, it only works on FF, anyone know why?


function code_index_v3() {
$(function() {
if(location.href.match(/.smcindex/i)){
var title = "SMC Code Index V3"
var board = "8"
var index = "smcindex"
};
if(location.href.match(/.zbindex/i)){
var title = "ZetaBoard Code Index V3"
var board = "27"
var index = "zbindex"
};
if(location.href.match(/.smcindex/i)||location.href.match(/.zbindex/i)){
document.title = title;
navigation = $("div.nav").html();
pages = $("tr td.middletext").html();
online = $("tr.windowbg2 td[colspan='8']").html();
$("#bodyarea,img[alt='New'],#news_box").hide();
$("#bodyarea").before("<br/><div class='nav' style='font-size: smaller; margin-bottom: 2ex; margin-top: 2ex;'>"+navigation+" > <b><a class='nav' href='"+location.pathname+"/index.php/board,"+board+".0."+index+"/sort,subject.html'>Code Index</a></b></div><br/><center>Search the Code Index<form id='searchform' name='searchform' accept-charset='ISO-8859-1' method='post' action='http://smcodes.smfforfree3.com/index.php?action=search2'><input type='text' size='40' name='search'/><input id='brd"+board+"' type='hidden' checked='checked' value='"+board+"' name='brd["+board+"]'/><input type='submit' value='Search' name='submit'/></form></center><br/><div class='tborder'><div class='catbg' style='padding: 5px 5px 5px 10px;'>"+title+" - <span class='smalltext'>Sort By: <a href='"+location.pathname+"/board,"+board+".0."+index+"/sort,replies/desc.html'>Replies</a> | <a href='"+location.pathname+"/board,"+board+".0."+index+"/sort,views/desc.html'>Views</a> | <a href='"+location.pathname+"/board,"+board+".0."+index+"/sort,subject.html'>Subject</a></span></div><div><table width='100%' cellpadding='1' cellspacing='0'><tr><td class='titlebg2' colspan='5'>"+online+"</td></tr></table></div><div><table width='100%' cellpadding='1' cellspacing='0'><tr><td class='titlebg2' colspan='5'>"+pages+"</td></tr></table></div><div><table width='100%' border='0' cellspacing='1' cellpadding='4' id='code'></table></div><div><table width='100%' cellpadding='1' cellspacing='0'><tr><td class='titlebg2' colspan='5'>"+pages+"</td></tr></table></div></div>")
var codes = $("span");
for(s=0;s<codes.length;s++){
if(codes[s].id.match(/msg/i)&&$(codes[s]).parent("td.windowbg").html()){
var topic = $(codes[s]).html();
var creator = $(codes[s]).parent().next().html();
document.getElementById("code").innerHTML += "<tr><td class='windowbg' width='50%'>"+topic+"</td><td class='windowbg' width='50%'>"+creator+"</td></tr>";
};};
$("a").each(function(){
if(this.href.match(/\/sort,/i)) {
this.href = this.href.replace("/sort,subject","."+index+"/sort,subject");
this.href = this.href.replace("/sort,starter","."+index+"/sort,starter");
this.href = this.href.replace("/sort,replies","."+index+"/sort,replies");
this.href = this.href.replace("/sort,views","."+index+"/sort,views");
};});
$("a").each(function(){if(this.href.match("#bot")&&this.href.match("."+index+"/")){$(this).hide(); }});
};
$("a").each(function(){if(this.href.match(/board,/i)){
this.href = this.href.replace("board,23.0.html","board,8.0.smcindex/sort,subject.html");
this.href = this.href.replace("board,28.0.html","board,27.0.zbindex/sort,subject.html");
};});
});};
code_index_v3();

jscheuer1
12-23-2007, 09:06 AM
What's $? There are various frameworks that use that, each somewhat differently. It looks like it's returning the object, which in some places in the code looks like overkill. But, without the full code, there is no way to be sure. Even then it could be a nightmare tracking it down.

If you provide a link to a demo of the problem, that would probably be our best shot at helping.

BYK
12-23-2007, 10:47 AM
The framework here is the jQuery framework I think. And since jQuery is completely cross-browser as far as I know, it should have something with your custom codes.

jscheuer1
12-23-2007, 05:36 PM
The framework here is the jQuery framework I think. And since jQuery is completely cross-browser as far as I know, it should have something with your custom codes.

The prototype.js framework, or at least some of its optional modules use $ as well, perhaps other frameworks. So, this is not as simple as you make out. Probably it isn't the specific framework that is to blame, but how it is being used or even some other part of the code. It could be due to having two conflicting frameworks associated with the page though.

These are just a few of the reasons why a link to the problem page itself would be the best bet at resolving this.

BYK
12-23-2007, 07:35 PM
I never told that I can solve the problem without the link to the problem page ;)

jscheuer1
12-23-2007, 08:12 PM
I never told that I can solve the problem without the link to the problem page ;)

I never said you did. My post was directed to Agent Moose. That is who we are trying to help here. :p

BYK
12-23-2007, 08:40 PM
Sorry, with a quote from me, I thought you were referring to me :)

So, hey Agent Moose, give us the link man :D

xyzweb
12-24-2007, 09:02 PM
I have created a Code Index, that basicly takes topics from a page and sorts them to make it easy for viewers to read. But, it only works on FF, anyone know why?

Yes, you have encountered the IE .innerHTML Table bug.

For info on this bug, and what elements it will affect (e.g. not work at all on) see this bug report.

http://webbugtrack.blogspot.com/2007/12/bug-210-no-innerhtml-support-on-tables.html

http://webbugtrack.blogspot.com/2007/12/bug-210-no-innerhtml-support-on-tables.html

good luck!

jscheuer1
12-24-2007, 10:08 PM
Yes, you have encountered the IE .innerHTML Table bug.

http://webbugtrack.blogspot.com/2007/12/bug-210-no-innerhtml-support-on-tables.html

Very cool, um knowing that, not the fact that the bug exists. As an illustration/test, I used this in the body:


<body>
<table><tr>
<td>Hi</td>
</tr>
</table>
<input type="button" onclick="test();">
</body>

These three test functions failed:


function test(){
document.getElementsByTagName('table')[0].innerHTML+='<tr><td>Bye</td></tr>';
}


function test(){
document.getElementsByTagName('table')[0].firstChild.innerHTML+='<tr><td>Bye</td></tr>';
}

which (if it worked) would have been adding to the (assumed) tbody using innerHTML;


function test(){
var tr=document.createElement('tr');
var td=document.createElement('td');
td.appendChild(document.createTextNode('Bye'));
tr.appendChild(td);
document.getElementsByTagName('table')[0].appendChild(tr);
}

which attempts to append directly to the table using the DOM.

This worked:


function test(){
var tr=document.createElement('tr');
var td=document.createElement('td');
td.appendChild(document.createTextNode('Bye'));
tr.appendChild(td);
document.getElementsByTagName('table')[0].firstChild.appendChild(tr);
}

appending to the (assumed) tbody using the DOM.