Click to See Complete Forum and Search --> : Count which item


Ultimater
02-21-2005, 05:05 PM
Well, I'm gonna be on the forums about 90% less.

I'm gonna get started on JS Falcon 2.
No, I wasn't the person that orginally made JS Falcon 1,
but I played with the code way too long.
I've added new controls and different attacks before.
I've also created a possible JS Falcon 2,
but I didn't like my battle-theme.
I don't lack any programing skills when it comes to
programing games, so this should be way better than number 1.
My calculations tell me—as soon as I get all my graphics
ready—the game should take 1-2 months to fully complete.

Wish me the best of luck!

Jupac
02-21-2005, 05:11 PM
Nice Nice :D

Ultimater
02-21-2005, 07:03 PM
I'm currently working with graphics and encountered a problem,
you may be able to help speedup the process by visiting this thread (http://www.webdeveloper.com/forum/showthread.php?s=&threadid=57339).

EDIT:(This problem with the graphics has resolved)

MstrBob
02-21-2005, 08:29 PM
What are you making it in?

buntine
02-21-2005, 08:46 PM
All leads point to JavaScript. You should do it in Java, instead. ;)

Ultimater
02-21-2005, 08:48 PM
What am I making what in?
I'm currently getting all my graphics together before writing
the .html file at the moment.
The final JS Falcon 2 program should be compatible with
IE and NS (and some others if I'm lucky).
As far as my image making, they should all be in .gif format,
and I'm making them in windows paint.
The graphic quality should be similar to JS Falcon 1.

btw: JS Falcon stands for "JavaScript Falcon".
(Just so you know where my major programing will be.)

MstrBob
02-21-2005, 09:04 PM
I was asking what you're making the game in. As in what programming language you were using. I agree with buntine, make it in Java. It's much cooler (albeit much much more different).

buntine
02-21-2005, 10:30 PM
Web-Based JS games are lame.. They dont even stand up to Flash. No offence, i'm sure your a good programmer. But c'mon! :cool:

Ultimater
02-22-2005, 12:36 AM
I don't know or use Java.
If you ever played JS Falcon (the first), you'd know that
it's either the best or surely in the top 5 of best JavaScript
games category. If you want me to do it in Java, there would be
nothing special about the game because it would lack interaction.
If you want the best quality game, go play your XBox/PS2 or whatever.

Ultimater
02-22-2005, 12:48 AM
Originally posted by MstrBob
What are you making it in?
JavaScript, if you didn't catch that.(JS Falcon=JavaScript Falcon)

buntine
02-22-2005, 01:03 AM
If you want the best quality game, go play your XBox/PS2 or whatever.

Dont have either.. Games are a waste of time (to play, making them is another story ;)).

Ultimater
02-22-2005, 02:31 PM
I totally agree with you, games are a hugh waste of time.
But making games is a different story, I'm in it for the money!
(This game will be one off the house)

buntine
02-22-2005, 09:15 PM
hmm. From my experience, there is not a whole bunch of money in it for developers -- unless you come up with, and successfully market, an awesome idea. Its strange, considering the video game industry rakes in more cash than Hollywood.



Regards.

Ultimater
02-23-2005, 05:07 PM
Originally posted by Ultimater
I'm currently working with graphics and encountered a problem,
you may be able to help speedup the process by visiting this thread (http://www.webdeveloper.com/forum/showthread.php?s=&threadid=57339).
The problem has resolved! Now I can go the next step, making the images.
As far as my game battle-theme in mind, I've currently decided to
go with the following:

·Have a 2-D side-view just like the first JS Falcon.
·The Falcon starts in the landing position,
to Lift-off or to Land, the key L will be used.
·There will be special Landing Sites that emerge randomly that
you can land onto and pick up special ammo and/or fuel.
As your in the landing position, enemies can still destroy you.
·If your plane runs out of fuel, your plane heads straight for the ground.
·To use a special weapon that you picked up off the ground,
the key C will be used.
(Because the regular weapons are gonna be Z & X)
I was thinking about adding a Customize your Controls Menu—your
layout will be saved as a cookie.
·As far as the background, I was thinking of having some clouds appear randomly as seperate layers.
(The cloud style would be something similar to Mario Brothers)
Otherwise I think I'll stick with the plain skyblue background.
·I'll add sound Effects and some War/Battle theme music that
the user gets to choose from a DropDown menu.
·I'm not to sure what to do as far as the enemies....
I was thinking of having a man equiped with nothing except for a rocket launcher.
·The boss I'll make him a UFO or something.
·My scorcing will be interactive. Once a user dies and beat the top score, a button will emerge with a value of "Send Score"
and once he sends it, my CGI program will read the score
and write it to a .JS file in my CGI-BIN.
If the user for example sent a score of 57200
the JS FILE would read as follows:

HIGHSCORE=57200

And since this JS file will be included in the actual game onload,
that highscore will be an acutal varible.


So that about raps it up.
I'll do the programing but I request for second person assentment.

BigMoosie
02-27-2005, 02:08 AM
where can i see this JS falon 1?

rhsunderground
02-27-2005, 02:10 AM
i think it's this one:

http://javascript.internet.com/games/falcon-fighter.html

Ultimater
02-27-2005, 12:44 PM
You can play JS Falcon all-over the web.
Unfortunately, most of them are bugged.
All you need to do is do a search for JS Falcon.
Or you can play on my version here (http://ultimiacian.tripod.com/games/JSFalcon.html).

Ultimater
02-27-2005, 01:09 PM
Originally posted by rhsunderground
i think it's this one:

http://javascript.internet.com/games/falcon-fighter.html
That is one of the bugged copies I was talking about.
On IE6.0 and if not more browsers, half the upper screen
is cut-off and the ground lacks a <nobr> tag.
My copy's 5x better

MstrBob
02-27-2005, 01:31 PM
A <nobr> tag? Surely, for your game, you could make it valid and work in browsers other then IE, like say Mozilla Firefox? It can't be impossible...

Ultimater
02-27-2005, 03:21 PM
Originally posted by MstrBob
Surely, for your game
I didn't make the first JS Falcon.
I am making the second though.
Besides, it's better having a <nobr> tag than not at all.
I should even edit my edition of the first JS Falcon
and replace all the ground duplicates with on extra
long image.
There's about 10 of those 16x16 blocks.
Making the total layer 160x16.
The original programer should have used one long
160x16 image in the first place.

BigMoosie
02-27-2005, 04:22 PM
you should have multiple levels (im guessing the first doesnt but i dont know i couldnt make it very far :)) and your gifs should be animated i reckon, also perhaps you can collect lives and have a level editor that saves levels as cookies?

Ultimater
02-27-2005, 09:09 PM
Originally posted by BigMoosie
you should have multiple levels (im guessing the first doesnt but i dont know i couldnt make it very far :)) and your gifs should be animated i reckon, also perhaps you can collect lives and have a level editor that saves levels as cookies?
I can add multiple game-levels to the second JS Falcon and
save the game in a cookie once you reach the next level.

