AJAX

javascript works in IE but not working in firefox

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jan 2007

Posts: 5

Reputation: sendkamal is an unknown quantity at this point

Solved Threads: 0

sendkamal

Offline

Newbie Poster

javascript works in IE but not working in firefox

Jan 31st, 2007

Hello all,
I am new to javascript and cross-browsing. I have a XSLT generated HTML document which works fine ini IE and opera but have problems with firefox. I tried to debug with firebug but i have no idea what should i do next to fix the problem. I would greatly appreciate if anybody help me figuring this out. Here is my html document:

<html xmlns

leepXML="http://www.SleepXML.org">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SleepXML.com</title>
<STYLE type="text/css">
.infotable
{
font: Icon;
border: 1px Solid ThreeDShadow;
background: Window;
color: WindowText;
MARGIN-LEFT: 10px;
}
.issuetable
{
font: Icon;
border: none;
MARGIN-LEFT: 10px;
}
.records
{
color:gray;
}
b.entities
{
margin-left:10px;
text-align:right;
color:blue;
font-weight:normal;
}
.issuetitle
{
background: ButtonFace
border: 1px Solid ThreeDShadow;
cursor: default;
}
.header
{
background: ButtonFace
cursor: default;

}
.content
{
padding: 2px 5px;
}
.expandable
{
CURSOR: hand;
}
.collapsed
{
DISPLAY: none;
}
H2 {
color: black;
font-size: 12pt;
font-weight:bold;
cursor: default;
}
small
{
color:red;
}
.divstyle {
padding: 10px 10px 10px 10px;
border: 1px Solid ThreeDShadow
border-color: ButtonHighlight ButtonShadow
ButtonShadow ButtonHighlight;
margin: 2px auto 1px auto;
}
CAPTION.MYTABLE {

}
TABLE.MYTABLE {
Font: Icon;
border: 1px Solid ThreeDShadow;
background: Window;
color: WindowText;
width: 90%
}
TH.MYTABLE {
background: ButtonFace
cursor: default;
}

TR.MYTABLE {

}
TD.MYTABLE {
padding: 2px 5px;
}
.tabset_tabs {
margin:0px;
padding:0px;
list-style-type:none;
position:relative;
z-index:2;
white-space:wrap;
}
.tabset_tabs li {
margin:0px;
padding:0px;
display:inline;
}
.tabset_tabs a {
color:black;
background-color:ButtonFace ! important;
border-color: ButtonShadow ButtonHighlight
ButtonHighlight ButtonShadow;
text-decoration:none;
padding:0em 0.6em;
}
.tabset_tabs a:hover {
color:black! important;
background-color:white ! important;
}
.tabset_tabs a.active {
color:black ! important;
background-color:white ! important;
border-color: ButtonShadow ButtonHighlight
ButtonHighlight ButtonShadow;
border-left-width:1px;
cursor:default;
padding-top:1px;
padding-bottom:1px;
}
.tabset_tabs li.firstchild a {
border-left-width:1px ;
}
.tabset_content {
background: #f4f4f4;
z-index:2;
padding:0.5em 1em;
display:none;
}
.tabset_label { display:none; }
.tabset_content_active { display:block; }
@media aural{
.tabset_content,
.tabset_label { display:block; }
}
</STYLE>
<script language="javascript" type="text/javascript">
//***collapsible rows
function outliner() {
oMe = window.event.srcElement;
//get child element
var child = document.all[event.srcElement.getAttribute("child",false)];
//if child element exists, expand or collapse it.
if (null != child)
child.className = child.className == "collapsed" ? "expanded" : "collapsed";
}
function changepic() {
uMe = window.event.srcElement;
var check = uMe.src.toLowerCase();
if (check.lastIndexOf("expand.gif") != -1)
{
uMe.src = "collapse.gif";
}
else
{
uMe.src = "expand.gif";
}
}

