Difference between Firefox and IE7 results

[Wormopolis]

Description: When writing code, I have noticed that the attributes inside of HTML elements seems to change order depending on whether viewing with IE or Firefox. Is this a Proboards manipulation of the browser?

I wrote code to change the names of certain members on my board into "mugshots". Their names are replaced in the "Users Online" section, the member list, and at the top of their profiles. But I had to write twice the code, in order to fish out particulars like username and userclass from the TD elements, depending on which browser it was to be viewed on.

My question is, is there a way to standardize the format of the HTML results?

Experienced By: Everyone

Web Browser: Not sure

Forum URL: tbserialkillers.proboards83.com

Additional Information: I have images stored in photobucket to show what I have been modifying.

[Michael]

Could you show me the codes & let me know what you're trying to do?

There aren't really many differences, apart from IE capitalizing everything, and one or two others.

[Wormopolis]

ok.. these are pics of the results (I guess delete the pics if this isnt allowed).





I have the code working in both IE and firefox.. but I had to write 2 versions of it. I checked for navigator.appname at the beginning, and if it was IE then it did one thing, and if not it did something else (I only tested in IE and Firefox).

My issue was that everything I did in IE came out great but produced horrible results in FF. The attributes and elements inside of a < td > tag were in different orders. the username would be in a different place in IE than it would be in FF if I looked at the innerHTML of the td itself.

because of this difference in elemt and attribute placement, the only way I could parse out the information that I needed was to write several IF statements based on the result of navigator.appname.

Perhaps there answer is just a resounding "live with it", but I was curious if there was a way to make HTML results the same no matter what browser.

If you are REALLY dependant on the code to be poste here.. I just need to clean it up because it is full of bug-traps and commented alerts so I could troubleshoot. I would just need to clean it up before posting. The URL in the first post is the site this code is being implemented on.. and yes.. it has a serial killer theme.

[Michael]

So you just wanted to insert an image ABOVE the person's name link?

That can be done in a method that works in both.

I'd like to see your code (in it's current form is fine - don't worry!)... but please, use tags! :)

I can then perhaps suggest some useful tips! ;)

[Wormopolis]

Yes. I wanted to replace the names of certain members of the site with mugshots. Only if they werent in the default group however (which is why I had to parse out userclass). Since I had to store all the mugshots in my photobucket acct, I had to parse out their username (since it never changed) and used it to form a URL to fetch from photobucket. These mugshots arent just specific to a single user. EVERYONE sees these pictures no matter what userclass they are.

Here is the code. I realize it could be rewritten for efficiency (merginf the loops), but it was written in increments so I could make sure each section worked. As I said.. I will clean it up eventually if I decide I should post it for someone else to use on their own site. There is no comments as to what variables do what so it will seem rather obfuscated.


<script type="text/javascript">
<!--
//alert(navigator.appName);
var grr=0;
if (navigator.appName!="Microsoft Internet Explorer") grr=1;

var iTabletd = document.getElementsByTagName("td");
var keep = -1;
for(t=0; t<iTabletd.length;t++){
if(iTabletd[t].innerHTML.match(/Most users online/)&& !(iTabletd[t].innerHTML.match(/TABLE/))){
//document.write("<br>"+t);
//alert(iTabletd[t].innerHTML);
keep=t;
}

if (keep!=-1) {
iTabletd[keep].setAttribute("id","userholder");
}

}
if (keep != -1) {
//alert(keep);
var pleasework=""+iTabletd[keep].innerHTML;
var regex = /\<BR\>/i;
var pleaseworkalso= pleasework.split(regex);
//alert(pleasework);
//alert(pleaseworkalso[1]);
var temp2=""+pleaseworkalso[1];
//alert(""+temp2);
regex= /\<A/i
var names_array= temp2.split(regex);
var k = names_array.length;
//alert(k);
var mugs_array=new Array(k);
shots_array=new Array(k);
//alert(names_array);
for(i=0;i<k;i++){
//document.write(names_array[i].length+"<br>");
if (names_array[i].length>7) {
var spt= names_array[i].indexOf("class");

var temp=names_array[i].substring(spt+11+grr, spt+12+grr);
//alert(temp);
var group_num = parseInt(temp);
//alert(group_num);
//document.write(group_num+"<br>");
names_array[i]="<A"+names_array[i];
regx=/\(invisible\)/;
interm=names_array[i].replace(regx,"")
names_array[i]=interm;
//alert(names_array[i]);
var frm= names_array[i].indexOf("user=")+5;
if (grr==0){
var to=names_array[i].indexOf('">');
} else {
var to=names_array[i].indexOf('" class');
}
var u_name=names_array[i].substring(frm,to);
//alert(u_name);
if (group_num > 0) {
mugs_array[i]="http://i280./kk168/SKBundy/"+u_name+"_mug.jpg";
} else {
mugs_array[i]="http://i280./kk168/SKBundy/silhouette_question.gif";

}

shots_array[i-grr]='<span style="width:100px;float:left;margin:0;padding:10px;text-align:center"><center> <image src="'+mugs_array[i]+'"><br>'+ names_array[i]+'</center></span>';
}
}
var final = pleaseworkalso[0]+'<br>'+shots_array.join("")+"</FONT>";
var final2=pleaseworkalso[0]+'<span style="display:inline"><br>';
for (m=0;m<shots_array.length;m++) {
final2+=shots_array[m];
}
final2+="</span></FONT>";

//alert(""+final);


iTabletd = document.getElementsByTagName("td");
for(t=0; t<iTabletd.length;t++){
if(iTabletd[t].innerHTML.match(/Most users online/)&& !(iTabletd[t].innerHTML.match(/TABLE/))){
//document.write("<br>"+t);
//alert(iTabletd[t].innerHTML);
keep=t;
}
}
iTabletd[keep].innerHTML=final;

}
//http://i280./kk168/SKBundy/admin_mug.jpg
//class=group1 href="/index.cgi?action=viewprofile&user=admin">SK-Bundy,
//class=group4 href="/index.cgi?action=viewprofile&user=miller">SK-Mîllêr (invisible)


