Shortening conditions

[florida]

I have conditions that work but was hoping to shorten it in the "layerheader" part where I could concatenate the data results. Please advise.
This is current condtions that work:

if (condition here)
{
if((this.gtSysID >= 3) && (this.gtSysID <= 7 ))
{
layerHeader = '<div id=menu' + this.ID + ' style="background: ; width: ' + this.width + '; visibility: hidden; position: absolute; left: ' + this.x + '; top: ' + (this.y - 16) + ';">';
}
else if((this.gtSysID >= 8) && (this.gtSysID <= 11 ))
{
layerHeader = '<div id=menu' + this.ID + ' style="background: ; width: ' + this.width + '; visibility: hidden; position: absolute; left: ' + this.x + '; top: ' + (this.y - 20) + ';">';
}
//alot more else ifs continue here

My attempt to shorten the condition here not working:

if (condition here)
{
layerHeader = '<div id=menu' + this.ID + ' style="background: ; width: ' + this.width + '; visibility: hidden; position: absolute; left: ' + this.x + '; top: ';

if((this.gtSysID >= 3) && (this.gtSysID <= 7 ))
{
layerHeader += ' + (this.y - 16) + ';">';
}
else if((this.gtSysID >= 8) && (this.gtSysID <= 11 ))
{
layerHeader += ' + (this.y - 20) + ';">';
}
//alot more else ifs continue here

[sciguyryan]

try using the Javascript conditional statement that goes like this: condition ? expresionIfTrue : expresionIfFalse

If you use that it should significantly shorten your script.

[requestcode]

Here is a link to a brief explanation on how it works:
http://www.javascriptkit.com/javatutors/varshort5.shtml

[halifaxrick]

If you use a switch, you can remove the need for stacked and confusing else-ifs

(I took this out of the 1.4 Javascript user guide)

Example. In the following example, if expr evaluates to "Bananas", the program matches the value with case "Bananas" and executes the associated statement. When break is encountered, the program terminates switch and executes the statement following switch. If break were omitted, the statement for case "Cherries" would also be executed.

switch (expr)
{
case "Oranges" : document.write("Oranges are $0.59 a pound.<BR>");
break;
case "Apples" : document.write("Apples are $0.32 a pound.<BR>");
break;
case "Bananas" : document.write("Bananas are $0.48 a pound.<BR>");
break;
case "Cherries" : document.write("Cherries are $3.00 a pound.<BR>");
break;
default : document.write("Sorry, we are out of " + i + ".<BR>"); }

Eack case can be as many lines as you wish (no braces {} needed) each case should end with a break; line (if you don't it will just go onto the next case).
The default is given if the expression does not match any of the cases.

[halifaxrick]

Are all your statements within the else-ifs a variation on this one?

layerHeader = '<div id=menu' + this.ID + ' style="background: ; width: ' + this.width + '; visibility: hidden; position: absolute; left: ' + this.x + '; top: ' + (this.y - 20 ) + ';">'
i.e. the 20 changes depending?

If so, you could just set a variable that is modified within the if statements

var i=0

if (blah)
i = 1;
elseif (blah)
i = 2;
.
.
.
else
i =12345;

layerHeader = '<div id=menu' + this.ID + ' style="background: ; width: ' + this.width + '; visibility: hidden; position: absolute; left: ' + this.x + '; top: ' + (this.y - i ) + ';">'

[Charles]

Another fun option is to use Arrays creatively. See my second posting at http://forums.webdeveloper.com/showthread.php?s=&threadid=20115

layerHeader += ' + (this.y - [16, 20, 24, 28][Math.round(this.gtSysID / 4)]) + ';">'