category tabs

**tryingtolearn** · 27 Jun 2006, 02:17 PM

Would it be a difficult venture to have the category_tab also disply the subcategories on mouseover?

Really have no idea where to start.

**tryingtolearn** · 27 Jun 2006, 06:13 PM

Maybe I need to start off smaller - I cant even get the tabs to work proper.

I am trying to use a set of css based tabs
This is the css code Im attempting

Code:

#tab_header {
      float:left;
      width:100%;
      background:#DAE0D2 url("../images/tabbg.png") repeat-x bottom;
      font-size:93%;
      line-height:normal;
      }
    #tab_header ul {
      margin:0;
      padding:10px 10px 0;
      list-style:none;
      }
    #tab_header li {
      float:left;
      background:url("../images/loff.png") no-repeat left top;
      margin:0;
      padding:0 0 0 9px;
      }
    #tab_header a {
      display:block;
      background:url("../images/roff.png") no-repeat right top;
      padding:5px 15px 4px 6px;
      text-decoration:none;
      font-weight:bold;
      color:#202020;
      }
    #tab_header a:hover {
      color:#336699;
      }
    #tab_header #tab_current {
      background-image:url("../images/lon.png");
      }
    #tab_header #tab_current a {
      background-image:url("../images/ron.png");
      color:#336699;
      padding-bottom:5px;
      }

Then I am replacing in categories_tab.php

Code:

$link = '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . (int)$categories_tab->fields['categories_id']) . '">' . $categories_tab_current . '</a>';
    echo $link;
    $categories_tab->MoveNext();
  }

with

Code:

$link = '<div id="tab_header"><ul><li><a href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . (int)$categories_tab->fields['categories_id']) . '">' . $categories_tab_current . '</a></li></ul></div>';
	echo $link;
	$categories_tab->MoveNext();

But it just stacks every tab in its own unordered list.
I tried adding the div and ul in separate lines but that didnt change anything either.

1 more note - I also started getting forbidden access warnings when it went haywire.

Is there anything written on this - all the threads I saw in the search dealing with the category_tabs says they are left for customization but I need to figure out how.

Thanks for any advice.

**tryingtolearn** · 27 Jun 2006, 07:05 PM

I have the stacking worked out
I made a few changes but am still having problems

The categories_tab.php now looks like this

Code:

// currently selected category
    if ((int)$cPath == $categories_tab->fields['categories_id']) {
      $new_style = 'category-top';
      $categories_tab_current = '<li class="tab_current">' . $categories_tab->fields['categories_name'] . '</li>';
    } else {
      $new_style = 'category-top';
      $categories_tab_current = '<li>' . $categories_tab->fields['categories_name'] . '</li>';
    }

    // START_ORIGINAL create link to top level category
    $link = '<a href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . (int)$categories_tab->fields['categories_id']) . '">' . $categories_tab_current . '</a>';
	echo $link;
	$categories_tab->MoveNext();
  }

the css

Code:

SPAN.tab_header {
      float:left;
      width:100%;
      background:#DAE0D2 url("../images/tabbg.png") repeat-x bottom;
      font-size:93%;
      line-height:normal;
      }
    SPAN.tab_header ul {
      margin:0;
      padding:10px 10px 0;
      list-style:none;
      }
    SPAN.tab_header li {
      float:left;
      background:url("../images/loff.png") no-repeat left top;
      margin:0;
      padding:0 0 0 9px;
      }
    SPAN.tab_header a {
      display:block;
      background:url("../images/roff.png") no-repeat right top;
      padding:5px 15px 4px 6px;
      text-decoration:none;
      font-weight:bold;
      color:#202020;
      }
    SPAN.tab_header a:hover {
      color:#336699;
      }
    SPAN.tab_header #tab_current {
      background-image:url("../images/lon.png");
      }
    SPAN.tab_header #tab_current a {
      background-image:url("../images/ron.png");
      color:#336699;
      padding-bottom:5px;
      }

and I also modified tpl_header.php
to this

Code:

//define('CATEGORIES_TABS_STATUS','0');  //  --- this moved to "configuration" table in database
define('FILENAME_CATEGORIES_TABS','categories_tabs.php');
if (CATEGORIES_TABS_STATUS == '1') {
  echo '<span class="tab_header"><ul>';	
  include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_CATEGORIES_TABS));
    echo '</ul></span>';
}

but the images and links are out of alignment - would it be a conflict in the css?? any ideas

**tryingtolearn** · 28 Jun 2006, 01:52 AM

Round 3

The tabs are displaying properly now
But - it is wrapping around to the next line. and it causes the site to go haywire.

It looses the stylesheet and it gives a You are not authorized to access this page warning.

Any ideas.

Here is the css

Code:

.tab_header {
      float:left;
      width:100%;
      background:#DAE0D2 url("../images/tabbg.png") repeat-x bottom;
      font-size:93%;
      line-height:normal;
      }
    .tab_header ul {
      margin:0;
      padding:10px 10px 0;
      list-style:none;
      }
    .tab_header li {
      float:left;
      background:url("../images/loff.png") no-repeat left top;
      margin:0;
      padding:0 0 0 9px;
      }
    .tab_header a {
      display:block;
      background:url("../images/roff.png") no-repeat right top;
      padding:5px 15px 4px 6px;
      text-decoration:none;
      font-weight:bold;
      color:#202020;
      }
    .tab_header a:hover {
      color:#336699;
      }
    .tab_header #tab_current {
      background-image:url("../images/lon.png");
      }
    .tab_header #tab_current a {
      background-image:url("../images/ron.png");
      color:#336699;
      padding-bottom:5px;
      }

Here is tpl_header.php

Code:

<?php
// set to 1 for ON or 0 for OFF
//define('CATEGORIES_TABS_STATUS','0');  //  --- this moved to "configuration" table in database
define('FILENAME_CATEGORIES_TABS','categories_tabs.php');
if (CATEGORIES_TABS_STATUS == '1') {
  echo '<div class="tab_header"><ul>';	
  include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_CATEGORIES_TABS));
    echo '</ul></div>';
}
?>

Here is the categories_tabs.php

Code:

  $order_by = " order by c.sort_order, cd.categories_name ";

  $categories_tab_query = "select c.categories_id, cd.categories_name from " .
                          TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd
                          where c.categories_id=cd.categories_id and c.parent_id= '0' and cd.language_id='" . $_SESSION['languages_id'] . "' and c.categories_status='1'" .
                          $order_by;
  $categories_tab = $db->Execute($categories_tab_query);


  while (!$categories_tab->EOF) {

    // currently selected category
    if ((int)$cPath == $categories_tab->fields['categories_id']) {
      $new_style = 'category-top';
      $categories_tab_current = '<li class="tab_current"><a href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . (int)$categories_tab->fields['categories_id']) . '">' . $categories_tab->fields['categories_name'] . '</a></li>';
    } else {
      $new_style = 'category-top';
      $categories_tab_current = '<li><a href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . (int)$categories_tab->fields['categories_id']) . '">' . $categories_tab->fields['categories_name'] . '</a></li>';
    }

    // START_ORIGINAL create link to top level category
    $link = $categories_tab_current;
	echo $link;
	$categories_tab->MoveNext();
  }

I really need help!!

**tryingtolearn** · 28 Jun 2006, 12:47 PM

Am I posting this question in the wrong spot or something???

**tryingtolearn** · 29 Jun 2006, 05:06 PM

Got it all working now.
Did away with the css tabs and used tables,
also added a field to the category table to show or not show the cat in the tabs section.
This helped control the layout.

The current page is a real nice feature because it made it really easy to provide a visual effect on the buttons.

Now back to the original problem of having the subcats...
anyway,
If anyone else was going through the same problem - let me know I have developed a pretty good relationship with the categories_tab.php page!!!.

