Jump to content
dev osCommerce
Forum
  • Checkout
  • Login
  • Contact Us
  • Get in touch

osCommerce

The e-commerce.

New Demo
Our Partners

Replicating table rows and cells.

Guest

By Guest
in General Support

Recommended Posts

Guest

Guest

Posted
Posted

I would like to replicate the Category content table rows and cells and populate each row with a category item. I would basically like my menu to look like mbx.com

 

Or if possible, Can someone please tell me how to make the background of the text change color on mouseover or hover, but change the color of the whole width of the table cell instead of just behind the color behind the text?

 

I know how to make the background of the text change color on mouseover, but I would like the color to be the width of the cell not just the width of the text. See newegg.com for an example of this.

 

Can someone PLEASE help.

 

Thanks

Guest

Guest

Posted
Posted

You mean this?

 

<table bgcolor="#FF0000" width="342">
<tr>
<td onMouseOver="this.style.backgroundColor='#00FFFF'" onMouseOut
="this.style.backgroundColor='#ff0000'">

<p align="center"><a href="menu_maker_navbars.htm">this cell highlights</a></p>


</td>
</tr>
</table>

Guest

Guest

Posted
Posted

Thanks, but after reading the code, I realize this will not work for me unless I can get each item in the categories table to be created in it's own row and cell. I mean with this code, if I have two links in one cell, the whole cell will change color regardless of which link I am over. So each link would have to be in it's own cell, right?

 

So I am back to where I started. I need to figure out how to change the OSC code for InfoBox so that each line is created in a new row and cell.

 

I hope I'm making sense.

 

Thanks for any help.

 

 

You mean this?

 

<table bgcolor="#FF0000" width="342">
<tr>
<td onMouseOver="this.style.backgroundColor='#00FFFF'" onMouseOut
="this.style.backgroundColor='#ff0000'">

<p align="center"><a href="menu_maker_navbars.htm">this cell highlights</a></p>
</td>
</tr>
</table>

Guest

Guest

Posted
Posted

Opps, gave you the wrong solution. Here's the one you want.

 

<div id="navi">
  <div>
     <a href="#">Express Pizzas Home</a>
  </div>
  <div>
     <strong>Online Pizza Orders</strong>
  </div>
  <div>
     <a href="#">Our Delivery Promise</a>
  </div>
  <div>
     <a href="#">Special Promotions</a>
  </div>
  <div>
     <a href="#">Contact the PizzaMaster</a>
  </div>
</div>

 

#navi a , #navi strong {
color: #000;
font: 12px Arial,Helvetica,sans-serif;
text-decoration: none;
border: 1px solid #000;

display: block;
width: 162px;
padding: 3px 5px;
margin: 7px;
}

#navi strong {
font-weight: bold;
background: #DDD;
}

#navi a {
background: #FFF;

}

#navi a:hover {
background: #999;
}

Guest

Guest

Posted
Posted

That makes categories.php looking like this:

 

<?php
/*
?$Id: categories.php,v 1.25 2003/07/09 01:13:58 hpdl Exp $

?osCommerce, Open Source E-Commerce Solutions
?http://www.oscommerce.com

?Copyright (c) 2003 osCommerce

?Released under the GNU General Public License
*/

