Bootstrap .container-fluid overflow

Bootstrap .container-fluid overflow - javascript

I have look for lots of solutions for this in StackOverflow but none solved it, so I hope someone could helo me directly in this post.
I'm making a simple navegation bar for a web page and I wanted it to full fill the width of the browser window, so I gave it the class .container-fluid, and it worked perfectly in a big computer, but when using a laptop, the elements inside the .container-fluid overflows the window like this:
A better look at it is this:
Why is this happening?
Here is the code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>__codekup__</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
crossorigin="anonymous" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div class="header container-fluid">
<div class="row align-items-center justify-content-between">
<div class="col-sm-2 text-center">
<h1>Pliki</h1>
</div>
<div class="col-sm-2">
<div class="row align-items-center">
<div class="col-sm-6 text-center">
Instructions
</div>
<div class="col-sm-6 text-center">
<button type="button" class="btn btn-outline-primary pull-right">
Download Game
</button>
</div>
</div>
</div>
</div>
</div>
<div class="main"></div>
<!-- Bootstrap dependencies and jQuery library -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>
<script src="main.js" type="text/javascript"></script>
</body>
</html>
SASS
#import url('https://fonts.googleapis.com/css?family=Lato');
$primary-color: rgb(118, 200, 136);
$bg-color: rgb(33, 37, 43);
.header {
background-color: $bg-color;
height: 70px;
color: $primary-color;
.row {
height: 100%;
}
h1 {
font-family: Courier, sans-serif;
}
.btn {
color: $primary-color;
border-color: $primary-color;
font-family: Lato, sans-serif;
&:hover {
color: $bg-color;
background-color: $primary-color;
}
}
}
.main {
background: black;
}
JAVASCRIPT
$(document).ready(function () {
var h = window.innerHeight;
$('.main').css('height', h + 'px');
});

