flexinode tab presentation

By Ian Ward on 2 May 2005 at 03:50 UTC

I'm trying to think of how to best do the following:

Say I setup a flexinode. Then the flexinode has 7 fields for example. The first three fields are two text fields and the one text area, the other 4 fields are text areas. I want these three to appear on one page together at /project1 and on that page there would be three theme_menu_local_task styled tabs. Each of the four tabs would go to /project1/textarea1, /project1/textarea2, etc. so essentially you can view the data of a flexinode not all at once, but instead by tabbing through it. Just as an example, it would be neat to catalog books and present them like this. The first tab would have title, author, and a summary. the second tab would be what the insert says, the third the table of contents, the fourth would be the about-the-author, and the fifth would be the text on the back of the book. This is just an example...as i'm imagining a lot more in terms of how this could help w/ presentation of information.

Any ideas where to start? Ideas on how to set one up w/ modifying flexinode? Then, something that could work w/ flexinode or the coming content construction kit to make this easy to do from the user end?

cheers,
Ian

Comments

a mockup of what it looks like

Ian Ward commented 2 May 2005 at 13:15

here is a url to a mockup of what I describe above.

The content which would appear when you click on a tab like Author Bio, TOC, Index, and About are all controlled by one flexinode type, and what appears under Index, for example, would be a textarea for that flexinode type.

http://www.developmentseed.org/misc/flexitabbing.png

this would also be good in books

jasonwhat commented 2 May 2005 at 23:03

Not with an entire multi-level book, but maybe within one level. The block could be all the top-level sections and the tabs could get you through each section. I like that layout a lot.

That sounds like another

Ian Ward commented 4 May 2005 at 05:09

That sounds like another good use for the tabs. Especially helpful w/ book menus that get really long...I think it would really helpful to see the contents in a chapter, and it would never be necessary to scroll down to continue viewing the contents...

The idea of using this tabbing w/ flexinode takes something that is not normally on separate urls (a flexinode's fields) and helps you separate the fields, creates the sub urls for you, and incorporates the tabs to let you tab through each field or group of fields.

Some other good uses are:
-for doing a slideshow of a set of images
-a step by step how-to you want someone to be able to tab through, but keep all the contents easily editable and repeatable via flexinode
-what else?

Node creation

jasonwhat commented 4 May 2005 at 07:27

I also like this as a way to do some node creation. When you have multiple text areas with filter tips, the node creation page can get long and intimidating. I understand node creation is being refactored so maybe you don't want to touch this. However, I like this as a way of gathering data, be it registrations, surveys, or content creation, almost like a wizard. This may be something too different, but if these tabs could contain any page, including node creation pages or profile pages that would be great.

Imagine being able to have users register, then tab over (either manually or automatically) and fill-in profile fields, then tab over and start and organic grop, tab again and create their first blog post to the group. Maybe in the middle there, have a help page explaining what a group is. Or, tab through a slide-show and finish with signing a petition. Ajax may be useful for all this as well, but I don't know how that fits in with Drupal. I'd love to learn though.

Does the new primary_links

venkat-rk commented 3 May 2005 at 01:31

Does the new primary_links module come close to doing what you want?
http://cvs.drupal.org/viewcvs/drupal/contributions/modules/primary_links/

It doesn't use flexinode, though.

The idea would be to make

Ian Ward commented 3 May 2005 at 03:17

The idea would be to make this work w/ flexinode, and that any field, whether a textfield, textarea, image, or whatever, could be placed on different sub url pages of that particular flexinode. Take the profile.module for example. When you create multiple categories, like 'about me', 'personal information', 'work', etc., and a user is editing them, they have to tab through them...so the profile module kindof does this in a way, but not in the final display of the categories, rather only when a user is editing their profile and there are multiple categories setup, they can tab through and edit the fields on each one.

Now, the idea would be to take this functionality and make it easy for the site administrator to, when creating a flexinode, say which field appears under which tab...and you could make all fields appear on one page, like it does now, or have a few fields appear on the main page like /bookreviews/web_standards and then have one or more fields appear on sub urls for example /bookreviews/web_standards/2 and bookreviews/web_standards/3 and the creation of the sub urls w/in one single flexinode would be setup by the administrator much like you setup categories when you setup the profile module, and the end result would look something like the mockup. The finished, published result would look like the mockup...when you are actually creating the flexinode as in 'create content > bookreview(flexinode)' you could fill out all the fields on one page...the tabbing does not appear until the finished, published node. So, it's the opposite of the profile.module where when editing your profile when there are multiple categories, you tab through them, and not in the published profile.

Try tabtastic

pgassner commented 4 May 2005 at 11:53

I would recommend using tabtastic (http://phrogz.net/JS/Tabtastic/index.html#overview) for that purpose. It uses JavaScript but degrades nicely if JS is disabled. Also, it loads content "in the background", which means you can switch quickly between the tabs without reloading the page.
You can have a look at a site where I incorporated this recently (it's still not public, so just leave away the "drupal/" part if the link doesn't work anymore :) ):

http://www.daxarchitektur.ch/drupal/projekte/mehrfamilienhaus_im_laegi_k...

I did quite a lot of flexinode-hacking and could post some code samples here if there is interest...

Regards, Peter

What about Drupal Tabs?

jasonwhat commented 4 May 2005 at 18:58

This looks great, There would have to be some mention of the fact that Drupal node views have tabs at the top already, so that needs to be themed around. Some tab functionality is already in the quickpost module using JS.

Please...

venkat-rk commented 20 May 2005 at 06:16

I did quite a lot of flexinode-hacking and could post some code samples here if there is interest...

By all means, yes. There is far too little about Flexinode and ways to use it on the drupal forums or handbook. Your inputs would be very useful.

One of the things I am looking for is being able to pull flexinode info into a block -of course, as you know by now, I am zero in php/mysql;-)