//*** addclasskillclass.js
//*** This code is copyright 2002-2004 by Gavin Kistner and Refinery; www.refinery.com
//*** It is covered under the license viewable at http://phrogz.net/JS/_ReuseLicense.txt
//*** Reuse or modification is free provided you abide by the terms of that license.
//*** (Including the first two lines above in your source code satisfies the conditions.)
//***Adds a new class to an object, preserving existing classes
function AddClass(obj,cName){ KillClass(obj,cName); return obj && (obj.className+=(obj.className.length>0?' ':'')+cName); }
//***Removes a particular class from an object, preserving other existing classes.
function KillClass(obj,cName){ return obj && (obj.className=obj.className.replace(new RegExp("^"+cName+"\\b\\s*|\\s*\\b"+cName+"\\b",'g'),'')); }
//***Returns true if the object has the class assigned, false otherwise.
function HasClass(obj,cName){ return (!obj || !obj.className)?false

new RegExp("\\b"+cName+"\\b")).test(obj.className) }
//*** attachment.js
//***Cross browser attach event function. For 'evt' pass a string value with the leading "on" omitted
//***e.g. AttachEvent(window,'load',MyFunctionNameWithoutParenthesis,false);
function AttachEvent(obj,evt,fnc,useCapture){
if (!useCapture) useCapture=false;
if (obj.addEventListener){
obj.addEventListener(evt,fnc,useCapture);
return true;
} else if (obj.attachEvent) return obj.attachEvent("on"+evt,fnc);
else{
MyAttachEvent(obj,evt,fnc);
obj['on'+evt]=function(){ MyFireEvent(obj,evt) };
}
}
//The following are for browsers like NS4 or IE5Mac which don't support either
//attachEvent or addEventListener
function MyAttachEvent(obj,evt,fnc){
if (!obj.myEvents) obj.myEvents={};
if (!obj.myEvents[evt]) obj.myEvents[evt]=[];
var evts = obj.myEvents[evt];
evts[evts.length]=fnc;
}
function MyFireEvent(obj,evt){
if (!obj || !obj.myEvents || !obj.myEvents[evt]) return;
var evts = obj.myEvents[evt];
for (var i=0,len=evts.length;i<len;i++) evts[i]();
}
//*** addcss.js
// Add a new stylesheet to the document;
// url [optional] A url to an external stylesheet to use
// idx [optional] The index in document.styleSheets to insert the new sheet before
function AddStyleSheet(url,idx){
var css,before=null,head=document.getElementsByTagName("head")[0];
if (document.createElement){
if (url){
css = document.createElement('link');
css.rel = 'stylesheet';
css.href = url;
} else css = document.createElement('style');
css.media = 'all';
css.type = 'text/css';
if (idx>=0){
for (var i=0,ct=0,len=head.childNodes.length;i<len;i++){
var el = head.childNodes[i];
if (!el.tagName) continue;
var tagName = el.tagName.toLowerCase();
if (ct==idx){
before = el;
break;
}
if (tagName=='style' || tagName=='link' && (el.rel && el.rel.toLowerCase()=='stylesheet' || el.type && el.type.toLowerCase()=='text/css') ) ct++;
}
}
head.insertBefore(css,before);
return document.styleSheets[before?idx:document.styleSheets.length-1];
} else return alert("I can't create a new stylesheet for you. Sorry.");
}
// e.g. var newBlankSheetAfterAllOthers = AddStyleSheet();
// e.g. var newBlankSheetBeforeAllOthers = AddStyleSheet(null,0);
// e.g. var externalSheetAfterOthers = AddStyleSheet('http://phrogz.net/JS/Classes/docs.css');
// e.g. var externalSheetBeforeOthers = AddStyleSheet('http://phrogz.net/JS/Classes/docs.css',0);

// Cross-browser method for inserting a new rule into an existing stylesheet.
// ss - The stylesheet to stick the new rule in
// selector - The string value to use for the rule selector
// styles - The string styles to use with the rule
function AddRule(ss,selector,styles){
if (!ss) return false;
if (ss.insertRule) return ss.insertRule(selector+' {'+styles+'}',ss.cssRules.length);
if (ss.addRule){
ss.addRule(selector,styles);
return true;
}
return false;
}
// e.g. AddRule( document.styleSheets[0] , 'a:link' , 'color:blue; text-decoration:underline' );
// e.g. AddRule( AddStyleSheet() , 'hr' , 'display:none' );
//*** tabtastic.js
//*** Tabtastic -- see http://phrogz.net/JS/Tabstatic/index.html
//*** Version 1.0 20040430 Initial release.
//*** 1.0.2 20040501 IE5Mac, IE6Win compat.
//*** 1.0.3 20040501 Removed IE5Mac/Opera7 compat. (see http://phrogz.net/JS/Tabstatic/index.html#notes)
//*** 1.0.4 20040521 Added scroll-back hack to prevent scrolling down to page anchor. Then commented out

