Jump to content

PHP Category Tree Question


Ben2

Recommended Posts

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

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

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

Link to comment
Share on other sites

$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>';
}

Link to comment
Share on other sites

$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

 

Link to comment
Share on other sites

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 ++;
}

Link to comment
Share on other sites

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>';

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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]

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.