Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Drop down menu from flat file -- does not validate

Posted on 2006-06-20
5
Medium Priority
?
310 Views
Last Modified: 2007-12-19
Hello,

I need to generate a CSS drop down menu from a flat text file.

MaUru gave me a head start:
http://www.experts-exchange.com/Web/Web_Languages/PHP/Q_21892373.html

But the end result does not validate: validator.w3.org and because of this it does not work with Mozilla.

Can you help fix the code so it validates?

I am running PHP 4.

Thank you very much!




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ">
<html>
<head>
<title>Suckerfish Dropdowns</title>

<style type="text/css">

body {
 font: 78%/1.5 arial, helvetica, serif;
 background: white url(bgbaba.gif);
 text-align: center;
 padding: 0;
 margin: 2em;
}

#container {
 width: 99em;
 background: #F4ECD9;
 text-align: left;
 border: 1px solid #eda;
 margin: 0 auto;
}

p {
 background: url(remorabg.gif) center no-repeat;
 margin: 1em 2em;
}

p#smurf {
 background: transparent;
 font-style: italic;
 text-align: center;
 font-weight: bold;
 color: #7C6240;
}

#smurf strong {
 font-size: 1.2em;
 color: black;
}

h1 {
 height: 108px;
 background: url(perciformes3.gif) bottom center no-repeat;
 text-indent: -999em;
 margin: 1em 0 0 0;
}

#nav, #nav ul {
 float: left;
 width: 99em;
 list-style: none;
 line-height: 1;
 background: white;
 font-weight: bold;
 padding: 0;
 border: solid #eda;
 border-width: 1px 0;
 margin: 0 0 1em 0;
}

#nav a {
 display: block;
 width: 10em;
 w\idth: 6em;
 color: #7C6240;
 text-decoration: none;
 padding: 0.25em 2em;
}

#nav a.daddy {
 background: url(rightarrow2.gif) center right no-repeat;
}

#nav li {
 float: left;
 padding: 0;
 width: 10em;
}

#nav li ul {
 position: absolute;
 left: -999em;
 height: auto;
 width: 14.4em;
 w\idth: 13.9em;
 font-weight: normal;
 border-width: 0.25em;
 margin: 0;
}

#nav li li {
 padding-right: 1em;
 width: 13em
}

#nav li ul a {
 width: 13em;
 w\idth: 9em;
}

#nav li ul ul {
 margin: -1.75em 0 0 14em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
 left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
 left: auto;
}

#nav li:hover, #nav li.sfhover {
 background: #eda;
}

#content {
 clear: left;
}

#content a {
 color: #7C6240;
}

#content a:hover {
 text-decoration: none;
}

#scaffolding {
 height: 70px;
 background: white url(/images/header_bg.gif) no-repeat;
 border: solid #eda;
 border-width: 1px 0 0 0;
 margin: 1em 0 0 0;
}

#scaffolding a {
 text-decoration: none;
 text-indent: -999em;
 display: block;
 height: 70px;
 background: url(/images/hdlogo_flip2.gif) no-repeat;
 background-position: 181px 0;
}

#scaffolding a:hover {
 background-position: 181px -70px;
}

</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
 var sfEls = document.getElementById("nav").getElementsByTagName("LI");
 for (var i=0; i<sfEls.length; i++) {
  sfEls[i].onmouseover=function() {
   this.className+= " sfhover";
  }
  sfEls[i].onmouseout=function() {
   this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
  }
 }
}
if (window.attachEvent) window.attachEvent ("onload", sfHover);

//--><!]]></script>

</head>
<body>
<div id="container">

<?
$s = '.|Percoidei|p.html|Description goes here
..|Remoras|r.html|This is a test
...|Echeneis|e.html|Sample Text
....|Sharksucker|s.html|Hello World
....|Whitefin Sharksucker|w.html|Random stuff here
...|Phtheirichthys|p.html|Fishy stuff
....|Slender Suckerfish|ss.html|Some words
.|Remora|re.html|Whatever goes here
..|Whalesucker|wh.html|This is for a description
...|Spearfish remora|sp.html|Some words
....|Marlinsucker|rm.html|Lorum Ispum
...|Remora|rr.html|Whatever goes here
....|Ceylonese remora|ce.html|Lorum Ispum';
$ulname = ' id="nav"';

