Mini Mods - Ajax Fisheye Menu

This modification was just something random that I adapted to vBulletin.. I will release it with the status of beta, and when it has been proven to be stable, I will update it...

Demo of fisheye effect:
Demo
Demo - Vbulletin Live example (slightly modified from original release)

Installation:
Step 1:
- Extract and Upload contents of the "upload" folder to your server

Step 2:
Admin CP> Plugins and Products> Manage Products> Add/Import Product> Import> product-ajax_fisheye_menu.xml

Step 3:
Admin CP> vBulletin Options> Ajax Fisheye Menu >
Change.... Path to 'fisheye' directory
Attachment 72006

Step 4:
- Add

$afm_menu

in whatever template you decide to show menu (most likely navbar or header template)

Step 5(skip if vBa CMPS is not installed):
If you have vBadvance CMPS installed, you will need to do the following in order for this to work on your homepage as well:
- Admin CP> vBa CMPS > Default Settings> Main Options>
- Under the 'Portal Output Global Variables' setting you will need to add "afm_menu"

Step 6:
- Now you will need to configure the menu entries.. open the 'afm_fisheye_menu' template under the 'Ajax Fisheye Menu' template group.
- To add new menu items just use the following format:

<a class="dock-item" href="#"><img src="fisheye/images/home.png" alt="home" /><span>Home</span></a>

To Update:
- Reupload contents of upload folder to forum root...
- Import new product XML file with the overwrite setting on

V. 0.95-beta
+ Added a couple necessary AdminCP options
--- Enable/Disable option
--- Path to fisheye directory option

V. 0.94-beta
+ Fixed IE Quick Edit bug
+ Fixed IE font size drop down bug
(I have a feeling that this version will fix most of the Ajax related bugs, but members will have to let me know...)

V. 0.93-beta
+ Fixed fisheye directory error... now you only have to upload to your root..
+ Mood Manager now able to change moods in IE..
+ Added a folder in zip called 'extras' that include a set of blue themed icons made from the original set...

V. 0.92-beta
[s] + Added $vboptions[bburl] reference to images and scripts for smoother integration (thanks yoyoyoyo)[/s]
+ Added install.txt within zip file

V. 0.91-beta
+ Fixed IE blocks bug
+ Moved Stylesheet to Templates for easier editing
-- You can now edit the stylesheet by going to the 'afm_fisheye_stylesheet' template
+ Cached Templates

V. 0.9 - beta release
+ Fisheye effect

Step 6:
Come back to this thread and give me some feedback...

Known Bugs:
[s] - One user reports hover effect doesn't work in opera browser[/s]
- User Reports conflicts with shoutbox and casino mod
[s] - Unable to change mood in Mood Manager while using IE6.. works in IE7 and firefox[/s]
[s] - Unable to use Quick Edit in IE[/s]
- User Reports bug with VBPicGallery: "This mod looks fine everywhere except the gallery, where the icons show as a huge size, with text next to them."
[s] - Advanced Editor has weird code inside text size selector and font selector drop down boxes[/s]

Future Features
AdminCP Options
[s] - Enable/Disable[/s]
- Maybe options to set images and links in menu
- Any other suggestions welcome...


Script adapted from:
http://www.ndesign-studio.com/blog/mac/css-dock-menu

Here are some free icons you could possibly use with the dock:
http://www.dezinerfolio.com/2007/02/...a-gloss-icons/

This site has hundreds of icons.. but the site is in chinese...
http://www.tucoo.com/icon/index.htm
[S] I will provided limited support for this hack, and will continue to work on and update it when I can.. [/S]

I am no longer developing or supporting this MOD...

There are other things in life more important than VB you know

[Macmillion]

I've tried it all over BU, footer, navbar, header etc....never works.

Sorry about this :/

[Evolution06]

What does a portion of your navbar look like? I put it in mine no problem maybe I can help ya out. Check mine out http://www.pandemicdesign.net/forums/index.php

I see the problem you are having macmillion, I had to upload fisheye folder 2 times to get my to work fine,
I uploaded it once to /public_html folder in the cpanel and once into /forums folder

I am trying to figure out right now why both folders need to be where they are give me a few. I think it might be just a change of links in the templets

[Macmillion]

Mine just clumps together, it does the loading thing that yours does but then it just stays there, unlike yours which works fine.

EDIT: Hmmm if thats so then the error would be easy to correct. Thanks i'll give it a go!

EDIT EDIT: That worked thanks

[Evolution06]

No problem, You will notice that if you delete the fisheye in /forums you images won't show I am thinking that changing the links in afm_fisheye_menu might fix this so then the fisheye folder can be deleted in /forums

[BecomeUnbroken]

what i will do in the next release is add an option in the Admin CP where you can enter the location of your /fisheye folder.. that way it can be anywhere you want it to be and still work with the right setting

[Evolution06]

Awesome because right now as you can see we have to have the fisheye folder in /public_html and /forums for all aspects of it to work correctly. I am at work so have limited time to see if I can find a fix myself. Although having the 2 folders does not bother me much really,

[BecomeUnbroken]

Originally Posted by Evolution06

Awesome because right now as you can see we have to have the fisheye folder in /public_html and /forums for all aspects of it to work correctly. I am at work so have limited time to see if I can find a fix myself. Although having the 2 folders does not bother me much really,

I have it only in my root directory and it works fine... but I also have my forum in the root directory and not in the /forum directory... so that's probably why it works ok for me... either way I'll try and see how I can make it a little more universal.. I'm new at this whole vBulletin thing, and coding in general.. so this is a learning process for me as well

[rokked]

Uploaded and it works great.

Any way to get the size of the icons to get less dramatic when you scroll over though? Like instead of going from 50 to 100 pixels, from 50 to 75?

[BecomeUnbroken]

Originally Posted by rokked

Uploaded and it works great.

Any way to get the size of the icons to get less dramatic when you scroll over though? Like instead of going from 50 to 100 pixels, from 50 to 75?

yes.. in the afm_fisheye_menu template look for this code:

$('#dock').Fisheye(
                {
                    maxWidth: 50,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container',
                    itemWidth: 40,
                    proximity: 90,
                    halign : 'center'
                }

change the 'proximity' value to less so that the menu won't pick up your mouse from a mile away... and will also make the effect a bit less dramatic

change 'maxWidth' to the size in pixels you want the image to be when hovered over it.. and 'itemWidth' to the size when the menu is idle without being rolled over... If you go to my site you can see how mine is a bit different than the one in the release... here is what my code looks like...

$('#dock').Fisheye(
                {
                    maxWidth: 40,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container',
                    itemWidth: 30,
                    proximity: 30,
                    halign : 'right'
                }

Hope this helps a bit...

[rokked]

Wonderful. You're such a help.