Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Drop down menu from flat file -- does not validate

Posted on 2006-06-20
5
Medium Priority
?
307 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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…
These days socially coordinated efforts have turned into a critical requirement for enterprises.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

670 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