Dynamic Tables?

Having designed plenty of sites for other people, i thought it was about time that i had my own, so i have come up with the concept below. Now i will try to explain what i want to do and why i need your help. This picture shows, in it's actual size, how the site would look:

Each of the milky-white bars, when clicked, should expand to show an area like the one with the iMac pic in, but obviously each with different content. Now would the best way to do this be to create a table, and when these images are clicked set the height of the cells with the content in from 0px to 200px, or is this not possible, and i should instead be doing something else? I dont want to use flash for this part of the site, so any help would be great thanks.

#279948

cant help you there, but if its my opinion you want, that looks awesome! you can go very far with this concept, imo; i love the idea so far. the white bars do looks a bit dead, however. maybe increase the saturation on the buttons? or make them match the green logo. just my critique

and what are you doing using arial!?

#279960

The design is really good first off. As for the click-to-show buttons... use DIVs and some javascript to change the visibility. That should be the easiest way, and it's how the forums do it.

#279961

If I remember correctly, dynamicdrive.com had a sample script for the "Microsoft Outlook" effect. But the response earlier about DIVs and visibilty through javascript is the best bet.

#279968

Lucas Mendes Menge, the creator of Orbit, had a website like this. See if you can get in touch with him.

You could do it in pure CSS, using display:, and absolute positioning; however, you won't be able to get an animation (even with this pure CSS, you need to use a very tiny amount of JS for the onMouseOver event, however, you don't need a script).

-NC

#279976

Yes, is the effect you are going for similar to the old VanillaSoaps' comments?

You would just need a couple lines of JavaScript then just have an onmouseclick [no capitals in xHTML remember!!] and use styles. It would just change the display: from none; to block;

#279986

Thanks for plenty of feedback guys, i'll try the different methods to see how they work, then i'll post a coded version for you to see.

Thanks again.

#279991

OK, i got a bit of code going, and now i have the bars set up with the title, and they show/hide the relevant section. I am aware that none of this is particularly interactive i.e. no rollover effects, and not well designed with just images and no text etc. etc. but my concern now is to work out how, when i hide a certain DIV, to make the other parts of the page move up rather than leaving a large white space. Can any one help? Thanks.

Here's the page

#280187

if you could give me some time, I can do something for you.

sunday evening, ok?

I really like the idea of your page.

#280191

Really cool concept ! Would love to see it in action :drool:

#280201

wow yes please pichfl, any thing to help. thanks.

#280207

Well, you ARE using Javascript to do that. I can show you a functioning example (text only), if you'd like. PM me if you're interested.

-NC

[Edit: The code is my own (with a little DOM assistance from our local web coding guru), so I can walk you through it if it's not clear.]

#280342

FYI

That page doesn't work.

#280357

Err, there isn't a page yet, apart from theone with a little bit of code. and what does FYI mean?

EDIT: just worked it, i'm guessing it means for your information . Thanks, seems to wrk for me though :slant:

#280359

the code doesn't work

#280375

Your design is very slick, the concept is brillian, I found a site that's got the same concept as you http://www.guildwarsguru.com/skill/class/6-warrior check it out.

#280393

Thanks TonicX. I've got another version now, with different code, (a bit of help from nightcrawler )

So here it is

#280451

Do me a favor and change the class names...they have no meaning for you, and would probably become more confusing. It's for a client who makes air conditioning .

Oh, and could you stick this somewhere in the code? After that, you're free to use it how you want.

#280511

mcuh better!

#280535

Ok, some comments I'd make on your code...

First, there is absolutely no reason for you to be using HTML tables for your content; you should do something like this for each block that can be collapsed down to it's header.:

[...]

News

Some content and stuff in here...

Then, in your CSS you can apply all the styling you need to those to acheive the open view.

At this point, we have a completely accessible, nicely styled page, with semantically structured content, and it'll be accessible to pretty much every browser in the world.

Then we need to add the JavaScript. At the moment, you have lots of embedded script blocks and things like onclick attributes...

All you need do is put a <script src="../../unavailable.html" type="text/javascript"> into your head block, and that file should bind up all the JavaScript events and contain all your code.

I'll put together a fuller example today, and post it in a while...

Also, you really shouldn't use images for everything you're using them for...

#280807

Ok, I've come up with a near-complete example of how I'd make this sort of structure, and it should pretty much work as intended in IE/Moz/Fx, but I can't be bothered to test in much else right I'm afraid, but I don't think there'll be any major issues with it.

Taken from the header of the contentswitcher.js file:

To make this work, simply add one line to your HTML:

<script type="text/javascript" src="../../unavailable.html">

and then make any areas you want collapsible to have the following

format (where [...] means "your content/markup can go here"):

[Title]

[...]

That's it. No registration function, nothing.

I will, however, say that the CSS I've added is very rudimentary - fonts aren't right, and layout of content areas is minimal. Also, IE isn't looking quite right, but the JavaScript is the focus of this example, not the layout.

The JavaScript should do everything you want, save opening a starting content area, but that's not too hard to add, if you have a read through the JavaScript itself. I'll also warn you that it's not phenomenally optimised, so the JavaScript could probably do with some performance tweaking, but that's something that's optional, really...

Also, I'd like to ask that, as nightcrawler requested, you reference me as the original author of the JavaScript noting yourself as a modifier.

It's not massively commented, but it should be pretty self explanatory if you take the time to read through...

If anyone has any questions, though, don't hesitate to ask...

Example.zip

Attachment: Example.zip

#280845

It seems I've been outclassed...ah well, at least it was by the master. If you're using any of my code, can you still put that comment in there?

Thanks

-NC

P.S: hell Stevie, I may end up using your code .

#280868

It seems I've been outclassed...ah well, at least it was by the master.

Seriously, though, I'm no master - I just try to learn as much as I can, and pass on what I know to anyone stupid enough to listen

P.S: hell Stevie, I may end up using your code .

#280968

Wow thankyou very much, you'll both certainly get the notes in the code, and i'll no doubt include a links section eventually so if you want anything in there let me know Now time for me to chew through that code...

EDIT: Damn you're good :cool:

#281027

Ok, well i've got a new version, it's nothing near final though so i haven't finished a lot of things, including the special folio area i'm making in flash, so for now all i did was clean up the CSS to make it look more like i wanted, and structure some things with tables. Yes they were necessary i swear! Be assured that once it is done appropriate comments of thanks will be made!

Here it is.

EDIT: I also accidentally saw what the page looks like when no CSS is applied or images are loaded, and it's still readable, so good job stevie.

#281350