Axure Tutorial: Use Browser Full Screen Mode by Referencing JavaScript Code

Introduction

In this tutorial, you will learn how to reference JavaScript to implement browser full screen mode.

Note: Click here to preview the completed prototype for this tutorial.

Demand

When we design large screen templates , we need to use the browser full screen mode to display the templates. Usually, we need to switch the browser full screen mode through F11 on the keyboard. However, many customers do not understand that full screen can be achieved through F11, which brings inconvenience to product design communication.

Now let’s learn how to use JavaScript to implement browser full screen mode.

What is JavaScript and why we use it?

JavaScript is a scripting language. Usually browsers use it to achieve interactive effects. In the HTML prototype generated by Axure, the interaction effect is realized by JavaScript code. Axure also provides methods to reference JavaScript code.

1. Widget Setup

1. Design a card and create it as a dynamic panel, Then pin to brower: center and middle.

2. Use the button link to create a dynamic panel and name it Enter/Exit Full Screen Mode. The button text of state 1 is Enter Full Screen Mode, The button text of state 2 is Exit Full Screen Mode.

2. implement “Enter the Full screen mode when the button is clicked”.

Click the Enter Full Screen Mode button in state 1 of Enter/Exit Full Screen Mode dynamic panel to set the click event: Open Link > link to external URL > Enter the below code in fx input box:

javascript: function requestFullScreen(element) { var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen; if (requestMethod) { requestMethod.call(element); } else if (typeof window.ActiveXObject !== “undefined”) { var wscript = new ActiveXObject(“WScript.Shell”); if (wscript !== null) { wscript.SendKeys(“{F11}”); } } }; requestFullScreen(document.documentElement);

3. implement “Exit the Full screen mode when the button is clicked”.

Click the Exit Full Screen Mode button in state 2 of Enter/Exit Full Screen Mode dynamic panel to set the click event: Open Link > link to external URL > Enter the below code in fx input:

javascript: function exitFull() { var exitMethod = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.webkitExitFullscreen; if (exitMethod) { exitMethod.call(document); } else if (typeof window.ActiveXObject !== “undefined”) { var wscript = new ActiveXObject(“WScript.Shell”); if (wscript !== null) { wscript.SendKeys(“{F11}”); } } }; exitFull();

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.

Note: Click here to download the completed RP file for this tutorial.

Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.

--

--

--

We Only Provide High-Quality Axure Tutorial, Axure Libraries, Templates.

Love podcasts or audiobooks? Learn on the go with our new app.

Running Gatsby with TypeScript + ESLint + Prettier — 2020 Fall version

Generating a strongly typed REST API for Nest.js

Embed YouTube Video on React Application

copy embed code from YouTube

Front End Engineer Interview 2021 — Robinhood — Rejected

Issue 22/10

Migrate deprecated react-native lifecycle methods to newer once’s with simple tricks 🥳

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Well Joe

Well Joe

We Only Provide High-Quality Axure Tutorial, Axure Libraries, Templates.

More from Medium

Axure Tutorial: Axure File Uploading and Subsequent interaction Settings with JavaScript

How and When to Use Dropdowns in Your Designs

Simple Guide to Classes in WEBFLOW

Design system with GeneratePresss and GenerateBlocks: Responsive-Fluid Typography

An animated display of the flexible type in action, showing how the type scale shrinks and enlarges in size corresponding to viewport size changes.