I stumbled upon the following forum post in Episerver World about your site theme sometimes gets in conflict with the editable properties on the on page edit mode. This may lead to mislead functionality in the edit mode if an editor should prefer to navigate via the site instead of the site tree. Here's an example:
To get rid of this behaviour, we will hide the properties editable blue border when hovering over the secondary link menu in the main menu displayed above.
We will do this by communicating via the child and parent frames of the iframe that Episerver puts in the edit mode, telling when to turn on and off the editable properties.
You can read more about the window.postMessage function here.
The code integration
How do we setup the child and parent frame communication in Episerver? By including an initalized javascript with the parent frame and one script alongside the site initalization, which will become the child initialization.
Start with including the parent. Add this to your module.config:
<?xml version="1.0" encoding="utf-8"?>
<module>
<assemblies>
<add assembly="EpiserverPlayground" />
</assemblies>
<clientResources>
<dojo>
<paths>
<add name="app" path="Scripts" />
</paths>
</dojo>
<clientModule initializer="app.Initializer">
<moduleDependencies>
<add dependency="CMS" type="Require RunAfter" />
</moduleDependencies>
</clientModule>
</module>
We set the clientModule to initalize a path named "app.Initalizer". The Initalizer.js should be placed under ~/ClientResources/Scripts/ and look like this:
define([
// Dojo
'dojo/_base/declare',
// CMS
'epi/_Module'
], function (declare, _Module) {
return declare("app.Initializer", [_Module], {
initialize: function () {
//this.inherited(arguments);
this._hideOverlayItemsInEditMode();
},
_hideOverlayItemsInEditMode: function () {
// Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
// Listen to message from child window
eventer(messageEvent, function (e) {
var overlayItems = $(".epi-overlay-item, .epi-overlay-itemFocused");
if (e.data)
overlayItems.hide();
else
overlayItems.show();
}, false);
}
});
});
And lastly include the child commincation by adding a custom script to your site's basic include of scripts. In my example it is named EpiserverEnhancements.js and looks like this:
// ------------------------------
// Call all available functions here
// ------------------------------
(function () {
hideOverlayItems();
})();
/*
hide overlay items (iframe)
------------------------------------- */
function hideOverlayItems() {
$(".secondary-links").hover(function () {
hideElements();
}, function () {
showElements();
});
}
function hideElements() {
window.parent.postMessage(true, "*");
}
function showElements() {
window.parent.postMessage(false, "*");
}
This will tell the parent frame to show/hide the blue bordered properties in the edit mode.
The result
You should now be expecting a similiar behaviour:
