SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    form select elements (xZIndex/xTabPanelGroup) question (paging MikeFoster)

    Hiya, I've just started playing around with your scripts and so far they've worked out great.

    I have a question about xTabPanelGroup, maybe you can just point me in the right direction or maybe you already know off hand what this issue is about...

    When one of my tabs contains a <select> form element, that element is visable on all tabs. This happens for me on IE 6, but not Moz.

    Any info is much appreciated, thanks!

    -Peter

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Should I go through each element in my hidden tab's content, check to see if its a select box, and if it is set visibility to hidden?

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Peter, welcome to the forum!

    Glad you like my toys and I hope you're havin fun with them

    This is a windowed control issue and there is no fix - however there are work-arounds such as what you have suggested in your second post good thinking.

    Opera and Moz draw some of their own controls (they are not provided by the OS) so they respect z-index.

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    great, thanks for the reply, I'll give that a try.

    I've also just started looking at xMenu4, I'm seeing if I can use it for a kind of options menu for a bunch of items on a page. I notice that #menuMarker sets where the menu will appear, is this going to be much of an issue if I want to have a lot of menus on the page? I could have 50+ seperate menus being created dynamically. I'm thinking I can adjust things to work dynamically, getting around that single id issue, but I'm sure you'd have a better idea/thoughts about this than me atm. Each menu would have 2 levels max, I'm crossing my fingers and hoping that performance isnt too much of an issue...

    -p

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Positioning the menu at #menuMarker is part of the "application" not the xMenu4 code. So you can have any number of them: #menuMarker1, #menuMarker2, etc.

    The files xmenu4_horizontal.js and xmenu4_vertical.js are what I call the "application code" (two different demos) - this is what you need to customize. You should not have to edit the xmenu4.js file.

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again, i have a few more questions, hope it's cool to just keep posting here...

    First off, just out of curiousity, why was the xShow/Xhide piece left out of your tab code? I've been learning lots, and want more... so just wondering if this was just not thought of in your first pass or if there's a specific reason you would not want it in there? I've updated the tabOnClick function to look like so:

    Code:
    function tabOnClick()
      {
        tabs[selectedIndex].className = clsTD;
        this.className = clsTS;
        xZIndex(this, highZ++);
        xZIndex(panels[this.xTabIndex], highZ++);     
        for (i = 0; i < tabs.length; ++i) {
         xHide(panels[i]);
        }
        xShow(panels[this.xTabIndex]);
        selectedIndex = this.xTabIndex;
      }

    Now about xmenu4...


    I've now generated a bunch of menus dynamically and set up the proper watchers, but I've run into issues in a couple areas. I'm afraid that this solution might not pan out, which would kinda suck...

    1. I'm not exactly clear on how "aLblClp, aBoxClp" works... maybe you could explain a bit? I'm guessing this is related to the triggers which activate/deactivate menus if the mouse is on them, just cant seem to get my menus to go off properly. Mine stays on when I go over other menus or when I just go off my 2nd level box, seems inconsistant and hard to figure out. I think it might just be related to my clip areas....

    2. The last menu on my page is always positioned wrong. I'm putting each menu in the last column of each row in a table, and everyone is lined up nicely except the last one is up and to the left about 20px. I've messed around with the html a bit without any changes. I'm not sure the deal here, and probably hard for you to guess at as well, but maybe you can give me a clue...

    3. This last one is the show stopper for me... The performance is no good for my use. :/ On a page that loads 18 menus I have to wait a good 7 seconds looking at pure white screen before my menus are drawn. CPU sits at %100 for quite a bit each time window is resized or loaded. Now I'm just wondering if you think there is a way I can deal with this or have any ideas of what I should do? I have added some code which I think probably didnt speed things up, but mainly I think it's just the watcher having to deal with so many menus all the time.

    Here is my updated xmWinOnResize:

    Code:
          function xmWinOnResize()  {
            for (i=0; i&lt;xMnuMgr.menus.length; ++i) {        
              var id = xMnuMgr.menus[i].ele.id.substring(7);
              var mid = 'menuMarker_' + id;                
              var me = xMnuMgr.activeMenu.ele;
              var mm = xGetElementById(mid);
              xMoveTo(me, xPageX(mm), xPageY(mm));
              xMnuMgr.paint();
            }
          }
    because I'm dynamically creating menus I had to match the menuMarkers with their corresponding myMenus... could that substring bit I put in be most the problem? Or am I just hooped reguardless?

    Thanks a bunch

    -Peter

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Peter,

    Ask all the questions you want

    Quote Originally Posted by pdub23
    First off, just out of curiousity, why was the xShow/Xhide piece left out of your tab code?
    All the panels are set to the same size, so raising the z-index is enough. It looks like my code assumes that they are all visible initially.

    1. I'm not exactly clear on how "aLblClp, aBoxClp" works... maybe you could explain a bit? I'm guessing this is related to the triggers which activate/deactivate menus if the mouse is on them...
    Yes you are right... and you are also right in saying that they are somewhat confusing. They are offsets from the top/right/bottom/left edges. Negative offsets expand the "focus area" larger than the label or box. Positive offsets shrink it. So for example in my horizontal demo I have this...
    Code:
        [-3, -10, -6, -10],       // lbl focus clip array
        [-30, null, null, null],  // box focus clip array
    ...which means that the mouse will not be considered "off the label" until it is more than 3px above, 10px to the right, 6px below or 10px to the left of the actual label element edges. And the mouse will not be considered "off the box" until it is 30px outside the actual box element edges. This is a technique that I've used quite a bit. An alternative technique is to use a timer and to not consider the mouse "off the label/box" until the timer times-out.

    2. The last menu on my page is always positioned wrong.
    I'd have to look at the page to be able to make any suggestions about that.
    Be sure to run it thru a validator.

    I'm looking at your question #3 now...

  8. #8
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    3. This last one is the show stopper for me... The performance is no good for my use.
    I may have to see your implementation to really be able to help with the performance issue. With 18 menus on the same page it's going to be a challenge.

    In my demos the xMnuMgr object is overkill, however it is intended to help out in a situation such as yours. xMnuMgr.paint calls the paint method of each menu, so you don't need to call xMnuMgr.paint in a loop, you only need to call it once. This is where I need to see your page. Here's the question: do your menus need to be re-positioned if the window is resized? If your menus are relatively positioned (or if they are absolutely positioned with respect to some relatively positioned element [which might be the ideal setup]) then you only need to call xMnuMgr.paint (only once) in the resize event - that's it. However if your menus are absolutely positioned such that they need to be re-positioned when the window is resized then the best place to do this is in the loop in xMnuMgr.paint - and then your resize listener only needs to call xMnuMgr.paint (only once). For example:
    Code:
    function xMenuManager() {
    
      ...
      
      this.paint = function()
      {
        var i;
        for (i=0; i<this.menus.length; ++i) {
                                        // x,y needs to be calculated for each menu
          xMoveTo(this.menus[i], x, y); // I added this line
          this.menus[i].paint();
        }
      }
    } // end xMenuManager object prototype
    As an experiment, try the following resize listener, then resize the window and see what happens.
    Code:
    function xmWinOnResize()
    {
      xMnuMgr.paint();
    }
    As for decreasing the time it takes to setup the menus "onload", it might be possible to do this in a timer listener so that the menus are being setup, in the background, "after" the page is available to the user.

  9. #9
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cool, I'll give that a try when I get into work.... (running a bit late today - damn daylight savings)

    I was also thinking about doing more of a 'On Demand' approach, moving and painting each menu only when needed. I'm not sure though, probably would be slightly laggy and have to do it each time menu is used...

    about the focus area, I think mine are not working 100% because other menus are becoming 'active' before the current one is 'deactivated', so I might need to deactivate all other menus each time I activate a menu, does this make sense?

    I'm working on internel network right now so its hard to show examples... I'll see what I can do to set something up external...

  10. #10
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK well that improved perfomance A LOT, so that's great...

    Code:
      this.paint = function()
      {
        var i;
        for (i=0; i<this.menus.length; ++i) {
          x = xPageX(this.menus[i]);
          y = xPageY(this.menus[i]);
          xMoveTo(this.menus[i], x, y);
          this.menus[i].paint();
        }
      }
    I'm now thinking I can hopefully tweak things enough for this to be usable. Sweet. For some reason it fixed the last item alignment issue as well.. curious...

    Anyhow, my remaining major issue is the deactivation problem, my menus are all staying open too often, results seem very inconsistant (speed of mouse, co-ords seem to effect it, but I can't replicate a consistant sucessful way they will work).

    instead of re-doing my work on a public box I've just created a screenshot to clarify what I'm talking about.

    my xMenu4 looks like:

    Code:
    var me = xGetElementById('myMenu_UniqueID');
    
     var mo_UniqueID = new xMenu4(
                  me,                       // id str or ele obj of outermost UL
                  true,                     // outer UL position: true=absolute, false=static
                  false,                    // main label positioning: true=horizontal, false=vertical
                  -182, 0,                // box horizontal and vertical offsets
                  [-3, -2, -3, -10],       // lbl focus clip array
                  [-20, null, null, null],  // box focus clip array
                  
                  // css class names:
                  'xmBar', 'xmBox',
                  'xmBarLbl', 'xmBarLblHvr',
                  'xmBarItm', 'xmBarItmHvr',
                  'xmBoxLbl', 'xmBoxLblHvr',
                  'xmBoxItm', 'xmBoxItmHvr'
                );
    
     xMnuMgr.add(mo_UniqueID);
    Basically I'm just moving my mouse up and down over the MC[UniqueID] boxes and this is what it looks like:
    Attached Images Attached Images

  11. #11
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In this code you posted...
    Code:
      this.paint = function()
      {
        var i;
        for (i=0; i<this.menus.length; ++i) {
          /*
          x = xPageX(this.menus[i]);
          y = xPageY(this.menus[i]);
          xMoveTo(this.menus[i], x, y);
          */
          this.menus[i].paint();
        }
      }
    ...I have commented-out some lines - those lines only move the menus to their existing positions so those lines effectively don't do anything. Try it with those lines commented-out. Be sure to try resizing the window with that code-change. However it is likely that you'll need to reposition the menus to their menuAnchors after a window resize. What are you doing to position the menus onload? That is what needs to be done again onresize.

    Gotta run - I'll look at the rest of your post later

  12. #12
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok i must have been confused... I didnt get to work on this much today, but just had a quick look to see why commenting out those lines had no effect... no I realize that xMenu4.prototype.paintV is probably what I need to be looking at.... I dont yet understand how xMenu4.prototype.paint get's triggered....

  13. #13
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hiya, well I've stripped things down a bit now, turns out I don't really need anything but:

    Code:
    function xOnload()  {       
      xMnuMgr.load(); 
      xMnuMgr.paint();
    }
    and I've changed my ul.xmBar style to position:relative; and then just create the menus where I want them to be. no need to worry about onResize or anything. Takes a bit to load initially but not too bad.

    I still don't really understand how ".prototype" comes to play, but for now I think I'm just dealing with CSS issues and the fact that the menus don't always de-activate (as in the image above).

    Should :

    Code:
      if (!ele) { // not on lbl nor box nor itm
        if (
          this.active &&
          !xHasPoint(this.active, evt.pageX, evt.pageY, this.boxClp[0], this.boxClp[1], this.boxClp[2], this.boxClp[3])
        ) {
          this.deactivateAll();
        }
      }
    already be doing this for me? wait I guess that is just for the current menu... so should I try something like such?

    Code:
     for (i=0; i<this.menus.length; ++i) {
         this.menus[i].traversePre(this.ele, 'deactivate');
         this.menus[i].active = null;
     }
    I'm working on this all day tomorrow, so should be able to make some ground...

  14. #14
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're doing good. The problem is not in the xMenu4 object code. The problem is that I never finished the xMenuManager object so it would support more than one menu on a page. I'm takin a look at it now.

  15. #15
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cool thanks, I'll be on it all day today as I said... you can probably simulate what I'm doing by stacking a bunch of seperate menus on top of one another, maybe each in a table row... maybe I throw the id of the active menus into an array and just clean that out so there's only ever 1 id in it... hrm.. dunno if that makes sense, I'm just thinking I might have to manually deactivate all other menus but I want to do it in a way that is not sluggish. I still have a bit of an issue with page load time, I'd like to get that to be more gracefull as well.

  16. #16
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've made some changes to this demo to support multiple menus - but it may not be not be completely correct - it still needs testing.

  17. #17
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nice, I'm just checking it out and I've uncommented your new debug msg and i think I see some part of my problem with why menus are not disapearing... it seems that my active menu does not change unless I go over a box... what ive been doing is going back and forth over just the top level item (myBar) and I notice that 'this.ele.id' & 'active mnu id' never change.

  18. #18
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ya im sure if I could just get the active menu being set it would work, cause if I ever go over to the 2nd level and then back the menu always goes off properly, it's just cause its got the wrong active menu that its not going off all the time i think... hmmm...

  19. #19
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ya I changed this to alert which is active and its not changing properly

    Code:
    ////--- xMenu4.activate()  Activate box oUL
    
    xMenu4.prototype.activate = function(oUL)
    {
      if (oUL) {
        if (oUL.xmLvl > 0) {
          this.applyLICss(oUL.xmLbl, true);
          xShow(oUL);
        }
        this.active = oUL;
        alert(xMnuMgr.activeMenu.ele.id);
      }
    }

    Code:
    <ul id="myMenu_UniqueID" class="myBar">
    
      <li><a class='myBarLblA' href="#"><img 
        src="/images/menu.gif" width="16" height="16" border="0" /></a>
        <ul class='myBox'>
         <li><a class='myBoxLblA' href=''>Options 1</a>
            <ul class='myBox'>
              <li><a href=''>Action 1</a></li>
              <li><a href=''>Action 2</a></li>
              <li><a href=''>Action 3</a></li>
            </ul>
          </li>
          <li><a class='myBoxLblA' href=''>Options 2</a>
            <ul class='myBox'>
              <li><a href=''>Action 1</a></li>
              <li><a href=''>Action 2</a></li>
              <li><a href=''>Action 3</a></li>
            </ul>
          </li>
          <li><a class='myBoxLblA' href=''>Options 3</a>
            <ul class='myBox'>
              <li><a href=''>Action 1</a></li>
              <li><a href=''>Action 2</a></li>
              <li><a href=''>Action 3</a></li>
            </ul>
          </li>
            <li><a class='myBoxLblA' href=''>Options 4</a>
          </li>
        </ul>
      </li>
    </ul>

    going over the myBarLblA label image doesnt change the active menu, going over any of the children 'myBoxLblA' does change the active menu...


    I just can't figure out why this is, driving me crazy....

  20. #20
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not fast enough - I have an idea for some optimizations.

    I'm debugging this on my vertical demo. Unless I can see your code I won't be able to make many more suggestions for your project.

  21. #21
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sent you pm with url, seems to work bit differently in test page though.. switched back to absolute positioning as well.

  22. #22
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They are close together, so your lbl and box focus clip has to be small, if not zero.

    You need to reverse your menu z-indexes. Menus higher on the page need a higher z-index.

    Don't use a transparent background on any boxes - it will cause mouse event problems in IE. Why does the outermost UL have display:none ?

    How many menus are going to be on a page? Will every menu have the same structure - the same set of labels and boxes? This may not be the best menu for this application.

  23. #23
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i tried zero focus clip, but I think you are right, being close together or even close to other pieces of the page seems to effect the menus going off.

    outermost UL has display:none because I didnt want to see the downgradable versions before they were replaced.

    I think you are also right saying this might not be the best menu to use... My menus will be the same structure each time, and dont need to be downgradable. they are always just 1 'bar' element and then one main menu that comes out from it, some of the items in the main menu have a sub menu but thats as far as it goes.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •