Achieve drawer movement using Angular to slide down

Check out my JSFiddle to see a cool footer feature. When you click on the 'more info' link, it hides one section and reveals another.

<div ng-app="myApp">
  <div class="footer">
    <div ng-if="!visible" class="footer-bar">
      <a href="" ng-click="toggle()">more info</a>
    </div>
    <div ng-if="visible" class="footer-drawer">
      <a href="" ng-click="toggle()">hide info</a>
      <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
         Accusamus eos ea impedit perferendis alias sit beatae 
         nulla, at, vitae debitis nesciunt, obcaecati laudantium iure 
         quo voluptatem in assumenda ad doloribus.   
      </p>
    </div>
  </div>
</div>

angular.module("myApp", [])
    .directive("footer", [
    function footer() {
        return {
        restrict: "C",

        link: function($scope, element, attrs, ctrl) {
            $scope.visible = false;

          $scope.toggle = function toggle() {
            $scope.visible = !$scope.visible;
          }
        }
      };
    }
  ]);

I want to create a smooth slidedown animation when toggling the extra information. The goal is for the page to slide down as well, ensuring the information is immediately visible without scrolling.

cssangularjs

Answer №1

One solution is to implement the scrollTop() function .scrollTop() and then incorporate a watch for your visible value.

To make it easier to access your content div from jQuery, consider moving it to your app div. Check out this example on jsfiddle

angular.module("myApp", [])
  .directive("footer", [
    function footer() {
      return {
        restrict: "C",
        link: function($scope, element, attrs, ctrl) {
          $scope.visible = false;
          $scope.$watchCollection('visible', function(newValue) {
            if (newValue) {
              $(element).parent().parent().scrollTop($(element).parent().parent()[0].scrollHeight);
            }
          });
          $scope.toggle = function toggle() {
            $scope.visible = !$scope.visible;
          }
        }
      };
    }
  ]);

For more insights, check out this related question

Answer №2

This is a solution that incorporates animation and scrolling effects.

For a live example, check out this jsfiddle link.

angular.module("myApp", ['ngAnimate'])

.directive("footer", ["$timeout",
      function footer($timeout) {
        return {
          restrict: "A",

          link: function(scope, element, attrs, ctrl) {
            scope.visible = false;
            scope.toggle = function toggle() {
              scope.visible = !scope.visible;
              if (scope.visible)
                $timeout(function() {
                    $(document.body).scrollTop($(document.body)[0].scrollHeight)
                  }, 100);
                }
            }
          };
        }
      ]);
.sample-show-hide {
  padding: 10px;
  border: 1px solid black;
  background: white;
}

.sample-show-hide {
  -webkit-transition: all linear 1.5s;
  transition: all linear 1.5s;
}

