CODEWITHSUNDEEP
javascripthtmlangularjstwitter-bootstrapangular-ui-bootstrap
TechCrunch
TechCrunch

Reputation: 3124

How to show alert in UI bootstrap when user is at different point in page

I'm using Angular for a web app. I used Angular UI bootstrap to show an alert in my page as response to some action, say a button click. However, I placed this alert div at beginning of the page. My page is long. So when I'm some where at the middle of the page and an alert happens, the user will not know the alert happened because it is at beginning of the page. I want to scroll page automatically to alert area when it happens. How to do this ?

Some what related to this https://stackoverflow.com/a/24203856/2182674, but its not looking quite good to show at fixed place in the page. That is overlaying page content and not good for my case.

Alert content is set by a controller in angular. So using href anchor for button won't work.

Upvotes: 0

Views: 1236

Answers (3)

tuomur
tuomur

Reputation: 7088

Angular can $anchorScroll to an element:

angular.module('anchorScrollExample', [])
.controller('ScrollController', ['$scope', '$location', '$anchorScroll',
  function ($scope, $location, $anchorScroll) {
    $scope.gotoBottom = function() {
      // set the location.hash to the id of
      // the element you wish to scroll to.
      $location.hash('bottom');

      // call $anchorScroll()
      $anchorScroll();
    };
  }]);

Upvotes: 1

Laurent Jalbert Simard
Laurent Jalbert Simard

Reputation: 6329

When triggering the action you can scroll to the alert element using something like this:

$("#button").click(function() {
    /* trigger UI bootstrap alert */
    /* ... */

    $('html, body').animate({
        scrollTop: $("#alertElementtoScrollToID").offset().top
    }, 2000);
});

Upvotes: 1

user3668901
user3668901

Reputation: 19

You can do this with a simple anchor html element :

<a id="myalert">Alerte</a>
...
<a href="#myalert">Go to the alert</a>

Upvotes: 1

Related Questions