Hmm, should I really give you lives, It would make the game
way too easy then unless I really make the game hard.

There's no need for me to make animated gifs,
the game is mainly run thorugh an interval and I
can swap the images at the pace of the interval.
One of my so-called animated gif's will be a layer that
emerges when you obtain a special weapon.
This layer will say the word "Special" and the color of
the letters will be animated with a constant flowing
strem of rainbow colors.

Gonavitch
03-01-2005, 03:46 PM
I thought JS Falcon 1 was the greatest JavaScript game I ever saw. I could never find anything better, and I too was planning on creating a JS Falcon 2! :) My first game I ever made, really sucked, but I thats all in the past, I know much more newer and safer (non-browser spefic, multiple) code, so it makes my game engines run smoother without all the glitches of my old Escape Route game (my first game, only works in IE). You can check Escape Route out here:
http://www.escape-route.uni.cc

BigMoosie
03-01-2005, 04:03 PM
i never have the patience to finnish making my games, the only one i completely finnished was chess and tetris (how unorigional). you can check out my playable games here http://rollingtank.com/gooba/games.htm. There's only four at the moment. tell me what you think especially of meze hunt

BigMoosie
03-01-2005, 04:04 PM
probably should let you know to open IE to play these, if i were to make them now i would make em cross browser but these are from the past

Gonavitch
03-01-2005, 11:32 PM
Hey Ultimater,