$a = explode("\n", $s);

for ($i = 0; $i < count($a); $i++) {
     $n[] = explode("|", $a[$i]);
}

$lastdepth = 0;
$depth = 0;
for ($i = 0; $i < count($n); $i++) {


if (isset($n[$i][2]))
{

     global $ulname;
     $depth = strlen($n[$i][0]);
     if ($depth > $lastdepth) {
          echo mT($depth) . "<ul". $ulname .">\n";
          $ulname = null;
     }
     else if ($depth < $lastdepth) {
          echo mT($depth) . "</ul>\n";
     }
     echo mT($depth) . '<li><a href="' . $n[$i][2] . '" title="' . trim($n[$i][3]) . '">' . $n[$i][1] . '</a>' . "</li>\n";
     $lastdepth = $depth;
}
}
if ($lastdepth != 0) {
     for ($i = $lastdepth; $i > 0; $i--) {
          echo mT($i) . "</ul>\n";
     }
}

function mT($n) { //make tabs
     $result = '';
     for ($i = 0; $i < $n; $i++) {
          $result .= "  ";
     }
     return $result;
}
?>
</div>
</body>
</html>
0
Comment
Question by:hankknight
  • 5
5 Comments
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 16949058
Can you ...

1 - Show the View-source output.
2 - Use <?php rather than <?
3 - Supply a URL
4 - Let us what doesn't validate.

Any or all please?

Ah. I see about the validation.

Remove </li>.

Force of habit to always add <x></x> when I write code. Forgot that <li> doesn't need it.

The only other validation error I have (Using FF with HTML Validator Extension) is the doctype tag.

Change ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ">

to ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

There is a trailing space in the dtd name.
0
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 16949068
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Suckerfish Dropdowns</title>

<style type="text/css">

body {
 font: 78%/1.5 arial, helvetica, serif;
 background: white url(bgbaba.gif);
 text-align: center;
 padding: 0;
 margin: 2em;
}

#container {
 width: 99em;
 background: #F4ECD9;
 text-align: left;
 border: 1px solid #eda;
 margin: 0 auto;
}

p {
 background: url(remorabg.gif) center no-repeat;
 margin: 1em 2em;
}

p#smurf {
 background: transparent;
 font-style: italic;
 text-align: center;
 font-weight: bold;
 color: #7C6240;
}

#smurf strong {
 font-size: 1.2em;
 color: black;
}

h1 {
 height: 108px;
 background: url(perciformes3.gif) bottom center no-repeat;
 text-indent: -999em;
 margin: 1em 0 0 0;
}

#nav, #nav ul {
 float: left;
 width: 99em;
 list-style: none;
 line-height: 1;
 background: white;
 font-weight: bold;
 padding: 0;
 border: solid #eda;
 border-width: 1px 0;
 margin: 0 0 1em 0;
}

#nav a {
 display: block;
 width: 10em;
 w\idth: 6em;
 color: #7C6240;
 text-decoration: none;
 padding: 0.25em 2em;
}

#nav a.daddy {
 background: url(rightarrow2.gif) center right no-repeat;
}

#nav li {
 float: left;
 padding: 0;
 width: 10em;
}

#nav li ul {
 position: absolute;
 left: -999em;
 height: auto;
 width: 14.4em;
 w\idth: 13.9em;
 font-weight: normal;
 border-width: 0.25em;
 margin: 0;
}

#nav li li {
 padding-right: 1em;
 width: 13em
}

#nav li ul a {
 width: 13em;
 w\idth: 9em;
}

#nav li ul ul {
 margin: -1.75em 0 0 14em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
 left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
 left: auto;
}

#nav li:hover, #nav li.sfhover {
 background: #eda;
}

