4

I'm looking to put a horizontal fisheye/dock nav on my site, but I need it to be fixed positioning... all the ones I've found do not support fixed positioning.

Here are links to some of the ones I've found:

  • jQuery OS X Dock #1 - Doesn't support fixed positioning
  • CSS Dock Menu - This is very similar to the one above...
  • euDock 2.0 - Supports similar to fixed positioning (position:absolute with javascript to make sure it stays in the same place) but this doesn't work because it's way too jumpy when you scroll down (See what I mean by going to that link and scrolling)... real fixed position is usually perfectly smooth with scrolling.

I've yet to see a horizontal one that doesn't break, there is a vertical one that works on the same page as the first link above.

Anyone know any fisheye/dock menu that will work with fixed positioning?

Edit: Changing the positioning to fixed will break the functionality of these menus in particular (they even say it in the article in the first link above). I'm looking for one that won't break if I change the positioning to fixed.

Matt
  • 5,547
  • 23
  • 82
  • 121

5 Answers5

1
getPointer : function(event)
{
    var x = event.pageX || (event.clientX + (document.documentElement.scrollLeft
            || document.body.scrollLeft)) || 0;
    var y = event.pageY || (event.clientY + (document.documentElement.scrollTop
            || document.body.scrollTop)) || 0;
    //subtract, add scrollbar    
    y -= $(window).scrollTop();
    return {x:x, y:y};
},

Modify iutil.js of interface, you show subtract scrollTop

sth
  • 222,467
  • 53
  • 283
  • 367
Tin Nguyen
  • 26
  • 1
  • Thank you!! You saved me hours and hours of frustration! Definitely the best solution out there. Just to clarify for others who may be trying... download interface.js and all the source files here: http://interface.eyecon.ro then edit the iutil.js file and include it in the header of your html file with the rest of your scripts. – user2755541 Apr 16 '15 at 23:13
0

Fixed positioning can be done with CSS.

#main_menu {
  position: fixed;
  top:10px;
  left:10px;
}

I haven't used any of these fisheye javascript things, but I presume they'll work with fixed elements.

August Lilleaas
  • 54,010
  • 13
  • 102
  • 111
  • fixed positioning breaks the fisheye functionality of the menu (it no longer makes the icons bigger as you scroll over) I'm sure there has to be a menu that doesn't break with fixed positioning – Matt Aug 08 '09 at 21:14
  • 1
    you can always get your hands dirty and alter one of the plugins to support what you want. – redsquare Aug 08 '09 at 21:16
0

I suggest you try this one.

Why don´t you get your navigation bar in one div, and the content in another div, with overflow auto? Then the navibar is always on top.

Like here: http://www.pmob.co.uk/temp/fixed-header.htm

MaikL80
  • 178
  • 8
0

Some more solutions out-of-the-box to avoid re0inventing the wheel (of course, if license allows)

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

Ram on Rails
  • 1,299
  • 11
  • 25
0

You can patch the jQuery interfaces Fisheye with this patch. Then Fisheye works with position: fixed;

see: http://www.monkey-business.biz/181/jquery-interfaces-fisheye-position-fixed-patch/

sra
  • 23,820
  • 7
  • 55
  • 89
Loaden
  • 11
  • 1