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.<\/p>\n\n\n\n
This lets us apply different CSS styles or quite often disable functionality that is not needed in Edit Mode. (Especially surrounding Responsive Design).<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
<PublishingWebControls:EditModePanel runat=\"server\" id=\"SetEditModeClass\"><\/pre>\n\n\n\n<script language=\"javascript\"><\/pre>\n\n\n\n$(\"body\").addClass(\"edit-mode\");<\/pre>\n\n\n\n<\/script><\/pre>\n\n\n\n<\/PublishingWebControls:EditModePanel><\/pre>\n\n\n\nThen later on we can do:<\/p>\n\n\n\n
If (!$(\"body\").hasClass(\"edit-mode\")) {<\/pre>\n\n\n\n\/\/ we are not in edit mode<\/pre>\n\n\n\n} else {<\/pre>\n\n\n\n\/\/ we are in edit mode<\/pre>\n\n\n\n}<\/pre>\n\n\n\nOr in CSS:<\/p>\n\n\n\n
body.edit-mode {<\/pre>\n\n\n\n\/* hide whatever needs to be hidden *\/<\/pre>\n\n\n\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"