New Adminmenu: Problems and Solutions
Posted: Tue Dec 27, 2011 8:32 pm
Hello Developers,
this is about the new adminmenu of CMSimple_XH 1.5. IMO it's really amazing to have the menu fixed to the top of the browser window to allow a real view mode of the pages (thanks to Martin and Gert, who had the idea and did the implementation). But it is mandatory to shift the rest of the page, so the menu doesn't cover the top of it. Basically there are 2 possibilities: set margin-top to the height of the adminmenu for <body> or for <html>. Both have their drawbacks: changing margin-top for <body> results in shifting of CSS background-images, changing margin-top for <html> results in inaccurate JS mouse coordinates.
So there's a new configuration option: editmenu_scroll. If it's set to "true" the adminmenu is put on top of the page and will scroll with it (basically setting margin-top for <body>), otherwise the adminmenu is fixed to the top of the browser window (setting margin-top for <html>).
So if editmenu_scroll is set to "true", CSS background-images will be shifted, and AFAIK there's nothing that can be done to adjust this. Otherwise the reported JS mouse coordinates are shifted, but this can be catered for by changing the JS where necessary. E.g. for CodeMirror 2.15 it was enough to change a single line from
to
Note that
didn't work in my tests (IIRC the style property was undefined!). But the above might serve as a workaround. With jQuery you can use
So please have a look at your JS based plugins, templates and other extensions, and check if they need adjustment for the back-end in CMSimple_XH 1.5.
If anybody has an idea on how the problem of shifted mouse coordinates could be solved all together, I'm looking forward to hear about it.
Christoph
this is about the new adminmenu of CMSimple_XH 1.5. IMO it's really amazing to have the menu fixed to the top of the browser window to allow a real view mode of the pages (thanks to Martin and Gert, who had the idea and did the implementation). But it is mandatory to shift the rest of the page, so the menu doesn't cover the top of it. Basically there are 2 possibilities: set margin-top to the height of the adminmenu for <body> or for <html>. Both have their drawbacks: changing margin-top for <body> results in shifting of CSS background-images, changing margin-top for <html> results in inaccurate JS mouse coordinates.
So there's a new configuration option: editmenu_scroll. If it's set to "true" the adminmenu is put on top of the page and will scroll with it (basically setting margin-top for <body>), otherwise the adminmenu is fixed to the top of the browser window (setting margin-top for <html>).So if editmenu_scroll is set to "true", CSS background-images will be shifted, and AFAIK there's nothing that can be done to adjust this. Otherwise the reported JS mouse coordinates are shifted, but this can be catered for by changing the JS where necessary. E.g. for CodeMirror 2.15 it was enough to change a single line from
Code: Select all
try { x = e.clientX; y = e.clientY; } catch (e) { return null; }Code: Select all
try { x = e.clientX; y = e.clientY-document.getElementById('editmenu').parentNode.offsetHeight; } catch (e) { return null; }Code: Select all
document.getElementsByTagName('html')[0].style.marginTopCode: Select all
$('html').css('margin-top')If anybody has an idea on how the problem of shifted mouse coordinates could be solved all together, I'm looking forward to hear about it.
Christoph