Brain drain on creating tabs

I am having a bit of a brain gone to mush, and having trouble working out a solution to some logic.

Now I am using some code that depending on what is flagged, I am creating some divs that will act as a tab, thanks to some style sheets magic and CF/extjs magic.

The problem that I have is that there is no one tab that is constant, in other words there could be none or up to 6 tabs displayed. So the problem is that I do need to make one of these tabs the default tab, preferably the first tab in the list. The problem is that as you can tell I am not sure which tab this will be. Now I could write a heap of logic/conditional statements, but was thinking that there might be an easier way.

i use css tab designer
http://www.highdots.com/products/css-tab-designer/
it writes straight css tabs, very slick.

I don't know any reason you couldn't just put the code within the view
(instead of the generated external css) and have the titles and links
change dynamically from the rc.

havent tried it, just an idea. only limitation to this is it would
have to be included in every view in order to work I think.

Alan,

It isn’t about which style to use, or how it should look. It is about which tab is going to be the default tab. I thought I said the rest is already taken care off :slight_smile:

Do it client-side?

Get Javascript to look at the tabs and default the first one it finds.

Andrew,

Why not default it using js after the page is built up?

Curt

+1, sorry James, didn’t see this first.

Ok, to give you a bit more of a clue. I am using divs, that have ajaxproxy binds that load a cfdiv. The problem is that I don’t know even what the first tab will be. It could be just one div, or it could be 6, granted they have all got their own id’s.

This is done very QAD for now, as I don’t have the time to do a proper tab integration into the site.

My whole point was that if you're writing your tabs with pure css, you
could create them on the fly in the browser (client side) with custom
vars from the rc.

I would assume that you'd know what tabs would be created (and what
dependencies you'd need) before you went to the view.

I don't know how youd pull that off with cfdivs and bind values though

one way that i have done something like this in the past is to put ALL
of the divs and cfc:binds into hidden divs and then style.display can
be triggered dynamically quite easily.

Alan, the problem still lies in the fact that I don’t know which tabs will be there. I have done tabs in the past many, many times in the past. And I would not have a problem with this, except that there is not one tab that I could say is constantly always there.

So it still leaves me trying to work out the best way to figure out which is the actually first tab.

To give you an idea, scenario one could be

Tab A, Tab B, Tab C

Scenario 2 could be
Tab C, Tab D, Tab E

Or just

Tab E

I am trying to tell you that the workings of the tab is not the issue, I have them working and working well. The issue is knowing which ones are going to be there and which is the first that will be set to the default opened.

JS or not, I am having a hard time getting that part work.

Add a class to the tab you want to be default when they are built and use JS to position it and change the style (active/inactive/whatever). jQuery makes this sort of thing very easy.

Jason Durham

BTW, it also seemed like you may be asking us whether Tab A, Tab B, or Tab C should be default. All we know is the name of the tab, not what data they represent and in what context.

Jason Durham

That is exactly what I am asking, the thing is that these are by definition divs that are styled to look like tabs. And they have are using cfajaxproxy to bind them, so that when the div is clicked it reloads the data needed into the cfdiv. Now that is all working, the problem is setting it up to be a default and giving that default tab the right style.

I am not going to load jQuery into an application when this is all it is going to be used for.

And secondly I would prefer extJS over jQuery any day as it is already included in ColdFusion, and is a far superior framework over jQuery.

Thirdly, it still comes back to finding out which div is the first div to apply the style.

We still don’t know what data could possibly exist in the tabs. How they are loaded or what they are loaded into seems irrelevant. That will depend entirely on the data the tabs can/do display and the context for which they are displayed. What information (possible tab content) does the user expect to see in the tabs? What information will be displayed around the tabs? These are things that that the client or UX team should decide, not a developer (unless its for yourself).

If all of that stuff varies (tabs are used in many pages with and infinite possibility of content), then you’ll need to have a way for the view/cfm to pass in what it needs to be set as default in whatever context they are being used.

Jason Durham

I’ll rephrase my comment so someone’s beloved doesn’t get its feelings hurt. Change the state and position of the “default” div using Javascript, or better yet, use .

You just said in a previous message you want us to tell you what content should be marked as default. Not, how to do it. If you know how to do it, then why did you even reply to this post?

Jason Durham