vb.org Archive - Mini Mods - Ajax Fisheye Menu

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 3.6 Add-ons (https://vborg.vbsupport.ru/forumdisplay.php?f=194)

- - Mini Mods - Ajax Fisheye Menu (https://vborg.vbsupport.ru/showthread.php?t=160422)

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

Code:

$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:

Code:

<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... :D

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

very cool. How do we edit the background color - the black does not mesh with my site style. This would be perfect for a mac forum :D

also - I followed the directions for vbadvances, but it only displays as text links in the header.

Quote:

Originally Posted by yoyoyoyo (Post 1362060)

to edit background you will need to edit the style.css file in the /fisheye directory...
where it says this..

Code:

.dock-container {

    position: absolute;

    height: 50px;

    background: url(images/dock-bg2.gif);

    padding-left: 20px;

you would changed the background part...

As for the vbadvanced thing, i'm not sure.. it's working fine for me.. make sure that each entry of global variables is on a new line...

jquery is the best and works with vbulletin! :)

ty for share m8

Quote:

Originally Posted by yoyoyoyo (Post 1362060)

Change the Images dock-bg2.gif dock-bg.gif

looks interesting, will give it a try :)

wow looks awesome! anyone got a demo running on a forum? would love to see how/where this is actually implemented.

yep, extra !!!

congrat ^^

hmm....doesn't seem work properly with vbCMPS v3.0

doubled up links and no images show up.

Hi, I have a problem in ie, blocks ajax (MGC ChatBox and Casino) ... Does anyone have the same problem?

Nice work... thanks for sharing! :)

couple errors. one in firefox it shows everything 3 times. in opera the hover thing dosent work other than that its kinda different

looks great , i will check later ... Good Job :up:

Clicked Installed :)

Looks awesome will install later.

When its stable il instal looks good

Hello guys :)

It is possible to insert a menu in a table?
Which template I must change?
Thanks and congratulations, look is fantastic ;-)

Quote:

