Exploring the growth of CSS offsetting alongside with AngularJS

Question

Exploring the growth of CSS offsetting alongside with AngularJS

I am working on an Angular app where I need to increase the left offset of a div by 90px every time the slideThis() function is called. In jQuery, I would typically achieve this using left: '+=90', but I'm struggling to find a similar method in AngularJS. Am I approaching this problem the wrong way?

HTML:

<div ng-style="myStyle"></div>

JavaScript:

$scope.slideThis = function() {
        $scope.myStyle = {
            left: '+=90'
        }
    }

I would greatly appreciate any guidance on how to implement this functionality in AngularJS!

javascript jquery html css angularjs

Answer 1

Answer №1

If you want to create a moving effect on your webpage, you can achieve it by having your controller update the style based on the position.

Here's how you can set it up:

<input type="button" value="Move" ng-click="slideThis()"> 
<div ng-style="myStyle">Content to animate</div>

Controller:

myApp.controller('MyCtrl', function ($scope) {    

    var pos = 0;
    $scope.slideThis = function() {
       pos += 90;

       $scope.myStyle = { 
          position: 'absolute',
          left: pos+'px'
    }
  };
});

You could also use margin or padding to achieve a similar effect.

Check out the demo here: http://jsfiddle.net/zKRLs/3/

Answer 2

If you want to create a moving effect on your webpage, you can achieve it by having your controller update the style based on the position.

Here's how you can set it up:

<input type="button" value="Move" ng-click="slideThis()"> 
<div ng-style="myStyle">Content to animate</div>

Controller:

myApp.controller('MyCtrl', function ($scope) {    

    var pos = 0;
    $scope.slideThis = function() {
       pos += 90;

       $scope.myStyle = { 
          position: 'absolute',
          left: pos+'px'
    }
  };
});

You could also use margin or padding to achieve a similar effect.

Check out the demo here: http://jsfiddle.net/zKRLs/3/

Exploring the growth of CSS offsetting alongside with AngularJS

Answer №1

Similar questions

Using a CSS nth-child selector to eliminate the bottom margin of the final row

When working with Firebase, I am required to extract data from two different tables simultaneously

The items in the footer are not all aligned on a single line

Change the destination of an iFrame upon user click

Injecting a component in Angular 2 using an HTML selector

A comprehensive guide on transferring user input onto a php text file

Click event not triggering to update image

Get the contents inside the window.open using Javascript

ng-if directive does not show data in AngularJS

Javascript: regular expression to validate alphanumeric and special characters

Customize your AngularJS select element using Zurb Foundation's custom form features

There is no callback provided in Angular's $http.delete upon successful completion

Cookies in Node.js Express are not being incorporated

Display a comprehensive inventory of all bot commands within a designated category

Troubleshooting: The issue of importing Angular 2 service in @NgModule

Are there any circumstances in which it is not advisable to use 'track by $index' in an ng-repeat in AngularJS?

Tips for using JavaScript to style an array items individually

The Material-ui bug: multiple instances of the modal opening when a button is clicked

Stop the div from expanding because of oversize text in Bootstrap

Comparing AngularJS controller and template encapsulation to Angular components: a breakdown