FullScreen is a stack that was built on behalf of several RapidWeaver users requesting one on the RapidWeaver forums. As the name suggests, this stack instructs a web browser to open a page element at full screen when clicked, thus doing away with nasty old Flash player code and the complications of modal windows or lightboxes. In other words, you tell the web browser what to open at full screen, and the FullScreen stack does it for you (in supported browsers)!
To use, simply add a single FullScreen stack to your page and drop the content inside that you want displayed at fullscreen; anything you prefer including text, images or video. When clicked, the content will zoom to fullscreen. Try the example below now by clicking on it:
To use, simply add a single FullScreen stack to your page and drop the content inside that you want displayed at fullscreen; anything you prefer including text, images or video. When clicked, the content will zoom to fullscreen. Try the example below now by clicking on it:
Examples
Two examples of FullScreen stack in use below. Click anywhere in the grey box, using a compatible web browser.
The Lake District
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et erat ut lectus fermentum tincidunt. Donec sed leo risus. Sed ut eros mi, a pellentesque purus. Donec leo elit, facilisis euismod accumsan in, mollis vel massa. Donec at turpis massa, nec tincidunt erat. In venenatis dolor sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam euismod egestas facilisis. Aenean vestibulum sapien nec libero imperdiet semper. In risus nulla, eleifend at pharetra sodales, consectetur non justo. Phasellus faucibus, leo eget blandit semper, augue felis ullamcorper lectus, vel luctus urna quam quis nunc. Nullam vel nibh sit amet felis tincidunt convallis eu nec purus. Sed tempor velit ut nulla pretium sodales. Quisque dapibus massa non velit elementum quis aliquam nibh pharetra. In arcu mauris, bibendum eget laoreet at, congue vitae tortor.
Aenean lorem orci, rhoncus a tincidunt sed, aliquet vitae odio. Nullam ac quam sit amet lacus posuere molestie in quis sapien. Etiam sed erat massa. Maecenas quis elit a mi pellentesque fringilla. Phasellus id velit arcu. Suspendisse pretium rutrum pulvinar. Donec enim turpis, iaculis nec imperdiet at, suscipit eu mauris. Duis luctus venenatis dolor, sed feugiat eros varius mollis. Nunc tincidunt pharetra lorem non convallis. Nulla consequat luctus enim quis varius.
Aliquam id imperdiet tellus. Nam id turpis mauris. Sed vel odio felis. Quisque blandit, est quis vulputate commodo, dolor dui molestie justo, ac posuere diam sem quis tellus. Suspendisse in luctus nibh. Donec porttitor ante nec nunc volutpat vehicula. Nunc nec malesuada enim. Nunc tristique, massa eget vehicula sodales, magna velit tincidunt tellus, interdum vulputate magna tortor sed leo. Praesent dignissim mi sit amet dolor pulvinar quis pellentesque urna cursus. Nam ultricies felis varius arcu pulvinar quis ultricies erat aliquet. Duis non lectus eu massa pharetra pharetra consectetur vitae massa. Nulla facilisi. Cras sed nunc nunc, ac euismod odio. Integer convallis, nisl id ullamcorper volutpat, ligula risus suscipit orci, non gravida magna urna eu urna.
Or try this example, which instead uses a button to open the content full screen:
The Lake District
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et erat ut lectus fermentum tincidunt. Donec sed leo risus. Sed ut eros mi, a pellentesque purus. Donec leo elit, facilisis euismod accumsan in, mollis vel massa. Donec at turpis massa, nec tincidunt erat. In venenatis dolor sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam euismod egestas facilisis. Aenean vestibulum sapien nec libero imperdiet semper. In risus nulla, eleifend at pharetra sodales, consectetur non justo. Phasellus faucibus, leo eget blandit semper, augue felis ullamcorper lectus, vel luctus urna quam quis nunc. Nullam vel nibh sit amet felis tincidunt convallis eu nec purus. Sed tempor velit ut nulla pretium sodales. Quisque dapibus massa non velit elementum quis aliquam nibh pharetra. In arcu mauris, bibendum eget laoreet at, congue vitae tortor.
Aenean lorem orci, rhoncus a tincidunt sed, aliquet vitae odio. Nullam ac quam sit amet lacus posuere molestie in quis sapien. Etiam sed erat massa. Maecenas quis elit a mi pellentesque fringilla. Phasellus id velit arcu. Suspendisse pretium rutrum pulvinar. Donec enim turpis, iaculis nec imperdiet at, suscipit eu mauris. Duis luctus venenatis dolor, sed feugiat eros varius mollis. Nunc tincidunt pharetra lorem non convallis. Nulla consequat luctus enim quis varius.
Aliquam id imperdiet tellus. Nam id turpis mauris. Sed vel odio felis. Quisque blandit, est quis vulputate commodo, dolor dui molestie justo, ac posuere diam sem quis tellus. Suspendisse in luctus nibh. Donec porttitor ante nec nunc volutpat vehicula. Nunc nec malesuada enim. Nunc tristique, massa eget vehicula sodales, magna velit tincidunt tellus, interdum vulputate magna tortor sed leo. Praesent dignissim mi sit amet dolor pulvinar quis pellentesque urna cursus. Nam ultricies felis varius arcu pulvinar quis ultricies erat aliquet. Duis non lectus eu massa pharetra pharetra consectetur vitae massa. Nulla facilisi. Cras sed nunc nunc, ac euismod odio. Integer convallis, nisl id ullamcorper volutpat, ligula risus suscipit orci, non gravida magna urna eu urna.
Compatibility
The FullScreen stack will only work in newer, HTML5 compliant web browsers; like the latest versions of Safari, Firefox, Chrome and Opera. This website details where the fullscreen API is supported. Since its release, this stack now works with many more web browsers.You may see big inconsistencies in the way different web browsers handle HTML5 full screen mode. Some let you change the window shade colour, element width and other styling. Others are much more restrictive and prefer to handle things their way. Some web browsers will ask first if a user wishes to enter full screen mode, and others will just do it without any popup message or notification.
Closing full screen mode
Just hit the 'ESC' (escape) key, top left on your keyboard. This seems to be universal on all web browsers. Again, some web browsers tell a user this, others like Safari don't. Sometimes clicking in full screen mode will also close it.Contribute
If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.Privacy Settings
You are welcome to change your privacy preferences here.
By using this website, you agree to the privacy policy