The .col-sm-2 class that wraps the button is too narrow to fit the contents. I would remove the .col-* classes from those columns, remove .row from the buttons' parent and use .d-flex instead, apply a margin between the buttons and a padding to the .header .row (to match similar to what you had before - though it isn't necessary).
Here's a pen for your changes in scss https://codepen.io/mcoker/pen/qjxmLr
$(document).ready(function () {
var h = window.innerHeight;
$('.main').css('height', h + 'px');
});
#import url("https://fonts.googleapis.com/css?family=Lato");
.header {
background-color: #21252b;
height: 70px;
color: #76c888;
}
.header .row {
height: 100%;
padding: 0 30px;
}
.header h1 {
font-family: Courier, sans-serif;
}
.header .btn {
color: #76c888;
border-color: #76c888;
font-family: Lato, sans-serif;
margin-left: 1em;
}
.header .btn:hover {
color: #21252b;
background-color: #76c888;
}
.main {
background: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>__codekup__</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div class="header container-fluid">
<div class="row align-items-center justify-content-between">
<div>
<h1>Pliki</h1>
</div>
<div>
<div class="d-flex align-items-center">
<div>
Instructions
</div>
<div>
<button type="button" class="btn btn-outline-primary pull-right">
Download Game
</button>
</div>
</div>
</div>
</div>
</div>
<div class="main"></div>
<!-- Bootstrap dependencies and jQuery library -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="main.js" type="text/javascript"></script>
</body>
</html>

Related

Why does the HTML popup not display?

I am trying to create an info button that users can click on to learn more about my site through a popup modual. When testing it on the live server, clicking the button makes the background color darker, but the popup modual itself is nowhere to be seen. Please let me know what I have overlooked in my code that might be causing this error. Thank you!
index.html
<!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">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- style.css -->
<link rel="stylesheet" href="style.css" />
<!-- Font -->
<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=Open+Sans&display=swap" rel="stylesheet">
<title>Modal Test</title>
</head>
<body>
<!-- Info Button -->
<div class="container buttons" id="info-button">
<button class="btn rounded-btn">?</button>
</div>
<div class="modal-container" id="modal_container">
<div class="modal">
<h1>Modal Test</h1>
<p>Test text!</p>
<button id="close-info">Close me</button>
</div>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- index.js -->
<script src="index.js"></script>
</body>
</html>
style.css
body {
background-color: #363062;
font-family: 'Open Sans', sans-serif;
}
.text {
color: #E9D5DA;
}
.buttons {
padding-top: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.btn {
background-color: #827397;
color: #fff;
margin: 10px;
}
.rounded-btn {
padding: 1rem 1.5rem;
border-radius: 100%;
}
#info-button {
justify-content: end;
align-items:flex-end;
}
.modal-container {
background-color: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
position:fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
opacity: 0;
pointer-events: none;
}
.modal-container.show {
pointer-events: auto;
opacity: 1;
}
.modal {
background-color: #fff;
border-radius: 5px;
padding: 30px 50px;
width: 600px;
max-width: 100%;
text-align: center;
}
.modal h1 {
margin: 0;
}
.modal p {
font-size: 14px;
opacity: 0.7;
}
index.js
const open = document.getElementById('info-button');
const close = document.getElementById('close-info');
const modal_container = document.getElementById('modal_container');
open.addEventListener('click', function() {
modal_container.classList.add('show');
});
close.addEventListener('click', function() {
modal_container.classList.remove('show');
});

The bootstrap lib has already a class .modal so you have to rename your .modal class to something else and it should works. I've tested.

Your code was interfering with the Bootstap CSS Lib. which already has a default styling behavior for modals etc.
Below, I was able to fix your issue using the bootstrap custom modal system and it works perfectly.
$("#myModal").modal()
body {
background-color: #363062;
font-family: 'Open Sans', sans-serif;
}
.text {
color: #E9D5DA;
}
.buttons {
padding-top: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.btn {
background-color: #827397;
color: #fff;
margin: 10px;
}
.rounded-btn {
padding: 1rem 1.5rem;
border-radius: 100%;
}
#info-button {
justify-content: end;
align-items: flex-end;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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=Open+Sans&display=swap" rel="stylesheet">
<body>
<!-- Info Button -->
<div class="container buttons" id="info-button">
<button class="btn rounded-btn" data-toggle="modal" data-target="#modal_container">?</button>
</div>
<!-- Modal -->
<div class="modal fade" id="modal_container" tabindex="-1" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Modal Test</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Test text!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close
Me</button>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<!-- Custom JS -->
<script src="index.js" defer></script>
</body>

How can I hide a specific div when its clicked using an event listener?

The thing I want to accomplish it's to hide the specific div you clicked, and show another one instead, I already tried some things but didn't work
One of them was this, as you will see I was trying its to hide the clicked element passing the id of the element by a parameter but didn't work
var el = document.getElementById(obj);
el.style.display = 'none';
}
This is how it should work: https://www.screencast.com/t/WGeokVkv
Until now I've had accomplish showing the next sibling of the clicked element, but I can't hide the one that was clicked either I can't hide the next sibling when its clicked again
How can I do that?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap 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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<!-- Our css -->
<title>FAQ</title>
<style>
.card{
box-shadow: 0px 5px 10px #000000;
border-radius: 25px 25px 25px 25px;
}
.fa-question-circle{
font-size: 2rem;
color: #FFC600;
}
.card-subtitle{
font-family: Impact, Charcoal, sans-serif;
color: #31261B !important;
}
.hr-yellow-border{
border: 2px solid #FFC600 ;
}
.card-text{
color: #315470 !important;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
}
.hr-grey-border{
border: 2px solid #AB989D ;
}
.labels-text{
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
}
.labels-wrapper{
background: #315470 !important;
height: 3rem;
display: flex;
align-items: center ;
/*Take care with the transition*/
transition: 0.4s;
}
div.col-11 > .panel > p {
font-size: small;
}
.plus-icon{
cursor: pointer;
transition: 0.4s;
display: inline;
}
.panel{
display: none;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container-fluid d-flex justify-content-center align-items-center">
<div class="col-9">
<br>
<div class="card" style="height: min-content;">
<div class="card-body">
<i class="fas fa-question-circle d-flex justify-content-center mb-3"></i>
<div class="col-11 mx-auto">
<hr class="hr-yellow-border">
<br>
<div class="labels-wrapper d-flex justify-content-between" id="question" onClick="hide('question')">
<h5 class="ml-2 text-white labels-text my-auto"> How do I access the event on the day of the conference?</h5><h4 class="plus-icon ml-auto mr-2 text-warning my-auto" id="question" onClick="hide('question')">+</h4>
</div>
<div class="panel">
<div class="row">
<h4 class="card-text ml-3">How do I access the event on the day of the conference?</h4><h4 class="plus-icon ml-auto mr-4 text-warning">-</h4>
</div>
<hr class="hr-grey-border">
<p class="ml-3">On October 15, 2020 at 10:00 AM EST, the login button will accept your registration credentials to access the online platform</p>
</div>
<br>
</div>
</div>
</div>
<br>
<br>
</div>
</div>
<!-- Bootstrap and jQuery -->
<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>
var acc = document.getElementsByClassName("labels-wrapper");
var i;
//var question = document.getElementById("question")
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
//this.classList.toggle("panel");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
function hide(obj) {
var el = document.getElementById(obj);
el.style.display = 'none';
}
</script>
<script>
</script>
</body>
</html>

The reason your code is not working because flex library has style display:flex!important if you add display:none its will be override by library style due to important. In your javascript you have do it same way.
here is running snippet. Added solution to explain why its not working you can optimise code more.
var acc = document.getElementsByClassName("labels-wrapper");
var i;
//var question = document.getElementById("question")
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
//this.classList.toggle("panel");
/* Toggle between hiding and showing the active panel */
// console.log(this);
// this.style.display = "none!important";
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
function hide(obj) {
console.log(obj);
var el = document.getElementById(obj);
el.setAttribute('style', 'display:none !important');
}
function openQuestion(obj) {
var el = document.getElementById(obj);
console.log(obj);
el.setAttribute('style', 'display:block');
var panel = el.nextElementSibling;
panel.style.display = "none";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap 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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<!-- Our css -->
<title>FAQ</title>
<style>
.card {
box-shadow: 0px 5px 10px #000000;
border-radius: 25px 25px 25px 25px;
}
.fa-question-circle {
font-size: 2rem;
color: #FFC600;
}
.card-subtitle {
font-family: Impact, Charcoal, sans-serif;
color: #31261B !important;
}
.hr-yellow-border {
border: 2px solid #FFC600;
}
.card-text {
color: #315470 !important;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
}
.hr-grey-border {
border: 2px solid #AB989D;
}
.labels-text {
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
}
.labels-wrapper {
background: #315470 !important;
height: 3rem;
display: flex;
align-items: center;
/*Take care with the transition*/
transition: 0.4s;
}
div.col-11>.panel>p {
font-size: small;
}
.plus-icon {
cursor: pointer;
transition: 0.4s;
display: inline;
}
.panel {
display: none;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container-fluid d-flex justify-content-center align-items-center">
<div class="col-9">
<br>
<div class="card" style="height: min-content;">
<div class="card-body">
<i class="fas fa-question-circle d-flex justify-content-center mb-3"></i>
<div class="col-11 mx-auto">
<hr class="hr-yellow-border">
<br>
<div class="labels-wrapper d-flex justify-content-between" id="question" onClick="hide('question')">
<h5 class="ml-2 text-white labels-text my-auto"> How do I access the event on the day of the conference?</h5>
<h4 class="plus-icon ml-auto mr-2 text-warning my-auto" id="question" onClick="hide('question')">+</h4>
</div>
<div class="panel" onClick="openQuestion('question')">
<div class="row">
<h4 class="card-text ml-3">How do I access the event on the day of the conference?</h4>
<h4 class="plus-icon ml-auto mr-4 text-warning">-</h4>
</div>
<hr class="hr-grey-border">
<p class="ml-3">On October 15, 2020 at 10:00 AM EST, the login button will accept your registration credentials to access the online platform</p>
</div>
<br>
</div>
</div>
</div>
<br>
<br>
</div>
</div>
<!-- Bootstrap and jQuery -->
<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>
</body>
</html>

Update: Demo with complete code as requested by OP.
function toggleDivs() {
$("#div1").toggle();
$("#div2").toggle();
}
.div {
margin:50px;
height:200px;width:200px;background:blue;
}
#div2 {
background:red;display:none;
}
#div1 {z-index:10;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="toggleDivs()">Toggler</button>
<div class="div" id="div1"></div>
<div class="div" id="div2"></div>

With jQuery, you can use toggle() function to show or hide the element on click.
$('#question').toggle();
$('#question').click(function(){
$(this).toggle();
});
or if you wish to use class instead of ID attribute, you use event delegation to target the specific element.
$('.question').on('click', function(){
$(this).toggle();
});

Please try this,
I remove same - icon in html.
This can change the icon with js
$(this).children(".plus-icon").text("+");// for + icon
$(this).children(".plus-icon").text("-");// for - icon
var acc = document.getElementsByClassName("labels-wrapper");
for (var i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
$(this).children(".plus-icon").text("+");
} else {
panel.style.display = "block";
$(this).children(".plus-icon").text("-");
}
});
}
.card{
box-shadow: 0px 5px 10px #000000;
border-radius: 25px 25px 25px 25px;
}
.fa-question-circle{
font-size: 2rem;
color: #FFC600;
}
.card-subtitle{
font-family: Impact, Charcoal, sans-serif;
color: #31261B !important;
}
.hr-yellow-border{
border: 2px solid #FFC600 ;
}
.card-text{
color: #315470 !important;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
}
.hr-grey-border{
border: 2px solid #AB989D ;
}
.labels-text{
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
}
.labels-wrapper{
background: #315470 !important;
height: 3rem;
display: flex;
align-items: center ;
/*Take care with the transition*/
transition: 0.4s;
}
div.col-11 > .panel > p {
font-size: small;
}
.plus-icon{
cursor: pointer;
transition: 0.4s;
display: inline;
}
.panel{
display: none;
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap 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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<!-- Our css -->
<title>FAQ</title>
</head>
<body>
<div class="container-fluid">
<div class="col-11">
<br>
<div class="card">
<div class="card-body">
<i class="fas fa-question-circle d-flex justify-content-center"></i>
<div class="row">
<div class="col-12">
<hr class="hr-yellow-border">
<br>
<div class="labels-wrapper d-flex justify-content-between" id="question">
<h5 class="ml-2 text-white labels-text my-auto"> How do I access the event on the day of the conference?</h5>
<h4 class="plus-icon ml-auto mr-2 text-warning my-auto">+</h4>
</div>
<div class="panel">
<p class="mt-2">On October 15, 2020 at 10:00 AM EST, the login button will accept your registration credentials to access the online platform</p>
</div>
<br>
</div>
</div>
</div>
</div>
<br>
<br>
</div>
</div>
<!-- Bootstrap and jQuery -->
<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>
</script>
</body>
</html>

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

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>

handover a javascript variable to html

I have 2 files, filter.html and filter.js.
In filter.html I have a div with the id "test" and in filter.js I have a variable with the name "finishedHTML".
Now I want to write the content of "finishedHTML" into the test div as html code, but the html things "finishedHTML" is empty.
How can I solve this problem?
Source:
var finishedHTML = "<h2>Yes it works</h2>"
header {
display: block;
background: #A2AFBC;
top: 0;
height: 50px;
position: fixed;
width: 100%;
text-align: center;
}
footer {
height: 50px;
width: 100%;
bottom: 0px;
left: 0px;
background: #A2AFBC;
position: fixed;
}
.headerTitle {
font-size: 2.0em;
font-family: Verdana;
font-weight: 100;
color: #506B84;
margin: 0em;
font-weight: bold;
}
h2 {
font-size: 3.0 em;
color: red;
}
<html>
<head>
<title>title</title>
<link rel="stylesheet" href="style.css" type="text/css" >
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" >
<!--Filter.js-->
<script language="javascript" type="text/javascript" src="filter.js"></script>
</head>
<body>
<header>
<span class="headerTitle">Header Text</span>
</header>
<div id="test" style="margin-left: 300px; padding-top: 300px;">
<h1>This is a test text</h1>
</div>
<script language="javascript" type="text/javascript">
document.getElementById('test').innerHTML = finishedHTML;
</script>
<footer>
</footer>
</body>
</html>
Thanks four your help!

You can use the variable finishedHTML only after it has been declared. So declare it at any point before setting the innerHTML and it will work.
var finishedHTML = "<h2>Yes it works</h2>";
document.getElementById('test').innerHTML = finishedHTML;
header {
display: block;
background: #A2AFBC;
top: 0;
height: 50px;
position: fixed;
width: 100%;
text-align: center;
}
footer {
height: 50px;
width: 100%;
bottom: 0px;
left: 0px;
background: #A2AFBC;
position: fixed;
}
.headerTitle {
font-size: 2.0em;
font-family: Verdana;
font-weight: 100;
color: #506B84;
margin: 0em;
font-weight: bold;
}
h2 {
font-size: 3.0 em;
color: red;
}
<html>
<head>
<title>title</title>
<link rel="stylesheet" href="style.css" type="text/css" >
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" >
<!--Filter.js-->
<script language="javascript" type="text/javascript" src="filter.js"></script>
</head>
<body>
<header>
<span class="headerTitle">Header Text</span>
</header>
<!-- style="margin-left: 300px; padding-top: 300px;"-->
<div id="test" style="margin-top: 100px;">
<h1>This is a test text</h1>
</div>
<footer>
</footer>
</body>
</html>

<html>
<head>
<title>title</title>
<link rel="stylesheet" href="style.css" type="text/css" >
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" >
</head>
<body>
<header>
<span class="headerTitle">Header Text</span>
</header>
<div id="test" style="margin-left: 300px; padding-top: 300px;">
<h1>This is a test text</h1>
</div>
<!--Filter.js-->
<script language="javascript" type="text/javascript" src="filter.js"></script>
<script language="javascript" type="text/javascript">
document.getElementById('test').innerHTML = finishedHTML;
</script>
<footer>
</footer>
</body>
</html>
put <script> inside body can solve your asysnc loading script issue

Hey just check this its working fine for me.
Thanks
<html>
<head>
<title>title</title>
<link rel="stylesheet" href="style.css" type="text/css" >
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" >
<!--Filter.js-->
<script language="javascript" type="text/javascript" src="filter.js"></script>
</head>
<body>
<header>
<span class="headerTitle">Header Text</span>
</header>
<div id="test" style="margin-left: 300px; padding-top: 30px;">
<h1>This is a test text</h1>
</div>
<script language="javascript" type="text/javascript">
var finishedHTML = "<h2>Yes it works</h2>";
console.log(finishedHTML);
document.getElementById('test').innerHTML = finishedHTML;
</script>
<footer>
</footer>
</body>
</html>

Move document.getElementById('test').innerHTML = finishedHTML; into filter.js.

Random background generator with Javascript and CSS

I'm trying to make the background change randomly when coming to my site.
I saved some images as 1.jpg, 2.jpg etc and I tried to do a bit of javascript random. Can any one suss why this would not work? I know you won't be able to see the photos, but any help would be great.
Here is the jsbin - notice the background is selected in #topContainer in css
https://jsbin.com/qodukozuqi/edit?html,output
<script type="text/javascript">
function randomBackground () {
var randomPicture = [Math.floor(Math.random() * 4)+ '.jpg'];
}
return randomPicture;
</script>
Here is the full code:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Tenor+Sans::latin', 'Rock+Salt::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
<script type="text/javascript">
function randomBackground () {
var randomPicture = [Math.floor(Math.random() * 4)+ '.jpg'];
return randomPicture;
}
</script>
<title>NaturallyPizza</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href='https://fonts.googleapis.com/css?family=Tenor+Sans|Rock+Salt' rel='stylesheet' type='text/css'/>
<style>
.navbar-collapse{
color: white;
}
.navbar-brand {
font-size: 1.5em;
font-family: 'Rock Salt', sans-serif;
color: white;
}
.navbar-default {
margin-top: 30px;
background-color: transparent;
border: hidden;
font-family: 'Tenor Sans', sans-serif;
}
.listing a{
font-size: 1.5em;
color: white;
}
#topContainer {
background-image: url("images/background/"+randomPicture);
height: 500px;
width: 100%;
opacity: 0.95;
background-size: cover;
color: white;
}
.navbar-default .navbar-brand {
color: white;
}
#media (max-width: 760px) {
.navbar-default {
background-color: lightgrey;
opacity: 0.95;
}
}
#topRow {
margin-top: 130px;
font-family: 'Tenor Sans', sans-serif;
}
.center {
text-align: center;
}
.title {
font-size: 3em;
color: white;
}
.backing {
background-color: grey;
opacity: 0.6;
border-radius: 10px;
}
.marginTop {
margin-top: 30px;
}
.jumbotron {
background-image: url("images/background/1.jpg");
background-size: cover;
}
</style>
</head>
<body>
<script type="text/javascript">alert(randomBackground);</script>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar color-me"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">NaturallyPizza</a>
</div> <!-- class="navbar-header" -->
<div class="collapse navbar-collapse navbar-right listing">
<ul class="nav navbar-nav">
<li class="color-me">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div> <!-- class="collapse navbar-collapse" -->
</div>
</div> <!-- class="navbar navbar-default" -->
<div class="container-fluid contentContainer" id="topContainer">
<div class="row-fluid">
<div class="col-md-8 col-md-offset-2 backing" id="topRow">
<h1 class="title marginTop center">Learn to make great Pizza!</h1>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
$(".contentContainer").css("min-height", $(window).height());
</script>
</body>
</html>

You cannot use JS inside a CSS, you have to set the style directly with javascript (put this code at the end of the page, after #topContainer):
<script>
var el = document.getElementById('topContainer');
el.style.backgroundImage = 'url(images/background/' + Math.floor(Math.random() * 4) + '.jpg)';
</script>

Your return statement is outside of your function.
Just use this
function randomBackground() {
var randomPicture = [Math.floor(Math.random() * 4) + '.jpg'];
return randomPicture;
}
jsFiddle : https://jsfiddle.net/hbhz3x4L/

We Keep Coding

JavaScript is the programming language of the Web.

Bootstrap .container-fluid overflow - javascript

Related

Why does the HTML popup not display?

How can I hide a specific div when its clicked using an event listener?

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

handover a javascript variable to html

Random background generator with Javascript and CSS

Categories

Resources