//-->
</script>

<script type="text/javascript">
<!--
if (location.href.match(/action=members/i)) {
//alert(location.href);
var iTabletd=document.getElementsByTagName("td");
for (d=0;d<iTabletd.length;d++) {
if (iTabletd[d].innerHTML.match(/viewprofile&/i)&&!(iTabletd[d].innerHTML.match(/TABLE/i))&&!(iTabletd[d].innerHTML.match(/group0/i))) {
//alert(iTabletd[d].innerHTML);
if (navigator.appName=="Microsoft Internet Explorer") {
var u_name_s=iTabletd[d].innerHTML.indexOf("user")+5;
var u_name_e=iTabletd[d].innerHTML.indexOf("<FONT color")-2;
} else {
var u_name_s=iTabletd[d].innerHTML.indexOf("user")+5;
var u_name_e=iTabletd[d].innerHTML.indexOf('class="group')-2;
}
var u_name=iTabletd[d].innerHTML.substring(u_name_s,u_name_e);
var mug_name="http://i280./kk168/SKBundy/"+u_name+"_mug.jpg";
final='<center><image src="'+mug_name+'"><br>'+iTabletd[d].innerHTML+'</center>';
//alert(final);
//alert(u_name+" "+u_name_s+" "+u_name_e);
iTabletd[d].innerHTML=final;
}
}
}

//<td class="windowbg" bgcolor="101010"><font size="2"><input type="checkbox" name="delete-eijk" value="1"> <a href="/index.cgi?action=viewprofile&user=eijk" class="group7"><font color="FFFFFF">Eijk</font></a></font></td>
//-->
</script>


<script type="text/javascript">
<!--
if (location.href.match(/action=viewprofile/i)) {
//alert(location.href);
var iTabletd=document.getElementsByTagName("td");

var group_num2=1;
for (d=0;d<iTabletd.length;d++) {
if (iTabletd[d].innerHTML.match(/viewprofile/i)&&!(iTabletd[d].innerHTML.match(/TABLE/i))&&(iTabletd[d].innerHTML.match("class="))) {
if (navigator.appName=="Microsoft Internet Explorer") {
var group_s=iTabletd[d].innerHTML.indexOf("class=")+11;
var group_e=iTabletd[d].innerHTML.indexOf("href")-1;

} else {
var group_s=iTabletd[d].innerHTML.indexOf("class=")+12;
var group_e=iTabletd[d].innerHTML.indexOf("<font")-2;
}

group_num2=parseInt(iTabletd[d].innerHTML.substring(group_s,group_e));
//alert(group_num2 + " " + group_s + " " + group_e);

//alert(iTabletd[d].innerHTML);
}
}
for(d=0;d<iTabletd.length;d++) {
if (iTabletd[d].innerHTML.match(/view profile/i)&&!(iTabletd[d].innerHTML.match(/TABLE/i))&&(iTabletd[d].innerHTML.match(/class/i))&&(group_num2>0)) {
//alert(iTabletd[d].innerHTML);
if (navigator.appName=="Microsoft Internet Explorer") {
var u_name_s=iTabletd[d].innerHTML.indexOf("(username: ")+11;
var u_name_e=iTabletd[d].innerHTML.indexOf("</FONT>")-1;
} else {
var u_name_s=iTabletd[d].innerHTML.indexOf("(username: ")+11;
var u_name_e=iTabletd[d].innerHTML.indexOf("</font>")-1;
}
var u_name=iTabletd[d].innerHTML.substring(u_name_s,u_name_e);
var mug_name="http://i280./kk168/SKBundy/"+u_name+"_mug.jpg";
var imag = iTabletd[d].getElementsByTagName("img");
var bgImag="http://i280./kk168/SKBundy/452177548_bf4e27c49e.jpg";
iTabletd[d].style.backgroundImage='url("'+bgImag+'")';

imag[0].src=mug_name;
//final='<center><image src="'+mug_name+'"><br>'+iTabletd[d].innerHTML+'</center>';
//alert(final);
//alert(u_name+" "+u_name_s+" "+u_name_e);
//iTabletd[d].innerHTML=final;
}
}
}

//-->
</script>



[Michael]

So please correct me if I'm wrong:

You take a link which links to a person's profile.
Check if they're in a certain group (which one?)
If they're in the group:
Give them a specified mugshot based on username
if not
give them a generic one.

Then insert the mugshot on a line above their link?

[Wormopolis]

I told ya it was obfuscated.

Each section does its own thing based on the location.HREF.

if on the main page, it looks for the Users online section and parses out the different names (which are actually < A > tags containing links to profiles). once it fishes out the userclass and the username for EACH name in the list, it either puts a mugshot of that person or a generic image if they are "victim" ranked". the URL of the image is formed from the username.

if they are looking at the member list, it goes down each row looking at the first cell and does pretty much the same thing as above, except is the class is victim is doesnt add any picture.

if looking at a particular profile, it just squeezes a picture to the left of the title bar. it also changed the background of the title bar to a creepy blue woods picture (aesthetics). "victim" classed users dont have any modification done.


all mugshots are pulled from a photobucket acct.

All of this code is working.. My question was related to why IE and Firefox put things in a different order so that I had to use additional if statements to parse out information. Was this a proboards thing, or was it just simply how the browsers chose to interpret?

[Michael]

The thing is you have done it in a way that isn't wise - you have in essence split up the innerHTML of the cell and checked it - causing you to use RegExp checks and splitting. However, if you use proper JS, you will be able to better do the code, and in essence, cut it down to a quarter of the size!

[Wormopolis]

I never said it was efficient..

I have seen the code from the code index that replaces usernames with images.. but I didnt want it to replace everywhere.. just in the sections I chose.

I know I could merge a lot of the loops together to decrease size. I needed to extract the username so I didnt have to keep a long list of every username in the footer. this just grabs whatever usernames are actually there, makes the URLs, and replaces what I want it to.

the splitting had to be done in order to seperate the users online from each other so I could replace them with <span> elements. I still wanted the usernames to appear directly under the pictures.

based on your reaction, I am certain that the code is too innefficient to submit for public consumption, but I had posted it just under the curiousity of why IE and FF posted different innerHTML results when tested. Do not worry, I wont be submitting this to the code base.

[Michael]

Ok!

[Wormopolis]

dang... I was a noob...

bask upon the fact that everyone starts somewhere!

[Tumbleweed]

What's even sadder is you knew more then, about javascript, than I do now.

[Wormopolis]

Yeah Michael was completely right about how I did it. I made it way hader then I needed it to be. funny enough, this code still ran on the TBSK site up until I converted it to v5 to see how it would be affected.

most of the javascript I knew at that point was all I could emember back from years ago when I played around with it at IBM. I wrote some dynamic calendars and other things and even submitted them to some JSlibraries. its like going back and reading a story you wrote when you were a kid and marvelling about how much you changed.

I suspect in a few years, I will be where Chris and Eton and Peter (and some others) are now.

[Tumbleweed]

I doubt it'll be that long but yes, those guys are pretty brilliant. I do know enough, to know that, but you are right behind them. 
How is your V5 site going? Are you going to try to replicate what your V4 looks like or start anew? Just curious as your V4 site is pretty specialized.

[Wormopolis]

wormocodes will take a major overhaul, BUT a lot of what I had in there I can do in the templates now. the menu at the top might be tricky to remake but I can always rewrite it as a plugin if I have to. about 40% of my codes arent even needed anymore because they became builtin features or just obsolete. I have been spending most my time on a test site for making plugins lately so I havent even started on it.