Do you need any help making JS Falcon 2? Cause I'm a really great JavaScript programmer. And I've made games, but most of them are gone because I hated the graphics that I made :(. If you do need help, or just someone to tag along and make it with you, than PM or E-mail me :D.

Ultimater
03-02-2005, 02:17 PM
Gonavitch thank you for the offer,

but the programming part is amazingly easy for me
and it is also the fun part!
I struggle with the graphics...
Any new bad-guy pictures would be highly appreciated.
I'm trying to draw in gif format, because you can make
part of the image transparent, the following graphics:

&mdash;A man on foot armed with a rocket launcher pointing
at an angle up-left.
&mdash;A rocket launcher round/bullet.

&mdash;A 32x16 gif image, i.e. length:32; height:16; pixels
of a landing pod on the ground as a sort of run-way for the falcon.
This image will be placed directly above the moving ground.

&mdash;A 32x16 gif image of a mario-style cloud. Make un-used space
transparent.

&mdash;8 different angles of a new-special weapon for the falcon.
This will be launched by the falcon and it will explode in mid-air
spliting into 3 Heat-seeking missles.
I only really need 2 24x24 gif images then I can do some Image fliping.
I only need a diagonal missle and a horizontal missle.

&mdash;A 32-width by either 19-height to 24-height gif image
of a new enemy air craft
The more of these you create the better. The sizes for
each new type of enemy aircraft should vary.


I don't want to have to worry about creating the boss until
I have the game programed up-and-running up to him.
Any graphic help will be highly appreciated!

Gonavitch
03-02-2005, 03:02 PM
Well, your right! The programming is the best, most fun part. But I'm also not good with graphics :(. So I guess I'll just make JS Falcon 3, hehe!

Ultimater
03-02-2005, 03:30 PM
Gonavitch, I'm impressed! You could make JS Falcon 3 by yourself!?
I have no doubt that I'll have JS Falcon 2 up-and-running soon.
The completion date for the game that I'm aiming for is June 1, 2005.
But even JK Rowling had to postpone her Harry Potter and the Half Blood Prince book.
(Which doesn't come out 'til mid July)

Ultimater
03-02-2005, 03:57 PM
Btw since I'm using Windows XP Professional,
Their MSPaint.exe program cannot open half of the JS Falcon
gif-format graphics because they were initially made via
Windows 95's paint program.
I had to download a Windows 95 Paint program to open up,
edit, and add transparency to the graphics.
Once I downloaded it as a zip-file, I put it into the same
folder as my Windows XP Paint file.
I made a shortcut to the 95 one on my Start Menu.
Now I have 2 Paint programs!

Paint95.zip (http://www.pcnineoneone.com/tweaks/Paint95.zip)
(This link might help any one working with the graphics)

Gonavitch
03-02-2005, 04:02 PM
Well, my game wont take till July 2005, it'l be done by my brithday maybe (April 3rd, one month :D). And I use PSP7 because I work quickly and effiently with it. I can make transparent gifs too. And I'm actually working on the game engine right now! I've already gotten the main plane done and a missile done! I'm working on getting the main plane to move, after the game has been started.

Ultimater
03-02-2005, 05:29 PM
Ok, I painted 5 possible JS Falcon 2 clouds!
Pretty simple actually, just make a shape with black
lines fill it in with white and add a sky-blue color
(RGB:0,190,241)
for lighting.
Can I get a show of hands&mdash;which cloud is going to be promoted?
clouds.gif (http://ultimiacian.tripod.com/clouds.gif)

MstrBob
03-02-2005, 05:40 PM
Out of those, D looks the best.

Ultimater
03-02-2005, 05:55 PM
Originally posted by Gonavitch
Well, my game wont take till July 2005, it'l be done by my brithday maybe (April 3rd, one month :D). And I use PSP7 because I work quickly and effiently with it. I can make transparent gifs too. And I'm actually working on the game engine right now! I've already gotten the main plane done and a missile done! I'm working on getting the main plane to move, after the game has been started.

I'd be honored to see the finished game :cool:
btw: I said mine's destined for June 1, 2005 not July.

Ultimater
03-04-2005, 02:23 PM
Hmm, I just thought of another few ideas.

&middot;I'll give the falcon a HP bar instead of dying in one hit.
&middot;Just like my previous idea about being able
to pick up new weapons by landing and picking it up,
I'll also add in some armor shrines.
&middot;Un-like the first JS Falcon, I'll use Matrix-Arrays for every Image to decide whether or not two forces collide.
The reason for this is because every image is in a box-shape.
Why should two forces collide if only their transparent parts overlap?

Bluetagpizza
03-04-2005, 05:24 PM
Please use standard gaming keys(w,s,a,d) for the controls! The first Falcon Fighter had k,j,l,i. I guess the guy who write the first one was left handed or something.

Ultimater
03-04-2005, 06:15 PM
Sure thing!
As the controls I'll set 2,4,6,8 or W,A,S,D
or the arrows &larr;&uarr;&rarr;&darr;
as the keyboard default controls.
The first JS Falcon used K,J,L,I but I want to reserve the L
key for Landing the falcon.

But whichever hand you use or buttons you wish to use,
even if you have a joystick that will trigger a keyup or
keydown event, there will be a menu where you can setup
your custom controls and it'll be saved into a cookie
that won't expire until 12 months later.

Bluetagpizza
03-04-2005, 06:21 PM
Great idea! This game sounds like it will be sooo cool. Can't wait to play it.

Gonavitch
03-05-2005, 01:04 PM
Originally posted by Ultimater
Hmm, I just thought of another few ideas.

&middot;I'll give the falcon a HP bar instead of dying in one hit.
&middot;Just like my previous idea about being able
to pick up new weapons by landing and picking it up,
I'll also add in some armor shrines.
&middot;Un-like the first JS Falcon, I'll use Matrix-Arrays for every Image to decide whether or not two forces collide.
The reason for this is because every image is in a box-shape.
Why should two forces collide if only their transparent parts overlap?
I think the HP bar is a great idea. I'll put that in mine too if you dont mind :cool:.
I just have one odd question for you Ultimater, when I make the main plane shoot missiles (or anything) it goes slower, maybe you know why this is?

Ultimater
03-05-2005, 10:32 PM
What goes slower, The plane or the missle?
If the missle,
it's because you need to add the speed from it's projective parent.
If the plane,
your game must be lagging. Try preloading your images first in negative coords.

If neither of these are the problem, please post your code here.

Gonavitch
03-05-2005, 11:35 PM
Well, actually the whole game goes slow. It lags, but once the bullet is reset (back to x -50 y -50).
Here is part of my updateGame function - updated every 1 millisecond:
(some stuff has been removed - comments have been added)

function updateGame() {
for (i=0; i<mis.length; i++) {
/* mis - an array of the missile(s), which is IDed with ID="mis"
(creates an array with multiple instances of that ID) */
if (mis[i].style.posLeft>=500) {
/* resets the missile, does not move */
mis[i].style.posLeft=-50;
mis[i].style.posTop=-50;
}
if (mis[i].style.posLeft!=-50) {
/* moves the missile, only if it is active */
mis[i].style.posLeft+=12;
}
}

setTimeout("updateGame()",1);
}

This works good, but it lags.

Ultimater
03-06-2005, 10:41 AM
The lag might be caused because your interval might be too fast.
The lag might also be because a lack of clearTimeout.

It doesn't seem your game is compatible in NS.
NS understands someLayer.moveTo(x,y) or someLayer.left=x
IE understands someLayer.style.posLeft=x or someLayer.style.left=x

By the way, it's best to keep all your layer-coords in arrays.

var timerID=null
var misX=new Array(8);for(i=0;i<8;i++){misX[i]=-50}
var misY=new Array(8);for(i=0;i<8;i++){misY[i]=-50}

function updateGame() {
clearTimeout(timerID)
for (i=0; i<mis.length; i++) {

if (misX[i]>=500) {
misX[i]=-50
misY[i]=-50
mis[i].style.posLeft=misX[i]
mis[i].style.posTop=misY[i]
}

if (misX[i]!=-50) {
misX[i]+=12
mis[i].style.posLeft=misX[i]
}

}

timerID=setTimeout("updateGame()",25);
}

Gonavitch
03-06-2005, 11:06 AM
Okay, thanks Ultimater. I'll try that :cool:.

Ultimater
03-10-2005, 05:45 PM
YaY! 1,000 views!:cool:

Bluetagpizza
03-10-2005, 05:51 PM
Looks like this thread generated a lot of interest. Whats the next milestone, 1500 views?

Ultimater
03-10-2005, 05:53 PM
Here's an update on my progress:


As you can read a few posts ago, I got my cloud images.
I finished my 8 missles.
I didn't get much further than this...:o
I plan on getting back on track starting this sunday

Ultimater
03-10-2005, 05:56 PM
Originally posted by Bluetagpizza
Looks like this thread generated a lot of interest. Whats the next milestone, 1500 views?
Each extra digit :p

Any how the next images that I am going to draw are some
enemy planes with different sizes. When I finish a bunch
of them I'll posted 'em up in here for you guys-
-both to look at and for some feedback on the best ones.

Ultimater
03-29-2005, 03:51 PM
Well... I can't seem to produce any good gif pictures for the enemies.
I'm picking up some skills for doing it though.
You can keep track of all the images that I finish on my JS Falcon 2 website.
http://ultimiacian.tripod.com/games/JSFalcon2.html

scragar
03-30-2005, 07:17 AM
I want to produce one with a chopper(helecopter), I've already started setting up my main codes and stuff.

the chopper is capable of flying left, right, up and down.
The chopper has fuel, the more you move the more you lose.
run out of fuel and the chopper falls to the floor(taking damage) and you must send a lone unarmed bloke of to fetch some through enemy teratory.
you can move a huge distance in both directons of the starting point.
Some missions will involve picking up people and transporting them to safty within a time limit.
Cash, you need it to buy fuel and better weapons, it's gained by completeing missions.
controlls:
1 == down and left (low fuel cost)
2 == down(very low fuel cost)
3 == down and right (low fuel cost)
4 == left (mid fuel cost)
6 == right (mid fuel cost)
7 == up and left (high fuel cost)
8 == up (high fuel cost)
9 == up and right (high fuel cost)
/ == change weapon left (they are on a cycle)
* == change weapon right (they are on a cycle)
+ == hide/display goals
- == hide/display status(eg health, fuel weapons...)
. == restart mission
0 == restart entire game
left mouse click == fire here
right moust click == pause game(untill an alert is clicked)


anyone think of any other nice features I could add?

Ultimater
03-30-2005, 07:09 PM
Does this mean that you are also programming it?

scragar
03-31-2005, 06:40 AM
I'm starting my own, but I also need images. My Idea came from the problem that on the origional no matter how hard you try killing every foe is virtualy impossible, and you can't even go back to finish them of.


how are you managing movement of planes? are your's constantly remaining at the same level or will they now have some form of AI?(I tried making AI for them, but it put too much strain on my computer to have 72 AI capable planes, only 5 of which are visible).

BigMoosie
04-01-2005, 03:01 AM
i suggest you make the AI only start when the planes come near the screen, that is the way most games work,

Ultimater
04-01-2005, 03:44 AM
what's AI stand for?

BigMoosie
04-01-2005, 05:49 AM
what's AI stand for?

Artificial Intelligence. But not litterally. Just the enemy bots [predictable] behaviour.

scragar
04-01-2005, 06:02 AM
yeah, Artificail Intelegence, they are suposed to move away from your bullets and at the same time into a possition with no other bot's obrtucting a shot.

Ultimater
04-01-2005, 03:11 PM
Oh, so you want the enemy to be able to possibly pull-off a dodging maneuver.
Yeah, I guess it's pretty lame that the enemy puts their petal to-the-metal
in order to kill themselves :p

scragar
04-02-2005, 06:07 AM
each foe type has it's own AI; I'm adding kamakazi pilots(who try to fly into you), tanks(which don't move), other choppers(which can turn around) as well as planes(that just go up and down while continuing to the left/right).

The trouble is that proccesing all these things causes lots of proccesing power problems.

I've just had a new idea: AI is done less often than motion, a different setInterval script will function for AI. This doesn't bother me much because I'm doing things different to what I belive you are(all my planes and such have "targetX" and "targetY" properties. homing objects have "targetNo" as well), thus all I'm doing is updating the target less often.

Ultimater
04-03-2005, 01:46 AM
Man... I've been getting packed away with homework from my college in the past few weeks... As long as I finish my graphics by May 1st, I'll still follow to schedule.
If anyone has any graphics for donation, I urge you to post 'em. I want to get my
graphics done already so I can actually start writing the JavaScript for this thing.

BigMoosie
04-03-2005, 06:57 AM
why is it so important to have the graphics done first? why dont you just set the sizes like 32x32 and draw a rough? it then would be so easy to change the graphics at a later date...

Ultimater
04-03-2005, 04:22 PM
I don't "have to" create all the graphics first, but they do need to be created.
I can't just skip making them. Besides, I like to always do the hard-part first, and the graphics, to me, are the hard part.

Ultimater
04-03-2005, 04:26 PM
Yo, scragar, do you have any images finished?
Would ya mind posting some?

scragar
04-04-2005, 08:03 AM
I've not got any images at the moment, I'm usong coloured squares(each colour is a different enemy type, thus I can confirm the AI works as appropriate).

I'm just going to do a few searches on google (http://www.google.com/) or gograph (http://www.gograph.com/) and ask the official owner if I can use them.

Ultimater
05-13-2005, 10:15 AM
I think I lost interest in this thing :(
I can't seem to draw my graphics...

scragar
05-13-2005, 10:27 AM
I kinda feal the same way, I can't get the missions to load like I want them to...

BigMoosie
05-13-2005, 10:30 AM
Dont give up guys, perhaps I will help with the graphics for you ultimater? Scrager, I wish I could help but i am guessing that your code is not well commented and such that would make it difficult to be a collaborative work.

scragar
05-13-2005, 10:36 AM
no, it isn't. I can add comments, I think.

I kinda wouldn't like colaberative work anyway, if I work alone then I can only blame myself for something going wrong, which gives me a bit of temp determination. Unfortunatly it wears of when I don't get things loading right(or would you rather wait 3mins+ for loading all at the start?).

BigMoosie
05-13-2005, 10:42 AM
You can find alot of good pixel art at Deviant Art, with some kind artists perhaps you may be able to scrounge your graphics like scrager suggested, i did a brief search and found:


http://www.deviantart.com/view/17288822/
http://www.deviantart.com/view/14691533/
http://www.deviantart.com/view/12387535/
http://www.deviantart.com/view/12329548/
http://www.deviantart.com/view/11834398/


Unfortunately the majority of the good pieces are isometric (which I'm guessing doesnt work?) but you do get the odd 2D one.

BigMoosie
05-13-2005, 10:43 AM
Yeah, i dont do well coding in groups either.

scragar
05-13-2005, 10:47 AM
I can't figure out why it's not working, and it's so infuriating!
I'm going ofline in 20mins+/- so I'll stop thinking about it and look again in a couple of hours, maybe something will hit me...

Ultimater
05-13-2005, 12:40 PM
Hey Scragar, I'm very talented with debugging :) [I've been programming JS for like 5 years]
I'm sure I can touch it up for ya :)
Or at least tell you why it's not working (the easy part)
Send me some code! :)

to: BigMoosie
Hey, that would be great if you could help me a bit with the graphics!!! :)
I need some 2D GIF helicopters or Jets preferably no bigger than 32 pixels in either dimension on a transparent background.
(the image sizes can all vary and the width and height of the images don't need to match)
I've been stuck trying to create a side-view of a plane at 32x24.
Each time I try to draw it, it looks worthless... :(
I'm sure my grandmother can draw better than this...

Ultimater
05-13-2005, 01:03 PM
I'm also in need of an animated GIF that shows the word "Special" and a stream of rainbow colors constantly running through it on a transparent background.
I'm sure it's not hard to do but I don't have Animation Shop. :(
Here's what I got it to look like so far:
http://ultimiacian.tripod.com/games/special.html
The problem is that I cannot make that greenish blue background transparent :(
The reason is because the text "Special" is already transparent.
So, can you create a replica of this effect but with a transparent background for me?
(with Animation shop)

BigMoosie
05-13-2005, 11:46 PM
I use Macromedia Fierworks MX: http://www.ben.abrahamjoffe.com.au/random/rainbow.gif

scragar
05-14-2005, 05:48 AM
I found the problem. I'd miss spelt something(damn the case sensitivity of javascript).

I'm back on track, It shouldn't be more than a couple of months from now(individualy coded mission types may appear cool, but they take a long time to type)

BigMoosie
05-14-2005, 06:23 AM
Sounds complicated, you should write a script to assist you.

scragar
05-14-2005, 06:45 AM
they are all different, I have to write the individual behaveour of each boss, test it, then change it...
Then I'll add a few changes elsewhere and have to then write in a slightly different behaviour for the boss to fit in with the changes(for example, I added a missile to a bosses attacks, but then I had to change his attacks loop so that the missile would be fired, then I had to check that the missile worked correctly, then I had to make slight adjustments because the missle couldn't get higher than the middle of the box becuase it suffered too much from gravity, then I needed to adjust his attack rate again since the missile was too powerfull...), mostly it's just trial and error to get a working object, javascript can't help me with that.

Ultimater
05-15-2005, 12:38 AM
I use Macromedia Fierworks MX: http://www.ben.abrahamjoffe.com.au/random/rainbow.gif
AHhhhhhh! Thanks dude! There is no way that I could have made that without you! :)
It's exactly what I wanted :)

It's gonna be used in my game when a special weapon is acquired -- that image would emerge to be displayed until you use up your special weapon.

zzz0zzz
05-19-2005, 11:22 AM
If I have items on the page in order, like menu items and each has an id assigned, can I count which one would be, say item id="blue" ?

Kor
05-19-2005, 11:24 AM
Can u detail your problem, please?

Ultimater
05-19-2005, 11:25 AM
Yup, there are several ways.
document.getElementsByTagName would be one of the ideal approachs.
Can ya post your code so I can design the function for you?

zzz0zzz
05-19-2005, 11:35 AM
OK, what I have is a code that allows to expand/connect sections. Works great!

It will be placed on different pages and will automatically expand the section onload based on a variable passed on that page. All this functionality is in the code below. What I am trying to do is to be able to change style of the section that is clicked(i.e. selected). I was thinking of perhaps counting the which section is expanded and changing it's code. Now, I have a tendency of overcomplicating simple things, plus my JS skills aren't that good at all. I'm more of a back-end type guy.

Anyway, if you think my idea is not good, feel free to suggest your own. I've wasted plenty of time on this and am ready for any suggestions.

Thanks.

Here's an entire test page script:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>show - hide</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.collapsed {
cursor: pointer;
cursor: hand;
color: #ff3300;
}
.expanded {
cursor: pointer;
cursor: hand;
color: #0066ff;
}
</style>

<script type="text/javascript">
<!--
// global var to hold the selection to open (0 for first, 1 for second, etc.)
var selection=1;

onload=function() {
var h3List=document.getElementsByTagName('h3');
var ulList=document.getElementsByTagName('ul');
for(var i=0; i<ulList.length; i++) {
h3List[i].className='collapsed';
h3List[i].onclick=function() {toggle(this);}
ulList[i].style.display='none';
}
ulList[selection].style.display='block';
}

function toggle(obj) {
var ulList=document.getElementsByTagName('ul');
for(var i=0; i<ulList.length; i++) {
ulList[i].style.display='none';
}
var sibling;
if(obj.nextSibling.nodeType==3) {
sibling=obj.nextSibling.nextSibling;
}
else {
sibling=obj.nextSibling;
}
sibling.style.display=(sibling.style.display=='block')? 'none' : 'block';
}
//-->
</script>
</head>
<body>
<h3>player 1</h3>
<ul>
<li>age:</li>
<li>weight:</li>
</ul>
<h3>player 2</h3>
<ul>
<li>age:</li>
<li>weight:</li>
</ul>
<h3>player 3</h3>
<ul>
<li>age:</li>
<li>weight:</li>
</ul>
</body>
</html>


:confused:

Ultimater
05-19-2005, 11:46 AM
..

zzz0zzz
05-19-2005, 12:06 PM
..

What happen to the solution that you've sugested earlier?

:cool:

Ultimater
05-19-2005, 12:08 PM
Forget about my last suggestion, I didn't even run your code when I came up with that, this time I actually ran your code.

Inside of the function toggle the following code holds the number your looking for:obj.id

However for this to work you will need to add an ID to each H3 tag respectively:

<h3 id=1>player 1</h3>
<ul><li>age:</li><li>weight:</li></ul>
<h3 id=2>player 2</h3>
<ul><li>age:</li><li>weight:</li></ul>
<h3 id=3>player 3</h3>
<ul><li>age:</li><li>weight:</li></ul>

Ultimater
05-19-2005, 12:10 PM
Here I even make the changes for you and added an alert:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>show - hide</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.collapsed {
cursor: pointer;
cursor: hand;
color: #ff3300;
}
.expanded {
cursor: pointer;
cursor: hand;
color: #0066ff;
}
</style>

<script type="text/javascript">
<!--
// global var to hold the selection to open (0 for first, 1 for second, etc.)
var selection=1;

onload=function() {
var h3List=document.getElementsByTagName('h3');
var ulList=document.getElementsByTagName('ul');
for(var i=0; i<ulList.length; i++) {
h3List[i].className='collapsed';
h3List[i].onclick=function() {toggle(this)}
ulList[i].style.display='none';
}
ulList[selection].style.display='block';
}

function toggle(obj) {
alert(obj.id)
var ulList=document.getElementsByTagName('ul');
for(var i=0; i<ulList.length; i++) {
ulList[i].style.display='none';
}
var sibling;
if(obj.nextSibling.nodeType==3) {
sibling=obj.nextSibling.nextSibling;
}
else {
sibling=obj.nextSibling;
}
sibling.style.display=(sibling.style.display=='block')? 'none' : 'block';
}
//-->
</script>
</head>
<body>
<h3 id=1>player 1</h3>
<ul>
<li>age:</li>
<li>weight:</li>
</ul>
<h3 id=2>player 2</h3>
<ul>
<li>age:</li>
<li>weight:</li>
</ul>
<h3 id=3>player 3</h3>
<ul>
<li>age:</li>
<li>weight:</li>
</ul>
</body>
</html>

zzz0zzz
05-19-2005, 01:06 PM
Great, thanks man!

I'll try to get now to write something to switch style for the appropriate id. Shouldn't be too problematic, althought my confidence level is way down at the moment.

:cool:

Ultimater
05-19-2005, 01:10 PM
:)

zzz0zzz
05-19-2005, 01:28 PM
Here I go again... I was positive this would work but it didn't. What am I missing now?


//alert(obj.id)
if(obj.id) {
document.getElementById(obj.id).className='expanded';
}
else {
document.getElementsByTagName('h3').className='collapsed';
}

Ultimater
05-19-2005, 01:50 PM
document.getElementsByTagName returns an Array of the matched objects even if it only matches one of them.
Thus,

document.getElementsByTagName('h3')[obj.id-1].className='collapsed';

zzz0zzz
05-19-2005, 01:59 PM
Well, It does change the style, but I need it switch the style back once another option is clicked. The only reason I used getElementsByTagName('h3') because I did not use var declared in the previous function.

Gee why does it have to be so dufficult? I suppose everyone needs to be doing what they're good at... Hey, how about I design a splash screen for your JS FALCON?

Ultimater
05-19-2005, 02:05 PM
hehe... Splash Screen for JS Falcon huh?
If you can help with the images then I'd be most appreciative.
The JS of JS Falcon stands for JavaScript so it's supposed to be all programmed in JavaScript. Until I get all my graphics going, there is no telling how long this game will take me to make cas' I can't seem to produce images worth jack :D
JavaScript on the other hand is, weeeeell, hehe :D

zzz0zzz
05-19-2005, 02:09 PM
I'm not sure what kind of images you need. I'm not much of a pixel artist. Let me send you splash screen. What's its dimentions? Is it 400x300?

Do you have an email you want me to send it to? Would you prefer JPG, GIF or PNG?

Ultimater
05-19-2005, 02:19 PM
Hmm... the last JS Falcon used a 400x300 screen and I received numberous complaints about it being too small...
So maybe, 500x400

zzz0zzz
05-19-2005, 03:34 PM
We can beef it up to 500x400 if this one works.

zzz0zzz
05-19-2005, 04:00 PM
OK, use this one for your next release: http://reviewgolf.com/i/falcon/jsFALCON2.png

it's 500x400

Ultimater
05-19-2005, 04:21 PM
Wooooooah! That is awesome! :cool:

Can you enlarge the number two, it's so small, and possibly convert that to a true-color GIF format?
Thanks :)

zzz0zzz
05-19-2005, 04:45 PM
How about this: http://reviewgolf.com/i/falcon/jsFALCON2.gif

Ultimater
05-19-2005, 05:14 PM
Brilliant! That is gonna be the cover! :)
^_^

