1.0Archivehttps://regroove.ca/archiveMatt Lonpre (Alumni)https://regroove.ca/archive/author/mlongpre/Detecting Edit Mode with JavaScript / CSS - Archiverich600338<blockquote class="wp-embedded-content" data-secret="caPl5OrZ4G"><a href="https://regroove.ca/archive/2015/07/16/detecting-edit-mode-with-javascript-css/">Detecting Edit Mode with JavaScript / CSS</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://regroove.ca/archive/2015/07/16/detecting-edit-mode-with-javascript-css/embed/#?secret=caPl5OrZ4G" width="600" height="338" title="“Detecting Edit Mode with JavaScript / CSS” — Archive" data-secret="caPl5OrZ4G" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script type="text/javascript">
/* <![CDATA[ */
/*! This file is auto-generated */
!function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document);
/* ]]> */
</script>
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 …