RSS 2.0
Sign In
# Friday, July 10, 2015

Here we show two snall directives that help to build fixed menu bar in your angularjs application.

There are two ideas behind:

  1. Expose element's bounds into a scope for a manipulation (ui-bounds directive).
  2. Allow to react to scroll DOM event (ui-scroll directive).

Directive implementation is very simple. See bounds.html at GitHub.

The use cases are also trivial to unerstand and implement. Take a look at two of them.

  1. Fixed menu:
    <div ng-style="{paddingTop: headerBounds.height.toFixed() + 'px' }">
      <div style="position: fixed; z-index: 1; top: 0; width: 100%; background: menu" 
        ui-bounds="headerBounds">My header</div>
      <div>
        long content that produces a scroll bar.
      </div>
    </div>
  2. Synchronized scroll of table header
    <div style="width: 50em; overflow: hidden; background: pink">
      <div style="position: relative" 
        ng-style="{left: bodyBounds.left.toFixed() + 'px'}">header...<div>
    </div>
    <div style="width: 50em; height: 5em; overflow: auto; background: blue"
      ui-scroll>
      <div ui-bounds="bodyBounds">body...</div>
    </div>

You can see the demo at: nesterovsky-bros/angularjs-api/master/angularjs/bounds.html.

Friday, July 10, 2015 9:04:40 PM UTC  #    Comments [0] -
AngularJS | javascript
All comments require the approval of the site owner before being displayed.
Name
E-mail
Home page

Comment (Some html is allowed: a@href@title, b, blockquote@cite, em, i, strike, strong, sub, super, u) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.  

[Captcha]Enter the code shown (prevents robots):

Live Comment Preview
Archive
<December 2024>
SunMonTueWedThuFriSat
24252627282930
1234567
891011121314
15161718192021
22232425262728
2930311234
Statistics
Total Posts: 387
This Year: 3
This Month: 0
This Week: 0
Comments: 1984
Locations of visitors to this page
Disclaimer
The opinions expressed herein are our own personal opinions and do not represent our employer's view in anyway.

© 2024, Nesterovsky bros
All Content © 2024, Nesterovsky bros
DasBlog theme 'Business' created by Christoph De Baene (delarou)