Expand Html Element To Full Screen Using jQuery
File Size: | 1.79 KB |
---|---|
Views Total: | 12403 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
With a little jQuery script, you can responsively expand an Html element to fullsize of browser window with a smooth transition effect. Great for creating a gallery/slideshow/video container which allows you to easily switch to fullscreen mode by clicking a toggle button.
How to use it:
1. Load the Font Awesome in the head section for the toggle icons (Optional).
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
2. Create an video player container with a fullscreen mode toggle icon and play/pause controls.
<div class="player"> <div class="pl-wrap"> <!-- Your content goes here --> <div id="pl-bar"> <i class="fa fa-play"></i> <i class="fa fa-expand r"></i> </div> </div> </div>
3. The required CSS styles.
.r { float: right; } /*PLAYER*/ .player { position: relative; width: 850px; height: 480px; margin-top: -240px; margin-left: auto; margin-right: auto; margin-bottom: 0; background: #444; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .player.active { margin-top: 0; top: 0 !important; } .pl-wrap { position: relative; width: 100%; height: 100%; } #pl-bar { position: absolute; bottom: 0; left: 0; height: 50px; width: 100%; background: #333; border-top: 1px solid #444; } #pl-bar i { height: 100%; width: 40px; border-left: 1px solid #444; line-height: 50px; text-align: center; color: #999; cursor: pointer; } #pl-bar i:first-child { border-left: none; border-right: 1px solid #444; } #pl-bar i:hover { color: #eaeaea; background: #3b3b3b; }
4. Include the latest version of jQuery library at the end of the web page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
5. The Javascript to active the fullscreen transition.
$(document).ready(function(){ var w = $(window).width(); var h = $(window).height(); var pl = $('.player'); pl.css('top', h/2); //FULL SCREEN var c = 1; $('.fa-expand').click(function() { c++; $(this).toggleClass('fa-compress'); //odd -> Full Screen if(c%2==0){ pl.animate({width:w}, 300, function(){ $(this).animate({height:h}, 300); pl.addClass('active'); }); } //even -> Exit Full Screen if (c%2!=0){ pl.animate({height:'480'}, 300, function(){ $(this).animate({width:'850'}, 300); pl.removeClass('active'); }); } }); //PLAY BTN $('.fa-play').click(function(){ $(this).toggleClass('fa-pause'); }); });
This awesome jQuery plugin is developed by andrecortellini. For more Advanced Usages, please check the demo page or visit the official website.