PHP Category Tree Question

Ben2 · September 18, 2010

Hello it's me again,

I am creating a category tree for my website; the tree takes information from two SQL tables to create it.

One table holds the headings (A-Z) and the other holds the members usernames.

What I am trying to do is create a category tree that lists the members names in alphabetical order with the headings A-Z, all the names are hidden until you click on the heading which then reveals the names under that heading.

For example:

+A

Albert

Andy

+B

+C

Claire

Casey

etc

The code that I currently have produces the member’s names but lists them incorrectly, for example:

A

Admin

A

Ben

A

Claire

etc

I understand that this problem is possibly caused by incorrectly placing loops but when I play around with the code the result gets worse. lol

Here is the code I have so far:

<?php

mysql_connect("localhost", "********", "*******") or die(mysql_error());
mysql_select_db("*************") or die(mysql_error());

$sql = mysql_query("SELECT sys_pre_values.Key, sys_pre_values.Value, sys_pre_values.Order\n"
    . "FROM sys_pre_values\n"
    . "WHERE sys_pre_values.Key = \"Categories\"\n"
    . "ORDER BY sys_pre_values.Value\n"
    . "LIMIT 0 , 200");

$result = mysql_query("SELECT Profiles.NickName FROM Profiles");

echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>    
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">';

echo '.tree { font-size:16px; margin-left:15px; margin-top:5px; padding:7px;}';

echo '</style></head><body>';

echo '<div id="tree" class="tree">';

