Forum Home Enhancements - Yahoo YUI! Treeview Menu for VBAdvanced

//--------------------------------------------------------------------
// YUI Yahoo Treemenu Module for VBA v3 RC2
// by ShawnC
// http://www.shawnc.org
//--------------------------------------------------------------------

//--------------------------------------------------------------------
//--> New Installation Instructions
//--------------------------------------------------------------------

The files located in the Upload Directory need to be FTP Uploaded to your VBulletin Forum Directory. Click Overwrite All if it comes up will uploading
Once uploaded, If you are using VBA v3 RC2 then you can Import the Module in this Directory to your VBA Modules and it will work.

If you are Upgrading from a Previous version see next section

//--------------------------------------------------------------------
//--> Upgrade Instructions
//--------------------------------------------------------------------

Please Reupload all files into your Vbulletin Directory as I have changed the Javascript and compacted it with the Yahoo Javascript Compactor, Also All Files are hosted
on your domain to speed matters up now.

In Previous versions you had to Change the Header Template to Add the Javascript files, This has been automaticly done inside of the Plugin now so you will need to remove
any manual Header File Changes.

Delete the Old Module from VBA and ReImport the New Module to make sure all settings are overwrote properly.

//--------------------------------------------------------------------
//--> Installation Instructions on older VBA
//--------------------------------------------------------------------

Please read the Installation.txt file inside of the Package

Follow Normal Installation Instructions by Uploading All Files.

Create a new Module inside of VBA, Choose PHP Module(File)

Change the following Settings

File to Include --> treemenu.php
Templates Used --> adv_portal_treemenu
Use Module Wrapper Template --> Yes

Make a New Template and Call it

//--------------------------------------------------------------------
//--> adv_portal_treemenu
//--------------------------------------------------------------------

<tr class="alt1" ><td class="yui-skin-sam">

<div id="treeDiv" style="visibility:hidden;">
$adv_portal_forumlist
</div>

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

var ultree;
(function() {

function treeInit() {
ultree = new YAHOO.widget.TreeView("treeDiv");

ultree.setExpandAnim(YAHOO.widget.TVAnim.FADE_IN);
ultree.setCollapseAnim(YAHOO.widget.TVAnim.FADE_OU T);
ultree.readList();

ultree.subscribe("expand", function(node) {
});

ultree.subscribe("collapse", function(node) {
});

ultree.subscribe("labelClick", function(node) {
});


ultree.draw();
fetch_object('treeDiv').style.visibility = 'visible';
}

YAHOO.util.Event.addListener(window, "load", treeInit);

})();

//]]>
</script>

</td></tr>

//--------------------------------------------------------------------
//--> ChangeLog
//--------------------------------------------------------------------

--> v1.00 --> First Version
--> v1.01 --> Fixed Missing Animation Package - ragtek noticed thanks
--> v1.10 --> Fixed minor things
--> v1.20 --> Rewrite for VBA v3RC2 Module format
--> v1.30 --> Added Automatic Template Edits, Compacted Javascript Includes, Added Hidden Startup, Re-Packaged for Out of the Box Operation
Forum Paths have been added to Both Javascript and ForumDisplay.php so this will now work outside of your forum directory,
Removed Ugly Navmarkers that i forgot to remove from the original code for this.


//--------------------------------------------------------------------
//--> Demo Sites
//--------------------------------------------------------------------

http://www.srl-forums.com --> Where this module was originally wrote for
http://www.earthbeans.org --> Showing this module in a setting other then VBulletin ( MODx )
http://www.audiopoint.gr --> The Very Original Treemenu code written by Me for A Different JavaScript setup


//--------------------------------------------------------------------
//--> Information About the Author
//--------------------------------------------------------------------

I am a Freelance web Developer with Alot of exp in VBulletin modifications. I also run a blog about Web Development mostly using Yahoo, PHP and Linux Server stuff.
If you Like this modication please make a donation as it would make you feel all warm and fuzzy inside :P And helps me support the idea of future free module releases.


Support will be given to those that have Installed this modification only.

[elmati]

really nice addon!
i dont use yui, i use mootools but it's incompatible with vbulletin

thx a lot m8

[ragtek]

Originally Posted by Dankness

Is that a free CMS? I've never seen it before. I might eventually make it one day when i have some free time.

No.
Its a commerzial one but i could give you the "syntax" for a modul, how it have to be.

[Dankness]

Originally Posted by elmati

really nice addon!
i dont use yui, i use mootools but it's incompatible with vbulletin

thx a lot m8

I started using YUI afew months before Vbulletin switched to it, then when vb switched I was in heaven This was originally wrote using a Dynamic Drive JS, then I rewrote it with YUI for a ModX CMS site I had, then i finally put it on my VB last night and decided it looked awesome and figured i should release it I love YUI there Documentation is awesome, and Yahoo actually uses there stuff so its tested in a real life tests.

[elmati]

do u try mootools? it's really simple and works fine
i don't know too much of js so, i can't figure out how to take mootools workin with vbulletin

otherwise im trying YUI rite now

Thanks for this, i'll try to add images, like folders

[ragtek]

