Tree Javascript Menu (like the manager document tree)

2,310 Posts

bunk58 Reply #1, 18 years, 4 months ago

Someone on the forum asked about a js tree menu like in the Manager document tree and I remembered I’d done one previously.
It doesn’t use the excellent Wayfinder and offers limited features, but maybe of use to some.
See it in action on my sandbox.
The zip has instructions, it’s very straightforward to install.

958 Posts

motsmart Reply #2, 18 years, 4 months ago

Cool !, Thanks for sharing

[img]http://i10.tinypic.com/52c4eir.gif[/img][/td]
[td][Wiki] [Persian support forum]
[SVN] [RTL SVN Branch] [bugs] [FishEye+Crucible] [Learn MODx!] | [My Google Code]
[font=tahoma][برای دسترسی به راهنمای فارسی به [url=http://www.modxcms.ir]

184 Posts

flanger Reply #3, 18 years, 2 months ago

wow! very nice one!
But i have a question! wink

. Im not in Javascript very much so i cant do it myself......
I wonder if its possible to open the menu tree without clicking on the "+" sing. I would prefer if the document tree would open by just clicking on the container...
Thanx for reply!
zven

https://www.beautyislife-shop.de - premium make-up!
https://www.topsterne.de - sell it here!
---------------------------------------------------------

184 Posts

flanger Reply #4, 18 years, 2 months ago

another question... wink

How are the elements of the menu sorted? Seems like they are in a weired order...
greez
zven

https://www.beautyislife-shop.de - premium make-up!
https://www.topsterne.de - sell it here!
---------------------------------------------------------

2,310 Posts

bunk58 Reply #5, 18 years, 2 months ago

The order of the menu is set in the snippet as Menu Index, Ascending, but could be changed to whatever you want.
Not sure about opening on clicking the doc/folder rather than the + sign, I’ll have a look at the JavaScript and report back.

184 Posts

flanger Reply #6, 18 years, 2 months ago

thanx - the menu is working flawlessly - but has anyone an idea how to open the menu just by clicking on the link and not on the plus sign?

https://www.beautyislife-shop.de - premium make-up!
https://www.topsterne.de - sell it here!
---------------------------------------------------------

2,310 Posts

bunk58 Reply #7, 18 years, 2 months ago

Do you mean clicking on the folder icon to open the sub menu?
You couldn’t click on the link to open the sub menu because the link is to open the parent page.

184 Posts

flanger Reply #8, 18 years, 2 months ago

Jeah i want to click on the link to open the menu and the document which is clicked... is this not possible?

https://www.beautyislife-shop.de - premium make-up!
https://www.topsterne.de - sell it here!
---------------------------------------------------------

2,310 Posts

bunk58 Reply #9, 18 years, 2 months ago

I don’t think it’s possible with this JavaScript.
The closest I can get is by setting

useCookies: true,

on line 36 of the dtree.js file, which means when you’ve clicked the + sign and then clicked through to a sub page the sub menu stays open.

956 Posts

ganeshXL Reply #10, 17 years, 11 months ago

It would be good to output a regular non-JS inside <noscript> for search machines etc... e.g.

<?php
/* Simple version of the tree type javascript menu by bunk 58 (David Bunker) 24/05/08 */
$siteName = $modx->config['site_name'];

$nojsOutput = '<noscript>';

$jsOutput = '';
$jsOutput .= '<script type="text/javascript">
<!--
d = new dTree(\'d\');
d.add(0,-1,\'Your Menu\');';
$result = mysql_query('SELECT * FROM `modx_site_content` WHERE `published`="1" AND `hidemenu`="0" AND `deleted`="0" ORDER BY `menuindex` ASC ');
while($row = mysql_fetch_array($result)) {
	$jsOutput .= 'd.add( '. $row['id'] . ' , '. $row['parent'] . ' , \''. $row['pagetitle'] . '\', \'[~'. $row['id'] . '~]\');'."\n";
	$url = $modx->makeUrl($row['id']);
	$nojsOutput .= "<a href='$url'>{$row['pagetitle']}</a><br />";
}
$jsOutput .= '
document.write(d);
//-->
</script>';

$nojsOutput .= '</noscript>';
return ($jsOutput . "\n" . $nojsOutput);
?>

(untested)

or, well, do the noscript part simply with Wayfinder...

http://www.fantastique.ch/
http://www.dnik.ch/
http://www.flickr.com/photos/dnik/