Footer loading before images are loaded using ajax - javascript

I am new to ajax I want to load images first and then footer but when I am trying to load the images using ajax the footer gets loaded first instead of the images which makes the image overlap the footer. As you can see in the below image.
<!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/bootstrap#5.1.1/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">Home</li>
<li class="breadcrumb-item">About</li>
<li class="breadcrumb-item">Contact</li>
<li class="breadcrumb-item">Browse</li>
</ol>
</nav>
</div>
</footer>
</body>
</html>
Can anyone help me out with how to resolve this issue like how to make the footer to be loaded later after the images are loaded? A correct code can help me.

It's not an ajax issue you just need to add proper footer CSS here is working solution of your problem just replace footer CSS with this
.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/bootstrap#5.1.1/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/bootstrap#5.1.2/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">Home</li>
<li class="breadcrumb-item">About</li>
<li class="breadcrumb-item">Contact</li>
<li class="breadcrumb-item">Browse</li>
</ol>
</nav>
</div>
</footer>
</body>
</html>
</body>
</html>
Note:- for proper results see in full page.

I think your footer would be fine if you added a clearfix class to your main container. The reason is that all your li's are float left so your footer will overlap the main container.
.clearfix::after {
content: "";
clear: both;
display: block;
}
SUMMARY
The clearfix, for those unaware, is a CSS hack that solves a
persistent bug that occurs when two floated elements are stacked next
to each other. When elements are aligned this way, the parent
container ends up with a height of 0, and it can easily wreak havoc on
a layout.
https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/

Try this in 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/bootstrap#5.1.1/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">Home</li>
<li class="breadcrumb-item">About</li>
<li class="breadcrumb-item">Contact</li>
<li class="breadcrumb-item">Browse</li>
</ol>
</nav>
</div>
</footer>
</body>
</html>

The simple answer is to remove existing styles for .gallery li and add the below
.gallery li {
display: inline-block;
padding: 30px;
position: relative;
overflow: hidden; }

Related

I started working before giving the function at JS

