Make an extensible footer - javascript

I would like to make a footer that is similar to the footer of JavaScript column of JSBin in case of error:
(Before expanding)
(After expanding)
Precisely, it satisfies:
1) it is always at the bottom of the page, no matter how big the main body (that raises the error) is
2) It can be expanded when users click on it, and be collapsed back...
I have written the following code (JSBin), which shows the footer, and cannot be collapsed.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
#footer {
background-color: #FA8072;
width: 100%;
position: fixed;
bottom: 0px;
}
</style>
</head>
<body class="ms-font-m">
the body
<div id="footer">
footer_line_1<br>footer_line_2<br>footer_line_3
</div>
</body>
</html>
Does anyone know how to make it extensible and collapsable?
PS: I also list the css files I have to use for other purposes, they might be useful...

Yes. You can expand and collapse by using toggle() function.
$("#show").click(function() {
$("#shoowDiv").toggle(500);
});
#footer {
background-color: #FA8072;
width: 100%;
position: fixed;
bottom: 0px;
}
#shoowDiv{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body class="ms-font-m">
the body
<div id="footer">
<p id='show'>3 errors</p>
<p id='shoowDiv'>
footer_line_1
<br>footer_line_2
<br>footer_line_3</p>
</div>
</body>
the reason why toggle functionality slow is i mentioned the seconds for that like this
$("#shoowDiv").toggle(500);
If you want it to be fast, you can change the seconds
Here is the jsFiddle

If your number of errors is about to get big, you can add scroll support, so that footer wont cover all of your page - JSFiddle
$("#show").click(function() {
$("#shoowDiv").toggle(500);
});
#footer {
background-color: #FA8072;
width: 100%;
position: fixed;
bottom: 0px;
}
#shoowDiv{
display:none;
max-height: 100px;
overflow-y: auto;
}
#show{
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body class="ms-font-m">
the body
<div id="footer">
<p id='show'>7 errors</p>
<div id='shoowDiv'>
<ul>
<li>Issue #1</li>
<li>Issue #2</li>
<li>Issue #3</li>
<li>Issue #4</li>
<li>Issue #5</li>
<li>Issue #6</li>
<li>Issue #7</li>
</ul>
</div>
</div>
</body>

Related

How do I make multiple slideshows on same page in HTML?

I am trying to have multiple slideshows of two images on a page; those two images are different for all rows. I have tried following multiple solutions on StackOverflow, like this and it's almost working fine but the display is a bit weird, the second image in the slideshow gets shown below the first image for a moment before it comes over the first image. I have attached a GIF file of the same:
Here's my code for the same:
<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="./style.css"> -->
<!-- icons -->
<script src="https://kit.fontawesome.com/a7e5305de0.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans&display=swap" rel="stylesheet">
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<title>Autoencoder Results</title>
<style>
#slideshow {
margin: 0px auto;
position: relative;
width: 256px;
height: 256px;
}
#slideshow > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<center><h1>Autoencoder Results</h1></center>
<h2 style="margin-left: 1.5%;">Reconstructed Training Images</h2>
{% for i in range(len(training_images_list)) %}
<br>
<br>
<h3 style="margin-left: 10%;">{{ i+1 }}.</h3>
<center><table border="1">
<COLGROUP>
<COL width="100"><COL width="100">
<THEAD>
<tr>
<td><center><b>Input<b></center><img src={{ training_images_list[i] }} alt="Sorry, No Display!" border="0"/></td>
<td><center><b>Reconstructed<b></center><img src={{ reconstructed_training_images_list[i] }} alt="Sorry, No Display!" border="0"/></td>
<td><center><b>Flip-Test<b></center><div class="slideshow"><div>
<img src={{ training_images_list[i] }}>
</div>
<div>
<img src={{ reconstructed_training_images_list[i] }}>
</div>
</div></td>
</tr>
</table></center>
{% endfor %}
<script>
$.each($(".slideshow > div:not(:first-child)"), function() {
$(this).hide();
});
setInterval(function() {
$.each($(".slideshow"), function() {
$(this).children().first()
.fadeOut(200)
.next()
.fadeIn(200)
.end()
.appendTo(this);
});
}, 1500);
</script>
</body>
I've tried changing the duration and some position attributes, but none of that's correcting this behaviour, where am I going wrong exactly?
I didn't get your problem totally but I have seen two major errors in the code.
First thing is that you have your divs with the Class of slideshow but when you are calling them in styles you are calling the id. to fix this you can just write instead of:
<style>
#slideshow {
margin: 0px auto;
position: relative;
width: 256px;
height: 256px;
}
#slideshow > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
</style>
You can write:
<style>
.slideshow {
margin: 0px auto;
position: relative;
width: 256px;
height: 256px;
}
.slideshow > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
</style>
The second thing that I have noticed is that (I might be wrong because of the ambiguity of the problem) you want your images to be on a single row. but with the js template inside your HTML body, you are creating a table for each value in the array. This is logic and I do not know exactly what you are looking for, but this hint might help you.
You can comment for any further changes.