zzz0zzz
05-19-2005, 05:28 PM
Hey, I was not able to fix the script to flip styles. Do you think you still have some steam to crack that one open? I'm sick of wasting time with that code.

Basically it needs to change style from collapse to expanded when the section is open. I also realized that it needs to load correct style when the page loads since it may have a var to expand some section.

Ultimater
05-19-2005, 05:46 PM
Of coarse I still got some steam left. I'm Ultimater! I never run outta steam. hehe :D
Here ya go:

function toggle(obj) {
var ulList=document.getElementsByTagName('ul');
for(var i=0; i<ulList.length; i++) {
ulList[i].style.display='none';
}
var sibling;
if(obj.nextSibling.nodeType==3) {
sibling=obj.nextSibling.nextSibling;
}
else {
sibling=obj.nextSibling;
}
sibling.style.display=(sibling.style.display=='block')? 'none' : 'block';

var els=document.getElementsByTagName('h3')
for(var i=0;i<els.length;i++){
els[i].className='collapsed';
}
els[obj.id-1].className='expanded';


}

zzz0zzz
05-19-2005, 05:59 PM
Clearly we both have our strength!

One tiny thing though...

Everything works but when the page loads and one section is expanded the style isn't applied. How can I apply the styles appropriately from the start, before i even get them clicked.

