Search Posts

Category: css3

Function callback after end of animation is undefined – angularjs

I am trying to make a callback as soon as the animation ends. Here’s the example that I tried. Please open the chrome debugger to see the console log messages. The callback is coming back as undefined. Could you please help me understand why the callback is not picking up? Here’s the code snippet. More details are available in the link above: angular.module(‘animApp’, [‘ngAnimate’]) .controller(‘mainCtrl’, function($scope) { $scope.loadUrl = function(event) { console.log(“i am here”); } […]

Why is css grid not working

I have a html template like the following: <div> <div class=”my-grid-container” ng-repeat=”cardData in summaryCardsCtrl.summaryDetails” > <div class=”myClass”> My custom div </div> </div> </div> I want the first div to span for two rows, something like: I am using CSS3 GridBox like the following: .my-grid-container { display: grid; grid-template-columns: auto auto auto; grid-gap: 10px; padding: 10px; } .my-grid-container > div { text-align: center; padding: 20px 0; font-size: 30px; max-height: 70px; } .my-grid-container > .myClass:first-child { grid-row: […]

Angularjs ng-repeat issue

I hope that someone can help me with this issue. I am new to angularjs. I am trying to create a photo gallery where the initial page is a sheet of thumbnail photos from twitter and instagram created with an angularjs ng-repeat loop. When the user hovers over a image the image fades and a button appears for the user to click. When the button is clicked a light box overlay appears showing the full […]

Check if accordion colapsed

I need to check if my accordion was collapsed. How can I get value of attribute aria-expanded in AngularJS? Here is an issue When I try to open two accordions In the same time,the first one which was open is colapsing and “-” doesn’t change on ‘+’. Any idea how to check if accordion was collapsed ? HTML <div ng-app=”myApp” ng-controller=”myCtrl”> <div style=”margin:50px; position:relative; text-align:center;”> <form class =”search-display” style=”margin:auto;max-width:400px” > <input pattern=”^[a-zA-ZАа-яА-Я]+$” name=”search” type=”text” placeholder=”Search…” […]

Create OTP form. input field to be appear as separate input fields on screen

I want design something like in the Image, where a 6 digit one time password (OTP) is to be entered by user. Right now I have achieved this by 6 separate inputs and then combining values in angularjs: <input type=”text” min=”1″ max=”1″ name=”codess1″ [(ngModel)]=”codess1″ id=”code1″ #codes1=”ngModel” (keydown)=”setfocus($event)” autocomplete=”off”> <input type=”text” name=”codess2″ [(ngModel)]=”codess2″ id=”code2″ #codes2=”ngModel” (keydown)=”setfocus($event)” disabled autocomplete=”off”> <input type=”text” name=”codess3″ id=”code3″ [(ngModel)]=”codess3″ #codes3=”ngModel” (keydown)=”setfocus($event)” disabled autocomplete=”off”> <input type=”text” name=”codess4″ id=”code4″ [(ngModel)]=”codess4″ #codes4=”ngModel” (keydown)=”setfocus($event)” disabled autocomplete=”off”> […]

Next Page »