JQuery Add Text Element To Nav When It Reaches Top Of Page - javascript

I am making a website with a stick navbar. I would like to add the text elemnent "▲" to the left of the navbar when it reaches the top of the webpage and "sticks". I would also like to remove the element when the navbar "unsticks" (leaves the top of the webpage). Below is the JQuery and HTML I am using:
var distance = $('div').offset().top,
$window = $(window);
$window.scroll(function() {
if ($window.scrollTop() >= distance) {
$("#nav").prepend("<li style=\"float: left;\" id=\"navSymbol\">▲</li>");
} else {
$("#navSymbol").remove();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="nav" class="sticky">
<li>HOME</li>
<li>CAPABILITIES</li>
<li>ABOUT US</li>
<li>RFQ</li>
<li>CONTACT US</li>
</ul>
However when I scroll the JQuery just inserts a million symbols into the navbar whenever I scroll instead of just one when it reaches the top like this:
This is very frustrating so I help someone can help.
Edit:
The complete code is below, not sure if it helps :) (It is not responsive yet so doesn't look right without being expanded)
#import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900&display=swap');
#keyframes shadow-pulse {
0% {
text-shadow: 0 0 0px black;
}
100% {
text-shadow: 0 0 10vw black;
}
}
#headerTriangle {
font-size: 6vw !important;
animation: shadow-pulse 3s infinite;
}
#header {
text-align: center;
padding-top: 8vw;
}
.headerText {
font-family: 'Rubik', sans-serif;
font-size: 5vw;
padding: 2vw 0vw 2vw 0vw;
}
#nav {
padding-top: 4vw;
text-align: center;
}
#nav li {
display: inline;
}
#nav a {
text-decoration: none;
padding: 0 30px;
font-family: 'Rubik', sans-serif;
color: black;
}
#nav a:hover {
animation: shadow-pulse 2s 1;
}
.sticky {
position: sticky;
top: 0;
width: 100%;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Handmade Studios</title>
<meta name="description" content="">
<meta name="author" content="Alex Hawking">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Fonts-->
</head>
<body>
<div id="header">
<h1 id="headerTriangle">▲</h1>
<h1 class="headerText" style="font-weight: 500;">Hello World</h1>
<h1 class="headerText" style="font-weight: 300; font-size: 3vw !important;">This is some random stuff I've made.
</h1>
</div>
<ul id="nav" class="sticky">
<li id="navSymbol">▲</li>
<li>HOME</li>
<li>CAPABILITIES</li>
<li>ABOUT US</li>
<li>RFQ</li>
<li>CONTACT US</li>
</ul>
<div style="height: 100vw;"></div>
<!--Scripts-->
<script src="js/scripts.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
console.log($('div:last').offset().top)
var distance = $('div').offset().top,
$window = $(window);
$window.scroll(function() {
if ($window.scrollTop() >= distance) {
$("#navSymbol").hide();
} else {
$("#navSymbol").show();
}
});
</script>
</body>
</html>

Try this
#import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900&display=swap');
#keyframes shadow-pulse {
0% {
text-shadow: 0 0 0px black;
}
100% {
text-shadow: 0 0 10vw black;
}
}
#headerTriangle {
font-size: 6vw !important;
animation: shadow-pulse 3s infinite;
}
#header {
text-align: center;
padding-top: 8vw;
}
.headerText {
font-family: 'Rubik', sans-serif;
font-size: 5vw;
padding: 2vw 0vw 2vw 0vw;
}
#nav {
padding-top: 4vw;
text-align: center;
}
#nav li {
display: inline;
}
#nav a {
text-decoration: none;
padding: 0 30px;
font-family: 'Rubik', sans-serif;
color: black;
}
#nav a:hover {
animation: shadow-pulse 2s 1;
}
.sticky {
position: sticky;
top: 0;
width: 100%;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Handmade Studios</title>
<meta name="description" content="">
<meta name="author" content="Alex Hawking">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Fonts-->
</head>
<body>
<div id="header">
<h1 id="headerTriangle">▲</h1>
<h1 class="headerText" style="font-weight: 500;">Hello World</h1>
<h1 class="headerText" style="font-weight: 300; font-size: 3vw !important;">This is some random stuff I've made.
</h1>
</div>
<ul id="nav" class="sticky">
<li id="navSymbol">▲</li>
<li>HOME</li>
<li>CAPABILITIES</li>
<li>ABOUT US</li>
<li>RFQ</li>
<li>CONTACT US</li>
</ul>
<div style="height: 100vw;"></div>
<!--Scripts-->
<script src="js/scripts.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
console.log($('#navSymbol').offset().top)
var distance = $('#navSymbol').offset().top,
$window = $(window);
$window.scroll(function() {
console.log($window.scrollTop());
if ($window.scrollTop() <= 0) {
$("#navSymbol").show();
} else {
$("#navSymbol").hide();
}
});
</script>
</body>
</html>

Related

Create your own cookie banner

I have a problem. I want to use a cookie banner for my website.
I have the problem that I built my website with Boostrap. And as soon as I insert this code into my real website, the banner is displayed at the top and no longer in the style.
So it's displayed above stored. How can I insert this code so that it works properly?
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cookie Consent Banner</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="cookiePopup" class="hide">
<img src="cookie.png" />
<p>
Our website uses cookies to provide your browsing experience and
relevant information. Before continuing to use our website, you agree &
accept of our Cookie Policy & Privacy.
</p>
<button id="acceptCookie">Accept</button>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
style.css
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #f5f8ff;
}
#cookiePopup {
background-color: #ffffff;
position: absolute;
font-size: 14px;
width: 70vw;
max-width: 42.85em;
box-shadow: 0 0 2em rgba(5, 0, 31, 0.15);
font-family: "Poppins", sans-serif;
text-align: justify;
line-height: 1.8em;
padding: 2em 1.4em;
border-radius: 6px;
transition: all 0.5s ease-in;
}
#cookiePopup img {
display: block;
width: 3.75em;
transform: translateZ(0);
position: relative;
margin: auto;
}
#cookiePopup p {
text-align: center;
margin: 1.4em 0;
}
#cookiePopup button {
background-color: #6859fe;
border: none;
color: #ffffff;
font-size: 1.2em;
padding: 1em 1.4em;
display: block;
position: relative;
margin: auto;
border-radius: 5px;
}
#cookiePopup a {
color: #6859fe;
}
.hide {
visibility: hidden;
bottom: 0;
right: 2em;
}
.show {
visibility: visible;
bottom: 2em;
right: 2em;
}
#media only screen and (max-width: 37.5em) {
#cookiePopup {
width: 100%;
}
.hide {
bottom: 2em;
right: 0;
}
.show {
right: 0;
bottom: 0;
}
}
script.js
let popUp = document.getElementById("cookiePopup");
//When user clicks the accept button
document.getElementById("acceptCookie").addEventListener("click", () => {
//Create date object
let d = new Date();
//Increment the current time by 1 minute (cookie will expire after 1 minute)
d.setMinutes(2 + d.getMinutes());
//Create Cookie withname = myCookieName, value = thisIsMyCookie and expiry time=1 minute
document.cookie = "myCookieName=thisIsMyCookie; expires = " + d + ";";
//Hide the popup
popUp.classList.add("hide");
popUp.classList.remove("show");
});
//Check if cookie is already present
const checkCookie = () => {
//Read the cookie and split on "="
let input = document.cookie.split("=");
//Check for our cookie
if (input[0] == "myCookieName") {
//Hide the popup
popUp.classList.add("hide");
popUp.classList.remove("show");
} else {
//Show the popup
popUp.classList.add("show");
popUp.classList.remove("hide");
}
};
//Check if cookie exists when page loads
window.onload = () => {
setTimeout(() => {
checkCookie();
}, 2000);
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - Brand</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cabin:700&display=swap">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.min.css">
<link rel="stylesheet" href="assets/css/Footer-Dark.css">
<link rel="stylesheet" href="assets/css/Hero-Clean-Reverse.css">
<link rel="stylesheet" href="assets/css/untitled.css">
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
<link rel="stylesheet" href="assets/css/style.css" />
/>
</head>
<body id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="77" style="background: var(--bs-body-bg);font-family: Cabin, sans-serif;--bs-primary: #42DCA3;--bs-primary-rgb: 66,220,163;">
<div id="cookiePopup" class="hide">
<img src="assets/img/cookie.png" />
<p>
Our website uses cookies to provide your browsing experience and
relevant information. Before continuing to use our website, you agree &
accept of our Cookie Policy & Privacy.
</p>
<button id="acceptCookie">Accept</button>
</div>
<nav class="navbar navbar-light navbar-expand-md fixed-top" id="mainNav">
<div class="container"><a class="navbar-brand" href="index.html">Name</a><button data-bs-toggle="collapse" class="navbar-toggler navbar-toggler-right" data-bs-target="#navbarResponsive" type="button" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" value="Menu"><i class="fa fa-bars"></i></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item nav-link"><a class="nav-link active" href="kontakt.html" style="background: rgba(255,255,255,0);">Kontakt</a></li>
<li class="nav-item nav-link"></li>
<li class="nav-item nav-link"></li>
</ul>
</div>
</div>
</nav>
</section>
<section class="mb-5"></section>
<footer class="text-center bg-dark" style="background: rgb(0,0,0);">
...
</footer>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/smart-forms.min.js"></script>
<script src="assets/js/grayscale.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
If your banner is displayed at the top and no longer in the style it could be some problem in the css;
Try commenting out these css one at a time, and by reloading the page you can see if one of them is the culprit:
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.min.css">
<link rel="stylesheet" href="assets/css/Footer-Dark.css">
<link rel="stylesheet" href="assets/css/Hero-Clean-Reverse.css">
<link rel="stylesheet" href="assets/css/untitled.css">
Alternatively, you can put the css "style.css" inside the html code and add !important
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - Brand</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css"><!--EDIT for coding-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cabin:700&display=swap">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.min.css">
<link rel="stylesheet" href="assets/css/Footer-Dark.css">
<link rel="stylesheet" href="assets/css/Hero-Clean-Reverse.css">
<link rel="stylesheet" href="assets/css/untitled.css">
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"/>
<!--<link rel="stylesheet" href="assets/css/style.css" />-->
</head>
<!-- Stylesheet on the html -->
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #f5f8ff;
}
#cookiePopup {
background-color: #ffffff;
position: absolute;
font-size: 14px;
width: 70vw;
max-width: 42.85em;
box-shadow: 0 0 2em rgba(5, 0, 31, 0.15);
font-family: "Poppins", sans-serif;
text-align: justify;
line-height: 1.8em;
padding: 2em 1.4em;
border-radius: 6px;
transition: all 0.5s ease-in;
}
#cookiePopup img {
display: block;
width: 3.75em;
transform: translateZ(0);
position: relative;
margin: auto;
}
#cookiePopup p {
text-align: center;
margin: 1.4em 0;
}
#cookiePopup button {
background-color: #6859fe;
border: none;
color: #ffffff;
font-size: 1.2em;
padding: 1em 1.4em;
display: block;
position: relative;
margin: auto;
border-radius: 5px;
}
#cookiePopup a {
color: #6859fe;
}
.hide {
visibility: hidden;
bottom: 0;
right: 2em;
}
.show {
visibility: visible;
bottom: 2em;
right: 2em;
}
#media only screen and (max-width: 37.5em) {
#cookiePopup {
width: 100%;
}
.hide {
bottom: 2em;
right: 0;
}
.show {
right: 0;
bottom: 0;
}
}
</style>
<body id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="77" style="background: var(--bs-body-bg);font-family: Cabin, sans-serif;--bs-primary: #42DCA3;--bs-primary-rgb: 66,220,163;">
<!--COOKIES-->
<div id="cookiePopup" class="hide">
<img src="cookie.png" />
<p>
Our website uses cookies to provide your browsing experience and
relevant information. Before continuing to use our website, you agree &
accept of our Cookie Policy & Privacy.
</p>
<button id="acceptCookie">Accept</button>
</div>
<nav class="navbar navbar-light navbar-expand-md fixed-top" id="mainNav">
<div class="container"><a class="navbar-brand" href="index.html">Name</a><button data-bs-toggle="collapse" class="navbar-toggler navbar-toggler-right" data-bs-target="#navbarResponsive" type="button" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" value="Menu"><i class="fa fa-bars"></i></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item nav-link"><a class="nav-link active" href="kontakt.html" style="background: rgba(255,255,255,0);">Kontakt</a></li>
<li class="nav-item nav-link"></li>
<li class="nav-item nav-link"></li>
</ul>
</div>
</div>
</nav>
<!--Section-->
<section class="mb-5"></section>
<!--Footer-->
<footer class="text-center bg-dark" style="background: rgb(0,0,0);">
...
</footer>
<!-- Script -->
<script>
let popUp = document.getElementById("cookiePopup");
//When user clicks the accept button
document.getElementById("acceptCookie").addEventListener("click", () => {
//Create date object
let d = new Date();
//Increment the current time by 1 minute (cookie will expire after 1 minute)
d.setMinutes(2 + d.getMinutes());
//Create Cookie withname = myCookieName, value = thisIsMyCookie and expiry time=1 minute
document.cookie = "myCookieName=thisIsMyCookie; expires = " + d + ";";
//Hide the popup
popUp.classList.add("hide");
popUp.classList.remove("show");
});
//Check if cookie is already present
const checkCookie = () => {
//Read the cookie and split on "="
let input = document.cookie.split("=");
//Check for our cookie
if (input[0] == "myCookieName") {
//Hide the popup
popUp.classList.add("hide");
popUp.classList.remove("show");
} else {
//Show the popup
popUp.classList.add("show");
popUp.classList.remove("hide");
}
};
//Check if cookie exists when page loads
window.onload = () => {
setTimeout(() => {
checkCookie();
}, 2000);
};
</script>
<footer class="text-center bg-dark" style="background: rgb(0,0,0);">
...
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js"></script><!--EDIT for coding-->
<script src="assets/js/smart-forms.min.js"></script>
<script src="assets/js/grayscale.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
In my browser works fine

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