.sample-show-hide.ng-hide {
  opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>

<body ng-app="myApp">
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, enim. Impedit vitae illo laudantium similique inventore cum, consequatur quae sit dignissimos tempora placeat minus sequi dicta unde ad doloribus cupiditate!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam laborum praesentium non. Dignissimos odit illum hic distinctio libero, adipisci? Dolorum necessitatibus, labore natus similique quaerat tenetur odio quisquam voluptatem saepe.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sapiente delectus itaque rerum exercitationem, pariatur deleniti iusto dolores beatae inventore! Officiis quis asperiores magnam impedit atque quae fugit iste blanditiis!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, enim. Impedit vitae illo laudantium similique inventore cum, consequatur quae sit dignissimos tempora placeat minus sequi dicta unde ad doloribus cupiditate!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam laborum praesentium non. Dignissimos odit illum hic distinctio libero, adipisci? Dolorum necessitatibus, labore natus similique quaerat tenetur odio quisquam voluptatem saepe.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sapiente delectus itaque rerum exercitationem, pariatur deleniti iusto dolores beatae inventore! Officiis quis asperiores magnam impedit atque quae fugit iste blanditiis!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, enim. Impedit vitae illo laudantium similique inventore cum, consequatur quae sit dignissimos tempora placeat minus sequi dicta unde ad doloribus cupiditate!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam laborum praesentium non. Dignissimos odit illum hic distinctio libero, adipisci? Dolorum necessitatibus, labore natus similique quaerat tenetur odio quisquam voluptatem saepe.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sapiente delectus itaque rerum exercitationem, pariatur deleniti iusto dolores beatae inventore! Officiis quis asperiores magnam impedit atque quae fugit iste blanditiis!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, enim. Impedit vitae illo laudantium similique inventore cum, consequatur quae sit dignissimos tempora placeat minus sequi dicta unde ad doloribus cupiditate!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam laborum praesentium non. Dignissimos odit illum hic distinctio libero, adipisci? Dolorum necessitatibus, labore natus similique quaerat tenetur odio quisquam voluptatem saepe.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sapiente delectus itaque rerum exercitationem, pariatur deleniti iusto dolores beatae inventore! Officiis quis asperiores magnam impedit atque quae fugit iste blanditiis!</p>
  </div>
  <div>
    <div footer>
      <button ng-click="toggle()"><span ng-show="visible">hide info</span><span ng-show="!visible">more info</span></button>
      <div ng-show="visible" class="sample-show-hide">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus eos ea impedit perferendis alias sit beatae nulla, at, vitae debitis nesciunt, obcaecati laudantium iure quo voluptatem in assumenda ad doloribus.
        </p>
      </div>
    </div>
  </div>
  <div ng-init="checked=true">
    <label>
      <input type="checkbox" ng-model="checked" style="float:left; margin-right:10px;"> Is Visible...
    </label>
    <div class="sample-show-hide" ng-show="checked" style="clear:both;">
      Visible...
    </div>
  </div>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Animate hovering over a specific element within a group of similar elements using jQuery

Hi there! I recently started exploring Js and jQuery, and I was able to create a cool width change animation on a div when hovering over another. However, I ran into an issue when trying to implement this with multiple sets of similar divs. Whenever I hove ...

javascriptjqueryhtmlcss

Injecting $modalInstance manually at a later point in the controller

Using angular UI bootstrap, I am trying to reuse a controller from a modal dialog in a non-dialog view. After attempting to manually retrieve the $modalInstance using $injector.get('$modalInstance'), I found that it did not work ($injector.has(& ...

angularjsmodal-dialogangular-ui-bootstrap

Activate the ion-navbar button when submitting from the modal page

import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; import {ModalPage} from '../modal-page/modal-page'; @Component({ selector: 'page-page2', templateUrl: 'pa ...

htmlcssangularionic2ionic-popup

Implementing CSS keyframe animations in a customized Material UI component using React, Material UI, and JSS

I'm facing an issue with adding a CSS keyframe animation to my Material UI custom styled component. Whenever I try to add a keyframe animation, it throws an error in my code setup: const PulsatingCircle = styled("div")(({ theme, }) => ( ...

cssreactjsmaterial-uijss

Tips for incorporating animated features into a bar graph using jQuery

How can I create a dynamic animated bar graph using jQuery? I am looking to make the bar slide up from the bottom, incorporating images for both the bar and background. I have already set the positioning in CSS and now need to add animation to make the bar ...

javascriptjquerycss

Just beginning to explore AngularJS - what's lacking in this basic demonstration?

Take a look at this example: <body ng-controller="ShoppingCart"> <div> <h3>Your virtual shopping cart</h3> <span>{{text.msg}}</span> </div> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1. ...

angularjs

automatically dragging elements using jQuery UI

When implementing jquery UI draggable, I incorporate certain functionalities within the drag function. One specific task is scaling the dragging element based on its position. I am looking to automate the dragging of elements to specific coordinates (x, ...

javascriptjquerycssjquery-uijquery-ui-draggable

When hovering, the CSS border-bottom should extend

I am looking to create an animated border effect. When hovering over the link, I want the border-bottom to extend seamlessly from left to right. After much searching, I am still unsure what this effect is called. Below is the code I have: .a{ width ...

htmlcss

Adjust the element's height as you scroll

I am currently experimenting with a method to dynamically increase the height of an element based on user scrolling behavior. Despite trying multiple approaches, I have encountered challenges in getting it to work effectively. The concept is as follows: ...

javascriptjquerycssscrollgaussianblur

The inability to remove automatically loaded text in jQuery Mobile is a persistent issue

<script> $(document).bind("mobileinit", function(){ $.mobile.loadingMessage = false; }); </script> <script src="http://www.mywebsite.com/scripts/jquery.mobile-1.4.2.min.js" type="text/javascript"></script> Despite f ...

jqueryhtmlcss

What is the syntax for defining "skills[]" in an AngularJS input field of type text?

When working with PHP, we often use name="skills[]" to retrieve data from a form as an array. How can this be achieved in AngularJS? For example, in PHP: <input type="text" name="skills[]" /> I am attempting to achieve the same functionality in An ...

javascriptangularjs

The Bootstrap navbar stubbornly refuses to hide after being clicked on

Is there a way to adjust the data-offset-top for mobile view? Additionally, I am having trouble hiding the menu when clicking on a link. I have tried some code from stackoverflow without success. Can someone please assist with this issue: <nav class= ...

javascriptjqueryhtmlcssnavbar

What is the best way to clear and fill a div without causing it to resize?

I am faced with a challenge involving four thumbnail divs labeled .jobs within a #job-wrap container. When a .job is clicked, I want the #job-wrap to fade out, clear its contents, load information from the selected .job, and then fade back in. However, whe ...

javascriptjqueryhtmlcss

When using HTML select, text alignment may not be centered properly in the Chrome

Recently, I encountered an issue where the text in select options is not centered in Chrome. Interestingly, using text-align: center on the select element works perfectly fine on Firefox, but fails to do so on Chrome. I haven't had the chance to test ...

htmlcss

Exploring the functionality of AngularJS routing on a webpage

Testing the routing functionality of AngularJS while creating a web page. The index.html will contain links to Home, Courses, and Students. Clicking on each link will load its respective HTML using AngularJS routing. The student information is stored in ...

javascriptphphtmlmysqlangularjs

adjusting the background with repeat-y pattern placement

I'm having an issue with setting a background image as a wrapper for the main content of my page. Currently, I've set the background image like this: #background { background: url("../image/bg.png") repeat-y 133px 50px; color: #000000; ...

cssbackground-image

The previous background image that was functioning properly is no longer showing up after upgrading to Laravel 6.0

I'm struggling with getting a background image to show in my view that contains a <body></body> tag. I was able to do it before, but now it's not working. The background image is downloaded on my computer and stored in the public fold ...

htmlcsslaravelbootstrap-4

Guide to applying a linear-gradient and background image to a particular div using React's styling techniques

How can I set both a linear-gradient and a background image on a specific div using styles in Reactjs? I am struggling to achieve this, as I can only get either the image or the linear-gradient but not both simultaneously. The image ends up overlapping w ...

cssreactjsmaterial-ui

Modifying CSS stylesheet does not alter the background color

body { background-color: bisque; } <!DOCTYPE html> <html> <head> <title>Reading</title> </head> <body> <h1> <button><a href="index.html">Home</a></button> & ...

htmlcssbackground-color

Is it possible to extract the CSS path of a web element using Selenium and Python?

I am working with a collection of elements using find_elements_by_css_selector, and my next task is to extract their css locators. I attempted the following approach: foo.get_property('css_selector') However, it seems to be returning None. ...

pythoncssseleniumselenium-webdriverwebdriver