?function tep_show_category($counter) {
? ?global $tree, $categories_string, $cPath_array;

? ?for ($i=0; $i<$tree[$counter]['level']; $i++) {
? ? ?$categories_string .= "";
? ? ?
? ?}
? ?// Begin of Code snippet: 

? ?if (tep_has_category_subcategories($counter)) {
? ? if ( ($id) && (in_array($counter, $id)) ) {
? ? ? ? ?$categories_string .= '<div id="categories">';
? ? ? ?} else {
? ? ? ? ?$categories_string .= '<div id="categories">';
? ? ? ?}
} else {
? $categories_string .= '<div id="categories_sub">';
}

// End of code snippet

? ?$categories_string .= '<a href="';

? ?if ($tree[$counter]['parent'] == 0) {
? ? ?$cPath_new = 'cPath=' . $counter;
? ?} else {
? ? ?$cPath_new = 'cPath=' . $tree[$counter]['path'];
? ?}

? ?$categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">';

? ?if (isset($cPath_array) && in_array($counter, $cPath_array)) {
? ? ?$categories_string .= '<b>';
? ?}

// display category name
? ?$categories_string .= $tree[$counter]['name'];

? ?if (isset($cPath_array) && in_array($counter, $cPath_array)) {
? ? ?$categories_string .= '</b>';
? ?}

? ?if (tep_has_category_subcategories($counter)) {
? ? ?$categories_string .= '';
? ?}

? ?$categories_string .= '</a></div>';

? ?if (SHOW_COUNTS == 'true') {
? ? ?$products_in_category = tep_count_products_in_category($counter);
? ? ?if ($products_in_category > 0) {
? ? ? ?$categories_string .= '';
? ? ?}
? ?}

? ?$categories_string .= '';

? ?if ($tree[$counter]['next_id'] != false) {
? ? ?tep_show_category($tree[$counter]['next_id']);
? ?}
?}
?>
<!-- categories //-->
? ? ? ? ?<tr>
? ? ? ? ? ?<td>
<?php
?$info_box_contents = array();
?$info_box_contents[] = array('text' => BOX_HEADING_CATEGORIES);

?new infoBoxHeading($info_box_contents, true, false);

?$categories_string = '';
?$tree = array();

?$categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.parent_id = '0' and c.categories_id = cd.categories_id and cd.language_id='" . (int)$languages_id ."' order by sort_order, cd.categories_name");
?while ($categories = tep_db_fetch_array($categories_query)) ?{
? ?$tree[$categories['categories_id']] = array('name' => $categories['categories_name'],
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?'parent' => $categories['parent_id'],
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?'level' => 0,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?'path' => $categories['categories_id'],
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?'next_id' => false);

? ?if (isset($parent_id)) {
? ? ?$tree[$parent_id]['next_id'] = $categories['categories_id'];
? ?}

? ?$parent_id = $categories['categories_id'];

? ?if (!isset($first_element)) {
? ? ?$first_element = $categories['categories_id'];
? ?}
?}

?//------------------------
?if (tep_not_null($cPath)) {
? ?$new_path = '';
? ?reset($cPath_array);
? ?while (list($key, $value) = each($cPath_array)) {
? ? ?unset($parent_id);
? ? ?unset($first_id);
? ? ?$categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.parent_id = '" . (int)$value . "' and c.categories_id = cd.categories_id and cd.language_id='" . (int)$languages_id ."' order by sort_order, cd.categories_name");
? ? ?if (tep_db_num_rows($categories_query)) {
? ? ? ?$new_path .= $value;
? ? ? ?while ($row = tep_db_fetch_array($categories_query)) {
? ? ? ? ?$tree[$row['categories_id']] = array('name' => $row['categories_name'],
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 'parent' => $row['parent_id'],
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 'level' => $key+1,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 'path' => $new_path . '_' . $row['categories_id'],
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 'next_id' => false);

? ? ? ? ?if (isset($parent_id)) {
? ? ? ? ? ?$tree[$parent_id]['next_id'] = $row['categories_id'];
? ? ? ? ?}

? ? ? ? ?$parent_id = $row['categories_id'];

? ? ? ? ?if (!isset($first_id)) {
? ? ? ? ? ?$first_id = $row['categories_id'];
? ? ? ? ?}

? ? ? ? ?$last_id = $row['categories_id'];
? ? ? ?}
? ? ? ?$tree[$last_id]['next_id'] = $tree[$value]['next_id'];
? ? ? ?$tree[$value]['next_id'] = $first_id;
? ? ? ?$new_path .= '_';
? ? ?} else {
? ? ?}
? ?}
?}
?tep_show_category($first_element); 
?
?$info_box_contents = array();
?$info_box_contents[] = array('text' => $categories_string);

