AJAX loading footer content before images are fully loaded

I am a beginner when it comes to ajax and I'm facing an issue where the footer loads before the images, causing the images to overlap the footer. The problem is illustrated in the image below.

<!doctype html>
<html lang="en">
  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c3e3333282f282e3d2c1c69726d726d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css" />     
    <title>Image Gallery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
        $.ajax({
            url: "js/data.json",
            dataType: "json",
            success: function(data)
            {
                $.each(data, function(i,pic){
                    $("ul.gallery").append("<li><img src='images/square/"+ pic.path + "' alt='" + pic.title + "'></li>");
                });
            },
            error: function() {
                console.log("Picture cannot be loaded");
            }
        });
    });
    </script>
    <style>
        .b-footer{
            background-color: #274472; 
            color:white;
        }
        .gallery {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }
        .gallery {
            list-style-type: none;
        }

        .gallery li{
            float: left;
            padding: 30px;
            position: relative;
            overflow: hidden;
        }
    </style>
  </head>
  <body>
    <main class="container">     
        <ul class="gallery">
        </ul>
    </main>
    <footer class="text-center p-4 b-footer">
        This is a footer
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb justify-content-center">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item"><a href="#">About</a></li>
                    <li class="breadcrumb-item"><a href="#">Contact</a></li>
                    <li class="breadcrumb-item"><a href="#">Browse</a></li>
                </ol>
            </nav>
        </div>
    </footer> 
  </body>
</html>

https://i.stack.imgur.com/J6X17.jpg

Is there anyone who can provide me with a solution on how to ensure that the footer is loaded after the images are loaded, so they don't overlap? A correct code implementation would be greatly appreciated.

javascripthtmljquerycssajax

Answer №1

If you're experiencing issues with ajax, it may actually be a footer CSS problem. Here's a solution that should help - just replace your current footer CSS with the code below:

.b-footer{
                background-color: #274472; 
                color:white;
                position: absolute;
                 bottom: 0;
                width: 100%;
            } 


<!doctype html>
<html lang="en">
  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="01636e6e75727573607141342f302f30">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css" />     
    <title>Image Gallery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="781a17170c0b0c0a1908384d5649564a">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function(){
         $("ul.gallery").append("<li><img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQtfeR2gr_Z2U5rNiTKieMXMM9ZY96GbKUQQg&usqp=CAU'></li>");
        $.ajax({
            url: "js/data.json",
            dataType: "json",
            success: function(data)
            {
              
                   
             
            },
            error: function() {
                 
            }
        });
    });
    </script>
    <style>
        .b-footer{
            background-color: #274472; 
            color:white;
            position: absolute;
                bottom: 0;
                   width: 100%;
        }
        .gallery {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }
        .gallery {
            list-style-type: none;
        }

        .gallery li{
            float: left;
            padding: 30px;
            position: relative;
            overflow: hidden;
        }
        .clearfix::after { 
    content: ""; 
    clear: both; 
    display: block; 
}
    </style>
  </head>
  <body>
    <main class="container">     
        <ul class="gallery">
        </ul>
    </main>
    <footer class="text-center p-4 b-footer">
        This is a footer
        <div id="footer">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb justify-content-center">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item"><a href="#">About</a></li>
                    <li class="breadcrumb-item"><a href="#">Contact</a></li>
                    <li class="breadcrumb-item"><a href="#">Browse</a></li>
                </ol>
            </nav>
        </div>
    </footer> 
  </body>
</html>
  </body>
</html>

Note:- for proper results see in full page.

Answer №2

Your footer design can be improved by adding a clearfix class to your main container. This is necessary because all your list items are set to float left, causing the footer to overlap the main container.

.clearfix::after { 
    content: ""; 
    clear: both; 
    display: block; 
}

IN SUMMARY

The clearfix is a CSS hack that addresses an issue when two floated elements are positioned next to each other. When elements are floated like this, the parent container's height becomes 0, which can cause layout problems.

Learn more about clearfix here.

Answer №3

Implement this code snippet on your website

<!doctype html>
<html lang="en">
  <head>

    <meta charset="utf-8>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c0e0303181f181e0d1c2c59425d425d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css" />     
    <title>Image Gallery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
        $.ajax({
            url: "js/data.json",
            dataType: "json",
            success: function(data)
            {
                $.each(data, function(i,pic){
                    $("ul.gallery").append("<li><img src='images/square/"+ pic.path + "' alt='" + pic.title + "'></li>");
                });
            },
            done: function() {
                $("#footer").show();
            },
            error: function() {
                console.log("Picture cannot be loaded");
            }
        });
    });
    </script>
    <style>
        .b-footer{
            background-color: #274472; 
            color:white;
        }
        .gallery {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }
        .gallery {
            list-style-type: none;
        }

        .gallery li{
            float: left;
            padding: 30px;
            position: relative;
            overflow: hidden;
        }
    </style>
  </head>
  <body>
    <main class="container">     
        <ul class="gallery">
        </ul>
    </main>
    <footer class="text-center p-4 b-footer" id="footer" style="display:none;">
        This is a footer
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb justify-content-center">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item"><a href="#">About</a></li>
                    <li class="breadcrumb-item"><a href="#">Contact</a></li>
                    <li class="breadcrumb-item"><a href="#">Browse</a></li>
                </ol>
            </nav>
        </div>
    </footer> 
  </body>
</html>

Answer №4

To solve this issue, just eliminate the current styles for .gallery li and insert the following:

.gallery li {
    display: inline-block;
    padding: 30px;
    position: relative;
    overflow: hidden; }

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

Error: Ajax request is not receiving the expected data

After sending an AJAX request to my server in order to create a new entry in the database and retrieve the id of that entry, I am encountering an issue where the console is displaying 'response' as undefined. Can anyone provide insight into why t ...

