Fullscreen content

Glexa Fullscreen Button - Enhance your LMS experienceThe Glexa Fullscreen Button is a Chrome add-on developed by ccmc-ito that adds a fullscreen button to the SCORM course screen in the LMS platform, Glexa. This free add-on addresses the limitation of not being able to enlarge SCORM courses within the Glexa LMS.With the Glexa Fullscreen Button, users can now easily expand the SCORM course content by simply clicking on the fullscreen button located at the bottom of the SCORM course sidebar. This enhancement provides a more immersive learning experience, allowing users to view the course content in fullscreen mode without any distractions.Overall, the Glexa Fullscreen Button is a valuable addition to the Glexa LMS, providing users with the ability to maximize their learning experience by easily accessing fullscreen mode for SCORM courses. This add-on is a must-have for Glexa users looking to enhance their LMS experience.Program available in other languagesดาวน์โหลด Glexa Fullscreen Button [TH]ダウンロードGlexa Fullscreen Button [JA]Scarica Glexa Fullscreen Button [IT]Tải xuống Glexa Fullscreen Button [VI]Download Glexa Fullscreen Button [NL]Glexa Fullscreen Button 다운로드 [KO]Glexa Fullscreen Button herunterladen [DE]تنزيل Glexa Fullscreen Button [AR]Скачать Glexa Fullscreen Button [RU]Ladda ner Glexa Fullscreen Button [SV]Télécharger Glexa Fullscreen Button [FR]Download do Glexa Fullscreen Button [PT]Unduh Glexa Fullscreen Button [ID]Descargar Glexa Fullscreen Button [ES]Glexa Fullscreen Button indir [TR]下载Glexa Fullscreen Button [ZH]Pobierz Glexa Fullscreen Button [PL]Explore MoreLatest articlesLaws concerning the use of this software vary from country to country. We do not encourage or condone the use of this program if it is in violation of these laws.

Area Title - You can add a title for your Side Area (above all of its content) when this area is opened 04Background Color - This options allow you to set a background color for this area 05Padding - This options allows you to set your padding values around your side area content. Default values are 30px for each padding direction (top, right, bottom, left) 06Side Area Alignment - This option defines text/elements alignment inside Side Area 07Text - This sections allow you to set your typography style for text inside Side Area 08Title - This sections allow you to set your typography style for the Side Area title 09Choose Icon Style - Set a predefined header skin style for Side Area icons (light or dark) 6.5 Fullscreen Menu A fullscreen menu icon will appear on the right side of your header and on click, the fullscreen menu will open. It’ll cover the whole content area in the viewport and let you showcase a menu which you previously defined in WP Admin -> Appearance -> Menus. 6.5.1 How to use Fullscreen Menu/Popup Menu? First go to WP Admin-> Qode Options -> Header -> Fullscreen Menu -> Enable Fullscreen Menu -> Choose Yes and save. Next, go to WP Admin -> Appearance -> Menus and create a menu. Add menu items to it and after you have finished click on Manage Location, include that menu into Fullscreen Navigation, and save. 6.5.2 How to change Fullscreen Menu/Popup Menu logo image? Please go to WP Admin-> Qode Options -> Header -> Fullscreen Menu -> Logo image for Fullscreen Menu and upload your logo image and save. 6.5.3 Could the Side Area and Fullscreen Menu work together? Unfortunately, this is not possible due to the template structure. It’s an either/or situation in this case. 6.5.4. How to change styles for Fullscreen Menu items? Please go to WP Admin -> Qode Options -> Header -> Fullscreen Menu and here you will find 1st level style and 2nd level style sections. Inside these sections you can find all style-related options for menu items in the Fullscreen Menu. Other styling options for this area are as follows: 01 Background Color - This options allows you to set a background color for the Fullscreen Menu area when it’s opened 02 Transparency - This options allows you to set background transparency. (0 = fully transparent, 1 = opaque) 6.6 Main Menu Navigation To be able to link between your pages, you need to create a menu and place it in the appropriate location depending on the header layout you have set. 6.6.1 Creating and Styling Menus In order to create a menu with menu items we advise that you to have a closer look at the following article on the codex that covers this functionality: When you’ve created your basic menu structure you can proceed to style menu items. Depending on the Header layout there are two places where you can perform further styling. If the header is set

In this tutorial, you’ll learn how to make an element enter fullscreen mode in any browser using the JavaScript FullScreen API.“The Fullscreen API adds methods to present a specific element and its descendants in fullscreen mode, and to exit fullscreen mode once it is no longer needed” - MDNFullscreen mode removes all other elements on screen (such as a browser navigation bar or a desktop dock) and fills available screen real estate with the selected element. A common example is when sharing a presentation or watching a video in fullscreen.One advantage of fullscreen mode is that it allows the user to focus solely on the element being viewed without being distracted by other elements onscreen. The FullScreen API also makes use of the system default behaviour so we can take advantage of some inbuilt features without having to write more code, such as pressing the Esc key to close fullscreen.1. Markup with HTMLFor our markup, we’ll be using a video element and a button element for our fullscreen toggle.Since we’re using a custom fullscreen button for our video element, we’ll need to turn off the default controls on the video element (not to worry, we can always get the controls back once the fullscreen mode is activated). We can do this by not including the controls attribute in our video tag.This is what our markup looks like:12 id="video" autoplay loop muted>3 id='mp4' src="video-src.mp4" type='video/mp4' />4 56 7 class="full-screen" 8 title="Enter fullscreen mode"9 aria-label="Enter fullscreen mode"10 >11 122. Styling with CSSWe’ll style the full-screen button to be placed in the middle of the video container. 1main {2 position: relative;3 height: auto;4}56video {7 min-height: 100vh;8 max-width: 100%;9 width: 100%;10 height: auto;11 padding: 0;12}1314.full-screen {15 transition: 150ms;16 position: absolute;17 top: 0;18 bottom: 0;19 right: 0;20 left: 0;21 margin: auto;22 height: fit-content;23 width: fit-content;24 background-color: rgba(255, 255, 255, 0.5);25 border-color: transparent;26 border-radius: 50%;27 padding: 16px;28 display: flex;29 justify-content: center;30 align-items: center;31 outline: none;32 cursor: pointer;33}3435.full-screen:hover {36 background-color: rgba(255, 255, 255, 1);37}We can also use the CSS media query hover to determine how the button should behave on hover devices (e.g. laptops) vs. touch devices (e.g. mobile phones). In this demo, we’ll set the button so it’s always visible on touch devices, and only visible when hovered over on hover devices.1@media (hover: hover) {2 .full-screen {3 opacity: 0;4 }56 main:hover .full-screen {7 opacity: 1;8 }9}3. FullScreen FunctionalityNow we have our layout and styling done, we can get started on the functionality using JavaScript.We’ll store the elements to be targeted as global variables.1const video = document.getElementById("video");2const fullscreenButton = document.querySelector(".full-screen");Using an event listener, we’ll look out for when the fullscreen button has been clicked and make a call to the FullScreen API. This can be done using the .requestFullScreen() method directly on the element to be made fullscreen.1fullscreenButton.addEventListener("click", function () {2 video.requestFullscreen();3});FullScreen Support on iOSFor iOS devices, we require a different method so we’ll need to update our function to take that into account.1fullscreenButton.addEventListener("click", function () {2 if (video.webkitSupportsFullscreen) {3 video.webkitEnterFullscreen();4 return;5 }67 video.requestFullscreen();8});The requestFullScreen method only