Adjust the size of two divs in AngularJs as needed

Question

Adjust the size of two divs in AngularJs as needed

I have two divs covering the entire page, each at 50% width. When the lower div is clicked, I want it to expand to cover the full screen, and return to its original size on click again. Here is an example:

See JQuery equivalent

$('.wrapper div.green').click(function() {
    $(this).toggleClass('go')
    if ($(this).hasClass('go')){
        $(this).animate({'height':'100%'},{
            duration:200,
            step:function(gox){
                var height = gox < 100 ? (100 - gox) / 1 : 0;
                $(this).siblings().css('height', height + "%"); 
            }
        })
    } else {
        $('.wrapper div').animate({'height':'50.00%'},200)
    }
});

Now I want to achieve this in AngularJS, but I'm new to it and encountering some challenges. I'm seeking guidance to help me move in the right direction. Here is what I've attempted so far:

See my AngularJs Attempt

All I want is a similar functionality as that of JQuery.

javascript jquery html css angularjs

Answer 1

Answer №1

If you're looking for a solution inspired by your initial example, check out this implementation - http://jsfiddle.net/nz2vunLs/2/

This approach leverages CSS transitions along with the angular directives ngClass and ngClick. While it might not be the most elegant solution, it does get the job done effectively.

html

<div ng-app ng-controller="Controller" class="wrapper">
    <div ng-class="{min: greenFullscreen}" class="blue animation"></div>
    <div ng-class="{max: greenFullscreen}" ng-click="toggleGreen()" class="green animation"></div>
</div>

Controller

function Controller($scope) {
    $scope.greenFullscreen = false;

    $scope.toggleGreen = function() {
        $scope.greenFullscreen = !$scope.greenFullscreen;
    }
}

Additional CSS

.green.max {
    height: 100%;
}

.blue.min {
    height: 0%;
}

.animation {
    -webkit-transition: height 200ms;  
    -moz-transition: height 200ms;  
    -o-transition: height 200ms;  
    transition: height 200ms;
}

Answer 2

If you're looking for a solution inspired by your initial example, check out this implementation - http://jsfiddle.net/nz2vunLs/2/

This approach leverages CSS transitions along with the angular directives ngClass and ngClick. While it might not be the most elegant solution, it does get the job done effectively.

html

<div ng-app ng-controller="Controller" class="wrapper">
    <div ng-class="{min: greenFullscreen}" class="blue animation"></div>
    <div ng-class="{max: greenFullscreen}" ng-click="toggleGreen()" class="green animation"></div>
</div>

Controller

function Controller($scope) {
    $scope.greenFullscreen = false;

    $scope.toggleGreen = function() {
        $scope.greenFullscreen = !$scope.greenFullscreen;
    }
}

Additional CSS

.green.max {
    height: 100%;
}

.blue.min {
    height: 0%;
}

.animation {
    -webkit-transition: height 200ms;  
    -moz-transition: height 200ms;  
    -o-transition: height 200ms;  
    transition: height 200ms;
}

Adjust the size of two divs in AngularJs as needed

Answer №1

Similar questions

Transitioning from Jquery to vanilla JavaScript or transforming Jquery code into pseudo code

"Encountering a Type Error in AngularJS due to the 'this

Display images quickly when the mouse is hovering

You can eliminate the display flex property from the MuiCollapse-wrapper

Encountering a 'popper.js is missing' error in Laravel while interacting with a Bootstrap 4 div that has the class 'input-group-prepend' on click

Easily convert grams to kilograms with just a click of a button using JavaScript

Error: Chrome is preventing an AJAX request

Controlling ever-changing routes using AngularJS

Iterating through an array within an array in a React component

The page is set to 100% width, yet the content is not completely occupying the space provided

Employing forward slashes as the template delimiter in JavaScript for HTML

Does the notion of "Execution context and the stack" only pertain to web browsers?

React Sortable JS is causing the bootstrap grid style to disappear

Methods for aligning navbar links vertically when incorporating an oversized icon

AngularJS basic webpage application halts code rendering

The application within the Main Module is not being acknowledged by the other components within the module

I am unable to see the text field when I use element.text. What could be the reason for this

Angular5 Carousel: Spinning Your Web Pages in Style

Issue with shadows on imported OBJ objects in Three.js when material is applied

Utilizing React Router Dom to Showcase Home Route from a Sub-Route