phpajax

What is the best way to guide the user to a different page with PHP once the preventDefault() function in jQuery has been utilized on a

My approach to form validation involves using jQuery, AJAX, and PHP on my website. I utilize PHP for the actual input validation process as I believe it is more secure and prevents users from manipulating scripts through browser source code inspection. Add ...

javascriptphpjqueryajax

Comparison of utilizing PHP within CSS versus Implementation through JavaScript [General]

Curious about the incorporation of PHP in CSS, especially in relation to my current Wordpress Theme project. I am aiming for high levels of customization and have been using a JS file to change CSS Properties through PHP. However, I'm not entirely con ...

javascriptphphtmlcsswordpress

Automatically adjust the tooltip's position if it extends beyond the width of the browser

I am looking for a way to ensure that when the tooltip width exceeds the browser's viewable area, it will automatically reposition itself so that the content can be fully viewed. It is important that the tooltip does not overlap on the referenced div ...

jquerycss

What steps should one take to address issues related to Datatables in Laravel and Vue?

I encountered an issue while trying to fetch data into a datatable in Laravel. I am receiving an error message stating "Uncaught ReferenceError: $ is not defined" on the console of the page. Is there a solution to resolve this problem? index.blade.php ...

javascriptlaravelvue.jsdatatable

What could be causing the spinner (Bootstrap 5.x) to not show up on the screen

I'm having trouble getting a spinner to show up when a user clicks a form submit button. Below is the HTML code to add a <div> for the spinner: <div class="pageloader"> <img src="../images/loader-large.gif" alt ...

cssjquery-uibootstrap-5

Tips for organizing divs once another div has been hidden using jquery

I am working towards implementing a live result filter feature. There are three filters available: Good fit, bad fit, and scheduled. When the "Good fit" filter is clicked, it should display panels with the class "good_fit_panel". Let's assume there ar ...

javascriptjquery

Creating a canvas texture on tube geometry with three.js for optimal display on iPad devices

I have a 3D model of a tube geometry with 18000 coordinates on the production side. To simplify, I am selecting every 9th coordinate to plot 9000 coordinates for building the tube geometry using only the CanvasRenderer. When utilizing vertexColors: THREE. ...

javascriptjsonipadhtml5-canvasthree.js

Incorporating Button Value from Anchor Tag Title Upon Page Load

Currently, I am working on a real estate project and facing an issue with a contact modal box. My goal is to extract the title from tag "a" and place it as the button value in the modal box. English isn't my strong suit, so please excuse any errors i ...

javascriptjqueryhtml

Cart cannot function as a constructor

I'm currently learning express.js and trying to implement a shopping cart/session functionality into my project. Below is the code I have written so far, with a question at the end. Here is my cart.js: // Ensure that the file is required correctly b ...

javascriptexpress

Creating an infinite loop of SVG rectangles pulled from a database

As I extract svg rectangles from a database using Python, I find myself hardcoding the process in order to change the colors of each rectangle in my CSS style sheet. With potential scalability issues in mind - if there were 100 rectangles - I am wondering ...

pythoncssmysqlsvg

What is preventing JSFiddle from displaying this object?

I'm currently experimenting with objects in Angular. While using JSFiddle to define some JSON objects in an Angular controller, I've encountered a problem - it's not working and I can't seem to figure out why. Can someone with fresh ey ...

javascriptjsonangularjs

Troubleshooting: jQuery Orientation Change Issue Unresolved

Below is the code snippet I am using: jQuery(window).on("orientationchange",function(){ var maxHeight = -1; jQuery('.article .articleHead').each(function() { maxHeight = maxHeight > jQuery(this).height() ? maxHeight : jQuery(this). ...

jqueryorientationscreen-orientationdevice-orientation

Utilize Web3.js to interact with a specific function in a deployed smart contract on the Ethereum blockchain from a React application

I am attempting to execute the transferMargin() function from the Synthetix Contract on Optimism Kovan using react/javascript (web3.js) and Metamask. I am encountering an issue where I am unable to successfully trigger the transferMargin function upon a Bu ...

javascriptreactjssolidityweb3js

What could be causing my Time Picker MUI to malfunction in my React project?

I am currently working on a React and Rails project where I am attempting to style my React components. However, I have encountered an issue with the MUI component Time and Date picker. Whenever I try to implement the time picker, I get a strange error reg ...

cssreactjsmaterial-ui

Issue with updating Angular list reference when deleting an item

My current task involves implementing a feature that displays selected items from a hierarchical structure on the right side. slice.component.ts : import { Component, Input, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core&a ...

javascripthtmlangularlisttypescript

Problem encountered with AngularJS html5mode URL functionality

I am encountering an issue with my AngularJS application that does not contain any nodeJS code. The problem lies in removing the # from the URL and I have implemented ui-routes for routing. 'use strict'; var app = angular.module('myapp&apos ...

javascriptangularjsangular-routinghtml5mode

What is the process for changing CORS origins while the NodeJS server is active?

Currently, I am in the process of modifying the CORS origins while the NodeJS server is operational. My main goal is to replace the existing CORS configuration when a specific user action triggers an update. In my attempt to achieve this, I experimented w ...

javascriptnode.jsexpresscors

When the text is in motion, the ::before element will stay static

I'm working on creating a unique custom SVG underline for a header design. My goal is to achieve something similar to this: Here's what my code currently looks like: HTML: <div class="container"> <div class="row" ...

htmlcssbootstrap-4bootstrap-5

When it comes to utilizing the method ".style.something" in JavaScript

Here is some javascript code that I am working with: function createDiv(id){ var temp = document.createElement('div'); temp.setAttribute("id", id); document.getElementsByTagName('body')[0].appendChild(temp); } c ...

javascriptcsshtml