AttachEvent(window,'load',function(){
var tocTag='ul',tocClass='tabset_tabs',tabTag='a',contentClass='tabset_content';
function FindEl(tagName,evt){
if (!evt && window.event) evt=event;
if (!evt) return DebugOut("Can't find an event to handle in DLTabSet:

etTab",0);
var el=evt.currentTarget || evt.srcElement;
while (el && (!el.tagName || el.tagName.toLowerCase()!=tagName)) el=el.parentNode;
return el;
}
function SetTabActive(tab){
if (tab.tabTOC.activeTab){
if (tab.tabTOC.activeTab==tab) return;
KillClass(tab.tabTOC.activeTab,'active');
if (tab.tabTOC.activeTab.tabContent) KillClass(tab.tabTOC.activeTab.tabContent,'tabset_content_active');
//if (tab.tabTOC.activeTab.tabContent) tab.tabTOC.activeTab.tabContent.style.display='';
if (tab.tabTOC.activeTab.prevTab) KillClass(tab.tabTOC.activeTab.previousTab,'preActive');
if (tab.tabTOC.activeTab.nextTab) KillClass(tab.tabTOC.activeTab.nextTab,'postActive');
}
AddClass(tab.tabTOC.activeTab=tab,'active');
if (tab.tabContent) AddClass(tab.tabContent,'tabset_content_active');
//if (tab.tabContent) tab.tabContent.style.display='block';
if (tab.prevTab) AddClass(tab.prevTab,'preActive');
if (tab.nextTab) AddClass(tab.nextTab,'postActive');
}
function SetTabFromAnchor(evt){
setTimeout('document.body.scrollTop='+document.body.scrollTop,1);
SetTabActive(FindEl('a',evt).semanticTab);
}
function Init(){
window.everyTabThereIsById = {};

var anchorMatch = /#([a-z][\w.:-]*)$/i,match;
var activeTabs = [];

var tocs = document.getElementsByTagName(tocTag);
for (var i=0,len=tocs.length;i<len;i++){
var toc = tocs[i];
if (!HasClass(toc,tocClass)) continue;
var lastTab;
var tabs = toc.getElementsByTagName(tabTag);
for (var j=0,len2=tabs.length;j<len2;j++){
var tab = tabs[j];
if (!tab.href || !(match=anchorMatch.exec(tab.href))) continue;
if (lastTab){
tab.prevTab=lastTab;
lastTab.nextTab=tab;
}
tab.tabTOC=toc;
everyTabThereIsById[tab.tabID=match[1]]=tab;
tab.tabContent = document.getElementById(tab.tabID);

if (HasClass(tab,'active')) activeTabs[activeTabs.length]=tab;

lastTab=tab;
}
AddClass(toc.getElementsByTagName('li')[0],'firstchild');
}
for (var i=0,len=activeTabs.length;i<len;i++){
SetTabActive(activeTabs[i]);
}
for (var i=0,len=document.links.length;i<len;i++){
var a = document.links[i];
if (!(match=anchorMatch.exec(a.href))) continue;
if (a.semanticTab = everyTabThereIsById[match[1]]) AttachEvent(a,'click',SetTabFromAnchor,false);
}

if ((match=anchorMatch.exec(location.href)) && (a=everyTabThereIsById[match[1]])) SetTabActive(a);

//Comment out the next line and include the file directly if you need IE5Mac or Opera7 support.
//AddStyleSheet('tabtastic.css',0);
}
Init();
},false);

//***collapsible rows
function outliner() {
oMe = window.event.srcElement;
//get child element
var child = document.all[event.srcElement.getAttribute("child",false)];
//if child element exists, expand or collapse it.
if (null != child)
child.className = child.className == "collapsed" ? "expanded" : "collapsed";
}
function changepic() {
uMe = window.event.srcElement;
var check = uMe.src.toLowerCase();
if (check.lastIndexOf("expand.gif") != -1)
{
uMe.src = "collapse.gif";
}
else
{
uMe.src = "expand.gif";
}
}
//*** SORTABLE ROWS
var ts_version = "1.26";
var ts_browser_agt = navigator.userAgent.toLowerCase();
var ts_browser_is_ie = ((ts_browser_agt.indexOf("msie") != -1) && (ts_browser_agt.indexOf("opera") == -1));
var ml_tsort = {
///////////////////////////////////////////////////
// configurable constants, modify as needed!
sort_col_title : "Click to Sort!", // the popup text for the sorting link in the header columns
sort_col_asc_title : "Sorted ascending", // the popup text for the sorting link in the header column after the column's sorted in ascending order
sort_col_desc_title : "Sorted Descending ", // the popup text for the sorting link in the header column after the column's sorted in ascending order
sort_col_class : "abc", // whichever class you want the heading to be
sort_col_style : "text-decoration:none; font-weight:bold; color:black", // whichever style you want the link to look like
sort_col_class_post_sort : "def", // whichever class you want the heading for the column that's just sorted
sort_col_style_post_sort : "text-decoration:none; font-weight:bold; color:black", // whichever style you want the link to look like when the column for the link was sorted
sort_col_mouseover : "this.style.color='blue'", // what style the link should use onmouseover?
use_ctrl_alt_click : false, // allow ctrl-alt-click anywhere in table to activate sorting?
sort_only_sortable : true, // make all tables sortable by default or just make the tables with "sortable" class sortable?

//////////////////////////////////////////////////
// speed related constants, modify as needed!
table_content_might_change : false, // table content could be changed by other JS on-the-fly? if so, some speed improvements cannot be used.
preserve_style : " ", // (row, cell) preserves style for row or cell e.g., row is useful when the table highlights rows alternatively. cell is much slower while no preservation's the fastest by far!
tell_me_time_consumption : false, // give stats about time consumed during sorting and table update/redrawing.

//////////////////////////////////////////////////////////
// anything below this line, modify at your own risk!

smallest_int : -2147483648000, // date parse is in milliseconds, hence the 000
set_vars : function(event)
{
var e = (event)? event : window.event;
var element = (event)? ((event.target)? event.target : event.srcElement) : window.event.srcElement;
var clicked_td = ml_tsort.getParent(element,'TD') || ml_tsort.getParent(element,'TH');
var table = ml_tsort.getParent(element,'TABLE');
if(!table || table.rows.length < 1 || !clicked_td) return;
var column = clicked_td.cellIndex;
if (e.altKey && e.ctrlKey && ml_tsort.use_ctrl_alt_click) ml_tsort.resortTable(table.rows[0].cells[column]);
},
makeSortable: function(table)
{
if (table.rows && table.rows.length > 0) {
var rowidx = table.getAttribute("ts_linkrow") || 0;
var firstRow = table.rows[rowidx];
}
if (!firstRow) return;
var sortCell;
// We have a first row: assume it's the header (it works for <thead> too),
// and make its contents clickable links
for (var i=0;i<firstRow.cells.length;i++) {
var cell = firstRow.cells[i];
if(cell.getAttribute("ts_nosort")) continue;
var txt = cell.innerHTML;
if(cell.getAttribute("sortdir")) sortCell = cell;
cell.innerHTML = '<a style="'+this.sort_col_style+'" onMouseOver="this.oldstyle=this.style.cssText;'+this.sort_col_mouseover+'" onMouseOut="this.style.cssText=this.oldstyle;" class="'+this.sort_col_class+'" href="#" title="'+this.sort_col_title+'" onclick="javascript:ml_tsort.resortTable(this.parentNode);return false">'+txt+'</a>';
}
if(sortCell) this.resortTable(sortCell);
},

sortables_init : function()
{
// Find all tables with class sortable and make them sortable
if (!document.getElementsByTagName) return;
var tbls = document.getElementsByTagName("table");
for (var ti=0;ti<tbls.length;ti++) {
thisTbl = tbls[ti];
if(!ml_tsort.sort_only_sortable || thisTbl.className.match(/sortable/i))
ml_tsort.makeSortable(thisTbl);
}
},

getParent : function(el, pTagName)
{
if (el == null) return null;
else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) // Gecko bug, supposed to be uppercase
return el;
else
return this.getParent(el.parentNode, pTagName);
},

getInnerText : function(el)
{
if (typeof el == "string") return el;
if (typeof el == "undefined") { return el };
if (el.innerText) return el.innerText; //Not needed but it is faster
var str = "";

var cs = el.childNodes;
var l = cs.length;
for (var i = 0; i < l; i++) {
switch (cs[i].nodeType) {
case 1: //ELEMENT_NODE
str += this.getInnerText(cs[i]);
break;
case 3: //TEXT_NODE
str += cs[i].nodeValue;
break;
}
}
return str;
},

match_date_format : function(value, format)
{
var v = this.getInnerText(value.cells[this.sort_column_index]);
this.set_date_array(format);
if(format == 'M/D/Y' && !isNaN(Date.parse(v)))
return true;
else if(!isNaN(this.convert_date(v))) return true;
this.set_date_array(format.replace(/\//g, '-'));
if(!isNaN(this.convert_date(v))) return true;
this.set_date_array(format.replace(/\//g, '.'));
if(!isNaN(this.convert_date(v))) return true;
this.set_date_array(format.replace(/\//g, ' '));
if(!isNaN(this.convert_date(v))) return true;
return false;
},

resortTable : function(td)
{
if(td == null) return;
var column = td.cellIndex;
var table = this.getParent(td,'TABLE');
this.sort_column_index = column;
if(table == null || table.rows.length <= 2) return;
// now let's do a lot just to save a little time, if possible at all.

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 164

MidiMagic

Offline

Nearly a Senior Poster

Re: javascript works in IE but not working in firefox

Feb 16th, 2007

You have some capitalized style properties. That's a no-no.

IE messes up, interpreting them anyway, though it is not supposed to.

Firefox follows the W3C standard and makes styles case-sensitive. Thus, Firefox does not recognize the captitalized style properties.

Daylight-saving time uses more gasoline