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

[KTP]

its the only thing that i've touched so i dont have any other explanations

[rokked]

How would you align this to the left or the right. All the normal tricks seem to not work.

[BecomeUnbroken]

Originally Posted by KTP

i installed this, it didnt work right so i chose to uninstall it and it wiped out half my database.

This mod doesn't make any database changes.. or even access the database.. So there is no way it could've wiped it out...

[BecomeUnbroken]

Originally Posted by rokked

How would you align this to the left or the right. All the normal tricks seem to not work.

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 'halign' value to left, center, or right.. depending where you want it to go..

here is what my code looks like:

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

After this you need to go to the afm_fisheye_stylesheet template and mess with the CSS code until you have it aligned exactly where you want it... here's an example of my code:

.dock {
 position: relative; 
left: -7%;
bottom: 0px;
 height: 50px; 
}
.dock-container {
 position: absolute;
 height: 50px;
 padding-left: 20px;
}

you can see the result of this coding at my site

[Evolution06]

Originally Posted by BecomeUnbroken

here are some free icons i found...
http://www.dezinerfolio.com/2007/02/...a-gloss-icons/

Nice, Thanks for going the extra mile they will come in handy,

[citroenar]

Originally Posted by BecomeUnbroken

Well you are loading jquery two times.. since both these mods use JQuery you should remove one of the instances.. I recommend to remove it from my mod instead of the Lightbox, since mine is still in beta.. I might add a control panel option in a future release to enable/disable Jquery in these type of cases...

EDIT::
Actually now when I think about it.. you should remove the LightBox JQuery code.. because the menu need JQuery on every page.. not just on pages where the postbit is displayed.. so remove the code from the postbit_legacy, and just remember where it goes if you need to put it back later...

to be more specific, remove this piece of the code..
<script type="text/javascript" src="js/jquery.js"></script>

if I remove mine,then lightbox dont work like should work (open picture normal,but on close it like redirect me back on forumhome) and if I remove yours then both dont work.
I found another error - se picture

[Magnumutz]

This is awesome dude... I'm really looking for a stable version.

Btw, can we get more images for it?

[Saviour]

This would be ice to add onto my forum as well, but I'm not a big fan of BETA. I'll wait for a more stable version as well.

Some things I'd like to see addressed:

1. Full browser compatibility
2. Transparent background images for seemless blending with your current forum
3. Ability to automatically resize the menu instead of having to manually size it through template scripts
4. More images
5. Admin CP control

This is an excellent Mod...I hope to see further progress and will return frequently to check up on it.

Best of luck!

[MiahBeSmokin420]

yo

i have this in my header right now

and i see that you can make 2 diffrent docks which i understand

but when i do that the second one is always messed up and showes up in the middle of my site somewhere

how can i make it in the header and footer at the same time?

other then that its great i replaced my normal nav bars with this

[MiahBeSmokin420]

Yo Yo Yo Yo Yo Yo Yo Yo Yo Yo Boy

Seriously

How The He Dubble Hocky Stix (lol lil ears on this site lol)

Do You Get This To Be In The Header And Footer At The Same Time

??

Any One?? Any One??

Going Once?? Going Twice??