Here's entire page as a demo:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>show - hide</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.collapsed {
cursor: pointer;
cursor: hand;
color: #ff3300;
}
.expanded {
cursor: pointer;
cursor: hand;
color: #0066ff;
}
</style>

<script type="text/javascript">
<!--
// global var to hold the selection to open (0 for first, 1 for second, etc.)
var selection=1;

onload=function() {
var h3List=document.getElementsByTagName('h3');
var ulList=document.getElementsByTagName('ul');
for(var i=0; i<ulList.length; i++) {
h3List[i].className='collapsed';

h3List[i].onclick=function() {toggle(this)}
ulList[i].style.display='none';
}
ulList[selection].style.display='block';
}


function toggle(obj) {
var ulList=document.getElementsByTagName('ul');
for(var i=0; i<ulList.length; i++) {
ulList[i].style.display='none';
}
var sibling;
if(obj.nextSibling.nodeType==3) {
sibling=obj.nextSibling.nextSibling;
}
else {
sibling=obj.nextSibling;
}
sibling.style.display=(sibling.style.display=='block')? 'none' : 'block';

var els=document.getElementsByTagName('h3')
for(var i=0;i<els.length;i++){
els[i].className='collapsed';
}
els[obj.id-1].className='expanded';


}
//-->
</script>
</head>
<body>
<h3 id=1>player 1</h3>
<ul>
<li>age:</li>
<li>weight:</li>
</ul>
<h3 id=2>player 2</h3>
<ul>
<li>age:</li>
<li>weight:</li>
</ul>
<h3 id=3>player 3</h3>
<ul>
<li>age:</li>
<li>weight:</li>
</ul>
</body>
</html>

