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

Implementing conditional validation based on radio button selection with the jQuery validation plugin

This topic goes beyond my basic understanding of jQuery. Here is the form I am working on: http://jsfiddle.net/calebo/E5CRU/ First Question: There are 3 radio buttons, and if the user selects 'other', then the input field for 'other' ...

jqueryformsvalidationpluginsinput

Adding new information into a database field through an HTML table

Can anyone help me figure out how to insert data from an HTML table into a MySQL database with the click of a button? Here is what my table looks like: <table> <tr> <th>Name</th> <th>Number</th> </tr> ...

phpmysqlajaxdatabase

Using Next.js for dynamic routing with JSON arrays in getStaticPaths

I am currently facing an issue while trying to incorporate a json file with multiple arrays into my Next.js application. The structure of the json file is quite complex, and I'm unsure about how to convert it into a format that can be effectively util ...

javascriptreactjsnext.js

Stop jQuery from adding duplicate values to a table

When I make an AJAX call using jQuery and PHP to receive JSON response, I am encountering a problem with duplicate values. The code is functioning correctly, but when selecting an option from the drop-down list, duplicate entries appear. The scenario invol ...

javascriptphpjqueryjsonajax

Using jQuery to retrieve an AJAX response and save it into a variable

I am looking to save the data retrieved from into a variable and access info.h. I attempted the following: $.ajax({ async: false, type: "GET", url: "http://www.youtube-mp3.org/a/itemInfo/?video_id=Vd85aPZ-QAE&ac=www& ...

jqueryajaxjsonp

Incorrect ng-pattern does not enable the tooltip to be activated

I have implemented the ng-pattern="/^[0-9]{9}$/" in an input field that appears as follows: <input type="text" id="company_taxId" ng-model="company.taxId" required="required" class="input ng-scope ng-valid-maxlength ng-valid-mi ...

javascriptangularjstwitter-bootstrap

Collapse the accordion when the search query is less than or equal to 0

I'm having trouble making the accordion open both when the user has typed something into the search bar and when someone clicks to open it. I can get them to work individually, but not together. If I use this code: <accordion-group is-open="statu ...

javascriptangularjs

Challenges with parsing JSON using jQuery

I am attempting to retrieve data from a page that returns JSON in order to store it in an array. The current code is functional, but I am encountering difficulties when trying to pass the variable (which should contain the content) into the jQuery.parseJSO ...

javascriptjqueryhtmljson

Use jQuery to switch back and forth between the login and registration forms on a single

I've set up two forms, one for login and one for registration, with the default view showing the login form. There's a link that says "Don't have an account?" and when it's clicked, the registration form will display while the login for ...

javascriptjqueryhtml

The resource being requested is missing the 'Access-Control-Allow-Origin' header - Issue with Pinterest OAuth implementation

While working on implementing OAuth for Pinterest, I successfully retrieved the access code. However, when attempting to perform a GET /v1/me/ request, I encountered an error in the Chrome console: XMLHttpRequest cannot load . No 'Access-Contro ...

javascriptangularjsoauthcorspinterest

An issue occurred while serializing or deserializing, specifically with the JavaScriptSerializer and

I am facing an issue while trying to retrieve images from my database. The process works smoothly with small images, but when attempting to do the same with the default Windows 7 images (Desert, Koala, Penguins, Tulips, etc.), I encounter an error: "Err ...

javascriptc#jsonserialization

How can I dynamically change a key in an object and replace it with a custom name while also updating its value?

Transform this =>>>>> {1: "Baroque", 2: "Glitch Pop ", 3: "Nu Jazz", 4: "Drumfunk", 5: "Bitpop", 6: "Latin Pop", 7: "Carnatic"} into this ==>>>> [{id: 1 name ...

javascriptarraysjsonreactjs

Does the 'span' element negatively impact the vertical alignment of text?

While working on my code, I noticed an issue with vertical alignment when using span tags to change the background of the text based on its content. The problem occurs specifically when viewing the code in the Android Chrome browser. You can view the initi ...

htmlcsstext-alignmenttext-align

What is the best method for creating an HTML table using a JSON object?

Currently, I am in the process of developing an express app that can render a csv file and convert it into a json format. Within my method, I have this json data stored as a variable and my goal is to display it as a table on an HTML page. How can I effect ...

htmlnode.jsjsoncsvexpress

Yet another query about jQuery validation

I need help validating the promoRent field to ensure it contains a number. While this field is not required, if a value is entered, it must be greater than lotRent. Here's the current code snippet: jQuery.validator.addMethod("PRgreaterThanLotRent", ...

jqueryvalidation

`Switching between two buttons: A guide`

Here is the codepin: https://jsfiddle.net/magicschoolbusdropout/dwbmo3aj/18/ I currently have a functionality in my code that allows me to toggle between two buttons. When I click on one button, content opens and then closes when clicked again. The same b ...

javascripthtmljquerycss

Ajax Syntax Error: Unexpected Token U

I have been struggling all day with an issue while trying to send json data via ajax to Express. Here is how my ajax code looks like: $('#saveClause').click(function () { var username = document.getElementById('postUserName').inne ...

javascriptjsonajaxexpress

Is there a way for me to programmatically modify a .env file using an npm script?

Currently, I'm managing a project with a .env file that contains confidential information. One of the key elements in this file is 'STATUS'. Just to clarify, this pertains to a Discord bot, The value assigned to the 'STATUS' var ...

javascriptnode.jspackage.jsondotenv

Does strip_tags() have vulnerabilities to scripting attacks?

Has there been any known XSS or other attack that can bypass the following code snippet? $content = "some HTML code"; $content = strip_tags($content); echo $content; This function does not modify any attributes on the tags that you allow using ...

phphtmlsecurityxssstrip-tags

The ability to scroll horizontally for individual items within a larger container div

JSFIDDLE: http://jsfiddle.net/7zk1bbs2/ If you take a look at the JSFiddle project, you'll notice that the icons are placed inside an orange box. However, there is a vertical scroll needed to browse through them and I am attempting to enable horizont ...

htmlcssscroll