#content {
 clear: left;
}

#content a {
 color: #7C6240;
}

#content a:hover {
 text-decoration: none;
}

#scaffolding {
 height: 70px;
 background: white url(/images/header_bg.gif) no-repeat;
 border: solid #eda;
 border-width: 1px 0 0 0;
 margin: 1em 0 0 0;
}

#scaffolding a {
 text-decoration: none;
 text-indent: -999em;
 display: block;
 height: 70px;
 background: url(/images/hdlogo_flip2.gif) no-repeat;
 background-position: 181px 0;
}

#scaffolding a:hover {
 background-position: 181px -70px;
}

</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
 var sfEls = document.getElementById("nav").getElementsByTagName("LI");
 for (var i=0; i<sfEls.length; i++) {
  sfEls[i].onmouseover=function() {
   this.className+= " sfhover";
  }
  sfEls[i].onmouseout=function() {
   this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
  }
 }
}
if (window.attachEvent) window.attachEvent ("onload", sfHover);

//--><!]]></script>

</head>
<body>
<div id="container">

<?php
function generateHTML($a_results)
      {
      $s_result = '';
      foreach($a_results as $s_key => $a_data)
            {
            $s_sub_menu = (isset($a_data['Children']) && (count($a_data['Children']) > 0)) ? generateHTML($a_data['Children']) : '';
            $s_class = ($s_sub_menu !== '') ? ' class="daddy"' : '';
            $s_result .= "<li><a href=\"#\"{$s_class}>{$s_key}</a>{$s_sub_menu}";
            }
      return "<ul>{$s_result}</ul>";
      }
// Get the menu.
$a_file = file('c:/menu.txt');

// Define results array.
$a_results = array();

// Define the keys to navigate each level whilst building.
$a_keys = array();

