8 Replies Latest reply: May 3, 2012 11:48 AM by Richard RSS

    Context Menu Position Help

    Richard
      My client wants to use Theme 12 instead of Theme 13 for the document library packaged application. I am having issues with the context menu. <b>I have the menu working</b>. I dont need links to threads about getting the menu to work. My issue is the position of the context menu is wrong and I have been fighting the css for two days trying to get it to work, I even took a crack at it with Firebug and couldnt get it sorted, but css's arent really my thing either. It appears on the bottom of screen on the left side of the screen. It seems to appear below all other regions, but I havent tested to confirm this.

      Using APEX 4.1, IE, Firefox, and Chrome.

      Richard
        • 1. Re: Context Menu Position Help
          VC
          Hi Richard,

          Do you have an example on apex.oracle.com?

          Thanks
          • 2. Re: Context Menu Position Help
            Richard
            Just created an example on apex.oracle.com, but funny thing... works perfectly there. Going to look over my stuff and see what I did wrong. If I get it working I will close this one out.

            Richard

            Edited by: Richard on May 1, 2012 8:36 AM
            • 3. Re: Context Menu Position Help
              Richard
              I have put the sample up on apex.oracle.com

              http://apex.oracle.com/pls/apex/f?p=57348:1:
              un: Guest
              pw: Test1213

              The issue happens on Firefox or Chrome but doesnt seem to happen on IE. Still looking into the differences in the CSS. Still not sure whats causing the position to be off though. Any help would be appreciated.

              Richard
              • 4. Re: Context Menu Position Help
                VC
                Hi Richard,

                I have logged into your demo app, but where/what is the issue? and how to recreate it?

                Can you please explain in bit more detail.

                Thanks
                • 5. Re: Context Menu Position Help
                  Richard
                  Certainly.

                  On page one, in the Documents region, second column, "Name". When you click on an item in the column, I think in the demo application it is "readme.txt.", a context menu should display immediately to right of the "Name" Column. It appears to work properly in IE, but on google chrome and firefox it doesn't work. The context menu appears but it appears at the bottom of the screen.

                  Hope this helps.

                  Richard

                  Edited by: Richard on May 2, 2012 6:31 AM
                  • 6. Re: Context Menu Position Help
                    VC
                    Hi Richard,

                    Please edit your apex_docs.js javascript file to amend the function doc_menu as shown below.

                    Note: you may have to download the JavaScript file from shared components > images and amend it and re upload it
                    function doc_menu(pThis,pId){
                         var lDiv = $x(pThis);
                         if(gRow!=lDiv){$x_Hide(gMenu)}
                         gRowClick = $x_UpTill(lDiv,'TR');
                         if(!gMenu){
                               gMenu = $x_AddTag(document.body,'div','');
                               gMenu.id = 'MENU_HOLDER';
                         }
                    
                    
                          // replace these two lines with the below line
                                //gMenu.style.top = parseInt(findPosY(lDiv));
                                //gMenu.style.left = parseInt(findPosX(lDiv) + parseInt(lDiv.offsetWidth));
                          $('#MENU_HOLDER').offset({ top: parseInt($('#'+pThis.id).position().top), left: parseInt($('#'+pThis.id).position().left + parseInt(lDiv.offsetWidth)) });
                    
                    
                    
                         $x_Show(gMenu);
                         var get = new htmldb_Get(null,html_GetElement('pFlowId').value,'APPLICATION_PROCESS=DOC_MENU',0);
                         get.add('DOC_ID',$x(lDiv).id);
                         get.GetAsync(doc_menu_click_return);
                         return;
                    }
                    Thanks,
                    Vikram
                    • 7. Re: Context Menu Position Help
                      Richard
                      It worked but it on repeat clicks it appended the offset. I tried using an appendTo but that didnt work either. Any ideas on how to stop it from appending the offset each time?

                      Richard

                      Edited by: Richard on May 2, 2012 9:16 AM

                      Edited by: Richard on May 2, 2012 9:40 AM
                      • 8. Re: Context Menu Position Help
                        Richard
                        I know this isnt proper by any means but this is what the code ended up looking like
                        <script type="text/javascript">
                        function doc_menu1(pThis,pId){
                             var lDiv = $x(pThis);
                                 var test1 = $('#'+pThis.id).position().left + parseInt(lDiv.offsetWidth)
                                 var test2 = $('#'+pThis.id).position().top 
                             if(gRow!=lDiv){$x_Hide(gMenu)}
                             gRowClick = $x_UpTill(lDiv,'TR');
                             if(!gMenu){
                                   gMenu = $x_AddTag(document.body,'div','');
                                   gMenu.id = 'MENU_HOLDER';
                             }
                                    gMenu.style.posTop = parseInt(findPosY1(lDiv));
                                    gMenu.style.posLeft = parseInt(findPosX1(lDiv)) + parseInt(lDiv.offsetWidth);
                        
                             $x_Show(gMenu);
                             var get = new htmldb_Get(null,html_GetElement('pFlowId').value,'APPLICATION_PROCESS=DOC_MENU',0);
                             get.add('DOC_ID',$x(lDiv).id);
                             get.GetAsync(doc_menu_click_return);
                             return;
                        }
                        
                        function findPosX1(obj) {
                             var curleft = curtop = 0;
                                 if (obj.offsetParent) {
                                      do {
                                  curleft += obj.offsetLeft;
                                  curtop += obj.offsetTop;
                                      } while (obj = obj.offsetParent);
                        }
                                return [curleft];
                        }
                        
                        function findPosY1(obj) {
                             var curleft = curtop = 0;
                                 if (obj.offsetParent) {
                                      do {
                                  curleft += obj.offsetLeft;
                                  curtop += obj.offsetTop;
                                      } while (obj = obj.offsetParent);
                        }
                                return [curtop];
                        }
                        </script>
                        I put it in the HTML Header of the pages that had the js calls. This worked without any problems.

                        Richard