I just put some JavaScript code for show nav. I mean when I click my navbar icon then show my all nav item. Yeah! perfectly this working, then I need again 2nd time when I click navbar icon then automatic should will remove nav all item by Javascript function remove code. that's is rules. but still i not giving any remove Javascript function code for remove navbar item. But working without remove Javascript function code. So my Question how this remove working Without code.
It(navbar) will only work below 768px in browser display size.
Sorry for double text for publishing my question.
I just put some JavaScript code for show nav. I mean when I click my navbar icon then show my all nav item. Yeah! perfectly this working, then I need again 2nd time when I click navbar icon then automatic should will remove nav all item by Javascript function remove code. that's is rules. but still i not giving any remove Javascript function code for remove navbar item. But working without remove Javascript function code. So my Question how this remove working Without code.
It(navbar) will only work below 768px in browser display size.
// MENU SHOW
const first = document.getElementById('nav-toggle')
const second = document.getElementById('nav-menu')
first.addEventListener('click',()=>{
second.classList.toggle('show')
} )
<!-- begin snippet: js hide: false console: true babel: false -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Commerce Responsive Website</title>
<link rel="stylesheet" href="./style.css">
<!-- Box icon -->
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header class="l-header" id="header">
<nav class="nav bd-grid">
<div class="nav__toggle" id="nav-toggle">
<i class="bx bxs-grid"></i>
</div>
Shohel
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">Home</li>
<li class="nav__item">Featured</li>
<li class="nav__item">Women</li>
<li class="nav__item">New</li>
<li class="nav__item">Shop</li>
</ul>
</div>
<div class="nav__shop">
<i class="bx bx-shopping-bag"></i>
</div>
</nav>
</header>
<script src="./script.js"></script>
</body>
</html>
}
html{
scroll-behavior: smooth;
}
body{
margin: var(--header-height) 0 0 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
font-weight: var(--font-meduim);
color: var(--dark-color);
line-height: 1.6;
}
h1,h2,h3,p,ul{
margin: 0;
}
ul{
padding: 0;
list-style: none;
}
a{
text-decoration: none;
color: var(--dark-color);
}
img{
max-width: 100%;
height: auto;
display: block;
}
/* Class Css */
.section{
padding: 5rem 0 2rem;
}
.section-title{
position: relative;
font-size: var(--big-font-size);
margin-bottom: var(--mb-4);
text-align: center;
letter-spacing: .1rem;
}
.section-title::after{
content: '';
position: absolute;
width: 56px;
height: .18rem;
top: -1rem;
left: 0;
right: 0;
margin: auto;
background-color: var(--dark-color);
}
/* Layout */
.bd-grid{
max-width: 1024px;
display: gird;
grid-template-columns: 100%;
column-gap: 2rem;
width: calc(100%-2rem);
margin-left: var(--mb-2);
margin-right: var(--mb-2);
}
.l-header{
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: var(--z-fixed);
background-color: var(--dark-color-lighten);
}
/* nav */
.nav{
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
#media screen and (max-width:768px) {
.nav__menu{
position: fixed;
top: var(--header-height);
left: -100%;
width: 70%;
height: 100vh;
padding: 2rem;
background-color: var(--white-color);
transition: .5s;
}
}
.nav__item{
margin-bottom: var(--mb-4);
}
.nav__logo{
font-weight: var(--font-semi-bold);
}
.nav__toggle, .nav__shop{
font-size: 1.3rem;
cursor: pointer;
}
.show{
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Commerce Responsive Website</title>
<link rel="stylesheet" href="./style.css">
<!-- Box icon -->
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header class="l-header" id="header">
<nav class="nav bd-grid">
<div class="nav__toggle" id="nav-toggle">
<i class="bx bxs-grid"></i>
</div>
Shohel
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">Home</li>
<li class="nav__item">Featured</li>
<li class="nav__item">Women</li>
<li class="nav__item">New</li>
<li class="nav__item">Shop</li>
</ul>
</div>
<div class="nav__shop">
<i class="bx bx-shopping-bag"></i>
</div>
</nav>
</header>
<script src="./script.js"></script>
</body>
</html>

Add button or one div on webgl Canvas

I'm new to this topic and I have an index.html file and there I want to use three.js
this is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="./style.css"></link>
</head>
<body>
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
<canvas class="webgl"></canvas>
<script src="../libs/three.js"></script>
<script src="../libs/three.min.js"></script>
<script src="../libs/stats.min.js"></script>
<script src="../libs/OrbitControls.js"></script>
<script type="module" src="./main.js"></script>
</div>
</body>
</html>
I also try this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="./style.css"></link>
</head>
<body>
<canvas class="webgl"></canvas>
<script src="../libs/three.js"></script>
<script src="../libs/three.min.js"></script>
<script src="../libs/stats.min.js"></script>
<script src="../libs/OrbitControls.js"></script>
<script type="module" src="./main.js"></script>
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
</div>
</body>
</html>
and my css file :
* {
margin: 0;
padding: 0;
}
html,
body {
overflow: hidden;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04aa6d;
color: white;
}
.webgl {
position: fixed;
top: 0;
left: 0;
outline: none;
}
My problem is that div for menubar didn't show in front of the canvas.
what should I do?
Thanks.
Transform your HTML into something like below:
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
</div>
<canvas class="webgl"></canvas>
<!-- script tags -->
then remove position, left and top properties from webgl class.

CSS Background Image not working on Local

Sorry for the basic question I have this problem when im trying to display my background image using background-image:url() on the css but unfortunately it doesnt work and when i use the content:url(); it works.
And also background-image also works with a url image location from the internet. I have tried everything and research a lot but still no luck. Sorry for the newbie question.
*{
box-sizing: border-box;
padding: 0;
margin: 0;
background-color: #e2dfe3;
}
.logo{
height: 80px;
width: 80px;
display: inline-block;
cursor: pointer;
background-image: url('./images/Logo.png');
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>Practice</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<header>
<div class="logo">
</div>
<nav>
<ul class="nav-ul">
<li> <a href="#">Homes</li>
<li> <a href="#">About</li>
<li><a href="#">Shop</li>
</ul>
</nav>
<a class="nav-button" href="#"></a><button>Login</button>
</header>
It works now. I added property background-size: contain;
.logo{
height: 80px;
width: 80px;
display: inline-block;
cursor: pointer;
background-image: url('./images/Logo.png');
background-size: contain;
}
You were missing the <body> tag.
(Its a good job you're not a mortician.)
*{
box-sizing: border-box;
padding: 0;
margin: 0;
background-color: #e2dfe3;
}
.logo{
height: 80px;
width: 80px;
display: inline-block;
cursor: pointer;
background-image: url('https://dummyimage.com/80x80/000/fff');
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>Practice</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<body>
<header>
<div class="logo"></div>
<nav>
<ul class="nav-ul">
<li> Homes</li>
<li> About</li>
<li>Shop</li>
</ul>
</nav>
<a class="nav-button" href="#"><button>Login</button></a>
</header>
</body>
</html>
I just copy your code and place in a file structure like this
And it works.
Absolute path like this also worked well:
background-image: url('C:/Users/User/Documents/test/images/logo.png');

Javascript Hamburger menu firing but invisible?

I created a responsive Hamburger menu using javascript, which seems to be firing properly, the only problem is that the drop down menu and anchors are completely invisible when I "open" the menu despite being present in the Chrome Inspector (ie when i select a list item/anchor element in the inspector, an area where I should see the item is highlighted, but there's nothing there!)
I thought it could be the image/text in the next container concealing the elements, but I made a fresh .html with only the nav elements present and when I viewed that in the browser, same problem.
#media only screen and (max-width: 660px) {
.icon {
display: inline-block;
color: black;
position: absolute;
right: 2rem;
}
nav {
position: relative;
height: 4rem;
}
.nav-links {
display: none;
position: absolute;
top: 4rem;
left: 0;
background-color: #63B4C9;
width: 100%;
padding: 0.5rem;
box-sizing: border-box;
}
.nav-links li a {
display: block;
padding: 0.5rem;
text-align: center;
}
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Arapey|Homemade+Apple|Fira+Sans" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Starter Files</title>
</head>
<body>
<nav id="theNav" class="nav">
<img src="images/logo.svg" class="logo">
<i class="fa fa-bars"></i>
<ul class="nav-links">
<li>Classes</li>
<li>FAQ</li>
<li>Planting Info</li>
<li>Contact</li>
</ul>
</nav>
<script>
$(".icon").click(function(){
$(".nav-links").slideToggle();
});
</script>
</body>

Behavior change when declaring style in-line vs class

I'm simply trying to display a grid of boxes with each box having information about a dog breed. My problem is this: There appears to be a difference in behavior when I declare a style in-line vs the same style in a class. I'm confused why there is a difference, when there shouldn't be any as far as I know.
Here is the code behaving properly: http://imgur.com/a/z2b5c
This occurs with the code below. The code to note are the dogDisplay class declared in style, and the div of class dogDisplay in the body. The div has an in-line style="position:absolute".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.dogDisplay {
display: inline-block;
width: 300px;
height: 300px;
margin: 10px;
background-color: grey;
}
.dogName {
font-size: 20px;
text-align: center;
}
.img {
width: 200px;
height: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}
.content {
background-color: red;
}
</style>
</head>
<script>
//This just loads the dog information from a JSON file
var dogInfo = [];
function displayInfo(dogBreeds) {
$("#container").append("<div class='dogDisplay'></div>");
}
window.onload = function() {
$.getJSON("breeds.json", function(json) {
var i;
console.log(typeof(json.dogBreeds));
dogInfo = json.dogBreeds;
displayInfo(json.dogBreeds);
})
}
</script>
<body>
<div class="well" style="height:300px"></div>
<div id="container" class="container" style="width:100%;background-color:lightblue;border:black 2px solid;">
<div class="dogDisplay" style="position:absolute">
<div class="content">
<p class="dogName">Dog Name</p>
<img class="img" src="images/place-holder.jpg" alt="Place-holder">
</div>
</div>
</div>
</body>
HOWEVER. When moving style="position:absolute" into the dogDisplay class, this is the new behavior: http://imgur.com/a/sv3Oh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.dogDisplay {
display: inline-block;
width: 300px;
height: 300px;
margin: 10px;
background-color: grey;
position: absolute;
}
.dogName {
font-size: 20px;
text-align: center;
}
.img {
width: 200px;
height: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}
.content {
background-color: red;
}
</style>
</head>
<script>
var dogInfo = [];
function displayInfo(dogBreeds) {
$("#container").append("<div class='dogDisplay'></div>");
}
window.onload = function() {
$.getJSON("breeds.json", function(json) {
var i;
console.log(typeof(json.dogBreeds));
dogInfo = json.dogBreeds;
displayInfo(json.dogBreeds);
})
}
</script>
<body>
<div class="well" style="height:300px"></div>
<div id="container" class="container" style="width:100%;background-color:lightblue;border:black 2px solid;">
<div class="dogDisplay">
<div class="content">
<p class="dogName">Dog Name</p>
<img class="img" src="images/place-holder.jpg" alt="Place-holder">
</div>
</div>
</div>
</body>
Why is there a difference? Thank you!
In your first example, this line:
$("#container").append("<div class='dogDisplay'></div>");
Conflicts with the starting layout:
<div class="dogDisplay" style="position:absolute">
Meaning only the initial .dogDisplay will have the absolute positioning. In the second example, all of them will have the absolute positioning.

Categories