sharepoint custom style for page in edit mode

I want the following code snippet in master pa开发者_如何学Goge to run if the current loaded page is in edit mode as follows:

<!-- If edit mode, then add the following script -->
<script type="text/javascript">
    document.documentElement.className += ' edit-mode';
</script>
<!-- End if -->

simply, my script will add an edit-mode class to the html tag, that's it.

how can I do that ?

Thanks

You can use the PublishingWebControls:EditModePanel control. This control will process the information included in this tag when the page is in the Edit mode.

<PublishingWebControls:EditModePanel runat="server" id="IncludeEditModeClass" > 
    <asp:Content>
        <script type="text/javascript">
                document.documentElement.className += ' edit-mode';
        </script>
    </asp:Content> 
</PublishingWebControls:EditModePanel> 

since there are no SharePoint experts, I have done a workaround to solve my problem, and below my solution in two versions, first in jQuery, and second using pure JavaScript,

mainly i tried to look for a special classes that exists only in edit mode, for example .ms-SPZoneLabel is the class that wraps a web part zone in edit mode, .edit-mode-panel is a class that wraps a field to entering data in article pages, and .ewiki-margin in wiki pages...

// jQuery version
$(function(){
    if ($('.ms-SPZoneLabel, .edit-mode-panel, .ewiki-margin').length) {
        document.documentElement.className += ' edit-mode';
    }
});

// pure javascript way
(function(){

    // defining fall back getElementsByClassName if not exist (IE) 
    if(!document.getElementsByClassName) {
        document.getElementsByClassName = function(cl) {
            var retnode = [];
            var myclass = new RegExp('\\b'+cl+'\\b');
            var elem = this.getElementsByTagName('*');
            for (var i = 0; i < elem.length; i++) {
                var classes = elem[i].className;
                if (myclass.test(classes)) {
                    retnode.push(elem[i]);
                } 
            }
            return retnode;
        };
    }
    // then checking if there's any webpart zone in the page
    if( document.getElementsByClassName('ms-SPZoneLabel').length || 
        document.getElementsByClassName('edit-mode-panel').length || 
        document.getElementsByClassName('ewiki-margin').length) {
        document.documentElement.className += ' edit-mode';
    }

})();

if someone have a better solution (like an ASP tag to determine that on server side) please write down your solution

This code does work if you use it as a bookmarklet:

javascript:if%20(document.forms['aspnetForm']['MSOLayout_InDesignMode']%20!=%20null)%20document.forms['aspnetForm']['MSOLayout_InDesignMode'].value%20=%201;if%20(document.forms['aspnetForm']['MSOAuthoringConsole_FormContext']%20!=%20null)%20document.forms['aspnetForm']['MSOAuthoringConsole_FormContext'].value%20=%201;theForm.submit();

I tried to convert it to plain Javascript, but it won't work in my firefox Javascript Console.

SP_EditPage: function(){
    var thisdocument = window.content.document;
    if (thisdocument.forms['aspnetForm']['MSOLayout_InDesignMode'] != null) 
        thisdocument.forms['aspnetForm']['MSOLayout_InDesignMode'].value = 1;
    if (thisdocument.forms['aspnetForm']['MSOAuthoringConsole_FormContext'] != null) 
        thisdocument.forms['aspnetForm']['MSOAuthoringConsole_FormContext'].value = 1;
        theForm.submit();   
},

I am quite interested if anyone can get it to work in plain javascript! It tells me: Error: TypeError: thisdocument.forms.aspnetForm is undefined Source File: Javascript Command Line: 2

The bookmarklet came from this fellow's site: http://blog.mastykarz.nl/sharepoint-developer-bookmarklets/

Here is another one. It starts the edit page with the sidebar open. This one works fine for me:

SP_EditPage: function(){
    var thisdocument = getBrowser().contentWindow.document;
    if(thisdocument.location.href.search('ToolPaneView=') == -1 ){
        if (thisdocument.location.search.indexOf('?') == 0){
            thisdocument.location=(thisdocument.location.href + '&ToolPaneView=2'); 
        }else{
            thisdocument.location=(thisdocument.location.href + '?ToolPaneView=2'); 
        } 
    } else {
        thisdocument.location=thisdocument.location.href;
    }   
},

To get the desired result you need to add the following piece of code in the masterpage.

<script type="text/javascript">
		var inDesignMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;
		
		if (inDesignMode == "1")
		{
		    // page is in edit mode
				<!-- If edit mode, then add the following script -->
				
					document.documentElement.className += ' edit-mode';
				
				<!-- End if -->
		
		}
		else
		{
		    // page is in browse mode 
		} 

   </script>