Resizable directive in AngularJS and jQueryUI

Developer
Fabio Biondi
Size
2,265 Kb
Views
70,840
  1. Resizable directive in AngularJS and jQueryUI Previews
  2. Resizable directive in AngularJS and jQueryUI HTML Codes
  3. Resizable directive in AngularJS and jQueryUI CSS Codes
  4. Resizable directive in AngularJS and jQueryUI JS Codes

How do I make an resizable directive in angularjs and jqueryui?

What is a resizable directive in angularjs and jqueryui? How do you make a resizable directive in angularjs and jqueryui? This script and codes were developed by Fabio Biondi on 13 October 2022, Thursday.

Resizable directive in AngularJS and jQueryUI Previews
IQ Test

Resizable directive in AngularJS and jQueryUI - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Resizable directive in AngularJS and jQueryUI</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
</head>
<body class="jumbotron" ng-controller="MainCtrl" ng-app="myApp"> <h2>Resizable directive in AngularJS and jQueryUI</h2> <p>Drag the cursor to resize</p> <div resizable on-resize="resize($evt, $ui)" class="box">Resizable Div!</div>	<div ng-show="w">{{w}}:{{h}}px</div>
</body> <script src="js/index.js"></script>
</body>
</html>

Resizable directive in AngularJS and jQueryUI - Script Codes CSS Codes

.box { width: 200px; height: 200px; line-height: 200px; color: white; text-align: center; vertical-align: middle; background: -webkit-linear-gradient(red, #ccc); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red, #ccc); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red, #ccc); /* For Firefox 3.6 to 15 */ background: linear-gradient(red, #ccc); /* Standard syntax */
}

Resizable directive in AngularJS and jQueryUI - Script Codes JS Codes

(function () { 'use strict'; angular.module('myApp', []) .directive('resizable', function () { return { restrict: 'A', scope: { callback: '&onResize' }, link: function postLink(scope, elem, attrs) { elem.resizable(); elem.on('resize', function (evt, ui) { scope.$apply(function() { if (scope.callback) { scope.callback({$evt: evt, $ui: ui }); } }) }); } }; }) .controller('MainCtrl', function ($scope) { $scope.resize = function(evt,ui) { //console.log (evt,ui); $scope.w = ui.size.width; $scope.h = ui.size.height; } });
})();
Resizable directive in AngularJS and jQueryUI - Script Codes
Resizable directive in AngularJS and jQueryUI - Script Codes
Home Page Home
Developer Fabio Biondi
Username fabiobiondi
Uploaded October 13, 2022
Rating 3
Size 2,265 Kb
Views 70,840
Do you need developer help for Resizable directive in AngularJS and jQueryUI?

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.js Multi-Foci Force layout animated example
FlexBox - Grid 2x2
Responsive DOM elements distribution with D3 and Scales
AngularJS 1.2.x - FullScreen Directive
FlexBox - Grid 2 rows with different columns
Realtime todo-list in AngularJS and Firebase in 20 lines
AngularJS Form Validation
D3 Pack Layout with transitions and tooltips
AngularJS Directive - YouTube DATA API example
AngularJS - Day 1 - Boilerplate
Create amazing Facebook ads 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!