Ultimater
05-19-2005, 06:20 PM
Replace:
(from the onload function)
ulList[selection].style.display='block';

with:
toggle(document.getElementById(selection));

There ya go! :)

Ultimater
05-19-2005, 07:21 PM
Graphics update:
http://ultimiacian.tripod.com/games/JSFalcon2.html

zzz0zzz
05-19-2005, 11:04 PM
Thanks man. Good luck with the JS Falcon!

David Harrison
05-19-2005, 11:18 PM
Hey there, just thought I'd pop my head around the door and mention a couple of quick points.

zzz0zzz - You haven't specified the required type attribute in your <style> element.<style type="text/css"><!--

--></style>Ultimater - ID's are not allowed to start with numbers.

zzz0zzz, if you run that page through the validator it'll fire 4 errors back at you, one for the <style> and one for each of the ID's (which no longer seem to be neccessary in the updated code, though I didn't read through the code thouroughly so I may be wrong on that count).

Really nice art work by the way, you've got a real talent there.

zzz0zzz
05-23-2005, 11:50 AM
Here I go again!

I decided I wanted to put expanded links into tables. So I modifyed the script.

Script works great... as long as I do not place it within other table... This thing is driving me nuts.

Ultimater, what else do you need to be designed for your game? ;)

Here's what I've done:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>show - hide</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.collapsed {
cursor: pointer;
cursor: hand;
color: #ff3300;
}
.expanded {
cursor: pointer;
cursor: hand;
color: #0066ff;
}
</style>

<script type="text/javascript">
<!--
// global var to hold the tab to open (0 for first, 1 for second, etc.)
var tab=2;

onload=function() {
var h6List=document.getElementsByTagName('h6');
var tblList=document.getElementsByTagName('table');
for(var i=0; i<tblList.length; i++) {
h6List[i].className='collapsed';

h6List[i].onclick=function() {toggle(this)}
tblList[i].style.display='none';
}
toggle(document.getElementById(tab));
}


function toggle(obj) {
var tblList=document.getElementsByTagName('table');
for(var i=0; i<tblList.length; i++) {
tblList[i].style.display='none';
}
var sibling;
if(obj.nextSibling.nodeType==5) {
sibling=obj.nextSibling.nextSibling;
}
else {
sibling=obj.nextSibling;
}
sibling.style.display=(sibling.style.display=='block')? 'none' : 'block';

var els=document.getElementsByTagName('h6')
for(var i=0;i<els.length;i++){
els[i].className='collapsed';
}
els[obj.id-1].className='expanded';


}
//-->
</script>
</head>
<body>

<!--
// uncomment table and it's broken...
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td> -->

<h6 id=1>Section 1</h6>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
</table>

<h6 id=2>Section 2</h6>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
</table>

<h6 id=3>Section 3</h6>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
</table>
<!-- </td>
</tr>
</table> -->

</body>
</html>

Fang
05-23-2005, 12:05 PM
Give the td an id and use that to reference the other h6/tables
// uncomment table and it's broken...
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="zzz">

<h6 id=1>Section 1</h6>
<table cellpadding="0" cellspacing="0" border="0">

and references:
var h6List=document.getElementById('zzz').document.getElementsByTagName('h6');
var tblList=document.getElementById('zzz').document.getElementsByTagName('table');

change the tblList in both functions

zzz0zzz
05-23-2005, 12:14 PM
I'll be da..! Most of the time solutions are so simple. Brilliant, took care of my headache, at least for now.

Thanks.

Happy again.

:)

zzz0zzz
05-23-2005, 01:23 PM
OK, I'm depressed. The code below, that works so great in IE does not work at all neither in FireFox nor in Safari. Unless I figure out what can be done to get it compatible cross browser, I can not use it.

I assume it'sgot something to do with the styles, but i could be dead wrong.

Any suggestions?

Final code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>show - hide</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.collapsed {
cursor: pointer;
cursor: hand;
color: #ff3300;
}
.expanded {
cursor: pointer;
cursor: hand;
color: #0066ff;
}
</style>

<script type="text/javascript">
<!--
// global var to hold the tab to open (0 for first, 1 for second, etc.)
var tab=2;

