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 stackoverflow.com/questions/42294/… — JJJ
– JJJ, Commented Nov 8, 2014 at 7:31
Would that not just be a class: navbar-fixed-bottom or something? — mplungjan
– mplungjan, Commented Nov 8, 2014 at 7:42
You can create your own directive (angular way) to do this sticky thing. docs.angularjs.org/guide/directive — Ionel Lupu
– Ionel Lupu, Commented Nov 8, 2014 at 7:54

Shomz · Accepted Answer · 2014-11-08 08:35:37Z

3

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.

edited Nov 8, 2014 at 8:35

answered Nov 8, 2014 at 8:20

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript - Replacing jQuery $ with Angular code

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related