Detecting Edit Mode with JavaScript / CSS

One challenge we often need to overcome working with Publishing mode in SharePoint is quickly and effectively knowing if a page is in edit mode.

This lets us apply different CSS styles or quite often disable functionality that is not needed in Edit Mode. (Especially surrounding Responsive Design).

While SharePoint gives some great MasterPage level controls to detect this sometimes we want to do it quickly client side either with JavaScript or ideally right in a CSS rule.

What we do is use JQuery’s AddClass and using an EditModel Panel add a class to the page’s body onload. Then we can use HasClass on the body tag anywhere in our code to determine if we are in edit mode.

<PublishingWebControls:EditModePanel runat="server" id="SetEditModeClass">

<script language="javascript">

$("body").addClass("edit-mode");

</script>

</PublishingWebControls:EditModePanel>

Then later on we can do:

If (!$("body").hasClass("edit-mode")) {

// we are not in edit mode

} else {

// we are in edit mode

}

Or in CSS:

body.edit-mode {

/* hide whatever needs to be hidden */

}