Footer loading before images are loaded using ajax

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; }

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');

CSS refuses to display on my page. Directory Issue? WebPack?

I'm sure its something simple but I've googled way too many different solutions to know where i went wrong now.
I plan to make this a full site in good time but i am still fresh. Any help is appreciated. Here's the header and nav followed by css I've been tinkering with
/*General Styles*/
body{
padding: 0;
margin: 0;
background-color: #007bff;
}
header nav #left{
background: #0f6674;
color: #f2f2f2;
padding-top: 50px;
min-height: 70px;
border-bottom: #c82333;
}
header nav {
color: #f2f2f2;
text-decoration: none;
font-size: 14px;
}
header ul{
padding: 0;
margin: 0;
}
header li{
float: left;
display: inline;
padding: 0 20px 0 20px;
}
/*Positions Container*/
.container{
position:relative;
width: 80%;
margin: auto;
overflow: hidden;
}
:
<!doctype HTML>
<html>
<head>
<title> Artistic Audio & Visual D.C. </title>
<meta name="description" content="Distributed Home Systems"/>
<meta name = "author" content ="Elishua S. Brown"/>
<meta name="authorURL" content="http://www.artavdc.com/index.html"/>
<!--Mobile Specific-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Internet Explorer-->
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'/>
<!--Bootstrap-->
<link href="bootstrap.css" rel="stylesheet"/>
<!-- Reset page styles & Add Custom Styles-->
<link href="Styles.css" rel="stylesheet" />
<link href="Reset.css" rel="stylesheet" />
<script src="Homepage.js"> </script>
<title> Artistic Audio/Visual | Welcome! </title>
</head>
<body>
<header>
<!--Navigation Bar-->
<!--Add Logo to SRC-->
<img src= "src/img/Artav-logo-w.jpg" id="logo" alt="" />
<div id= NavBarImg"></div>
<nav>
<ul id="left">
<h1>You Imagine It, We Create It</h1>
<li>Artistic Home</li>
<li>Audio Installation</li>
</ul>
<ul id="right">
<li><input type="search" id="navSearch" placeholder="Search"></li>
<h2>Subscribe to Recieve Special Offers & Updates</h2>
<form>
<input type="text" placeholder="Company Name.."/>
<input type="email" placeholder="Email.."/>
<button type="submit">Subscribe</button>
</form>
<!--Add link to Appointment Request Form-->
<li>Request Appointment</li>
</ul>
</nav> <!--End Nav-->
To my knowledge, I've closed and used all tags properly. It must be something fairly simple, I'm not really sure.
You should use ./Reset.css when you want to include files that are in the same directory.
If your files are in another directory you should use ./css/Reset.css.
Also be aware that your files should be named with uppercase if you want it to work.
Based on your paths that you have left in comments you should include them like this:
./src/CSS/Styles.css

Jquery slide plugin text on image

I'm using slider plugin: owlcarousel2. The problem that i want the text to be on the picture not in next slide. I want also the div tag to group elements, not to be ignored.
<html>
<link rel="stylesheet" href="owl.carousel.min.css">
<link rel="stylesheet" href="owl.theme.default.min.css">
<script src="jquery.js"></script>
<script src="owl.carousel.min.js"></script>
<head>
<style>
*{margin:0;padding:0;overflow:hidden}
img{
width:100vw;
height:100vh;
}
p{
background-color:black;
opacity:0.7;
z-index:9999
}
</style>
<div class="owl-carousel">
<div>
<img src='img.jpeg' alt='Hi!'></a>
<p class='text'>hi</p>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:false,
items:1,
center:true
})
});
</script>
</html>
Your javascript is fine, but there are some other mistakes that prevent it from working. I'll walk you through it. First, close your <head> and wrap the carousel in <body> tags. Remove the rogue </a> after the slide image and the unnecessary </div> located just before the script at the bottom.
To get the text on top of the image you can set an absolute position on the paragraph element and a relative position on it's parent.
Here's what your code should look like after these adjustments:
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: false,
items: 1,
center: true
});
});
* {
margin: 0;
padding: 0;
overflow: hidden;
}
.slide {
position: relative;
}
img {
width: 100vw;
height: 100vh;
background: #f00;
}
p {
background-color: black;
opacity: 0.7;
position: absolute;
z-index: 9999;
}
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
</head>
<body>
<div class="owl-carousel">
<div class="slide">
<img src='img.jpeg' alt='Hi!'>
<p class='text'>hi</p>
</div>
</div>
</body>
</html>

Categories