i think yui is "better" because it's implemented in vb and it will be more implemented in future
http://www.vbulletin.com/forum/showthread.php?t=243088

[Dankness]

Originally Posted by elmati

do u try mootools? it's really simple and works fine
i don't know too much of js so, i can't figure out how to take mootools workin with vbulletin

otherwise im trying YUI rite now

Thanks for this, i'll try to add images, like folders

Here just read this

And you'll learn how to change there images and stuff, Yahoo has awesome documents on it.

Mootoos is pretty good, But since vbulletin already includes YUI why bother adding mootools also? YUI gives you everything and more then you need. I wrote a ModX CMS site awhile ago that every page was loaded via AJAX and it used YUI's Backbutton History module, so even thou the center module was loaded each time you could still use your back button and your bookmark button. Im gonna release some more mods that use the YUI very soon too, just to replace some of the older mods that included prototype and mootools and stuff, that way vbulletin will use the same lib for abunch of ajax goodies

[ragtek]

i've put now this into my php for seeing if it is working:

$ausgabe = "<ul>
<li>
<span class='smallfont'>\n <a href=\"#\">blaaa</a></span>
</li>
<li>
<span class='smallfont'>\n <a href=\"#\">blaaa</a></span>
</li>
<li>
<span class='smallfont'>\n blaa </span>
</li>
<li>

<span class='smallfont'>\n <a href=\"#\">blaaa1</a> </span>
</li>
<li>
<span class='smallfont'>\n <a href=\"#\">blaaa2</a> </span>
</li>
<li>
<span class='level3menu'>\n <a href=\"#\">blaaa3</a> </span>
</li>
<li>
<span class='smallfont'>\n <a href=\"#\">blaaa</a> </span>
</li>
</ul>";
$adv_portal_forumlist = & $ausgabe;

but this shows now some links, but nothing collapsable

[Dankness]

Originally Posted by ragtek

i've put now this into my php for seeing if it is working:

$ausgabe = "<ul>
<li>
<span class='smallfont'>\n <a href=\"#\">blaaa</a></span>
</li>
<li>
<span class='smallfont'>\n <a href=\"#\">blaaa</a></span>
</li>
<li>
<span class='smallfont'>\n blaa </span>
</li>
<li>

<span class='smallfont'>\n <a href=\"#\">blaaa1</a> </span>
</li>
<li>
<span class='smallfont'>\n <a href=\"#\">blaaa2</a> </span>
</li>
<li>
<span class='level3menu'>\n <a href=\"#\">blaaa3</a> </span>
</li>
<li>
<span class='smallfont'>\n <a href=\"#\">blaaa</a> </span>
</li>
</ul>";
$adv_portal_forumlist = & $ausgabe;

but this shows now some links, but nothing collapsable

Did you include the javascript files in the headinclude?

Did you include the ul list in a div with a id?

Did you call the javascript afterwards?

ATM, All you've included is a unordered list with afew links inside of it. You now need to call the javascript to make it work properly.

[ragtek]

this is the code:

 <!-- BEGIN TEMPLATE: portal_yuimenu -->
<table width="100%">
<tr class="thead"><td>Navi</td></tr>
<tr class="alt1"><td class="yui-skin-sam">

<div id="treeDiv">
<ul>
<li>
<span class='smallfont'>

 <a href="http://www.ragtek.org/#" >blaaa</a></span>
</li>
<li>
<span class='smallfont'>
 <a href="http://www.ragtek.org/#" >blaaa</a></span>
</li>
<li>
<span class='smallfont'>
 blaa </span>
</li>
<li>

<span class='smallfont'>
 <a href="http://www.ragtek.org/#" >blaaa1</a> </span>
</li>
<li>
<span class='smallfont'>
 <a href="http://www.ragtek.org/#" >blaaa2</a> </span>
</li>
<li>
<span class='level3menu'>
 <a href="http://www.ragtek.org/#" >blaaa3</a> </span>

</li>
<li>
<span class='smallfont'>
 <a href="http://www.ragtek.org/#" >blaaa</a> </span>
</li>
</ul>
</div>

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

var ultree;
(function() {

    function treeInit() {
        ultree = new YAHOO.widget.TreeView("treeDiv");

       ultree.setExpandAnim(YAHOO.widget.TVAnim.FADE_IN);
       ultree.setCollapseAnim(YAHOO.widget.TVAnim.FADE_OUT);      
       ultree.readList();

       ultree.subscribe("expand", function(node) {
           });

       ultree.subscribe("collapse", function(node) {
           });

       ultree.subscribe("labelClick", function(node) {
           });


        ultree.draw();
    }

    YAHOO.util.Event.addListener(window, "load", treeInit);

})();

//]]>
</script>

</td></tr></table>
<!-- END TEMPLATE: portal_yuimenu -->

and i'm including the files

firebug shows no errors

thx for helping

[Dankness]

Originally Posted by ragtek

this is the code:

and i'm including the files

firebug shows no errors

thx for helping

• Whats the link to the page your tryin to put this into.
• Does Firebug show your actually connecting to the javascript files in the header?
• Put Firebug on NET and Refresh the page and make sure everything is found and there's no
  files not found.