Below is the footer code I am working with.
<div class="row">
<div class="col-md-12">
<div> this section always remains at the bottom </div>
</div>
<div class="col-md-12">
<div> only visible once user scrolls to the bottom of the page </div>
</div>
</div>
I am struggling to keep my footer anchored to the bottom of the page until the user reaches the end, at which point additional content should appear.
Using just CSS, you have the option to transform it into two footers - one that pops and another that's a bit more mundane ;)
[id^=foo]{
background:orange;
padding:5px;
font-size:25px;
}
#foo-boring{
position:fixed;
bottom:0;
right:0;
left:0;
}
#foo-pop{
position:absolute;
height:70px;
right:0; left:0;
}<div>SCROLL ME DOWN<br>much contents there.<br> much...END.</div>
<div id="foo-pop"><b>POP!1!!!1!!1!11!</b></div>
<div id="foo-boring">The boring footer.</div>Looking for a solution with Javascript? Check out the code snippet below:
$(document).ready(function() {
$('#footer-final').hide()
});
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
$('#footer-inter').hide()
$('#footer-final').show()
}
});
If you've already implemented CSS to fix the footer at the bottom of the page (using position:fixed; bottom=0;), you can customize this code to hide the intermediate footer and display any content you'd like when the user reaches the bottom of the page.
Check out this handy code snippet that keeps track of the scroll position and compares it to the overall height of the page. Once you reach the bottom, you can trigger any desired actions :).
window.addEventListener('scroll', function () {
console.log('scroll: ' + (window.innerHeight + window.scrollY));
console.log('height: ' + document.body.offsetHeight);
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
console.log('You've reached the bottom!');
}
});
I have created the following script, but I am facing a challenge as I realize that the URL I want to use opens in a new tab instead of just forwarding: <script> function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.sp ...
I am currently revamping an outdated webpage that pulls data from a database. My main objective is to implement the functionality to let users narrow down their search by selecting certain values. To achieve this, I have developed a dynamic dropdown list ...
I'm currently working on a React lightbox that is supposed to display a loop of objects containing images and text. However, I'm facing an issue where the images are not showing up with the corresponding text label as intended. It seems like I a ...
Currently, I am developing a map application where I want the Google Maps DIV to occupy the remaining height under the header. Here is the code snippet: <!DOCTYPE html> <head> <title>Map Application</title> <style type ...
After exploring the autocomplete API from https://material-ui.com/api/autocomplete/, I am unable to figure out a way, given my basic understanding of javascript, to restrict the display of a specific number of options beneath the TextField. I am working o ...
Can the scenario below be achieved? Here is the ajax response I received: HTML <body> <input type="text"></input> <div id="trydiv"></div> </body> JS $.ajax({ type: "POST", url: "json.php", ...
Being a beginner in javascript, I am eager to learn new techniques. I am currently working on implementing an infinite Ajax scroll into my code. Here is a snippet from my php page: <div class="row row-sm padder-lg "> <?php foreach ($top->fee ...
I am attempting to collapse a pre-existing Sidebar within an Angular project. The Sidebar is currently set up in the app.component.html file, but I want to transform it into its own component. My goal is to incorporate the following JS function into the s ...
I am facing an issue with my ng-repeat loop where I have a comment input inside it. The problem is that when I start typing in the first input, the text appears simultaneously in all other inputs as well. I have tried adding a unique ID but it didn't ...
My goal is to disable the responsive features of bootstrap when the event javascript:print() is triggered. This way, I want my webpage to maintain the column grid layout that I have defined, regardless of screen size. One solution suggested in this answer ...
How can I resize an image within a canvas using JQuery in a way that only the image is resized, not the entire canvas? function resizeImage(width, height){ var image = document.getElementById('resizeImage'), canvas = document.createEleme ...
My goal is to create a messaging application where users can view a list of their recent messages, along with a preview of the latest message received/sent, before selecting a conversation. However, I'm facing an issue with my script that displays all ...
I'm encountering an issue with running jest to execute its test suite on .jsx files within my Expo project. Here is my babel.config.js: module.exports = function (api) { api.cache(true); return { presets: ['babel-preset-expo'], }; ...
I encountered an issue with my multiple image upload function that includes preview and remove options. When I select 4 images and preview them correctly, removing 2 from the preview still results in uploading all 4 images to the database. $(document).rea ...
Recently, I've been experimenting with utilizing ES6 features in Express. Interestingly, I discovered that Nodejs now has built-in support for es6, eliminating the need for babel to transpile my code. Here's a snippet from my app.js file: &apos ...
Currently, I am developing a website that allows users to create presentations. One of the website's features is the ability to export presentations in SCORM format (either 1.2 or 2004). This is my first time working with SCORM and I am currently impl ...
I am having issues sending canvas data to the server side as an image. Despite making an HTTP post request, I am unable to retrieve the data on the server side. $_POST remains empty, even though I can see the image data when console logging the object on t ...
After tirelessly searching the vast expanse of the internet for a solution to my dilemma and trying every method I stumbled upon, I am still facing the same issue. The problem arises when I attempt to access a .php file in a subdirectory from another file ...
On my page, I have various checkboxes - some with hidden=true and others with hidden=false attributes. Despite trying to use a selector or jQuery to locate checkboxes with the hidden property, I am still facing some challenges. My goal is to differentiate ...
I recently integrated the i18n plugin into my existing Vue project to add localization. After following all the installation instructions from various sources (such as here), I made sure that each locale has its own file under /src/locales with the correct ...