AngularJS 1.2.x - FullScreen Directive

Developer
Fabio Biondi
Size
3,059 Kb
Views
38,456
  1. AngularJS 1.2.x - FullScreen Directive Previews
  2. AngularJS 1.2.x - FullScreen Directive HTML Codes
  3. AngularJS 1.2.x - FullScreen Directive CSS Codes
  4. AngularJS 1.2.x - FullScreen Directive JS Codes

How do I make an angularjs 1.2.x - fullscreen directive?

What is a angularjs 1.2.x - fullscreen directive? How do you make a angularjs 1.2.x - fullscreen directive? This script and codes were developed by Fabio Biondi on 13 October 2022, Thursday.

AngularJS 1.2.x - FullScreen Directive Previews
IQ Test

AngularJS 1.2.x - FullScreen Directive - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>AngularJS 1.2.x - FullScreen Directive</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://code.angularjs.org/1.2.6/angular.min.js"></script>
<!-- Angular Fullscreen directive -->
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/98887/angular-fullscreen.js"></script>
<body class="container" ng-app="DemoApp" ng-controller="MainCtrl"> <h2>Angular Fullscreen Directive demo</h2> <a href="https://github.com/fabiobiondi/angular-fullscreen" target="_blank">Fork me on github</a> <hr /> <div class="column">	<!-- enable/disable fullscreen using the 'Fullscreen' service -->	<button ng-click="goFullscreen()" class="btn btn-primary"> Enable/Disable Document Fullscreen</button> <hr /> <p>or click the images (applying the 'fullscreen' attribute)</p> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/98887/IMG_0046.PNG" fullscreen />	<hr />	<h3>Go FullScreen Via Watched Property</h3>	<button ng-click="goFullScreenViaWatcher()">Toggle FullScreen</button>	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/98887/IMG_0046.PNG" fullscreen="isFullScreen" />
<p>	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque eget sem luctus rutrum. Vivamus vestibulum fermentum dolor, ac rhoncus nisi blandit ac. Vestibulum in ante quis eros cursus congue id in lorem. Maecenas ut odio vitae nibh fringilla sagittis. Mauris pharetra porttitor lorem et dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae vehicula elit, sit amet cursus tellus. Integer eu tellus mauris.	Fusce eros leo, gravida et tellus consectetur, pharetra rutrum nisi. In dictum nunc ac eros dapibus convallis. Vestibulum vehicula venenatis justo, id malesuada mi tempor et. Nam mattis commodo rhoncus. Cras sed nunc consectetur elit auctor accumsan. Vestibulum congue lectus eu enim fringilla, ac cursus enim blandit. In sagittis fringilla elementum.	Cras adipiscing sem nulla, sed congue erat blandit eget. Donec vitae viverra urna, nec lobortis ipsum. Aenean dignissim lorem id viverra porttitor. Nullam eleifend elementum arcu. Nulla porta tortor in risus imperdiet, eu imperdiet risus faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum cursus egestas massa ac dictum. Aenean vel nisi nec dolor tempus commodo vel sit amet elit. Vestibulum venenatis, odio eget aliquam interdum, diam ipsum semper massa, sit amet dictum nisi mi in mauris. Fusce a adipiscing libero. Phasellus viverra, arcu a commodo cursus, justo tellus suscipit tortor, quis aliquet urna turpis vel massa. Pellentesque dignissim ipsum quam, malesuada malesuada sem tempus eget. Vestibulum ac eros ante.
</p>
</div>
</body> <script src="js/index.js"></script>
</body>
</html>

AngularJS 1.2.x - FullScreen Directive - Script Codes CSS Codes

.column { width: 300px;
}
img { width: 100%; cursor: pointer;
}
:-webkit-full-screen .column { width: 100%;
}
:-moz-full-screen .column { width: 100%;
}
:-ms-full-screen .column { width: 100%;
}
:-o-full-screen .column { width: 100%;
}
:full-screen .column { width: 100%;
}

AngularJS 1.2.x - FullScreen Directive - Script Codes JS Codes

/** * Angular Fullscreen is an open source library available on github * https://github.com/fabiobiondi/angular-fullscreen */
var app = angular.module('DemoApp', ['FBAngular']);
function MainCtrl($scope, Fullscreen) { $scope.goFullscreen = function () { // Fullscreen if (Fullscreen.isEnabled()) Fullscreen.cancel(); else Fullscreen.all(); /* Set Fullscreen to a specific element (bad practice) */ // Fullscreen.enable(document.getElementById('img')) }; $scope.isFullScreen = false; $scope.goFullScreenViaWatcher = function() { $scope.isFullScreen = !$scope.isFullScreen; };
}
AngularJS 1.2.x - FullScreen Directive - Script Codes
AngularJS 1.2.x - FullScreen Directive - Script Codes
Home Page Home
Developer Fabio Biondi
Username fabiobiondi
Uploaded October 13, 2022
Rating 3
Size 3,059 Kb
Views 38,456
Do you need developer help for AngularJS 1.2.x - FullScreen Directive?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Fabio Biondi (fabiobiondi) Script Codes
Name
D3 Pack Layout with transitions and tooltips
AngularJS Directive - YouTube DATA API example
FlexBox - Grid 2x2
AngularJS Form Validation
Realtime todo-list in AngularJS and Firebase in 20 lines
FlexBox - Grid 2 rows with different columns
AngularJS - Day 1 - Boilerplate
Responsive DOM elements distribution with D3 and Scales
Resizable directive in AngularJS and jQueryUI
D3.js Multi-Foci Force layout animated example
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!