Loading ...
Sorry, an error occurred while loading the content.

in place submenus (shifting down)

Expand Messages
  • kindom_2006
    Hi list. First look at this very non-yui site, one that my company is refurbishing with yui features. http://www.maprocr.com/ The owner of the site is totaly
    Message 1 of 2 , Feb 8, 2007
    • 0 Attachment
      Hi list.

      First look at this very non-yui site, one that my company is refurbishing with yui features. 

      http://www.maprocr.com/

      The owner of the site is totaly in love with the menus.

      To make this work, first I made a little rollover widget, roll.js:



      /*
      ** my false-widget imagerollovers
      */
      YAHOO.namespace("mapro");
      YAHOO.namespace("mapro.rollover");
      YAHOO.mapro.rollover.imagefixed = new Array();
      YAHOO.mapro.rollover.imageover = new Array();
      YAHOO.mapro.rollover.imageout = new Array();
      YAHOO.mapro.rollover.imagefix = new Array();
      YAHOO.mapro.rollover.imageid = new Array();

      /*
      ** roll_in handles mouse over on an image, replaceing
      ** the img.src with the preloaded 'over' image src
      ** unless the image has been fixed.
      **
      ** @param event - ignored
      ** @param ind - index of widget access
      */
      YAHOO.mapro.rollover.roll_in = function (event, ind)
      {
      if (!YAHOO.mapro.rollover.imagefixed[ind])
      {
      var img = document.getElementById(YAHOO.mapro.rollover.imageid[ind]);
      img.src = YAHOO.mapro.rollover.imageover[ind].src;
      }
      YAHOO.util.Event.stopPropagation(event);
      }

      /*
      ** roll_out handles mouse out on an image, replaceing
      ** the img.src with the preloaded 'out' image src
      ** unless the image has been fixed.
      **
      ** @param event - ignored
      ** @param ind - index of widget access
      */
      YAHOO.mapro.rollover.roll_out = function (event, ind)
      {
      if (!YAHOO.mapro.rollover.imagefixed[ind])
      {
      var img = document.getElementById(YAHOO.mapro.rollover.imageid[ind]);
      img.src = YAHOO.mapro.rollover.imageout[ind].src;
      }
      YAHOO.util.Event.stopPropagation(event);
      }

      /*
      ** roll_fix handles click on an image,
      ** if a 'fix' image was provided for the image
      ** if the image has been fixed before,
      ** it replaces the img.src with the preloaded 'over' image src,
      ** and it unmarks the image as fixed.
      ** otherwise,
      ** it replaces the img.src with the preloaded 'fix' image src,
      ** and marks the image as fixed.
      **
      ** @param event - ignored
      ** @param ind - index of widget access
      */
      YAHOO.mapro.rollover.roll_fix = function (event, ind)
      {
      var fix = YAHOO.mapro.rollover.imagefix[ind];

      if (fix)
      {
      var img = document.getElementById(YAHOO.mapro.rollover.imageid[ind]);
      var fixed = YAHOO.mapro.rollover.imagefixed[ind];

      YAHOO.mapro.rollover.imagefixed[ind] = (fixed) ? false : true;
      img.src =
      (fixed) ? YAHOO.mapro.rollover.imageover[ind].src : fix.src;

      YAHOO.util.Event.stopPropagation(event);
      }
      }

      /*
      ** roll_it sets up the rollover widget entries.
      **
      ** @param id (required) id of the image to aflict with rollovers.
      ** @param altsrc (optional) the 'src' value for the mouse rollover if needed
      ** @param fixed (optional) the 'src' value for the fixed click image (which
      ** blocks the rollover until clicked again).
      */
      YAHOO.mapro.rollover.roll_it = function (id, altsrc, fixed)
      {
      var size = YAHOO.mapro.rollover.imageid.length;
      var img = document.getElementById(id);
      var myfix = (fixed) ? fixed : '';
      var mysrc = (altsrc) ? altsrc : img.src;

      YAHOO.mapro.rollover.imageid[size] = id;
      YAHOO.mapro.rollover.imageout[size] = new Image();
      YAHOO.mapro.rollover.imageout[size].src = img.src;
      YAHOO.mapro.rollover.imageover[size] = new Image();
      YAHOO.mapro.rollover.imageover[size].src = mysrc;
      YAHOO.mapro.rollover.imagefixed[size] = false;
      YAHOO.mapro.rollover.imagefix[size] = false;

      if (myfix)
      {
      YAHOO.mapro.rollover.imagefix[size] = new Image();
      YAHOO.mapro.rollover.imagefix[size].src = myfix;
      }
      YAHOO.util.Event.addListener( img, "mouseover",
      YAHOO.mapro.rollover.roll_in, size);
      YAHOO.util.Event.addListener( img, "mouseout",
      YAHOO.mapro.rollover.roll_out, size);
      YAHOO.util.Event.addListener( img, "click",
      YAHOO.mapro.rollover.roll_fix, size);}
      /*
      ** end of my cool yui-rollover
      */

      Okay,wellmy rollovers are sweet, no problems, the problems happenwithtrying toget the yui menu to behave like the original menu.

      My current attempt lives here:

      http://qs921.pair.com/stout/client_mapro/index2.php

      It's generating an error:

      Error: this.body has no properties
      Source File: http://qs921.pair.com/stout/client_mapro/javascript/yui/menu/menu-min.js
      Line: 35
      Any ideas?
      BTW, I started using the example in: http://yuiblog.com/blog/2006/08/02/dynamic_loading/
      And ended up deciding that the on demand loading wasn't working for my needs.Actual problems:
      1. I'm looking to make the menu start collapsed.
      2. I want a click on one of the menu items (with a submenu) to open up it's submenu.
      3. And that a further click on one of the menu items (with a submenu) will close the same.
      4. *not 100% necessary* I'd like that opening one submenu closes any other opened submenu.
      5. *not 100% necessary* I'd like that the submenu doesn't close on any old random click.
      Thanks!!!
      Jeff
    • kindom_2006
      Well, List I ve made some progress. It turns out there was an error in the Html I m using to construct the menu, I defined the bd div of the submenus as
      Message 2 of 2 , Feb 9, 2007
      • 0 Attachment
        Well, List

        I've made some progress.

        It turns out there was an error in the Html I'm using to construct the
        menu, I defined the 'bd' div of the submenus as <div id="bd"> instead
        of <div class="bd"> woops!.

        There were some other errors, and now I'm close to where I want to be.

        The problem I'm having is the menuItems appear to be setting an orange
        border around the images I'm using for top level menu items. (no
        such border is showing up for the links in the sub-menus.

        Can one of you menu gurus tell me what css I need to use to block that
        highlighting?

        My working url is:

        http://qs921.pair.com/stout/client_mapro/index2.php

        Thanks.


        --- In ydn-javascript@yahoogroups.com, "kindom_2006" <kindom_2006@...>
        wrote:
        >
        > Hi list.
        >
        > First look at this very non-yui site, one that my company is
        > refurbishing with yui features.
        >
        > http://www.maprocr.com/
        >
        > The owner of the site is totaly in love with the menus.
        >
        > To make this work, first I made a little rollover widget, roll.js:
        >
        >
        >
        > [* snip *]
        > Actual problems:
        > 1. I'm looking to make the menu start collapsed.
        *solved*
        > 2. I want a click on one of the menu items (with a submenu)
        > to open up it's submenu.
        *solved*
        > 3. And that a further click on one of the menu items (with a
        > submenu) will close the same.
        *solved*
        > 4. *not 100% necessary* I'd like that opening one submenu
        > closes any other opened submenu.
        -- not solved yet --
        > 5. *not 100% necessary* I'd like that the submenu doesn't
        > close on any old random click.
        *solved*
      Your message has been successfully submitted and would be delivered to recipients shortly.