MozillaZine

DHTML for FireFox and other browsers

Discussion of general topics about Mozilla Firefox
Post a reply
kwilder
 
Posts: 11
Joined: August 10th, 2005, 2:46 pm
April 14th, 2006, 6:00 pm

Post Posted April 14th, 2006, 6:00 pm

Is there documentation somewhere that describes how to write cross browser DHTML?

I've written a small DHTML that works perfectly in MS IE, but I get nothing in Firefox. I need to build a table dynamically and be able to click the cells to raise an event.

So any information on the Firefox implementation of DHTML will be appreciated.

Thanks,

King Wilder
texmex
 
Posts: 403
Joined: March 26th, 2006, 8:58 am
Location: NE Lincs
April 14th, 2006, 6:27 pm

Post Posted April 14th, 2006, 6:27 pm

If you post your code in this thread we may be able to help. To make it stand out better insert it between <b>[code]</b> and <b> [/code]</b> tags to make it stand out.
kwilder
 
Posts: 11
Joined: August 10th, 2005, 2:46 pm
April 14th, 2006, 7:01 pm

Post Posted April 14th, 2006, 7:01 pm

There's actually too much to post in this message, so I just posted it to my site.

http://www.kingwilder.com/wizard/index.html

View the source to get all the Javascript. I got the table working in IE and Firefox, now I'm working on getting cell clicks to work in both.

I want to be able to toggle the color of a cell between grey and black when the cell is clicked. I really didn't get that far yet. I tried testing it in Firefox and I couldn't get the table to display at all, but I figured that part out.

Any ideas would be appreciated.

Thanks,

King
texmex
 
Posts: 403
Joined: March 26th, 2006, 8:58 am
Location: NE Lincs
April 14th, 2006, 7:22 pm

Post Posted April 14th, 2006, 7:22 pm

I see what you mean. Plenty of it. I'll have a look to see if I can offer some suggestions.
jqp

User avatar
 
Posts: 5068
Joined: November 17th, 2004, 10:56 am
Location: In a box
April 14th, 2006, 7:31 pm

Post Posted April 14th, 2006, 7:31 pm

for specific questions, feel free to post in the web development forum here.

Firefox has good support for DOM standards. ("DHTML" is a term that usually refers to Microsoft's specific implementation of DOM. DOM is the term you're looking for.)

Firefox's DOM support is pretty well documented here:
http://developer.mozilla.org/en/docs/Ge ... _Reference

As you look, you'll notice that when standards apply, Firefox closely follows DOM standards.
Some of those standards that Firefox has mostly covered are:
http://www.w3.org/TR/DOM-Level-2-Core/core.html
http://www.w3.org/TR/DOM-Level-2-HTML/html.html
http://www.w3.org/TR/DOM-Level-2-Style/css.html
http://www.w3.org/TR/DOM-Level-2-Events/

For example, Firefox handles events according to the DOM Event standards. You can read more about Firefox's implementation of events here, which will probably solve your problem.
texmex
 
Posts: 403
Joined: March 26th, 2006, 8:58 am
Location: NE Lincs
April 14th, 2006, 8:45 pm

Post Posted April 14th, 2006, 8:45 pm

I've just had a quick tinker and come up with a slightly more compact version that achieves your first step. (ie creates the table and makes the cells selectable).

BTW. I find that it's not a good idea to insert a bare TABLE into the HTML as different browsers do different things concerning the TBODY. Some automatically introduce it, some don't. This then gives your javascript a problem of sorting out wether the TBODY already exists or not.

Another tip. If you add the onclick attribute to your tag as you create it. The function that gets called has a reference to the element using the keyword this (note my use of it in the onclickCell function below.

For future posts, you would be well advised to just post the snippets you're trying to debug. In the development forum.

Anyhow. Here's my quick and dirty rendition.

Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>

<script type="text/javascript">
//NOTE THE BEST PLACE FOR YOUR SCRIPT IS WITHIN THE HEAD OF THE DOCUMENT

var lastSelection=null;

function BuildTable()
{
   var oTBody = document.createElement("TBODY");
   var oRow, oCell;
   var i, j;
   var iRows = 0;
   var iCols = 0;
       
  var cols=parseInt(document.getElementById("floorwidth").value);
  var rows=parseInt(document.getElementById("floorlength").value);

   iRows = parseInt(rows) + 2;
   iCols = parseInt(cols) + 2;

        var oTable=document.createElement("TABLE");



   // Set the table's border width and colors.
   oTable.border=1;
   oTable.cellPadding = 0;
   oTable.cellSpacing = 0;
   oTable.bgColor="lightslategray";

   // Insert a row into the header and set its background color.
   oRow = document.createElement("TR");

   // Create and insert rows and cells into the first body.
   for (i=0; i<iRows; i++)
   {
     oRow = document.createElement("TR");
     for (j=0; j<iCols; j++)
     {
       oCell = document.createElement("TD");
      if ((i > 0 && i < iRows-1) && (j > 0 && j < iCols-1))
                    {
         //oCell.innerText = (i) + ", " + (j);
         oCell.appendChild(document.createTextNode("\xa0"));
         oCell.width = 12;
         oCell.height = 12;
                        oCell.onclick=onclickCell;
          }
                else
                 {
         oCell.width = 12;
         oCell.height = 12;
         oCell.innerText = " ";
         oCell.bgColor = "white";
      }
       oRow.appendChild(oCell);
     }
     oTBody.appendChild(oRow);
   }

   // Insert the created elements into oTable.
   oTable.appendChild(oTBody);

   document.getElementById("div3").appendChild(oTable);

document.getElementById("div1").style.visibility="hidden";
}

function onclickCell()
{

//first deselect the previous selection (if there is one)
if (lastSelection!=null)
   {
    lastSelection.style.background="white";
    lastSelection.style.color="red";
   }

//now select the current one
this.style.background="red";
this.style.color="white";

//and note this current one in the lastSelection variable
lastSelection=this;
window.event.cancelBubble = true;
}

</script>
</head>

<body>

<div id="div1" style="">
<h1>Enter the dimensions of the floor</h1>
Enter length: <input name="floorlength" id="floorlength" value="12" type="text"> feet<br>
Enter width: <input name="floorwidth" id="floorwidth" value="15" type="text"> feet<br>
<input value="OK" onclick="BuildTable()" type="button">
</div>

<div id="div3" style="position:absolute;left:20px;top:20px"></div>
</body>
</html>
kwilder
 
Posts: 11
Joined: August 10th, 2005, 2:46 pm
April 15th, 2006, 10:09 am

Post Posted April 15th, 2006, 10:09 am

texmex,

Thanks for the info. I like the way you streamlined the click event procedure. I can work with this. And in the future I will submit only appropriate code.

jqp,

Thanks for the links on the Gecko DOM. I guess my terminology was off. I usually build DHTML clients for business customers that only use IE in offices. I haven't had to build cross-browser applications that need to simulate DHTML up to now. This information will help a lot.

King

Return to Firefox General

Post a reply

Who is online

Users browsing this forum: No registered users and 9 guests