looking for a jquery code

[arcticM]

I can't think of how this thing is called and so I can't find any example on google, I'll try to explain my vision best I can.
I want to have a list of square divs, each has contant (but that's not the point), so the divs are standing in a line from right to left and the one on the center of the screen is the biggest of all, and I have a way of moving this list of divs to the left or to the right, and so the divs are either getting bigger (if they are near the center) or getting smaller (or not visable at all as they move to the side).

it loos something like RocketDock menu if u know it -
http://prameg.ucoz.com/_fr/0/8939033.jpg

can anyone tell me how is this thing called?! and if u have a link to a code or example please share!
thank you!

[blinkey]

There is jqdock here http://www.wizzud.com/jqdock/

[arcticM]

exactly what I wanted and even more! huge thanks! now...how do I use it!? lol
I downloaded jqDock v1.8 and got 2 js files.. what do I need to do to have an html page with this menu on it?
btw I want the 'Multiple encroaching horizontal menus' option from the gallery
http://www.wizzud.com/2012/01/06/multiple-encroaching-horizontal-menus/

[blinkey]

I have only used a basic horizontal menu but it is well documented on the jqdock site.

You need to add this in the head.

<script type='text/javascript' src='PATH TO/jquery.jqDock.js'></script>

For the html in my usage was easy.

<div id='page'>
  <div id='menu'>
      <?php if ($page_id != 1) { ?>
    <a href='?page=home' title=''>
      <img src="<?php echo $theme_menu ?>homebird_150_1.png" alt='home' />
    </a>
      <?php } ?>
       <?php if ($page_id != 2) { ?>
    <a href='?page=joe' title=''>
      <img src="<?php echo $theme_menu_new ?>fbird_1_130_cam.png" alt='joe' />
    </a>
      <?php } ?>
      <?php if ($page_id != 3) { ?>
    <a href='?page=dave' title=''>
      <img src="<?php echo $theme_menu_new ?>fbird_2_130_sue.png" alt='dave' />
    </a>
      <?php } ?>
      <?php if ($page_id != 4) { ?>
      <a href='?page=gallery' title=''>
      <img src="<?php echo $theme_menu_new ?>fbird_7_130_gal.png" alt='gallery' />
    </a>
      <?php } ?>
      <?php if ($page_id != 5) { ?>
      <a href='?page=shop' title=''>
      <img src="<?php echo $theme_menu_new ?>fbird_3_130_sho.png" alt='shop' />
    </a>
      <?php } ?>
      <?php if ($page_id != 6) { ?>
      <a href='?page=events' title=''>
      <img src="<?php echo $theme_menu_new ?>fbird_6_130_eve.png" alt='events' />
    </a>
      <?php } ?>
      <?php if ($page_id != 7) { ?>
      <a href='?page=contact_us' title=''>
      <img src="<?php echo $theme_menu_new ?>fbird_10_130_con.png" alt='contact' />
    </a>
      <?php } ?>
      <?php if ($page_id != 8) { ?>
      <a href='?page=links' title=''>
      <img src="<?php echo $theme_menu_new ?>fbird_11_130_lin.png" alt='contact' />
    </a>
      <?php } ?>
  </div>
</div>

Then in my scripts file I used this to configure it.

/*
* This function sets the parameters for the jqdock menu effect on the front page.
*/
jQuery(document).ready(function($){
                      // set up the options to be used for jqDock...
                      var dockOptions =
                        { align: 'bottom' // horizontal menu, with expansion UP/DOWN from the middle
                        , labels: 'tr' // add labels (override the 'tl' default)
                        , size: 95  // set the maximum minor axis (horizontal) image dimension to 36px
                        , distance: 100 // extend distance to compensate for padding
                        };
                      // ...and apply...
                      $('#menu').jqDock(dockOptions);
                    });

There are more configuration options on the site I believe.

Have fun with it :)