while($row = mysql_fetch_array($sql)) {

    while($rows = mysql_fetch_array($result)) {

    if($row[Value] == "A"){
        echo $row[Value];
        echo '<br />';
    }

        if(substr($rows[NickName],0,1) == "A" && strlen($rows[NickName]) > 1) {
            echo '<a href="#">'.$rows[NickName].'</a>';
            echo '<br />';
        }

    if($row[Value] == "B"){
        echo $row[Value];
        echo '<br />';
    }

        if(substr($rows[NickName],0,1) == "B" && strlen($rows[NickName]) > 1) {
            echo '<a href="#">'.$rows[NickName].'</a>';
            echo '<br />';
        }

    if($row[Value] == "C"){
        echo $row[Value];
        echo '<br />';
    }

        if(substr($rows[NickName],0,1) == "C" && strlen($rows[NickName]) > 1) {
            echo '<a href="#">'.$rows[NickName].'</a>';
            echo '<br />';
        }

    if($row[Value] == "D"){
        echo $row[Value];
        echo '<br />';
    }

        if(substr($rows[NickName],0,1) == "D" && strlen($rows[NickName]) > 1) {
            echo '<a href="#">'.$rows[NickName].'</a>';
            echo '<br />';
        }

    if($row[Value] == "E"){
        echo $row[Value];
        echo '<br />';
    }

        if(substr($rows[NickName],0,1) == "E" && strlen($rows[NickName]) > 1) {
            echo '<a href="#">'.$rows[NickName].'</a>';
            echo '<br />';
        }

    if($row[Value] == "F"){
        echo $row[Value];
        echo '<br />';
    }

        if(substr($rows[NickName],0,1) == "F" && strlen($rows[NickName]) > 1) {
            echo '<a href="#">'.$rows[NickName].'</a>';
            echo '<br />';
        }

    if($row[Value] == "G"){
        echo $row[Value];
        echo '<br />';
    }

        if(substr($rows[NickName],0,1) == "G" && strlen($rows[NickName]) > 1) {
            echo '<a href="#">'.$rows[NickName].'</a>';
            echo '<br />';
        }

    if($row[Value] == "H"){
        echo $row[Value];
        echo '<br />';
    }

        if(substr($rows[NickName],0,1) == "H" && strlen($rows[NickName]) > 1) {
            echo '<a href="#">'.$rows[NickName].'</a>';
            echo '<br />';
        }

    if($row[Value] == "I"){
        echo $row[Value];
        echo '<br />';
    }

        if(substr($rows[NickName],0,1) == "I" && strlen($rows[NickName]) > 1) {
            echo '<a href="#">'.$rows[NickName].'</a>';
            echo '<br />';
        }

    if($row[Value] == "J"){
        echo $row[Value];
        echo '<br />';
    }

        if(substr($rows[NickName],0,1) == "J" && strlen($rows[NickName]) > 1) {
            echo '<a href="#">'.$rows[NickName].'</a>';
            echo '<br />';
        }

    if($row[Value] == "K"){
        echo $row[Value];
        echo '<br />';
    }

        if(substr($rows[NickName],0,1) == "K" && strlen($rows[NickName]) > 1) {
            echo '<a href="#">'.$rows[NickName].'</a>';
            echo '<br />';
        }

    if($row[Value] == "L"){
        echo $row[Value];
        echo '<br />';
    }

        if(substr($rows[NickName],0,1) == "L" && strlen($rows[NickName]) > 1) {
            echo '<a href="#">'.$rows[NickName].'</a>';
            echo '<br />';
        }

    if($row[Value] == "M"){
        echo $row[Value];
        echo '<br />';
    }

        if(substr($rows[NickName],0,1) == "M" && strlen($rows[NickName]) > 1) {
            echo '<a href="#">'.$rows[NickName].'</a>';
            echo '<br />';
        }

    if($row[Value] == "N"){
        echo $row[Value];
        echo '<br />';
    }

        if(substr($rows[NickName],0,1) == "N" && strlen($rows[NickName]) > 1) {
            echo '<a href="#">'.$rows[NickName].'</a>';
            echo '<br />';
        }

    if($row[Value] == "O"){
        echo $row[Value];
        echo '<br />';
    }

        if(substr($rows[NickName],0,1) == "O" && strlen($rows[NickName]) > 1) {
            echo '<a href="#">'.$rows[NickName].'</a>';
            echo '<br />';
        }

    if($row[Value] == "P"){
        echo $row[Value];
        echo '<br />';
    }

        if(substr($rows[NickName],0,1) == "P" && strlen($rows[NickName]) > 1) {
            echo '<a href="#">'.$rows[NickName].'</a>';
            echo '<br />';
        }

    if($row[Value] == "Q"){
        echo $row[Value];
        echo '<br />';
    }

        if(substr($rows[NickName],0,1) == "Q" && strlen($rows[NickName]) > 1) {
            echo '<a href="#">'.$rows[NickName].'</a>';
            echo '<br />';
        }

    if($row[Value] == "R"){
        echo $row[Value];
        echo '<br />';
    }

        if(substr($rows[NickName],0,1) == "P" && strlen($rows[NickName]) > 1) {
            echo '<a href="#">'.$rows[NickName].'</a>';
            echo '<br />';
        }

    if($row[Value] == "S"){
        echo $row[Value];
        echo '<br />';
    }

        if(substr($rows[NickName],0,1) == "S" && strlen($rows[NickName]) > 1) {
            echo '<a href="#">'.$rows[NickName].'</a>';
            echo '<br />';
        }

    if($row[Value] == "T"){
        echo $row[Value];
        echo '<br />';
    }

        if(substr($rows[NickName],0,1) == "T" && strlen($rows[NickName]) > 1) {
            echo '<a href="#">'.$rows[NickName].'</a>';
            echo '<br />';
        }

    if($row[Value] == "U"){
        echo $row[Value];
        echo '<br />';
    }

        if(substr($rows[NickName],0,1) == "U" && strlen($rows[NickName]) > 1) {
            echo '<a href="#">'.$rows[NickName].'</a>';
            echo '<br />';
        }

    if($row[Value] == "V"){
        echo $row[Value];
        echo '<br />';
    }

        if(substr($rows[NickName],0,1) == "V" && strlen($rows[NickName]) > 1) {
            echo '<a href="#">'.$rows[NickName].'</a>';
            echo '<br />';
        }

    if($row[Value] == "W"){
        echo $row[Value];
        echo '<br />';
    }

        if(substr($rows[NickName],0,1) == "W" && strlen($rows[NickName]) > 1) {
            echo '<a href="#">'.$rows[NickName].'</a>';
            echo '<br />';
        }

    if($row[Value] == "X"){
        echo $row[Value];
        echo '<br />';
    }

        if(substr($rows[NickName],0,1) == "X" && strlen($rows[NickName]) > 1) {
            echo '<a href="#">'.$rows[NickName].'</a>';
            echo '<br />';
        }

    if($row[Value] == "Y"){
        echo $row[Value];
        echo '<br />';
    }

        if(substr($rows[NickName],0,1) == "Y" && strlen($rows[NickName]) > 1) {
            echo '<a href="#">'.$rows[NickName].'</a>';
            echo '<br />';
        }

    if($row[Value] == "Z"){
        echo $row[Value];
        echo '<br />';
    }

        if(substr($rows[NickName],0,1) == "Z" && strlen($rows[NickName]) > 1) {
            echo '<a href="#">'.$rows[NickName].'</a>';
            echo '<br />';
        }
    }
}

echo '</div>';

?>

I understand that my code might not be very efficient.

One tree I have worked with in the past is basically how I want the tree to look but it is JavaScript/html and I am unable to figure out how I could adjust it to work with the php code needed to get the names from the SQL database. This is why I have decided to try and create a new one, I have posted the JavaScript/html tree code below encase someone can suggest a way that I could get it to work with php needed.

Please note that I have not included all the code as it would have been a massive list so that is why the numbering is not in order.

<p>
<link href="tree/css/tree.css" type="text/css" rel="StyleSheet" />
<script type="text/javascript"></script>
</p>
<script type="text/javascript">// <![CDATA[
// Arrays for nodes and icons
var nodes            = new Array();;
var openNodes    = new Array();
var icons            = new Array(6);


function preloadIcons() {
    icons[0] = new Image();
    icons[0].src = "plus.gif";
    icons[1] = new Image();
    icons[1].src = "plusbottom.gif";
    icons[2] = new Image();
    icons[2].src = "minus.gif";
    icons[3] = new Image();
    icons[3].src = "minusbottom.gif";
    icons[4] = new Image();
    icons[4].src = "folder.gif";
    icons[5] = new Image();
    icons[5].src = "menu-expanded.gif";
}

function createTree(arrName, startNode, openNode) {
    nodes = arrName;
    if (nodes.length > 0) {
        preloadIcons();
        if (startNode == null) startNode = 0;
        if (openNode != 0 || openNode != null) setOpenNodes(openNode);
    
        if (startNode !=0) {
            var nodeValues = nodes[getArrayId(startNode)].split("|");
            document.write("<a href=\"" + nodeValues[3] + "\" onmouseover=\"window.status='" + nodeValues[2] + "';return true;\" onmouseout=\"window.status=' ';return true;\"><img src=\"menu-expanded.gif\" align=\"absbottom\" alt=\"\" />" + nodeValues[2] + "</a><br />");
        } else document.write("<img src=\"base.gif\" align=\"absbottom\" alt=\"\" />Website<br />");
    
        var recursedNodes = new Array();
        addNode(startNode, recursedNodes);
    }
}

function getArrayId(node) {
    for (i=0; i<nodes.length; i++) {
        var nodeValues = nodes[i].split("|");
        if (nodeValues[0]==node) return i;
    }
}

function setOpenNodes(openNode) {
    for (i=0; i<nodes.length; i++) {
        var nodeValues = nodes[i].split("|");
        if (nodeValues[0]==openNode) {
            openNodes.push(nodeValues[0]);
            setOpenNodes(nodeValues[1]);
        }
    } 
}

function isNodeOpen(node) {
    for (i=0; i<openNodes.length; i++)
        if (openNodes[i]==node) return true;
    return false;
}

function hasChildNode(parentNode) {
    for (i=0; i< nodes.length; i++) {
        var nodeValues = nodes[i].split("|");
        if (nodeValues[1] == parentNode) return true;
    }
    return false;
}

function lastSibling (node, parentNode) {
    var lastChild = 0;
    for (i=0; i< nodes.length; i++) {
        var nodeValues = nodes[i].split("|");
        if (nodeValues[1] == parentNode)
            lastChild = nodeValues[0];
    }
    if (lastChild==node) return true;
    return false;
}

