Custom Directive

Developer
Robert
Size
3,425 Kb
Views
6,072
  1. Custom Directive Previews
  2. Custom Directive HTML Codes
  3. Custom Directive CSS Codes
  4. Custom Directive JS Codes

How do I make an custom directive?

What is a custom directive? How do you make a custom directive? This script and codes were developed by Robert on 09 January 2023, Monday.

Custom Directive Previews
IQ Test

Custom Directive - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>custom Directive</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body ng-app="ngApp" ng-controller="mainCtrl"> <div class="container"> <div style="display: table-row"> <div box-size="{{percentage}}"> </div> </div> <!-- <div box-size="{{percentage}}"></div> <div box-size="{{percentage}}"></div> <div box-size="{{percentage}}"></div> <div box-size="{{percentage}}"></div> <div box-size="{{percentage}}"></div> --> </div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Custom Directive - Script Codes CSS Codes

body { padding-right: 0px;
}
* { box-sizing: border-box;
}
.container { overflow: auto; padding: 0; margin-top: -10px; margin-left: -10px; width: 100%; display: table;
}
.box { border-left: 1px dashed lightgray; border-top: 1px dashed lightgray; padding: 5px; display: table-cell; float: left;
}
.col4 { width: 25%;
}
.col3 { width: 33%;
}
.col2 { width: 50%;
}
.col1 { width: 100%;
}

Custom Directive - Script Codes JS Codes

var app = angular.module("ngApp", []) .controller('mainCtrl', function($scope, $window) { $scope.percentage = 33; $scope.boxHeight = { 'min-height': '0px' }; $scope.storeHeight = []; $scope.friends = [{ name: "Pablo", desc: "Met in Columbia, while working for the Navy." }, { name: "Carlos", desc: "Met in Yale University, while doing my doctorate. Very knowledgeable guy. Great Friend." }, { name: "Peter", desc: "Was my Boss at Chase Bank. He was firm but always did it with a smile." }, { name: "Mark", desc: "One of my best friends. Good natured and was always cracking a joke." }, { name: "Pablo", desc: "Met in Columbia, while working for the Navy." }, { name: "Carlos", desc: "Met in Yale University, while doing my doctorate. Very knowledgeable guy. Great Friend." }, { name: "Peter", desc: "Was my Boss at Chase Bank. He was firm but always did it with a smile." }, { name: "Mark", desc: "One of my best friends. Good natured and was always cracking a joke." }, { name: "James", desc: "Is my nephew from my sister's side. Great kid always wants to spend time with me reading comics or just playing video games." }, { name: "Julia", desc: "One of my best friends. Good natured and was always cracking a joke." }]; $window.onresize = function() { var innerWidth = window.document.body.clientWidth; var boxes = []; var currPercent = $scope.percentage, newPercent = currPercent; if (innerWidth <= 480) { newPercent = 100; } else if (innerWidth <= 768) { newPercent = 50; } else if (innerWidth <= 1024) { newPercent = 33; } else if (innerWidth > 1024) { newPercent = 25; } if(newPercent !== currPercent ){ boxes = angular.element(document.getElementsByClassName('box')); $scope.percentage = newPercent; //console.log(boxes); for(i= 0; i < boxes.length; i++){ console.log(boxes[i].css("height")); //console.log(boxes.eq(i).children().css('height')); } // console.log(boxes, innerWidth); } console.log($scope.percentage); $scope.$apply(); } })
.directive('boxSize', function($timeout) { return { restrict: 'A', template: '<div ng-class="{\'box\' : true, \'col4\' : (percentage === 25 ), \'col3\' : (percentage === 33 ), \'col2\' : (percentage === 50 ), \'col1\' : (percentage === 100 )}"'+ 'ng-repeat="friend in friends track by $index" index="{{$index}}" id="div{{$index}}" ng-style="boxHeight"><h3>{{friend.name}}</h3><p>{{friend.desc}}</p></div>', link: function(scope, elem, attrs) { $timeout(init, false); //Initialization function init() { console.log('offsetHeight = ' + elem[0].offsetHeight + ' ' + elem[0].index); } } } function getWidth() { return { width: attrs.boxSize + "%" }; } function _test(percent) { console.log(percent); }
})
.directive('rrHeightAdjuster', function($timeout) { return { link: function(scope, elem, attr) { //console.log(elem[0]); scope.boxHeight['min-height'] = '0px'; $timeout(function() { scope.storeHeight.push(elem[0].clientHeight); //console.log(angular.element(document.querySelector(attr.id +' h3')).innerHeight); console.log(elem.find(attr.id)); var currHeight = parseInt(scope.boxHeight['min-height']), elemHeight = elem[0].clientHeight; if (currHeight < elemHeight) { currHeight = elemHeight; console.log("height: " + currHeight); } //elem[0].css({'height' : (currHeight + 10) +"px"}); scope.boxHeight['min-height'] = currHeight + 'px'; console.log("HEIGHTS: " + scope.storeHeight ); }, 0); } }
})
Custom Directive - Script Codes
Custom Directive - Script Codes
Home Page Home
Developer Robert
Username AgentRR007
Uploaded January 09, 2023
Rating 3
Size 3,425 Kb
Views 6,072
Do you need developer help for Custom 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!

Robert (AgentRR007) Script Codes
Name
UI Challenge - Menu Expander
CountDown
DC Comic Slide Image
Angular Template
Interface Animation
AgentRR007 Logo Rotate
RegExp in Angular Tester
Challenge Reveal... with a twist.
A Little Snake Animation
FireBase Demo
Create amazing SEO content 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!