programmatic menu - disappearing divs

[Phil N]

Hi all.

I've been here before and got a lot of help with my neophyte troubles so I'm
back again.

This time I have a number of questions (if I can remember them all).

(I've pasted the code in question at the end of this message and installed it on
the web at http://www3.telus.net/bikim/test .)

Just for something to do I'm attempting to code a menu system that is as
programmable as I can. The first row, that I call the 'base buttons' works
mostly like I expect it to.

Q1: The problem I am having is that when I click a base button to generate a
column of similar buttons nothing appears. According to the dom inspector the
divs are being created but they just don't appear anywhere that I can find.

Q2: How can I align the text vertically in the div?

Q3: What were the rest of my questions?

------- start of code --------

// FUNCTION :: makeButtons(eve nt)
// this handles the onclick event in a base button
// i.e. onclick = makeButtons
// Use :: supply num 'buttons'
// Receives :: number of buttons to make as int <from button clicked?>
// :: type of container to use
// Returns :: status as bool

function makeButtons(eve nt)
{
// get parent-Button-id
var obj = event.target;
var targetId = obj.id;
var idPostfix = targetId.charAt (1);
var idBase = parseInt(target Id);
//var iD = this.id;
for(var i=0; i<=rows; i++) // get rows from functions.js
{
var bTemp = makeEl('div'); // button temp

bTemp['id'] = (i+idBase+1)+id Postfix; // from variables ???

bTemp.style.pos ition = 'relative';
bTemp.style.lef t = obj.style.left;
bTemp.style.top = (parseInt(obj.s tyle.top)+(25*( i+1)))+'px';
bTemp.style.wid th = 100+"px";
bTemp.style.bac kround = bgImg;
document.getEle mentById(target Id).appendChild (bTemp);
}

var mesg = '';
// mesg += 'this.id = '+pBid;
mesg += '\ntarget Id = '+targetId;
mesg += '\ntarget Id as int= '+parseInt(targ etId);
mesg += '\nbTemp Id = '+bTemp["id"];
mesg += '\nidPostfix = '+idPostfix;
mesg += '\nidBase = '+idBase;
mesg += '\nobj.style.le ft = '+obj.style.lef t;
mesg += '\nobj.style.to p = '+obj.style.top ;
mesg += '\nbTemp.style. top = '+(parseInt(obj .style.top)+25) +'px';

alert('In makeButtons \n'+mesg);
return 'false';
}
// end of FUNCTION :: makeButtons()

---------- End of Code Snippet ----------


Thanks


--

Phil Newcombe - philn?telus?net

http://www3.telus.net/bikim

[Dom Leonard]

Re: programmatic menu - disappearing divs

Phil N wrote:[color=blue]
>
> Hi all.
>[/color]
<snip>
[color=blue]
>
> (I've pasted the code in question at the end of this message and
> installed it on the web at http://www3.telus.net/bikim/test .)
>
> Just for something to do I'm attempting to code a menu system that is as
> programmable as I can. The first row, that I call the 'base buttons'
> works mostly like I expect it to.
>
> Q1: The problem I am having is that when I click a base button to
> generate a column of similar buttons nothing appears. According to the
> dom inspector the divs are being created but they just don't appear
> anywhere that I can find.
>
> Q2: How can I align the text vertically in the div?[/color]

Um, "text-align: center;" and line breaks?
This may not be the question :)
[color=blue]
>
> ------- start of code --------
>
> // FUNCTION :: makeButtons(eve nt)
> // this handles the onclick event in a base button
> // i.e. onclick = makeButtons
> // Use :: supply num 'buttons'
> // Receives :: number of buttons to make as int <from button clicked?>
> // :: type of container to use
> // Returns :: status as bool
>
> function makeButtons(eve nt)
> {
> // get parent-Button-id
> var obj = event.target;
> var targetId = obj.id;
> var idPostfix = targetId.charAt (1);
> var idBase = parseInt(target Id);
> //var iD = this.id;
> for(var i=0; i<=rows; i++) // get rows from functions.js
> {
> var bTemp = makeEl('div'); // button temp
>
> bTemp['id'] = (i+idBase+1)+id Postfix; // from variables ???
>
> bTemp.style.pos ition = 'relative';
> bTemp.style.lef t = obj.style.left;
> bTemp.style.top = (parseInt(obj.s tyle.top)+(25*( i+1)))+'px';
> bTemp.style.wid th = 100+"px";
> bTemp.style.bac kround = bgImg;[/color]

Wrong spelling, should be:

bTemp.style.bac kground = bgImg;


Text color seems to inherit from the value #ffffff set in
applyBaseLabels , so without the background, any text inserted in the
bTemp appears white on white and causes test confusion.
[color=blue]
> document.getEle mentById(target Id).appendChild (bTemp);
> }
>[/color]
<snip>
[color=blue]
> return 'false';[/color]

Recall function comment: // Returns :: status as bool

'false' with quotes is a string value, as is 'true'. Both will test
boolean true in a javascript conditional. To return boolean values, omit
the quotes:

return true; // or
return false;[color=blue]
> }
> // end of FUNCTION :: makeButtons()
>[/color]

Major comment - HTML id values should start with a letter:

<cite>
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be
followed by any number of letters, digits ([0-9]), hyphens ("-"),
underscores ("_"), colons (":"), and periods (".").
</cite>

The code works in Mozilla, but you may wish to look into it.


Good luck,
Dom