**k4satin** · 29 Jun 2006, 06:01 PM

Wow! I'm glad to see your post. I think this is exactly what I've been trying to do, but you sound a little more advanced in the coding than me. I want my category tabs along the top with fly-out (really down) menus appearing on roll-over.

I've been trying to use the css fly-out modules. I downloaded the first, which is intended to work in the categories side-box, then tried to cut some of the code into my tpl header (that's where I have my tabs on), but didn't get the right combination of code and only got parse errors.

There is also a similar module made for the header. I applied this, erased all the non-category links, and was left with one that just said "category" and showed all sub-categories (multiple levels) on roll-over. I was trying to mess with the code to get that top-level "category" link out and have it start with the first-level categories (I only have 3), then still use the category_ul_generator that's in these mods. I got as far as listing the three categories vertically on top of each other coming down from the header without the top link "category," but didn't know how to make them show up horizontally. I've tried with and without categories_tabs turned on (the categories_ul_generator starts with the top-level category, so, in theory, if I'm using that unaltered, it would replace the tabs...if I could get it all to present itself along the top like the tabs).

Anyway, could you please show me your link so I can see what you've done? Did you have to manually enter each sub-category in your list, or does it generate automatically? I'd like it to generate automatically from the catalog so that my client can make chenges to his categories without having to come back to me each time. Also need the function "show only categories with products in them" to work.

It looks like we went about this in totally different ways. Maybe some combination of the two would work perfectly?

Thanks for continuing to list your progress even though you haven't gotten responses. I haven't gotten any response to my other posts either.

**tryingtolearn** · 29 Jun 2006, 06:27 PM

I started with the flyout mod as well but it seems really jerky w/ IE so I wasnt happy with that.

It is dynamic so it will update as new cats are added or removed but I also added a field to the category table to make it show in the tabs or not.

I am working on the subcategories now so that isnt worked out yet but here is what I have done up to this point.

For the database:
Added a field to the end of the categories_description table
field - sit
type - char
size - 1
default - y

This gave me a y in every category field that was already in there so I can call all the categories with a y in the sit(Show in tab) field later on.

Then I went into the database and changed the y to n for all categories I didnt want to show as a tab.

I will eventually get around to adding the option to the category form in the admin but for right now it is done manually.

The I edited tpl_header.php to this (The section for the tabs at the bottom)

Code:

if (CATEGORIES_TABS_STATUS == '1') {
   echo '<table width="100%" BORDER="0" CELLPADDING="0" CELLSPACING="0"><tr>';	
  include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_CATEGORIES_TABS));
    echo '</tr></table>';
   }

in categories_tabs.php I added
and cd.sit='y' (should be in bold text in the codebelow) in the database query
and all of the table info listed in the if statements.