// Process each line into the array.
foreach($a_file as $s_line)
      {
      // Extract the parts.
      preg_match('`(\.*)\|?(.*?)\|(.*\.html)\|(.*)`sim', $s_line, $a_matches);

      // Determine the number of levels.
      $i_level = strlen($a_matches[1]) - 1;
      
      // Remove any remaining keys
      array_splice($a_keys, $i_level);
      
      // Populate the keys array
      $a_keys[$i_level] = $a_matches[2];
      
      // Build the result key
      $s_results_key = "['" . implode("']['Children']['", $a_keys) . "']";
      eval ("\$a_results['" . implode("']['Children']['", $a_keys) . "'] = array
            (
            'Children' => array(),
            'URL' => '{$a_matches[3]}',
            'Desc' => '{$a_matches[4]}',
            );");
      }

// Generate output.
$s_HTML_output = /*tidy_repair_string(*/generateHTML($a_results)/*, array('show-body-only' => True, 'indent' => 4))*/;
echo $s_HTML_output;
?>
</div>
</body>
</html>

produces output of ...

    * Percoidei
          o Remoras
                + Echeneis
                      # Sharksucker
                      # Whitefin Sharksucker
                + Phtheirichthys
                      # Slender Suckerfish
                + Remora
                      # Whalesucker
                      # Spearfish remora
                      # Marlinsucker
                      # Remora
                      # Ceylonese remora
                + Remorina
                      # White suckerfish
                + Rhombochirus
                      # Rosteochir
          o Tilefishes
                + Caulolatilus
                + Lopholatilus
                + Malacanthus
          o Bluefishes
                + Pomatomus
                + Scombrops
                + Sphyraenops
          o Tigerfishes
                + Amniataba
                + Bidyanus

(Hey! Cut and paste looks GOOD!).

And the validation report ...

-
0 errors / 0 warnings

0
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 16949091
Using the supplied script I get ...

#  $lastdepth) { echo mT($depth) . "\n"; $ulname = null; } else if ($depth < $lastdepth) { echo mT($depth) . "\n"; } echo mT($depth) . '' . $n[$i][1] . '' . "
\n"; $lastdepth = $depth; } } if ($lastdepth != 0) { for ($i = $lastdepth; $i > 0; $i--) { echo mT($i) . "\n"; } } function mT($n) { //make tabs $result = ''; for ($i = 0; $i < $n; $i++) { $result .= " "; } return $result; } ?>

Which is due to the short tags (gone in PHP6 and not recommend in PHP5).

Fixing that ...

Results in the same error I had with the </li>.

Removing that does seem to work (Hey- different behaviour) but still validation errors.

So. A nav id later ...

<?php
function generateHTML($a_results)
      {
      $s_result = '';
      foreach($a_results as $s_key => $a_data)
            {
            $s_sub_menu = (isset($a_data['Children']) && (count($a_data['Children']) > 0)) ? generateHTML($a_data['Children']) : '';
            $s_class = ($s_sub_menu !== '') ? ' class="daddy"' : '';
            $s_result .= "<li><a href=\"#\"{$s_class}>{$s_key}</a>{$s_sub_menu}";
            }
      return "<ul>{$s_result}</ul>";
      }
// Get the menu.
$a_file = file('c:/menu.txt');

// Define results array.
$a_results = array();

// Define the keys to navigate each level whilst building.
$a_keys = array();

// Process each line into the array.
foreach($a_file as $s_line)
      {
      // Extract the parts.
      preg_match('`(\.*)\|?(.*?)\|(.*\.html)\|(.*)`sim', $s_line, $a_matches);

      // Determine the number of levels.
      $i_level = strlen($a_matches[1]) - 1;
      
      // Remove any remaining keys
      array_splice($a_keys, $i_level);
      
      // Populate the keys array
      $a_keys[$i_level] = $a_matches[2];
      
      // Build the result key
      $s_results_key = "['" . implode("']['Children']['", $a_keys) . "']";
      eval ("\$a_results['" . implode("']['Children']['", $a_keys) . "'] = array
            (
            'Children' => array(),
            'URL' => '{$a_matches[3]}',
            'Desc' => '{$a_matches[4]}',
            );");
      }

// Generate output.
$s_HTML_output = preg_replace('`<ul>`sim', '<ul id="nav">', generateHTML($a_results), 1);
echo $s_HTML_output;
?>

and fully valid output and the navigation working fine.
0
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 16949096
Oh.

Change ...

// Get the menu.
$a_file = file('c:/menu.txt');

to

// Get the menu.
$a_file = file('./menu.txt');

as you did initially have the menu in a text file.
0
 
LVL 40

Accepted Solution

by:
Richard Quadling earned 2000 total points
ID: 16949944
Try ...

// Process each line into the array.
foreach($a_file as $s_line)
      {
      // Extract the parts.
      preg_match('`(\.*)\|?(.*?)\|(.*\.html)\|(.*)`sim', $s_line, $a_matches);

      // Determine the number of levels.
      $i_level = strlen($a_matches[1]) - 1;
      
      // Remove any remaining keys
      array_splice($a_keys, $i_level);
      
      // Populate the keys array
      $a_keys[$i_level] = htmlentities($a_matches[2]);
      
      // Build the result key
      $s_results_key = "['" . implode("']['Children']['", $a_keys) . "']";
      eval ("\$a_results['" . implode("']['Children']['", $a_keys) . "'] = array
            (
            'Children' => array(),
            'URL' => '" . addslashes($a_matches[3]) . "',
            'Desc' => '" . addslashes($a_matches[4]) . "',
            );");
      }

this code to deal with & and ' in their.

and

function generateHTML($a_results)
      {
      $s_result = '';
      foreach($a_results as $s_key => $a_data)
            {
            $s_sub_menu = (isset($a_data['Children']) && (count($a_data['Children']) > 0)) ? generateHTML($a_data['Children']) : '';
            $s_class = ($s_sub_menu !== '') ? ' class="daddy"' : '';
            $s_result .= "<li><a href=\"{$a_data['URL']}\"{$s_class}>{$s_key}</a>{$s_sub_menu}";
            }
      return "<ul>{$s_result}</ul>";
      }

to put the URL in.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses

876 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question