onload=function() {
var h6List=document.getElementById('lnav').getElementsByTagName('h6');
var tblList=document.getElementById('lnav').getElementsByTagName('table');
for(var i=0; i<tblList.length; i++) {
h6List[i].className='collapsed';

h6List[i].onclick=function() {toggle(this)}
tblList[i].style.display='none';
}
toggle(document.getElementById(tab));
}


function toggle(obj) {
var tblList=document.getElementById('lnav').getElementsByTagName('table');
for(var i=0; i<tblList.length; i++) {
tblList[i].style.display='none';
}
var sibling;
if(obj.nextSibling.nodeType==5) {
sibling=obj.nextSibling.nextSibling;
}
else {
sibling=obj.nextSibling;
}
sibling.style.display=(sibling.style.display=='block')? 'none' : 'block';

var els=document.getElementsByTagName('h6')
for(var i=0;i<els.length;i++){
els[i].className='collapsed';
}
els[obj.id-1].className='expanded';
}
//-->
</script>
</head>
<body>

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="lnav">

<h6 id=1>Section 1</h6>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
</table>

<h6 id=2>Section 2</h6>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
</table>

<h6 id=3>Section 3</h6>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>

Fang
05-23-2005, 01:43 PM
id may not begin with a number. http://www.w3.org/TR/html401/types.html#type-id

zzz0zzz
05-23-2005, 01:50 PM
Great. Now that I know what's causing the problem I'm afraid that the entire script will need to be re-written, won't it?

Fang
05-23-2005, 02:07 PM
I think you only have to rewrite 1 line if the new id begins with a single letter (id="s1"):
els[obj.id-1].className='expanded';
// to
els['s' + (obj.id.substring(1,obj.id.length) -1)].className='expanded';

zzz0zzz
05-23-2005, 02:35 PM
Funny that you gave example with re-naming IDs to s1, s2 etc. That's what I've done. I guess it' the logical step (hey, I think logically, at last!!!)

Changing one line does expand the right section but clearly the code needs to be changed elsewhere additionally, because ity still does not work in FireFox and Safari. I get errors when I click another section, as well as the styles got messed up again.

Here's the final code of the entire example page:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>show - hide</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.collapsed {
cursor: pointer;
cursor: hand;
color: #ff3300;
}
.expanded {
cursor: pointer;
cursor: hand;
color: #0066ff;
}
</style>

<script type="text/javascript">
<!--
// global var to hold the tab to open (0 for first, 1 for second, etc.)
var tab="s2";

onload=function() {
var h6List=document.getElementById('lnav').getElementsByTagName('h6');
var tblList=document.getElementById('lnav').getElementsByTagName('table');
for(var i=0; i<tblList.length; i++) {
h6List[i].className='collapsed';

h6List[i].onclick=function() {toggle(this)}
tblList[i].style.display='none';
}
toggle(document.getElementById(tab));
}


function toggle(obj) {
var tblList=document.getElementById('lnav').getElementsByTagName('table');
for(var i=0; i<tblList.length; i++) {
tblList[i].style.display='none';
}
var sibling;
if(obj.nextSibling.nodeType==5) {
sibling=obj.nextSibling.nextSibling;
}
else {
sibling=obj.nextSibling;
}
sibling.style.display=(sibling.style.display=='block')? 'none' : 'block';

var els=document.getElementsByTagName('h6')
for(var i=0;i<els.length;i++){
els[i].className='collapsed';
}
els['s' + (obj.id.substring(1,obj.id.length) -1)].className='expanded';
}
//-->
</script>
</head>
<body>

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="lnav">

<h6 id="s1">Section 1</h6>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
</table>

<h6 id="s2">Section 2</h6>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
</table>

<h6 id="s3">Section 3</h6>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>

Ultimater
05-23-2005, 07:50 PM
Almost :), replace:
els['s' + (obj.id.substring(1,obj.id.length) -1)].className='expanded';
With:
els['s' + (obj.id.substr(1))].className='expanded';



Here's your final code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>show - hide</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.collapsed {
cursor: pointer;
cursor: hand;
color: #ff3300;
}
.expanded {
cursor: pointer;
cursor: hand;
color: #0066ff;
}
</style>

<script type="text/javascript">
<!--
// global var to hold the tab to open (0 for first, 1 for second, etc.)
var tab="s2";

onload=function() {
var h6List=document.getElementById('lnav').getElementsByTagName('h6');
var tblList=document.getElementById('lnav').getElementsByTagName('table');

for(var i=0; i<tblList.length; i++) {
h6List[i].className='collapsed';
h6List[i].onclick=function() {toggle(this)}
tblList[i].style.display='none';
}

toggle(document.getElementById(tab));
}


function toggle(obj) {
var tblList=document.getElementById('lnav').getElementsByTagName('table');
for(var i=0; i<tblList.length; i++) {
tblList[i].style.display='none';
}
var sibling;
if(obj.nextSibling.nodeType==5)sibling=obj.nextSibling.nextSibling;
else sibling=obj.nextSibling;
sibling.style.display=(sibling.style.display=='block')? 'none' : 'block';
var els=document.getElementsByTagName('h6')
for(var i=0;i<els.length;i++){
els[i].className='collapsed';
}
els['s' + (obj.id.substr(1))].className='expanded';
}
//-->
</script>
</head>
<body>

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="lnav">

<h6 id="s1">Section 1</h6>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
</table>

<h6 id="s2">Section 2</h6>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
</table>

<h6 id="s3">Section 3</h6>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>

Charles
05-23-2005, 08:06 PM
If you're going to progvide the final version, make it valid.

* The STYLE element requires a "type" attribute.
* The "COntent-Type" META element should come as high up as possible.
* TABLE elements should have "siummary" attributes and TH elements.

Ultimater
05-23-2005, 09:51 PM
I don't think that even Charles himself can find any errors in this one: :)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>show - hide</title>
<style type="text/css">
.collapsed {
cursor: pointer;
cursor: hand;
color: #ff3300;
}
.expanded {
cursor: pointer;
cursor: hand;
color: #0066ff;
}
</style>

<script type="text/javascript">
<!--
// global var to hold the tab to open (0 for first, 1 for second, etc.)
var tab="s2";

onload=function() {
var h6List=document.getElementById('lnav').getElementsByTagName('h6');
var tblList=document.getElementById('lnav').getElementsByTagName('table');

for(var i=0; i<tblList.length; i++) {
h6List[i].className='collapsed';
h6List[i].onclick=function() {toggle(this)}
tblList[i].style.display='none';
}

toggle(document.getElementById(tab));
}