How to combine tabtastic with flexinode

pgassner commented 26 September 2005 at 17:34

To accomplish the layout of this site, I combined two pieces of code: a) Tabtastic, a wonderful JavaScript solution to switch between CSS-Tabs and b) Flexinode with some template modifications to fit in with Tabtastic. The following code works with drupal 4.6

Here are the configurations I made. If you try it on your site and it doesn't work, I maybe forgot some modifications I made, but I hope, I can find these if needed... Ok, here we go.

Tabtastic

To install Tabtastic, I downloaded the package from Gavin Kistners site (http://phrogz.net/JS/Tabstatic/index.html) and dropped the contents to the websites root-directory (actually, it would be nicer to put it into "misc/", but I wasn't comfortable enough with JS at the time to make this modification).

What this basically does, is to check your HTML for certain hooks (if JS is enabled) and apply its own CSS to them. There are two kinds of hooks:

a ul-list to receive user-input

<ul class="tabset_tabs">
  <li><a href="#tab1">*</a></li>
  <li><a href="#tab2">*</a></li>
</ul>

a content-area where the content of one hidden div at a time is being displayed.

  <div id="tab1" class="tabset_content">
    Some content here...
  </div>
  <div id="tab2" class="tabset_content">
    Some other content...
  </div>

The magic with this setup lies in the CSS with which you can do basically anything you like. Be sure that you check what happens if someone has JS disabled (e.g. for security reasons or whatever)!

Flexinode

Now, to fill in the contents of the site I created a flexinode with six image fields and their corresponding text-annotation fields, so that an editor can enter text that differs from image to image.

This outputs some flexinode fields which have to be adapted to our purpose - at the time I hacked this right into the flexinode module itself, but now after experimenting with flexinode themeing (http://drupal.org/node/17455) I think, that it should be achievable without hacking the module. You basically alter the output so that it corresponds to the code that tabtastic needs. I created the ID of the divs with the flexinode field IDs.

As a last step you'll have to create an ul-list to switch between the divs. I enhanced the function flexinode_content in the file flexinode.module to output this list:

flexinode_content($node) {
...

if ($node->type == 'flexinode-1') {
  $node->body .= '<ul class="tabset_tabs">';

  $i=0;  
  foreach ($ctype->fields as $field) {
    $currentflexinode = 'flexinode_'. $field->field_id;
  
    if ($i==0) {
      $attributes = ' class="active"';
    } else {
      $attributes = '';
    }
    if ($node->$currentflexinode!='') {
      $node->body .= '<li><a href="/'. $node->path .'#tab'. $field->field_id. '"'. $attributes .'><b>&#8226;</b></a></li>';    
    }
    $i=$i+1;
  }
  $node->body .= '</ul>';
}

...
}

I hope you can puzzle this together so that it makes some sense :) If further clarifications are needed, I hope I can answer on time (of which there is way too little in a day...). You can also send me an email via the contact form.

Regards, Peter

wow!

JohnG-1 commented 13 November 2005 at 03:29

peter this looks brilliant! it sounds like exactly what I'm after. Thanks a million for the outline.

I confess, I haven't tried it yet, but from looking at http://phrogz.net/JS/Tabtastic/index.html#requirements (file seems to have moved) don't you have to get the stylesheet urls into the drupal headers?

was that easy too ...?

BTW I'd love to see this in action: please could you post a link to your site where it's used?

thanks again
J

Tabs go to actual path

jasonwhat commented 14 November 2005 at 08:46

I tested this just by creating a page with the html. I manually put the path to the css in my page.tpl.php because that seemed better for drupal. Everything looked good until I clicked a tab. The tab displayed the information, but only for a moment because drupal interpreted the anchor link just href="#tab1" as a real path, so it tried to go to mysite.com/#tab1 instead of just staying on the page. Any ideas how to get around this.

Once I figure out my minor problem I will give this a try in flexinode. I think that as long as you have all the tabs as required fields than using pure phptemplate will work with no module hacking as the ul links will be uniform for each flexinode of that type.

One last thing. I've been working on doing something similar using pure css. Any thoughts on js vs pure css for this type of thing?

Any thoughts on js vs pure css for this type of thing?

JohnG-1 commented 14 November 2005 at 16:17

jasonwhat
you might find something useful at discussion on this old thread :
http://drupal.org/node/14886

anchor URLs

JohnG-1 commented 14 November 2005 at 16:32

thanks for the reminder about adding headers to page.tpl.php :P

please keep us posted on progess with the anchor URLs ...

many thanks
J

Anchors aren't supported

jasonwhat commented 14 November 2005 at 18:15

I was stunned, but yes, there is no anchor support in Drupal. There is a module to help here, http://drupal.org/node/13080#comment-66105. It is quite strange that this is a known problem and the fix is some code bits listed in forums.

This only partically solved my problem though. I can't get the first two tabs to display their content at all when clicked. One thing I don't like about this is that the use of anchors makes the page jump. I wonder if there is a better js solution. Maybe, using code found in Taxonomy_dhtml is a better idea. Or, try this module I've just found called tabs. I just took the html from the example page and that can be used to create the tabs anywhere on your site. It looks cleaner and will be supported as a module so probably a better way to introduce this type of functionality.

Module?

eodonnell commented 17 December 2005 at 05:45

Could this be made into a module? I would love to have something like this - but it is too complex at this point for the average user to put in place.

Tabtastic Help

eodonnell commented 18 December 2005 at 19:59

Peter - thanks for the instructions - they were most helpful. After some tinkering I was able to get the tabs to basically work...however for some reason, they link for a second and then re-direct to my homepage. Any thoughts as to why?

http://election.teachingmatters.org/teacher/node/34

Thanks,

Evan

anchor problem

jasonwhat commented 18 December 2005 at 21:22

This is because of the problem with anchors that we were discussing above. Drupal thinks the link is to an anchor on your homepage and always goes there.