[JavaScript] PopupMenu misplaced

[moserw]

I upgraded my forum from 1.6 to 1.8 and adjusted my templates appropriately. Everything seems to be working fine except for the popup menu.

The popup menu of the edit post button is completely displaced while the popup menu for the Thread Modes is placed correctly. See screenshots.

       

My forum is wrapped within a centered div element with position attribute set to relative.
In addition I am using a top spacer div element where the position is also set to relative.

<div id="submenuTopSpacer"></div>
<div id="mainWrapper"> ...

#submenuTopSpacer {
   background: none repeat scroll 0 0 #bfd5de;
   height: 50px;
   position: relative;
   width: 100%;
}

#mainWrapper {
   background-color: #ffffff;
   margin: 0 auto;
   position: relative;
   width: 960px;
   z-index: auto;
}

I think that the problem is that the java script code in jquery.plugins.min.js does not set the position properly if the forum is placed within position:relative elements.
I fixed the problem by adding the following lines to the script:

// Setup popup menu
var offset = el.offset();

// WoM fix edit popup menu start
var el_parent = el.get(0).parentNode;
var popup_parent = popup_menu.get(0).parentNode;
if (el_parent === popup_parent)
{
  offset = el.position();
}
// WoM fix edit popup menu end

offset.top += el.outerHeight();

The changed script simply uses the position() command instead of the offset() command if the popup element and the button have the same parent node. The addition to the script fixes my problem. Maybe you may consider to add the changes to the next version or hava another advice to fix the problem without changing the js files.

Here is the link to my forums:
http://murlengine.com/forum/?murlpage=forum

Thanks!

[blackdragon]

So I'm having the same issue but instead of the Thread Modes popup menu it's the popup menus from the Edit, Delete, Reply and so on buttons below the post. They are way off. Tried using this "fix" but didn't work. Could really use some help on this as our forum is supposed to be going live next week.

Thanks 

[moserw]

So I'm having the same issue but instead of the Thread Modes popup menu it's the popup menus from the Edit, Delete, Reply and so on buttons below the post. They are way off. Tried using this "fix" but didn't work. Could really use some help on this as our forum is supposed to be going live next week.

Thanks 

My problem was also the Edit popup menu. The Thread Modes popup worked just fine.

Try the fix above, it should work.

If it really does not work you will have to debug your site with e.g. Firebug.

Good luck!

[blackdragon]

So I'm having the same issue but instead of the Thread Modes popup menu it's the popup menus from the Edit, Delete, Reply and so on buttons below the post. They are way off. Tried using this "fix" but didn't work. Could really use some help on this as our forum is supposed to be going live next week.

Thanks 

My problem was also the Edit popup menu. The Thread Modes popup worked just fine.

Try the fix above, it should work.

If it really does not work you will have to debug your site with e.g. Firebug.

Good luck!

Tried it, still not working :-(

[moserw]

Tried it, still not working :-(

Then you will have to debug your site and try to figure out why the position values are wront.
The script mentioned in my post is evaluating and setting the position values for the popup menu.
I would recommend to install firebug, set a breakpoint and debug step by step.

Good luck.

[Leefish]

This fixed this hugely annoying issue for me perfectly, and no negative effect on the default theme either (ie it still works).

Thank you very much.

[Brentsticles]

I need an explanation on how to implement this fix please if someone would be kind enough as I am having the same issue.

My thread about my problem: http://community.mybb.com/thread-178100.html

[moserw]

I need an explanation on how to implement this fix please if someone would be kind enough as I am having the same issue.

My thread about my problem: http://community.mybb.com/thread-178100.html

1. Delete the file jscripts/jquery.plugins.min.js
   
2. Create a copy of jscripts/jquery.plugins.js and name it jscripts/jquery.plugins.min.js
   
3. Open the new file and find the text (it is currently at line number 507)
   
   
               // Setup popup menu
               var offset = el.offset();
               offset.top += el.outerHeight();
   
   
   
4. Replace the text with
   
   
               // Setup popup menu
               var offset = el.offset();
               // WoM fix edit popup menu start
               var el_parent = el.get(0).parentNode;
               var popup_parent = popup_menu.get(0).parentNode;
               if (el_parent === popup_parent)
               {
                 offset = el.position();
               }
               // WoM fix edit popup menu end
               offset.top += el.outerHeight();
   
   
   
5. Save the file.