function addNode(parentNode, recursedNodes) {
    for (var i = 0; i < nodes.length; i++) {

        var nodeValues = nodes[i].split("|");
        if (nodeValues[1] == parentNode) {
            
            var ls    = lastSibling(nodeValues[0], nodeValues[1]);
            var hcn    = hasChildNode(nodeValues[0]);
            var ino = isNodeOpen(nodeValues[0]);

            // Write out line & empty icons
            for (g=0; g<recursedNodes.length; g++) {
                if (recursedNodes[g] == 1) document.write("<img src=\"line.gif\" align=\"absbottom\" alt=\"\" />");
                else  document.write("<img src=\"empty.gif\" align=\"absbottom\" alt=\"\" />");
            }

            if (ls) recursedNodes.push(0);
            else recursedNodes.push(1);

            if (hcn) {
                if (ls) {
                    document.write("<a href=\"javascript: oc(" + nodeValues[0] + ", 1);\"><img id=\"join" + nodeValues[0] + "\" src=\"images/");
                         if (ino) document.write("minus");
                        else document.write("plus");
                    document.write("bottom.gif\" align=\"absbottom\" alt=\"Open/Close node\" /></a>");
                } else {
                    document.write("<a href=\"javascript: oc(" + nodeValues[0] + ", 0);\"><img id=\"join" + nodeValues[0] + "\" src=\"images/");
                        if (ino) document.write("minus");
                        else document.write("plus");
                    document.write(".gif\" align=\"absbottom\" alt=\"Open/Close node\" /></a>");
                }

            } else {
                if (ls) document.write("<img src=\"joinbottom.gif\" align=\"absbottom\" alt=\"\" />");
                else document.write("<img src=\"join.gif\" align=\"absbottom\" alt=\"\" />");
            }

            document.write("<a href=\"" + nodeValues[3] + "\" onmouseover=\"window.status='" + nodeValues[2] + "';return true;\" onmouseout=\"window.status=' ';return true;\">");
            
            if (hcn) {
                document.write("<img id=\"icon" + nodeValues[0] + "\" src=\"folder")
                    if (ino) document.write("open");
                document.write(".gif\" align=\"absbottom\" alt=\"Folder\" />");
            } else document.write("<img id=\"icon" + nodeValues[0] + "\" src=\"menu-leaf.gif\" align=\"absbottom\" alt=\"Page\" />");
            
            document.write(nodeValues[2]);

            document.write("</a><br />");
            
                        if (hcn) {
                document.write("<div id=\"div" + nodeValues[0] + "\"");
                    if (!ino) document.write(" style=\"display: none;\"");
                document.write(">");
                addNode(nodeValues[0], recursedNodes);
                document.write("</div>");
            }
            
            recursedNodes.pop();
        }
    }
}

function oc(node, bottom) {
    var theDiv1 = document.getElementById("div" + node);
    var theJoin1    = document.getElementById("join" + node);
    var theIcon1 = document.getElementById("icon" + node);
    
    if (theDiv1.style.display == 'none') {
        if (bottom==1) theJoin1.src = icons[3].src;
        else theJoin1.src = icons[2].src;
        theIcon1.src = icons[5].src;
        theDiv1.style.display = '';
    } else {
        if (bottom==1) theJoin1.src = icons[1].src;
        else theJoin1.src = icons[0].src;
        theIcon1.src = icons[4].src;
        theDiv1.style.display = 'none';
    }
}

if(!Array.prototype.push) {
    function array_push() {
        for(var i=0;i<arguments.length;i++)
            this[this.length]=arguments[i];
        return this.length;
    }
    Array.prototype.push = array_push;
}
if(!Array.prototype.pop) {
    function array_pop(){
        lastElement = this[this.length-1];
        this.length = Math.max(this.length-1,0);
        return lastElement;
    }
    Array.prototype.pop = array_pop;
}
// ]]></script>
<script type="text/javascript">// <![CDATA[
        var Tree = new Array;

                Tree[0]  = "1|0| |#";
                Tree[1]     = "2|1|<b>A-C</b>|#";
                Tree[2]  = "3|1|<b>D-F</b>|#";
                Tree[3]  = "4|1|<b>G-I</b>|#";
                Tree[4]  = "5|1|<b>J-L</b>|#";
                Tree[5]  = "6|1|<b>M-O</b>|#";
                Tree[6]  = "7|1|<b>P-R</b>|#";
                Tree[7]  = "8|1|<b>S-V</b>|#";
                Tree[8]  = "9|1|<b>W-Z</b>|#";
                Tree[12]  = "12|92|<b>Air Conditioning Services</b>|#";
                Tree[14]  = "13|92|<b>Airports</b>|#";
                Tree[17]  = "15|92|<b>Art & Craft</b>|#";
                Tree[18]  = "16|93|<b>Banks & Building Societies</b>|#";
                Tree[27]  = "23|93|<b>Beds & Bedding</b>|#";
                   Tree[28]  = "24|93|<b>Blinds</b>|#";
                   Tree[29]  = "25|93|<b>Boarding Kennels</b>|#";
                   Tree[40]  = "35|94|<b>Cafes</b>|#";
                   Tree[41]  = "36|94|<b>Cafes & Coffee Shops</b>|#";
                   Tree[66]  = "60|94|<b>Cemeteries</b>|#";
                Tree[92]  = "85|94|<b>Concrete - Ready-mixed</b>|#";
                Tree[93]  = "86|94|<b>Conveyancing</b>|#";
                Tree[94]  = "87|94|<b>Counselling & Advice</b>|#";
                Tree[95]  = "88|94|<b>Courier Services</b>|#";
                Tree[96]  = "89|94|<b>Currency Exchange</b>|#";
                Tree[99]  = "90|94|<b>Curtains & Soft Furnishings</b>|#";
                Tree[100]  = "91|94|<b>Cycle Shops & Repairs</b>|#";
                Tree[101]  = "92|2|<b>A</b>|#";
                Tree[102]  = "93|2|<b>B</b>|#";
                Tree[103]  = "94|2|<b>C</b>|#";
                Tree[104]  = "95|3|<b>D</b>|#";
                Tree[105]  = "96|3|<b>E</b>|#";
                Tree[106]  = "97|3|<b>F</b>|#";
                Tree[107]  = "98|4|<b>G</b>|#";
                Tree[108]  = "99|4|<b>H</b>|#";
                Tree[109]  = "100|4|<b>I</b>|#";
                Tree[110]  = "101|5|<b>J</b>|#";
                Tree[111]  = "102|5|<b>K</b>|#";
                Tree[112]  = "103|5|<b>L</b>|#";
                Tree[113]  = "104|6|<b>M</b>|#";
                Tree[114]  = "105|6|<b>N</b>|#";
                Tree[115]  = "106|6|<b>O</b>|#";
                Tree[116]  = "107|7|<b>P</b>|#";
                Tree[117]  = "108|7|<b>Q</b>|#";
                Tree[118]  = "109|7|<b>R</b>|#";
                Tree[119]  = "110|8|<b>S</b>|#";
                Tree[120]  = "111|8|<b>T</b>|#";
                Tree[121]  = "112|8|<b>U</b>|#";
                Tree[122]  = "113|8|<b>V</b>|#";
                Tree[123]  = "114|9|<b>W</b>|#";
                Tree[124]  = "115|9|<b>X</b>|#";
                Tree[125]  = "116|9|<b>Y</b>|#";
                Tree[126]  = "117|9|<b>Z</b>|#";
// ]]></script>
<div class="tree">
<script type="text/javascript">// <![CDATA[
    createTree(Tree,1);
// ]]></script>
</div>

Thank you for any help that can be provided with this.

Ben

ignace · September 18, 2010

$result = mysql_query('SELECT NickName FROM Profiles ORDER BY NickName');

$capital = '';
while(list($nickname) = mysql_fetch_row($result)) {
    if(0 == strcasecmp(substr($nickname, 0, 1), $capital)) {
        $capital = substr($nickname, 0, 1);
        echo strtoupper($capital), '<br>';
    }
    echo $nickname, '<br>';
}

Ben2 · September 19, 2010

$result = mysql_query('SELECT NickName FROM Profiles ORDER BY NickName');

$capital = '';
while(list($nickname) = mysql_fetch_row($result)) {
    if(0 == strcasecmp(substr($nickname, 0, 1), $capital)) {
        $capital = substr($nickname, 0, 1);
        echo strtoupper($capital), '<br>';
    }
    echo $nickname, '<br>';
}

Thank you for this help,

It how lists the names like this:

Admin

Ben

Test

etc

Now I just need to figure out how to edit the code to list the names under a heading like this:

A

Admin

B

Ben

T

Test

etc

And then I just need to figure out how to make the names hide until someone clicks on the heading like this:

Before Click:

A

B

C

after click on A:

A

Admin

B

C

... Still a lot of learning and getting frustrated ahead of me! lol

litebearer · September 19, 2010

A bit lengthy and not tested to your specs, but I use portions on a couple of my sites...

This first bit of code goes in the HEAD section of your page (found at http://www.dhtmlgoodies.com/index.html?whichScript=show_hide_content)

<style type="text/css">
body{
	/*
	You can remove these four options 

	*/
	background-image:url('http://www.dhtmlgoodies.com/images/heading3.gif');
	background-repeat:no-repeat;
	padding-top:85px;	
	font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;

	margin:10px;
	padding-left:0px;
	text-align:left;
}

/* Layout properties for your question  */
.question{
	font-weight:bold;	/* Bold font */		
	color: #FF0000;		/* The questions is in red */
	cursor:pointer;		/* Cursor is like a hand when someone rolls the mouse over the question */
}

.answer{
	/* Layout properties - You can change these */

	border: 1px solid #555555;
	padding:3px;
	width:500px;
	background-color:#E2EBED;

	/* This one should not be changed */
	display:none;	
}

</style>

<script type="text/javascript">
/*
(C) www.dhtmlgoodies.com, September 2005

This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	

Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.

Thank you!

www.dhtmlgoodies.com
Alf Magne Kalleland

*/	
function showHideAnswer()
{
	var numericID = this.id.replace(/[^\d]/g,'');
	var obj = document.getElementById('a' + numericID);
	if(obj.style.display=='block'){
		obj.style.display='none';
	}else{
		obj.style.display='block';
	}		
}


function initShowHideContent()
{
	var divs = document.getElementsByTagName('DIV');
	for(var no=0;no<divs.length;no++){
		if(divs[no].className=='question'){
			divs[no].onclick = showHideAnswer;
		}	

	}	
}

window.onload = initShowHideContent;
</script>

then here is the category listing code...

$category = array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
$result = mysql_query('SELECT * FROM Profiles ORDER BY NickName');
$i=0;
while($row=mysql_fetch_array($result)) {
$nick_name[$i] = $row['NickName'];
$i ++;
}

$c1=26;
$i1=0;
$c2= count($nick_name);
while($i1<$c1) {
?>

<div id="q<?PHP echo $i1; ?>" class="question"><?PHP echo $category[$i1]; ?></div>
<div id="a<?PHP echo $i1; ?>" class="answer">

<?PHP
$i2=0;
while($i2<$c2) {
	if(substr($nick_name[$i2],0)==$category[$i1]){
		echo "    " . $nick_name[$i2] . "<br>";
	}
	$i2 ++;
}
?>

</div>
<?PHP

$i1 ++;
}

Ben2 · September 19, 2010

A bit lengthy and not tested to your specs, but I use portions on a couple of my sites...

This first bit of code goes in the HEAD section of your page (found at http://www.dhtmlgoodies.com/index.html?whichScript=show_hide_content)

then here is the category listing code...

Thank for the assistance, it looks like I should be able to adjust the code to work for me.

The only other question I have is a quite important one...

The area where I am needing to put the code is in a defined php only block, I know I can get CSS to work within the php block as I can just use the "echo" command. However I have never tried to use javascript within in the block, would it work in the same way as the CSS? By this I mean that would it work if I used an echo to call the code?

An example of the way I use CSS within the php block is below:

echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>    
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">';
                
echo '.centering {display: block; margin-left: auto; margin-right: auto; margin-top:10px; }';

echo '</style></head><body>';

Ben2 · September 20, 2010

A bit lengthy and not tested to your specs, but I use portions on a couple of my sites...

then here is the category listing code...

$category = array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
$result = mysql_query('SELECT * FROM Profiles ORDER BY NickName');
$i=0;
while($row=mysql_fetch_array($result)) {
$nick_name[$i] = $row['NickName'];
$i ++;
}

$c1=26;
$i1=0;
$c2= count($nick_name);
while($i1<$c1) {
?>

<div id="q<?PHP echo $i1; ?>" class="question"><?PHP echo $category[$i1]; ?></div>
<div id="a<?PHP echo $i1; ?>" class="answer">

<?PHP
$i2=0;
while($i2<$c2) {
	if(substr($nick_name[$i2],0)==$category[$i1]){
		echo "    " . $nick_name[$i2] . "<br>";
	}
	$i2 ++;
}
?>

</div>
<?PHP

$i1 ++;
}

Thanks for the help everyone, I managed to modify the above code to work for my needs.

Ben2 · September 20, 2010

I was wondering...

I have the category tree working with a simple A-Z listing but I would like to expand on this and create a better listing but I am having trouble figuring out how to adapt the code that we came up with earlier to do this new listing.

What I have now is:

A

Admin

B

Ben

C

D

etc

and what I would like it to look like is (if it is possible!):

A-C

A

Admin

B

Ben

C

D-F

G-I

J-L

etc

Will this be an easy little change of code or a large overhall of all the code?

Here is the code I have now (works with standard A-Z listing):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

body{
      margin:10px;
      padding-left:0px;
      text-align:left;
   }

   .question{
      font-weight:bold;    
      color: #000000;   
      cursor:pointer;  
      font-size:13px;
      margin-left:15px;
      padding-left:5px;
   }
      
   .answer{
      
      border: 1px solid;
      border-color:#BDBDBD;
      padding:3px;
      width:150px;
      background-color:#e8f0f8;
      font-size:12px;
      margin-left:20px;
      
      display:none;   
   }
   a:hover {
      color: #000000;
   }
</style>
   
<script type="text/javascript">

   function showHideAnswer()
   {
      var numericID = this.id.replace(/[^\d]/g,"");
      var arrow = document.getElementById("arrow" + numericID);
      var obj = document.getElementById("a" + numericID);
      if(obj.style.display=="block"){
         obj.style.display="none";
         arrow.src="folder.gif";
      }else{
         obj.style.display="block";
         arrow.src="folderopen.gif";
      }      
   }
   
   
   function initShowHideContent()
   {
      var divs = document.getElementsByTagName("DIV");
      for(var no=0;no<divs.length;no++){
         if(divs[no].className=="question"){
            divs[no].onclick = showHideAnswer;
         }   
         
      }   
   }
   
   window.onload = initShowHideContent;
  
</script>
</head>
<body>

<?php
mysql_connect("localhost", "***********", "*********") or die(mysql_error());
mysql_select_db("******") or die(mysql_error());

$headers = array("A-C","D-F","G-I","J-L","M-O","P-R","S-V","W-Z");
$category = array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
$result = mysql_query('SELECT Profiles.NickName FROM Profiles ORDER BY NickName');
$i=0;
while($row=mysql_fetch_array($result)) {
    $nick_name[$i] = $row['NickName'];
    $i ++;
}

$c1=26;
$i1=0;
$c2= count($nick_name);
while($i1<$c1) {
?>

<div id="q<?PHP echo $i1; ?>" class="question"><img src="http:folder.gif" id="arrow<?PHP echo $i1; ?>" width="12px" height="15px"/><?PHP echo $category[$i1]; ?><br /></div>
<div id="a<?PHP echo $i1; ?>" class="answer">

<?PHP
$i2=0;
while($i2<$c2) {
    if(substr($nick_name[$i2],0,1)==$category[$i1]){
        echo '<img src="http:page.gif" width="10px" height="10px"/> <a href="http://url.com/'. $nick_name[$i2].'">'. $nick_name[$i2].'</a><br>';
    }
    $i2 ++;
}
?>

</div>
<?PHP
$i1 ++;
}
?>

</body>
</html>

Ben2 · September 21, 2010

I have managed to get somewhere near what I want the tree to do but it is still not working correctly and I am running out of ideas!

Please can someone point me in the right direction as im getting more and more lost with this thing!

I have attached an image of what the tree looks like now and here is what code I have so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

body{
      margin:10px;
      padding-left:0px;
      text-align:left;
   }

   .question{
      font-weight:bold;  
      color: #000000;      
      cursor:pointer;  
      font-size:13px;
      margin-left:15px;
      padding-left:5px;
   }
      
   .answer{
      
      border: 1px solid;
      border-color:#BDBDBD;
      padding:3px;
      width:150px;
      background-color:#e8f0f8;
      font-size:12px;
      margin-left:20px;
      
      display:none;   
   }
   a:hover {
      color: #000000;
   }
</style>
   
<script type="text/javascript">

   function showHideAnswer()
   {
      var numericID = this.id.replace(/[^\d]/g,"");
      var arrow = document.getElementById("arrow" + numericID);
      var obj = document.getElementById("a" + numericID);
      if(obj.style.display=="block"){
         obj.style.display="none";
         arrow.src="folder.gif";
      }else{
         obj.style.display="block";
         arrow.src="folderopen.gif";
      }      
   }
   
   
   function initShowHideContent()
   {
      var divs = document.getElementsByTagName("DIV");
      for(var no=0;no<divs.length;no++){
         if(divs[no].className=="question"){
            divs[no].onclick = showHideAnswer;
         }   
         
      }   
   }
   
   window.onload = initShowHideContent;
  
</script>
</head>
<body>

<?php
mysql_connect("localhost", "*********", "********") or die(mysql_error());
mysql_select_db("**********") or die(mysql_error());

$headers = array("A-C","D-F","G-I","J-L","M-O","P-R","S-V","W-Z");
$category = array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
$result = mysql_query('SELECT Profiles.NickName FROM Profiles ORDER BY NickName');
$i=0;
while($row=mysql_fetch_array($result)) {
    $nick_name[$i] = $row['NickName'];
    $i ++;
}

$c1=26;
$i1=0;
$c2= count($nick_name);
while($i1<$c1) {
    if(substr($category[$i1],0,1)=="A" or substr($category[$i1],0,1)=="B" or substr($category[$i1],0,1)=="C"){
?>
<div id="q<?PHP echo $i1; ?>" class="question"><img src="folder.gif" id="arrow<?PHP echo $i1; ?>" width="12px" height="15px"/><?PHP echo 'A-C'; ?><br /></div>
<div id="q<?PHP echo $i1; ?>" class="question"><img src="folder.gif" id="arrow<?PHP echo $i1; ?>" width="12px" height="15px"/><?PHP echo $category[$i1]; ?><br /></div>
<div id="a<?PHP echo $i1; ?>" class="answer">

<?PHP
    }
$i2=0;
while($i2<$c2) {
    if(substr($nick_name[$i2],0,1)==$category[$i1]){
        echo '<img src="page.gif" width="10px" height="10px"/> <a href="'. $nick_name[$i2].'">'. $nick_name[$i2].'</a><br>';
    }
    $i2 ++;
}
?>

</div>
<?PHP
$i1 ++;
}
?>

</body>
</html>

[attachment deleted by admin]

litebearer · September 21, 2010

not positive (very very poor at javascrpit); however, I believe it is a 'nesting' problem.

question A-C

answer

question A

answer Adam

question B

answer Bob

answer Betty

Get the idea?

Might try the javascript forum here on PHPfreaks

Ben2 · September 21, 2010

Hi guys this is now solved.

I managed to modify my own javascript category tree I created a couple of weeks ago to work with the php that is needed to get information from databases.

I will post it on here if people want me to as it is very easy to modify to work with any website.

Thanks for all your help guys.

Sign In

PHP Category Tree Question

Recommended Posts

Ben2

Link to comment

Share on other sites

ignace

Link to comment

Share on other sites

Ben2

Link to comment

Share on other sites

litebearer

Link to comment

Share on other sites

Ben2

Link to comment

Share on other sites

Ben2

Link to comment

Share on other sites

Ben2

Link to comment

Share on other sites

Ben2

Link to comment

Share on other sites

litebearer

Link to comment

Share on other sites

Ben2

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information