?new infoBox($info_box_contents);
?>
? ? ? ? ? ?</td>
? ? ? ? ?</tr>
<!-- categories_eof //-->

 

And CSS looking like this.

 

div#categories a { display: block; background-color: #E5E5E5; border-bottom: 1px solid; padding-left: 15px; padding-top: 2px; padding-bottom: 2px; color: #000000; border-color: #FFFFFF; background-image: url('images/arr.gif'); background-repeat: no-repeat; background-position: left; border: 1px solid #E5E5E5; }
div#categories a:hover { background-color: #F2F2F2; color: #3A3A3A; text-decoration: none; background-image: url('images/arr_hover.gif'); background-repeat: no-repeat; background-position: left; border: 1px solid #ffffff; }
div#categories_sub a { display: block; background-color: #E5E5E5; border-bottom: 1px solid; padding-left: 15px; padding-top: 2px; padding-bottom: 2px; color: #000000; border-color: #FFFFFF; border: 1px solid #E5E5E5; }
div#categories_sub a:hover { background-color: #F2F2F2; color: #3A3A3A; text-decoration: none; background-image: url('images/arr_hover.gif'); background-repeat: no-repeat; background-position: left; border: 1px solid #ffffff; }

Guest

Guest

Posted
Posted

Brilliant! Thank you. Thank you. Thank you. Thank you. A little tweaking and it will be beautiful. Did I say, Thank you?

 

Thanks again,

 

S1d

 

That makes categories.php looking like this:

 

<?php
/*
 $Id: categories.php,v 1.25 2003/07/09 01:13:58 hpdl Exp $

 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com

 Copyright (c) 2003 osCommerce

 Released under the GNU General Public License
*/

 function tep_show_category($counter) {
   global $tree, $categories_string, $cPath_array;

   for ($i=0; $i<$tree[$counter]['level']; $i++) {
     $categories_string .= "";
     
   }
   // Begin of Code snippet: 

   if (tep_has_category_subcategories($counter)) {
    if ( ($id) && (in_array($counter, $id)) ) {
         $categories_string .= '<div id="categories">';
       } else {
         $categories_string .= '<div id="categories">';
       }
} else {
  $categories_string .= '<div id="categories_sub">';
}

// End of code snippet

   $categories_string .= '<a href="';

   if ($tree[$counter]['parent'] == 0) {
     $cPath_new = 'cPath=' . $counter;
   } else {
     $cPath_new = 'cPath=' . $tree[$counter]['path'];
   }

   $categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">';

   if (isset($cPath_array) && in_array($counter, $cPath_array)) {
     $categories_string .= '<b>';
   }

// display category name
   $categories_string .= $tree[$counter]['name'];

   if (isset($cPath_array) && in_array($counter, $cPath_array)) {
     $categories_string .= '</b>';
   }

   if (tep_has_category_subcategories($counter)) {
     $categories_string .= '';
   }

   $categories_string .= '</a></div>';

   if (SHOW_COUNTS == 'true') {
     $products_in_category = tep_count_products_in_category($counter);
     if ($products_in_category > 0) {
       $categories_string .= '';
     }
   }

   $categories_string .= '';

   if ($tree[$counter]['next_id'] != false) {
     tep_show_category($tree[$counter]['next_id']);
   }
 }
?>
<!-- categories //-->
         <tr>
           <td>