Fix position of Image without **position:fixed**

I have a SideMenu bar. The Header of the sidemenu contains an image and below that are contents. It is scrollable. i want to make the menu scrollable and not the image. I cant use position:fixed because its a collapsable menu and some other reasons. How can i make only the contents scrollable?
CODE
document.write('<div> <img style="width:80%;margin:10%;"src="Files/Logo.png"/> <hr> </div>');
document.write('<div class="scroll">'+
document.write(
'<button class="list" href="#X1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Home </button>'+
'<div class="show list-unstyled" id="X1">'+
'<a href="'+myArray[0][0]+'" class="'+myArray[0][1]+'" > Site 1 </a> '+
'<a href="'+myArray[1][0]+'" class="'+myArray[1][1]+'" > Site 2 </a> '+
'</div>'
);
document.write('</div>');
I tried putting seperat DIV but doesnt work
CSS
.scroll {
max-height: 500px;
overflow-y: scroll;
background: #000000;
}
#sidebar {
min-width: 210px;
max-width: 210px;
background: #000000;
color: #fff;
transition: all 0.3s;
}
FULL CODE
#sidebar {
min-width: 210px;
max-width: 210px;
background: #000000;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
min-width: 80px;
max-width: 80px;
text-align: center;
}
#sidebar.active , button div a {
padding-left: 30px;
margin-left: 0;
font-size: 0.9em;
font-family: Verdana;
background: #ffffff;
}
#sidebar.active .sidebar-header h3,
#sidebar.active .CTAs {
display: none;
}
#sidebar.active .sidebar-header strong {
display: block;
}
#sidebar.active .dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar .sidebar-header {
padding: 0;
background: #000000;
}
#sidebar .sidebar-header strong {
display: none;
font-size: 1.8em;
}
COMPLETE CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Collapsible sidebar using Bootstrap 4</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="style.css">
<!-- <link rel="stylesheet" type="text/css" href="CSS/Tags.css">
<link rel="stylesheet" type="text/css" href="CSS/Nav.css">
<link rel="stylesheet" type="text/css" href="CSS/Card.css"> -->
<!-- <link rel="stylesheet" type="text/css" href="CSS/Buttons.css"> -->
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<nav id="sidebar">
<script src="C-NavigationBar.js"></script>
<script src="JavaScript/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var y = document.getElementById(1);
y.className += " w3-show";
y.previousElementSibling.className += " w3-theme ";
function myAccFunc(n) {
var x = document.getElementById(n);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-theme ";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace("w3-theme", "");
}
}
var editor = ace.edit("editor");
editor.setTheme("ace/theme/twilight");
editor.session.setMode("ace/mode/c_cpp");
editor.setReadOnly(true);
editor.resize();
</script>
</nav>
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button style="width:auto;"type="button" id="sidebarCollapse" class="btn btn-dark">
<i class="fas fa-align-justify"></i>
<span>Menu</span>
</button>
</div>
</nav>
</div>
</div>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
</body>
</html>
EDIT
var myArray = [
["Site1.php", 0],
["Site1.php", 0],
];
var X = window.location.href.substring(window.location.href.lastIndexOf("/")+1);
var i;
for (i = 0; i < myArray .length; i++) {
if (X == myArray [i][0]) {
myArray [i][1] = 'active';
break;
}
}
function Previous() {
window.location.href = myArray [i-1][0];
}
function Next() {
window.location.href = myArray [i+1][0];
}
document.write('<div> <img
class="header"tyle="width:80%;margin:10%;"src="Files/Logo.png"/> <hr> </div>');
document.write(
'<button class="list" href="#X1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Home </button>'+
'<div class="show list-unstyled" id="X1">'+
'<a href="'+myArray [0][0]+'" class="'+myArray [0][1]+'" > 1 </a> '+
'<a href="'+myArray [1][0]+'" class="'+myArray [1][1]+'" > 2</a> '+
'</div>'
);
I would suggest you to use Jquery to achieve what you want.
At first, make the position: fixed.
But as you said, I can't take a position fixed, because the menu is collapsable. Now the jquery comes into play.
Wherever you wrote the "collapse" function, add one more line of jquery code to hide your header image.
When the collapsed menu will be shown again, you have to make your header image visible using jquery again.
When all doors get closed, create your own cleverly.
I am getting this errors so before fixing or replicate the issue. I need to resolve the below errors. So if you can please attach the code files would be great.

Tooltip does not show with Bootstrap Slider

Problem:
I am using Bootstrap Slider, which can be found here https://seiyria.com/bootstrap-slider/. When using example 8, the tooltip does not show as it does on the website.
Minimal Working Example (MWE):
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Judgement</title>
<!-- Bootstrap Core CSS -->
<link href="https://seiyria.com/bootstrap-slider/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Slider -->
<link href="https://seiyria.com/bootstrap-slider/css/bootstrap-slider.css" rel="stylesheet">
</head>
<body>
<input id="judgement" data-slider-id="judgementslider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://seiyria.com/bootstrap-slider/js/bootstrap-slider.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$("#judgement").slider({
tooltip: 'always'
});
});
</script>
</body>
</html>
Example Snippet:
$(document).ready(function() {
$("#judgement").slider({
tooltip: 'always'
});
});
body {
padding: 100px;
}
<link href="https://seiyria.com/bootstrap-slider/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://seiyria.com/bootstrap-slider/css/bootstrap-slider.css" rel="stylesheet">
<input id="judgement" data-slider-id="judgementslider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://seiyria.com/bootstrap-slider/js/bootstrap-slider.js"></script>
JS Fiddle:
http://jsfiddle.net/2u4xs9cv/1/
Desired outcome:
To always show the tooltip when the slider changes.
I know this is pretty late but I was looking for a solution and am posting here in hopes that this might be of help for someone else.
I set
.tooltip.in {
opacity: 1;
}
and the tooltip started showing.
Using Bootstrap v4.2.1 and the latest version of bootstrap-spinner with their angular directive (in their slider.js file), I used the following HTML
<slider id="intervalSlider"
ng-model="refreshInterval" on-stop-slide="intervalChanged($event,value)"
min="10" step="10" max="60" slider-tooltip="show" ></slider>
I found that the tootip and arrow did not display. I added the following CSS into my custom CSS file
.slider .tooltip.in {
opacity: 1;
}
.slider .tooltip.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.slider .tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.slider .tooltip.top {
padding: 5px 0;
}
This is still opened issue for Bootstrap 4.3.1 - #689. The Bootstrap v4 is not yet fully supported.
On the end of the discussed issue they are shown some solutions I use it following:
$("#ex12c").slider({ id: "slider12c", precision:2, step:0.01, min: 0.70, max: 1.00, range: true, value: [0.80, 0.90] });
#slider12c .slider-track-high {
background: #5cb85c;
}
#slider12c .slider-selection {
background: #ffc107;
}
.slider-handle::after{
content: attr(aria-valuenow);
position: absolute;
bottom: calc(100% + 0.5em);
left: 50%;
transform: translateX(-50%);
font-size: 0.75em;
font-weight: 600;
color: #393f50;
background-color: white;
box-shadow: 0px 0px 6px 0px rgba(182, 182, 182, 0.4);
display: flex;
justify-content: center;
align-items: center;
border-radius: 0.3em;
width: 4em;
height: 2.5em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap 4 CDN CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Bootstrap 3 slider -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/css/bootstrap-slider.min.css" />
</head>
<body>
<br />
<br />
<input id="ex12c" type="text"/>
<!-- Bootstrap 4 CDN JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/bootstrap-slider.min.js">
</script>
<body/>
<html/>

Swap body tags between two HTML files

I have two separate HTML files (index.html and home.html) and a javascript (bodyswapscript.js) file. I'm trying to figure out how to swap the body of home.html (only) into the body of the index.html by using java script. Basically replacing body tags between HTML files.
I have posted my html code and java script below. The html is quick and dirty, so I'm only interested in swapping out the body information from index.html with home.html
1.) index.html
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<meta charset="utf-8">
<title> My Profile</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<header>
<hgroup>
<center><h1>Index</h1>
<h4>index page</h4></center>
</hgroup>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="bodyswapscript.js"></script>
<nav>
<div id="wrapper">
<div id="header">
<ul>
<li><a id="homeContainer" href="home.html">Home</a></li>
<!-- <li><a id="testContainer" href='test.html'>test</a></li>
<li><a id="pageContainer" href="page.html">page</a></li> -->
</ul>
</div>
</div>
</nav>
</header>
<body>
<article>
<div id='swapcontent'>
index page
</div>
</article>
</body>
<footer>
<p>© copy right, all rights reserved.</p>
</footer>
2.) home.html
<header>
<hgroup>
<center><h1>home.html</h1>
<h4>text</h4></center>
</hgroup>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</header>
<body>
<article>
<div id='swapcontent'>
This is my home page
</div>
</article>
</body>
3.) bodyswapscript.js
$(document).ready(function()
{
$( 'li>a[id$="Container"]' ).click(function(event)
{
event.preventDefault();
var href = $(this).attr('href');
alert("Loading " + href);
$('#swapcontent').load(href);
return false;
});
});
4.) Supporting CSS
* {
font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}
body {
width: 720px;
margin: 0px auto;
}
header h1 {
font-size: 36px;
margin: 0px;
}
header h2 {
font-size: 18px;
margin: 0px;
color: #888;
font-style: italic;
}
nav ul {
list-style: none;
padding: 0px;
display: block;
clear: right;
background-color: #2B60DE;
padding-left: 4px;
height: 24px;
}
nav ul li {
display: inline;
padding: 0px 20px 5px 10px;
height: 24px;
border-right: 1px solid #ccc;
}
nav ul li a {
color: #EFD3D3;
text-decoration: none;
font-size: 13px;
font-weight: bold;
}
nav ul li a:hover {
color: #fff;
}
article > header time {
font-size: 14px;
display: block;
width: 26px;
padding: 2px;
text-align: center;
background-color: #993333;
color: #fff;
font-weight: bold;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
float: left;
margin-bottom: 10px;
}
article > header time span {
font-size: 10px;
font-weight: normal;
text-transform: uppercase;
}
article > header h1 {
font-size: 20px;
float: left;
margin-left: 14px;
text-shadow: 2px 2px 5px #333;
}
article > header h1 a {
color: #993333;
}
article > section header h1 {
font-size: 16px;
}
article p {
clear: both;
}
footer p {
text-align: center;
font-size: 12px;
color: #888;
margin-top: 24px;
}
This code was pulled from the following URL: http://jsfiddle.net/Christophe/hj9ry/1/
Correct invalid html, include wrapper parent element for content of <body> at home.html; call .load() with fragment identifier referencing wrapper element within home.html; use .unwrap() to remove wrapper element at index.html at complete function of .load()
index.html
<!doctype html>
<html>
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<meta charset="utf-8">
<title> My Profile</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<header>
<hgroup>
<center>
<h1>Index</h1>
<h4>index page</h4></center>
</hgroup>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="bodyswapscript.js"></script>
<nav>
<div id="wrapper">
<div id="header">
<ul>
<li><a id="homeContainer" href="home.html">Home</a></li>
<!-- <li><a id="testContainer" href='test.html'>test</a></li>
<li><a id="pageContainer" href="page.html">page</a></li> -->
</ul>
</div>
</div>
</nav>
</header>
<article>
<div id='swapcontent'>
index page
</div>
</article>
<footer>
<p>© copy right, all rights reserved.</p>
</footer>
</body>
</html>
home.html
<!doctype html>
<html>
<head></head>
<body>
<div id="body">
<header>
<hgroup>
<center><h1>home.html</h1>
<h4>text</h4></center>
</hgroup>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</header>
<article>
<div id='swapcontent'>
This is my home page
</div>
</article>
</div>
</body>
</html>
bodyswapscript.js
$(document).ready(function() {
$('li>a[id$="Container"]').click(function(event) {
event.preventDefault();
var href = $(this).attr('href');
// alert("Loading " + href);
$('body').load(href + " #body", function() {
$("#body *:first").unwrap()
});
return false;
});
});
plnkr http://plnkr.co/edit/r8WTsQ9Xm3ZLsRp8nwLr?p=preview
You can use IFrames in html to show your contents of index.html in homw.html
Or
You can use
in your home file

Categories