JavaScript - Replacing jQuery $ with Angular code

Question

I've always used jQuery references to make a sticky footer for my sites. Now that im using AngularJS, there has been no need for me to use jQuery too. However, i cant seem to use my normal sticky footer code as $ is undefined.

HTML:

<h1>Basic plunk!</h1>
<p>If the header above is red, then you know Plunker is working!</p>
<p>The header above should slide right, indicating that jQuery is up and running.</p>
<!-- Put your html here! -->
<div id="page">

    1    
    <br>2    
    <br>3    
    <br>4    
    <br>

</div>
<br>
<footer id="colophon">My footer</footer>

JS:

<script type="text/javascript">
    $(document).ready(function() {
        var bodyHeight = $("body").height();
        var vwptHeight = $(window).height();
        if (vwptHeight > bodyHeight) {
            $("footer#colophon").css("position","absolute").css("bottom",0);
        }
    });
</script>

How can i perform the above but in an Angular friendly way?

Here's a plunker: http://plnkr.co/edit/k1EZqwpdXbKhODW4FyeF?p=preview

It's not very good code to start with (what if the user resizes the browser?) See http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page — JJJ, Nov 08 '14 at 07:31
Would that not just be a class: navbar-fixed-bottom or something? — mplungjan, Nov 08 '14 at 07:42
You can create your own directive (angular way) to do this sticky thing. https://docs.angularjs.org/guide/directive — Ionel Lupu, Nov 08 '14 at 07:54

Shomz · Accepted Answer · 2014-11-08T08:35:37.547

A real sticky footer is simple to implement:

footer {
  position: fixed;
  bottom: 0;
}

No jQuery, no Angular, plain CSS: http://plnkr.co/edit/W6NcqlRDQ4K6XkGSBEJR?p=preview

But, a footer that's sticky only when there's some room left between the bottom body edge and the bottom window edge will require a wrapper/container for the body (excluding footer) which will have 100% height "pushing" the footer downwards. Then, the wrapper's negative bottom margin should equal footer's height (in order not to have it always "under" the page). Wrapper's pseudo-element is used to block the footer from going into the content in case the content overflows the body.

Something like this: http://plnkr.co/edit/FySWHhIBqYGRQhppN7bA?p=preview

Works with window resizing and no JS needed.

JavaScript - Replacing jQuery $ with Angular code

1 Answers1