<?php
 $info_box_contents = array();
 $info_box_contents[] = array('text' => BOX_HEADING_CATEGORIES);

 new infoBoxHeading($info_box_contents, true, false);

 $categories_string = '';
 $tree = array();

 $categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.parent_id = '0' and c.categories_id = cd.categories_id and cd.language_id='" . (int)$languages_id ."' order by sort_order, cd.categories_name");
 while ($categories = tep_db_fetch_array($categories_query))  {
   $tree[$categories['categories_id']] = array('name' => $categories['categories_name'],
                                               'parent' => $categories['parent_id'],
                                               'level' => 0,
                                               'path' => $categories['categories_id'],
                                               'next_id' => false);

   if (isset($parent_id)) {
     $tree[$parent_id]['next_id'] = $categories['categories_id'];
   }

   $parent_id = $categories['categories_id'];

   if (!isset($first_element)) {
     $first_element = $categories['categories_id'];
   }
 }

 //------------------------
 if (tep_not_null($cPath)) {
   $new_path = '';
   reset($cPath_array);
   while (list($key, $value) = each($cPath_array)) {
     unset($parent_id);
     unset($first_id);
     $categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.parent_id = '" . (int)$value . "' and c.categories_id = cd.categories_id and cd.language_id='" . (int)$languages_id ."' order by sort_order, cd.categories_name");
     if (tep_db_num_rows($categories_query)) {
       $new_path .= $value;
       while ($row = tep_db_fetch_array($categories_query)) {
         $tree[$row['categories_id']] = array('name' => $row['categories_name'],
                                              'parent' => $row['parent_id'],
                                              'level' => $key+1,
                                              'path' => $new_path . '_' . $row['categories_id'],
                                              'next_id' => false);

         if (isset($parent_id)) {
           $tree[$parent_id]['next_id'] = $row['categories_id'];
         }

         $parent_id = $row['categories_id'];

         if (!isset($first_id)) {
           $first_id = $row['categories_id'];
         }

         $last_id = $row['categories_id'];
       }
       $tree[$last_id]['next_id'] = $tree[$value]['next_id'];
       $tree[$value]['next_id'] = $first_id;
       $new_path .= '_';
     } else {
     }
   }
 }
 tep_show_category($first_element); 
 
 $info_box_contents = array();
 $info_box_contents[] = array('text' => $categories_string);

 new infoBox($info_box_contents);
?>
           </td>
         </tr>
<!-- categories_eof //-->

 

And CSS looking like this.

 

div#categories a { display: block; background-color: #E5E5E5; border-bottom: 1px solid; padding-left: 15px; padding-top: 2px; padding-bottom: 2px; color: #000000; border-color: #FFFFFF; background-image: url('images/arr.gif'); background-repeat: no-repeat; background-position: left; border: 1px solid #E5E5E5; }
div#categories a:hover { background-color: #F2F2F2; color: #3A3A3A; text-decoration: none; background-image: url('images/arr_hover.gif'); background-repeat: no-repeat; background-position: left; border: 1px solid #ffffff; }
div#categories_sub a { display: block; background-color: #E5E5E5; border-bottom: 1px solid; padding-left: 15px; padding-top: 2px; padding-bottom: 2px; color: #000000; border-color: #FFFFFF; border: 1px solid #E5E5E5; }
div#categories_sub a:hover { background-color: #F2F2F2; color: #3A3A3A; text-decoration: none; background-image: url('images/arr_hover.gif'); background-repeat: no-repeat; background-position: left; border: 1px solid #ffffff; }

Guest

Guest

Posted
Posted

Almost forgot 1 more file you have to edit.

 

You also have to edit catalog/includes/clases/boxes.php

 

In class infoBox there are two of this line, delete them both.

 

      $info_box_contents[] = array(array('text' => tep_draw_separator('pixel_trans.gif', '100%', '1')));

 

That should work the way you wanted it to.

Guest

Guest

Posted
Posted

Thanks again. Thanks for being thorough. I tweaked the code and it looks great. Just what my site needed.

 

Thanks!!!

 

s1d

 

Almost forgot 1 more file you have to edit.

 

You also have to edit catalog/includes/clases/boxes.php

 

In class infoBox there are two of this line, delete them both.

 

      $info_box_contents[] = array(array('text' => tep_draw_separator('pixel_trans.gif', '100%', '1')));

 

That should work the way you wanted it to.

Guest

Guest

Posted
Posted
Thanks again. Thanks for being thorough.  I tweaked the code and it looks great. Just what my site needed. 

 

Thanks!!!

 

s1d

 

Anytime Sid, enjoy the mod. :thumbsup:

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...