function toggle(obj) {
var tblList=document.getElementById('lnav').getElementsByTagName('table');
for(var i=0; i<tblList.length; i++) {
tblList[i].style.display='none';
}
var sibling;
if(obj.nextSibling.nodeType==5)sibling=obj.nextSibling.nextSibling;
else sibling=obj.nextSibling;
sibling.style.display=(sibling.style.display=='block')? 'none' : 'block';
var els=document.getElementsByTagName('h6')
for(var i=0;i<els.length;i++){
els[i].className='collapsed';
}
els['s' + (obj.id.substr(1))].className='expanded';
}
//-->
</script>
</head>
<body>

<table cellpadding="0" cellspacing="0" border="0">
<tr><th></th></tr>
<tr>
<td id="lnav">

<h6 id="s1">Section 1</h6>
<table cellpadding="0" cellspacing="0" border="0">
<tr><th></th></tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
</table>

<h6 id="s2">Section 2</h6>
<table cellpadding="0" cellspacing="0" border="0">
<tr><th></th></tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
</table>

<h6 id="s3">Section 3</h6>
<table cellpadding="0" cellspacing="0" border="0">
<tr><th></th></tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>


Unless he wants me to provide blank CAPTION tags for the TABLEs :D

Charles
05-23-2005, 10:02 PM
CAPTIONs are nice, but not required.

Ultimater
05-23-2005, 10:18 PM
For some fun in IE you could also use:

<META HTTP-EQUIV="Page-Enter" CONTENT="BlendTrans(Duration=0.3)">
<META HTTP-EQUIV="Page-Exit" CONTENT="BlendTrans(Duration=0.3)">

zzz0zzz
05-24-2005, 03:51 PM
I'm still having problems with cross-browser compatibility.

Ultimater
05-24-2005, 04:35 PM
Hmm... let me download the FireFox brower from my other computer and try running the script on that computer and see what happens...

Ultimater
05-24-2005, 04:52 PM
Ok, I got my other computer FireFox and I see what you are talking about :)
Shouldn't take me too long to fix it.

Ultimater
05-24-2005, 05:22 PM
OK, here is the code that worked for me in both FF and IE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>show - hide</title>
<style type="text/css">
.collapsed {
cursor: pointer;
cursor: hand;
color: #ff3300;
}
.expanded {
cursor: pointer;
cursor: hand;
color: #0066ff;
}
</style>

<script type="text/javascript">
// global var to hold the tab to open (0 for first, 1 for second, etc.)
var tab="s2";

onload=function() {
var h6List=document.getElementById('lnav').getElementsByTagName('h6');
var tblList=document.getElementById('lnav').getElementsByTagName('table');

for(var i=0; i<tblList.length; i++) {
h6List[i].className='collapsed';
h6List[i].onclick=function() {toggle(this)}
tblList[i].style.display='none';
}

toggle(document.getElementById(tab));
}


function toggle(obj) {
var tblList=document.getElementById('lnav').getElementsByTagName('table');
for(var i=0; i<tblList.length; i++) {
tblList[i].style.display='none';
}
var sibling=document.getElementById("t"+(obj.id.substr(1)))
sibling.style.display=(sibling.style.display=='block')? 'none' : 'block';
var els=document.getElementsByTagName('h6')
for(var i=0;i<els.length;i++){
els[i].className='collapsed';
}
els[obj.id].className='expanded';

}
</script>
</head>
<body>

<table cellpadding="0" cellspacing="0" border="0">
<tr><th></th></tr>
<tr>
<td id="lnav">

<h6 id="s1">Section 1</h6>
<table cellpadding="0" cellspacing="0" border="0" id="t1">
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
</table>

<h6 id="s2">Section 2</h6>
<table cellpadding="0" cellspacing="0" border="0" id="t2">
<tr><th></th></tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
</table>

<h6 id="s3">Section 3</h6>
<table cellpadding="0" cellspacing="0" border="0" id="t3">
<tr><th></th></tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

zzz0zzz
05-24-2005, 06:47 PM
Thanks.

Hey send me the list of what images you need and perhaps a few samples of what you've got. Feel free to use PM not to clutter the board. ;)

Ultimater
05-24-2005, 07:22 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>show - hide</title>
<style type="text/css">
.collapsed {
cursor: pointer;
cursor: hand;
color: #ff3300;
}
.expanded {
cursor: pointer;
cursor: hand;
color: #0066ff;
}
.linkNOTselected {
color : #000000;
text-decoration : underline;
font-weight: none;
}
.linkselected {
color : #CCCCCC;
text-decoration : none;
font-weight: none;
}
.linkselected:hover {
color : #EEEEEE;
text-decoration : none;
}
.linkNOTselected:hover {
color : #666666;
text-decoration : underline;
}
</style>

<script type="text/javascript">
// global var to hold the tab to open (0 for first, 1 for second, etc.)
var tab="s2";

onload=function() {
var h6List=document.getElementById('lnav').getElementsByTagName('h6');
var tblList=document.getElementById('lnav').getElementsByTagName('table');
var aList=document.getElementById('lnav').getElementsByTagName('a');

for(var i=0; i<tblList.length; i++) {
h6List[i].className='collapsed';
h6List[i].onclick=function() {toggle(this)}
tblList[i].style.display='none';
}
for(i=0;i<aList.length;i++){
aList[i].className="linkNOTselected"
aList[i].onclick=function(){setActiveLink(this)}
}

toggle(document.getElementById(tab));
}


function toggle(obj) {
var tblList=document.getElementById('lnav').getElementsByTagName('table');
for(var i=0; i<tblList.length; i++) {
tblList[i].style.display='none';
}
var sibling=document.getElementById("t"+(obj.id.substr(1)))
sibling.style.display=(sibling.style.display=='block')? 'none' : 'block';
var els=document.getElementsByTagName('h6')
for(var i=0;i<els.length;i++){
els[i].className='collapsed';
}
els[obj.id].className='expanded';

}
function setActiveLink(This){
var aList=document.getElementById('lnav').getElementsByTagName('a');
for(i=0;i<aList.length;i++)aList[i].className="linkNOTselected"
This.className="linkselected"
}

</script>
</head>
<body>

<table cellpadding="0" cellspacing="0" border="0">
<tr><th></th></tr>
<tr>
<td id="lnav">

<h6 id="s1">Section 1</h6>
<table cellpadding="0" cellspacing="0" border="0" id="t1">
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
</table>

<h6 id="s2">Section 2</h6>
<table cellpadding="0" cellspacing="0" border="0" id="t2">
<tr><th></th></tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
</table>

<h6 id="s3">Section 3</h6>
<table cellpadding="0" cellspacing="0" border="0" id="t3">
<tr><th></th></tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Ultimater
05-24-2005, 07:25 PM
Ok, I tested the above in FF and IE again :)
I added a hover code to the CSS, if you don't want it, then just take-out the following:

.linkselected:hover {
color : #EEEEEE;
text-decoration : none;
}
.linkNOTselected:hover {
color : #666666;
text-decoration : underline;
}