Code:

 
 $order_by = " order by c.sort_order, cd.categories_name ";

  $categories_tab_query = "select c.categories_id, cd.categories_name from " .
                          TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd
                          where c.categories_id=cd.categories_id and c.parent_id= '0' and cd.language_id='" . $_SESSION['languages_id'] . "' and c.categories_status='1' and cd.sit='y'" .
                          $order_by;
  $categories_tab = $db->Execute($categories_tab_query);


  while (!$categories_tab->EOF) {

    // currently selected category
    if ((int)$cPath == $categories_tab->fields['categories_id']) {
      $new_style = 'category-top';
      $categories_tab_current = '<td><TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%" HEIGHT="50">

<TR>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="30" HEIGHT="12"><IMG NAME="button10" SRC="images/button2_1x1.png" WIDTH="30" HEIGHT="12" BORDER="0"></TD>
<TD ROWSPAN="1" COLSPAN="1" HEIGHT="12" background="images/button2_1x2.png"></TD>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="4" HEIGHT="12"><IMG NAME="button12" SRC="images/button2_1x3.png" WIDTH="4" HEIGHT="12" BORDER="0"></TD>
</TR>

<TR>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="30" HEIGHT="33"><IMG NAME="button13" SRC="images/button2_2x1.png" WIDTH="30" HEIGHT="33" BORDER="0"></TD>
<TD ROWSPAN="1" COLSPAN="1" HEIGHT="33" background="images/button2_2x2.png" align="center">' . $categories_tab->fields['categories_name'] . '</TD>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="4" HEIGHT="33"><IMG NAME="button15" SRC="images/button2_2x3.png" WIDTH="4" HEIGHT="33" BORDER="0"></TD>
</TR>

<TR>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="30" HEIGHT="5"><IMG NAME="button16" SRC="images/button2_3x1.png" WIDTH="30" HEIGHT="5" BORDER="0"></TD>
<TD ROWSPAN="1" COLSPAN="1" HEIGHT="5" background="images/button2_3x2.png"></TD>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="4" HEIGHT="5"><IMG NAME="button18" SRC="images/button2_3x3.png" WIDTH="4" HEIGHT="5" BORDER="0"></TD>
</TR>

</TABLE></td>';
    } else {
      $new_style = 'category-top';
      $categories_tab_current = '<td><TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%" HEIGHT="50">

<TR>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="30" HEIGHT="12"><IMG NAME="button10" SRC="images/button1_1x1.png" WIDTH="30" HEIGHT="12" BORDER="0"></TD>
<TD ROWSPAN="1" COLSPAN="1" HEIGHT="12" background="images/button1_1x2.png"></TD>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="4" HEIGHT="12"><IMG NAME="button12" SRC="images/button1_1x3.png" WIDTH="4" HEIGHT="12" BORDER="0"></TD>
</TR>

<TR>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="30" HEIGHT="33"><IMG NAME="button13" SRC="images/button1_2x1.png" WIDTH="30" HEIGHT="33" BORDER="0"></TD>
<TD ROWSPAN="1" COLSPAN="1" HEIGHT="33" background="images/button1_2x2.png" align="center"><a href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . (int)$categories_tab->fields['categories_id']) . '">' . $categories_tab->fields['categories_name'] . '</a></TD>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="4" HEIGHT="33"><IMG NAME="button15" SRC="images/button1_2x3.png" WIDTH="4" HEIGHT="33" BORDER="0"></TD>
</TR>

<TR>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="30" HEIGHT="5"><IMG NAME="button16" SRC="images/button1_3x1.png" WIDTH="30" HEIGHT="5" BORDER="0"></TD>
<TD ROWSPAN="1" COLSPAN="1" HEIGHT="5" background="images/button1_3x2.png"></TD>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="4" HEIGHT="5"><IMG NAME="button18" SRC="images/button1_3x3.png" WIDTH="4" HEIGHT="5" BORDER="0"></TD>
</TR>

</TABLE></td>';
    }

    // START_ORIGINAL create link to top level category
    $nest = '';	
	$link = $categories_tab_current;
	$endnest = '';
	echo $link;
	$categories_tab->MoveNext();
  }

Is there a better way? Im sure - but this resulted in exactly what I was looking for.

I will post the subcats once I get it worked out.

**k4satin** · 2 Jul 2006, 06:14 AM

Thanks for the details. Do you have a live URL so I could see what it looks like on your site?

Thread: category tabs

Thread Tools

Search Thread

Display

category tabs

Re: category tabs

Re: category tabs

Re: category tabs

Re: category tabs

Re: category tabs

Re: category tabs

Re: category tabs

Re: category tabs

Similar Threads

Category Tabs

Category Tabs

Category 'tabs' that look like tabs?

Posting Permissions

Thread: category tabs

Thread Tools

Search Thread

Display

category tabs

Re: category tabs

Re: category tabs

Re: category tabs

Re: category tabs

Re: category tabs

Re: category tabs

Re: category tabs

Re: category tabs

Similar Threads

Category Tabs

Category Tabs

Category 'tabs' that *look* like tabs?

Posting Permissions

Category 'tabs' that look like tabs?