Transforming JavaScript by Substituting jQuery $ with Angular Logic

For a long time, I relied on jQuery to create sticky footers for my websites. But now that I've switched to AngularJS, I no longer see the need for jQuery. Unfortunately, I'm facing challenges as my usual sticky footer code doesn't work due to $ being 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>

Is there a way to achieve the same functionality in an Angular-friendly manner?

Check out this plunker: http://plnkr.co/edit/k1EZqwpdXbKhODW4FyeF?p=preview

javascriptangularjsangularjs-scope

Answer №1

Creating a truly sticky footer is actually quite simple:

footer {
  position: fixed;
  bottom: 0;
}

No need for jQuery or Angular, just plain CSS: http://plnkr.co/edit/W6NcqlRDQ4K6XkGSBEJR?p=preview

However, if you want the footer to stick only when there's space between the bottom of the body and the bottom of the window, you'll need to create a wrapper/container for the body (excluding the footer) with 100% height that pushes the footer down. The negative bottom margin on the wrapper should be equal to the height of the footer to prevent it from always being at the bottom of the page. A pseudo-element on the wrapper is used to prevent the footer from overlapping content if the content overflows the body.

Check out this example: http://plnkr.co/edit/FySWHhIBqYGRQhppN7bA?p=preview

This solution adjusts with window resizing and doesn't require any JavaScript.

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

Utilizing Vue: Attaching click event to dynamically added elements

I am working on a Vue application that retrieves HTML content from an API. This HTML contains blocks with the class <div class="play-video">...</div> Using axios to call the API and a promise, I insert the content into the DOM like this: < ...

javascriptvue.js

Information disappearing upon returning to a previous screen

Currently, I am developing a web application using AngularJS and HTML. As part of the application, I created a dashboard on the home screen (referred to as Screen A) that displays a list of clients with a summary. When a client is clicked, it navigates t ...

htmlangularjs

Error encountered in attempting to create an embed using discord.js v14.7.1: TypeError - The value being extended, either undefined or null, is not a valid

The specific problem arises when defining the module export for the HelpCommand class: **module.exports = class HelpCommand extends Command {** The content of the help.js file, without URLs, is as follows: const fs = require('fs'); const { Comma ...

javascriptdiscord.js

How can I iterate through the lines of a JSON file using javascript?

I am currently working with JSON data and need to extract specific information based on an ID. For example, if the ID is 1, I want to retrieve details like service1 and version 1.0. I am looking to create a loop that will iterate through each line of data ...

javascriptmysqlnode.jsjsonexpress

Is there a way to leverage the useSWR hook for making numerous requests simultaneously?

I am attempting to utilize the useSWR hook for multiple calls, but I keep encountering an error message that reads: Cannot read properties of null (reading 'destroy') async function FetchApi(url) { const response = await fetch(url); const ...

javascriptreactjsnext.jsfetch-apiswr

Leveraging OAuth 2 with Google

I'm currently working on implementing Google API for user authentication. I have successfully managed to authenticate users, but I am struggling with redirecting users after Sign In and implementing Sign Out functionality. I have been referring to th ...

javascriptangularoauthgoogle-oauthgoogle-authentication

JavaScript => Compare elements in an array based on their respective dates

I have an array consisting of more than 50 objects. This array is created by concatenating two arrays together. Each object in this array contains a 'date' key with the date string formatted as: `"2017-03-31T11:30:00.000Z"` Additionally, there ...

javascriptarraysangulardictionarytypescript

Incrementing pages, starting with page1.html and continuing to page2.html, page3.html, and beyond, for use with the window

How should I handle this situation? My goal is to automatically navigate to the next page once all necessary functions have been completed. For instance, after all functions on page1.html are finished, it will trigger a function called next_page(). The n ...

javascriptjqueryincrement

Implementing a JavaScript file and ensuring W3C compliance

I recently purchased a template that included a javascript file in the main page with the following code: <script src="thefile.js?v=v1.9.6&sv=v0.0.1"></script> Upon inspection, I noticed there are two arguments at the end of the file ...

javascripthtmlw3c

What measures does Redux take to ensure race conditions do not occur?

Recently, I delved into Redux and grasped the concept very well. However, there is one particular line in the official documentation that puzzled me: Because all changes are centralized and happen one by one in a strict order, there are no subtle race ...

javascriptajaxreactjsreduxrace-condition

Exploring Javascript/JQuery parameters based on data types

I'm a bit confused about whether the title accurately reflects my question. I need help understanding how jQuery deals with functions that are called with different argument combinations, such as ("Some String", true, function(){}) and ("Some String", ...

javascriptjquery

Are there any compatibility issues with uuid v1 and web browsers?

After researching, I discovered that uuid version1 is created using a combination of timestamp and MAC address. Will there be any issues with browser compatibility? For instance, certain browsers may not have access to the MAC address. In my current javaS ...

javascriptnode.jsnpmuuidcompatibility

Easily style Angular directives (whether they are custom or built-in) using the native handle for CSS

In my Angular application, I have directives set up as follows: <!doctype html> <html lang="en" ng-app="cfd"> <head> ... </head> <body> <div class="container"> <!-- Header --> <div ...

htmlcssangularjsangularjs-directive

Displaying a collection of objects in HTML by iterating through an array

As someone new to coding, I am eager to tackle the following challenge: I have designed 3 distinct classes. The primary class is the Place class, followed by a restaurant class and an events class. Both the restaurant class and events class inherit core p ...

javascriptarraystypescriptloops

Encountering a CORS policy error in Three.js when attempting to run locally

I'm just starting out on this website and I'm eager to dive into learning javascript. My initial attempt at following this example from resulted in an error without any animation or background showing up. Instead, all I see is a photo displayin ...

javascriptthree.js3dcors

Difficulty executing for loop due to multiple buttons, resulting in malfunctioning buttons in JavaScript code

Currently encountering an issue while trying to implement modal windows on my first website. Everything works fine without the for loop, but I wanted to have multiple buttons and windows, so I decided to use a for loop to handle each button. Strangely, the ...

javascripthtml

Leverage nearby data using MediaSource

I am currently working on creating a local video player using nwjs (node-webkit). I have successfully played local files by setting their path as the src attribute of the video element. Now, I want to explore using MediaSource and potentially URL.createObj ...

javascripthtmlnode-webkit

obtain a link that is clickable from an array of options

$('button').on('click', function(){ let selection = document.getSelection().toString().trim(); document.execCommand('createLink', true, selection); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery ...

javascriptjqueryexeccommand

The interaction between AngularJS ui-router and OAuth2 access_tokens causes conflicts

I have a front-end built using AngularJS with ui-router. In order to interact with the REST API on the backend, I need to obtain an OAuth2 access token through implicit grant. The issue arises during the final step of the OAuth process, when the access to ...

angularjsoauth

What changes can be made to this function in order for the arches to be positioned directly in front of the camera?

I devised a method that arranges arches in front of a camera, side by side: <!-- HTML --> <a-curvedimage v-for="(value, index) in model" :theta-length="42" :rotation="setThumbsRotation(value, index)"> </a-curvedimage> <a-camera ...

javascriptvue.jsaframe