Originally Posted by GrendelKhan{TSU (Post 1362113)

hmm....doesn't seem work properly with vbCMPS v3.0

doubled up links and no images show up.

yep - that is what I was saying - and the settings in vbadvanced are correct according to the install - each entry of global variables is on a new line.

thanks nice work i will reserved it

I just posted v.0.91... which included a fix for IE browsers... I will continue to investigate other reported bugs

Thanks..

Quote:

Originally Posted by GrendelKhan{TSU (Post 1362113)

hmm....doesn't seem work properly with vbCMPS v3.0

doubled up links and no images show up.

make sure that the fisheye folder is in your root directory and not in your forum directory.. it looks as if your browser cannot find the javascript files and images so it displays everything as plain links (the lowercase links aren't actually links.. they are the alt rollover captions for the images, but since the images aren't being loaded properly they appear as if they are links)...

I am pretty sure this is due to the fisheye folder being in the wrong place.. because it seems the template is being parsed, even by vbadvanced

I would appreciate it if you would put the install info in a text file and add it to the zip file - that's usually how it is done.

I uploaded the folder to the root public_html directory, as you suggested ,and in vbadvanced it does not display correctly - it displays all of the images on the left hand side all bunched up together, and in the forum the images are not visible at all.

Quote:

Originally Posted by yoyoyoyo (Post 1362278)

I would appreciate it if you would put the install info in a text file and add it to the zip file - that's usually how it is done.

will do.. next time i upload an update :o

i like it... im going to use it on my forum... i will change the images but the script is going in!!

installed

Instead try this in vbadvanced:

upload the "fisheye" directory to the FORUM directory.

edit the afm_fisheye_menu template and replace the contents with this instead:

Code:

<!--top dock -->

<div class="dock" id="dock">

  <div class="dock-container">

      <a class="dock-item" href="index.php"><img src="$vboptions[bburl]/fisheye/images/home.png" alt="home" /><span>Home</span></a> 

      <a class="dock-item" href="vbms.php"><img src="$vboptions[bburl]/fisheye/images/email.png" alt="contact" /><span>Contact</span></a> 

      <a class="dock-item" href="forum.php"><img src="$vboptions[bburl]/fisheye/images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a> 

      <a class="dock-item" href="#"><img src="$vboptions[bburl]/fisheye/images/music.png" alt="music" /><span>Music</span></a> 

      <a class="dock-item" href="#"><img src="$vboptions[bburl]/fisheye/images/video.png" alt="video" /><span>Video</span></a> 

      <a class="dock-item" href="#"><img src="$vboptions[bburl]/fisheye/images/history.png" alt="history" /><span>History</span></a> 

      <a class="dock-item" href="#"><img src="$vboptions[bburl]/fisheye/images/calendar.png" alt="calendar" /><span>Calendar</span></a> 

      <a class="dock-item" href="#"><img src="$vboptions[bburl]/fisheye/images/rss.png" alt="rss" /><span>RSS</span></a>

      <a class="dock-item" href="#"><img src="$vboptions[bburl]/fisheye/images/rss.png" alt="rss" /><span>RSS</span></a> 

      <a class="dock-item" href="#"><img src="$vboptions[bburl]/fisheye/images/rss2.png" alt="rss" /><span>RSS2</span></a>

  </div> 

</div>



<!--dock menu JS options -->

<script type="text/javascript">

    

    $(document).ready(

        function()

        {

            $('#dock').Fisheye(

                {

                    maxWidth: 50,

                    items: 'a',

                    itemsText: 'span',

                    container: '.dock-container',

                    itemWidth: 40,

                    proximity: 90,

                    halign : 'center'

                }

            )

            $('#dock2').Fisheye(

                {

                    maxWidth: 60,

                    items: 'a',

                    itemsText: 'span',

                    container: '.dock-container2',

                    itemWidth: 40,

                    proximity: 80,

                    alignment : 'left',

                    valign: 'bottom',

                    halign : 'center'

                }

            )

        }

    );



</script>

edit - well I tried it, but in vbadvanced all of the images are all bunched up together on the left hand side instead of being displayed in the middle, but it works in the forum now.

Quote:

Originally Posted by yoyoyoyo (Post 1362287)

I got this to work in vbadvanced - here is how to do it:

upload the "fisheye" directory to the FORUM directory.

edit the afm_fisheye_menu template and replace the contents with this instead:

Thank you.. I will include this in the next release... :up:

Quote:

Originally Posted by yoyoyoyo (Post 1362287)

edit - well I tried it, but in vbadvanced all of the images are all bunched up together on the left hand side instead of being displayed in the middle, but it works in the forum now.

try v.0.92.. I made similar changes to the script so it should reference the same directory, whether you are in your root directory or your forum/ directory... It might fix your problem

Update didn't work. But the older version working fine i m still making changes to it.

http://www.friendskorner.com/forum

Damn ive integrate the same Menu manually why havent u released that earlier dude?xD

NoWay!!! :eek:

Can you do that??? Great!

Anyways I will wait for a stable version ;)

this not working for me :( this giving same problem :(

do u need vbadvance for this to work?

Quote:

Originally Posted by Dark Cynicus! (Post 1362772)

do u need vbadvance for this to work?

no.. i just posted instructions on how to get it to work if you happen to use vbadvanced.. it works fine without it...

See it in action here

Awesome mod! I am having ftp issues right now but looking at the product I am sure I can make it work if I have problems. In my opinion vBulletin is lacking when it comes to the navbar. I would just be happy with a simple stock menu allowing you to customize navbar items. I bring it up because this mod is something I wanted when I first invisioned my site and put it off when I found customizing the navbar to be more time intensive than I had hoped for. At least a mod like this makes it worth it in the end. :)

Anyone have a one working on a full page we can see? I saw the demo but I want to see it on a full vbulletin page. Thanks.

Quote:

Originally Posted by Sitting (Post 1362130)

Hi, I have a problem in ie, blocks ajax (MGC ChatBox and Casino) ... Does anyone have the same problem?

Have you tried it in another browser? IE has issues with PNGs sometimes. Are you running latest IE, Flash and Java? What OS?

Quote:

Originally Posted by tminus (Post 1362920)

Have you tried it in another browser? IE has issues with PNGs sometimes. Are you running latest IE, Flash and Java? What OS?

Yes, tested in firefox and opera, all correct... bud no in IE...

my problem is solved with the version 0.92, but now, I have other problem... i waiting for stable version...

Thanks :D

Quote:

Originally Posted by tminus (Post 1362920)

Anyone have a one working on a full page we can see? I saw the demo but I want to see it on a full vbulletin page. Thanks.

you can check out my page... www.becomeunbroken.com

i've modified it a bit though... like I put it on the right side and made the icons a bit smaller.. it's on the top right corner of the page

It make problem with "Lightbox/ThickBox works with Inline Editing" (https://vborg.vbsupport.ru/showthrea...=126501&page=7)
with code at the top of postbit legacy

Code:

<if condition="$show['thumbnailattachment']">

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/thickbox.js"></script>

</if>

If I remove this code it works normal.

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01405 seconds Memory Usage 1,844KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (5)bbcode_code_printable (11)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: