Dev Notes

Notes on Development with Microsoft Technologies

Quick Tip:Toggle SharePoint 2013/O365 SharePoint Sites Full Screen Mode with JavaScript

Leave a comment

This is just a quick little snippet you can add to a SharePoint 2013/O365 SharePoint Site to automatically turn on Full Screen Mode when you load a page within the site and how to turn it back off when you exit that page.

If you look near the top of the ribbon, you will see a little icon that allows you to Focus Content. This icon simply calls a JavaScript function to toggle some CSS classes so the visitor gets a focused view of the content. This function can be used in your own calls to help highlight content on a page when the page loads.

FocusContentImage

This following snippet can be placed into a script editor web part and will cause the screen to go to focused mode when the content is loaded. When the visitor navigates away from the page, they will be returned to a non-focused view of the content.

window.addEventListener('unload',function() {
    SetFullScreenMode(false);
});

window.addEventListener('load',function() {
    SetFullScreenMode(true);
});
Advertisements

Author: Chris Quick

I have been a developer of web based solutions since early 2001 delivering solutions to a wide array of organizations using ASP, ASP.NET and SharePoint. I was introduced to SharePoint in 2003 when the consulting firm I worked for at the time introduced it into the workplace. I began working with MOSS 2007 as soon as Microsoft released the RTM version in November 2006. The platform was implemented at the organization I worked for in 2007 and went live in March of that year. I was tasked with the administration and ongoing development of the platform. I currently work as a SharePoint Architect with Artis Consulting, developing solutions for a wide variety of business problems. The goal of this blog is to share my discoveries developing solutions with SharePoint. I welcome your comments and feedback to any post -- and I welcome suggestions for future topics.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s