Fit an element according of another element - javascript

I am trying to fit two divs around the header-title, but I can't seem to get it to work. I'm not sure that the calc() works well with the javascript. Here is the code so far:
document.getElementByClass('Header').clientWidth;
:root {
--main-accent-color: #3500D3;
--main-bg-color: #282828;
--secondary-bg-color: #0c0032;
--main-content-bg-color: #190061;
--text-color: #ffffff;
--alt-color: #240090;
}
* {
box-sizing: content-box;
margin: 0;
}
body {
background-color: var(--main-bg-color);
}
h1 {
font-family: robot0, sans-serif;
font-size: 70px;
font-weight: 100;
font-variant: petite-caps;
color: var(--text-color);
}
.header {
background-color: var(--main-bg-color);
width: 100%;
height: 100px;
top: 0;
margin: 0;
position: fixed;
text-align: center;
z-index: 10;
border-bottom: 5px solid var(--main-accent-color);
}
.header-title {
box-sizing: content-box;
background-color: var(--main-bg-color);
height: 85px;
width: 500px;
margin: auto;
vertical-align: middle;
padding-top: 50px;
padding-top: 20px;
border-left: 5px solid var(--main-accent-color);
border-right: 5px solid var(--main-accent-color);
z-index: 11
}
.header-info {
width: calc((clientWidth - 500) / 2);
height: 100px;
display: inline-block;
position: absolute;
margin: 0;
padding: 0;
}
#right-info {
right: calc(((clientWidth - 500) / 2) + 500);
}
#left-info {
right: 0;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Webpage</title>
<script>
document.getElementByClass('header').clientWidth;
</script>
</head>
<body>
<!--Header-->
<div class="header">
<div class="header-title">
<h1>Welcome</h1>
</div>
<div class="header-info" id="left-info">
<p>
Hi
</p>
</div>
<div class="header-info" id="right-info">
<p>
Hi
</p>
</div>
</div>
</body>
</html>
If there is another method that I can use, that would be great. Also, I am learning CSS right now, so I am not confident with JavaScript at all, I only used it because that's how other people did it.

I think you are making it too complicated. I removed a lot of code and added flexbox for the header. Both divs at the side are allowed to grow as much as space allows.
:root {
--main-accent-color: #3500D3;
--main-bg-color: #282828;
--secondary-bg-color: #0c0032;
--main-content-bg-color: #190061;
--text-color: #ffffff;
--alt-color: #240090;
}
* {
box-sizing: content-box;
margin: 0;
}
body {
background-color: var(--main-bg-color);
}
h1 {
font-family: robot0, sans-serif;
font-size: 70px;
font-weight: 100;
font-variant: petite-caps;
color: var(--text-color);
}
.header {
width: 100%;
height: 100px;
top: 0;
position: fixed;
border-bottom: 5px solid var(--main-accent-color);
display: flex;
align-items: center; /* Vertical alignment */
}
.header-title {
width: 500px;
border-left: 5px solid var(--main-accent-color);
border-right: 5px solid var(--main-accent-color);
text-align: center;
}
.header-info {
flex-grow: 1;
}
<div class="header">
<div class="header-info">
<p>
Hi
</p>
</div>
<div class="header-title">
<h1>Welcome</h1>
</div>
<div class="header-info">
<p>
Hi
</p>
</div>
</div>

Related

Stretching a grid box on hover to display additional information in that box

I want to make an weather app and I want to let the user to add in the application some weather cards with the city they are interested with. If they no longer want a specific weather card, they can delete it. For now, you can add some empty cards by using the + button.
Below is what I did and how the app looks like.
In the first phase I want the displayed cards to show the city weather information at the current time and with a hover I want the card to expand and display more information about that city such as a 5 day forecast.
I don't know how to stretch a specific card on hover and I'm asking your help with this problem. Thank you!
const displayContent = document.querySelector('.content');
const widget = document.querySelector('.widget');
const addWidget = document.querySelector(".addButton");
console.log(displayContent)
addWidget.addEventListener('click', newWidget);
var cont=0;
function newWidget(){
cont=cont+1;
let newWidget = document.createElement('div');
newWidget.setAttribute('class', 'widget');
newWidget.setAttribute('id', "widget" + cont);
let closeBtn = document.createElement('span');
closeBtn.setAttribute('class', 'remove');
closeBtn.setAttribute('id', 'remove' +cont);
closeBtn.textContent = '✕';
displayContent.appendChild(newWidget);
newWidget.appendChild(closeBtn);
//remove the cards
var close = document.querySelectorAll("span");
for(let i=0 ; i<close.length; i++){
close[i].addEventListener('click', () =>{
close[i].parentElement.remove();
})
}
}
#import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
:root {
--fontcolor: #313131;
--bgcolor: #FAFAFA;
}
html {
font-family: "Roboto", sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bgcolor);
margin: 0;
color: var(--fontcolor);
transition: background-color 500ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.container {
max-width: 85vw;
margin: 0 auto;
}
header {
display: flex;
margin-bottom: 30px;
font-size: 1.5em;
align-items: center;
justify-content: space-between;
}
.search {
width: 100%;
position: relative;
display: flex;
}
.searchTerm {
width: 100%;
border: 3px solid black;
border-right: none;
padding: 5px;
height: 20px;
border-radius: 5px 0 0 5px;
outline: none;
}
.addButton {
width: 40px;
height: 36px;
border: 1px solid black;
background: black;
text-align: center;
color: #fff;
border-radius: 0 6px 5px 0;
cursor: pointer;
font-size: 20px;
}
.content {
margin-bottom: 1em;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-auto-rows: minmax(250px, 1fr);
grid-gap: 25px;
}
.widget {
color: white;
display: flex;
flex-direction: column;
padding: 25px;
position: relative;
white-space: normal;
word-wrap: break-word;
transition: background-color 50ms;
background: linear-gradient(130deg, rgba(25,118,210,1) 0%, rgba(63,81,181,1) 100%);
box-shadow: 5px 5px 18px -1px rgb(0 0 0 / 34%);
border-radius: 5px;
}
.remove{
position: absolute;
top: 5px;
right: 12px;
font-size: 22px;
opacity: 0.7;
cursor: pointer;
}
#keyframes append-animate {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0%);
opacity: 1;
}
}
/* animate new box */
.widget {
animation: append-animate .3s linear;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Library</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/31c84a9fec.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<header class="header">
<h1 id='title'>Weather App</h1>
<div class="control">
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" placeholder="Add a city">
<button type="submit" class="addButton">+</button>
</div>
</div>
</div>
</header>
<div class="content">
<div class="widget" id="widget0">
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Have you tried using CSS transitions?
div {
width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
transition: all 1s;
}
div.h:hover {
width: 150px;
background-color: purple;
}
div.v:hover {
height: 150px;
background-color: purple;
}
<div class="h"></div>
<div class="v"></div>

How to show text on an image? (code is in question)

I am trying to learn coding in my freetime and have run into an issue. I am trying to have 'contact info' to be a on hover on profile picture so that it shows a way to contact me via phone, email, and shows my name. I'm hoping someone can help with this please.
Cut most of the HTML code in the process to allow post
var infoDivs = document.getElementsByClassName ('infoDivs');
var contactInfoDiv = document.getElementById('contactInfo');
function displayInfo(index) {
for (var i = 0; i < infoDivs.length; i++) {
infoDivs[i].style.display = 'none';
}
infoDivs[index].style.display = 'block';
}
function showcontactInfo() {
contactInfoDiv.style.display = 'block'
}
function hidecontactInfo() {
contactInfoDiv.style.display = 'none'
}
//line 12-18 is what should be my issue? Otherwise line 2? //
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
color: white;
font-family: "verdana";
}
body {
background-image: url('https://imgur.com/GfUxQA7.jpg');
padding: 10px;
}
h1 {
font-size: 35px;
}
h2 {
margin: 0px;
font-size: 30px;
}
header {
margin: 20px;
height: 20%;
}
header img {
position: absolute;
right: 20px;
border-style: solid;
border-radius: 50%;
border-width: 2px;
}
header p {
margin-top: 50px;
}
#main {
position: relative;
height: 70%;
}
#navlist {
list-style: none;
display: inline-block;
height: 100%;
padding: 0px;
margin: 20px;
width: 25%;
font-size: 20px;
font-weight: bold;
}
#navlist li {
height: 18%;
}
#navlist li:hover {
background-color: rgba(255, 255, 255, 0.2);
}
#infoContainer {
position: absolute;
display: inline-block;
top: 20px;
bottom: 20px;
right: 10%;
left: 25%;
height: 90%;
margin-left: 20px;
background-color: rgba(255, 255, 255, 0.2);
}
.infoDivs {
display: none;
margin: 20px;
}
.infoDivs h2 {
margin-bottom: 40px;
}
#bioDiv {
display: block;
}
#contactInfo {
background-color: white;
display: none;
position: fixed;
width: 50%;
left: 25%;
top: 30%
color: black;
text-align: center;
font-size: 3vw;
}
#media (max-width: 500px) {
#navList {
font-size: 15px;
margin-left: 10px;
}
#infoContainer {
margin-left: 10px;
}
}
#media (max-width: 400px) {
h1 {
font-size: 30px;
}
header img {
width: 50px;
right: 5px;
}
#navList {
font-size: 12px;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSS for my webpage.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My webpage</title>
</head>
<body>
<script src="Javascript html.js"></script>
<header>
<img onmouseover='showcontactInfo()' onmouseout='hidecontactInfo()' src='Profile.jpg' alt="Profile picture"> <!--This is what line im having issue with i think?-->
<h1>My Webpage</h1>
<p>Welcome to my webpage where you can learn about me!</p>
</header>
<div id='main'>
<ul id='navlist'>
<li onclick='displayInfo(0)'>Bio</li>
<li onclick='displayInfo(1)'>Education</li>
<li onclick='displayInfo(2)'>Work</li>
<li onclick='displayInfo(3)'>Projects</li>
<li onclick='displayInfo(4)'>Interests</li>
</ul>
<div id='infoContainer'>
<div id='bioDiv' class='infoDivs'>
<h2>Bio</h2>
<p>Here is a little about myself and my background.</p>
<p>Hello my name is Antoly, I'm currently learning coding (HTML5, CSS, and Javascript) and teaching myself Italian language in my free time and attending school to become a Information Technology Network Specialist</p>
</div>
<div id='educationDiv' class='infoDivs'>
<h2>Education</h2>
<p>Here is some info about my schooling and courses that I've taken.</p>
</div>
</div>
</div>
</div>
<div id='contactInfo'> <!-- This is what I want to show my info when you put your mouse over my picture-->
<p>Antoly Borshkev</p>
<p>helloworld#gmail.com</p>
<p>1111111111</p>
</div>
</body>
</html>
You've missed ; after top: 30%; in CSS #contactInfo class
var infoDivs = document.getElementsByClassName ('infoDivs');
var contactInfoDiv = document.getElementById('contactInfo');
function displayInfo(index) {
for (var i = 0; i < infoDivs.length; i++) {
infoDivs[i].style.display = 'none';
}
infoDivs[index].style.display = 'block';
}
function showcontactInfo() {
contactInfoDiv.style.display = 'block'
}
function hidecontactInfo() {
contactInfoDiv.style.display = 'none'
}
//line 12-18 is what should be my issue? Otherwise line 2? //
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
color: white;
font-family: "verdana";
}
body {
background-image: url('https://imgur.com/GfUxQA7.jpg');
padding: 10px;
}
h1 {
font-size: 35px;
}
h2 {
margin: 0px;
font-size: 30px;
}
header {
margin: 20px;
height: 20%;
}
header img {
position: absolute;
right: 20px;
border-style: solid;
border-radius: 50%;
border-width: 2px;
}
header p {
margin-top: 50px;
}
#main {
position: relative;
height: 70%;
}
#navlist {
list-style: none;
display: inline-block;
height: 100%;
padding: 0px;
margin: 20px;
width: 25%;
font-size: 20px;
font-weight: bold;
}
#navlist li {
height: 18%;
}
#navlist li:hover {
background-color: rgba(255, 255, 255, 0.2);
}
#infoContainer {
position: absolute;
display: inline-block;
top: 20px;
bottom: 20px;
right: 10%;
left: 25%;
height: 90%;
margin-left: 20px;
background-color: rgba(255, 255, 255, 0.2);
}
.infoDivs {
display: none;
margin: 20px;
}
.infoDivs h2 {
margin-bottom: 40px;
}
#bioDiv {
display: block;
}
#contactInfo {
background-color: white;
display: none;
position: fixed;
width: 50%;
left: 25%;
top: 30%; /* missed ; */
color: black;
text-align: center;
font-size: 3vw;
}
#media (max-width: 500px) {
#navList {
font-size: 15px;
margin-left: 10px;
}
#infoContainer {
margin-left: 10px;
}
}
#media (max-width: 400px) {
h1 {
font-size: 30px;
}
header img {
width: 50px;
right: 5px;
}
#navList {
font-size: 12px;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSS for my webpage.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My webpage</title>
</head>
<body>
<script src="Javascript html.js"></script>
<header>
<img onmouseover='showcontactInfo()' onmouseout='hidecontactInfo()' src='https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w100-h50-n-l50-sg-rj' alt="Profile picture"> <!--This is what line im having issue with i think?-->
<h1>My Webpage</h1>
<p>Welcome to my webpage where you can learn about me!</p>
</header>
<div id='main'>
<ul id='navlist'>
<li onclick='displayInfo(0)'>Bio</li>
<li onclick='displayInfo(1)'>Education</li>
<li onclick='displayInfo(2)'>Work</li>
<li onclick='displayInfo(3)'>Projects</li>
<li onclick='displayInfo(4)'>Interests</li>
</ul>
<div id='infoContainer'>
<div id='bioDiv' class='infoDivs'>
<h2>Bio</h2>
<p>Here is a little about myself and my background.</p>
<p>Hello my name is Antoly, I'm currently learning coding (HTML5, CSS, and Javascript) and teaching myself Italian language in my free time and attending school to become a Information Technology Network Specialist</p>
</div>
<div id='educationDiv' class='infoDivs'>
<h2>Education</h2>
<p>Here is some info about my schooling and courses that I've taken.</p>
</div>
</div>
</div>
</div>
<div id='contactInfo'> <!-- This is what I want to show my info when you put your mouse over my picture-->
<p>Antoly Borshkev</p>
<p>helloworld#gmail.com</p>
<p>1111111111</p>
</div>
</body>
</html>

Can someone help me how to change the color of pseudo span added to the input box when I click on calculate button in code given below

I am Sandhya and I am trying to change the color of the pseudo span added to the input box, on the left side when I click on calculate button in the code given below.
I was unable to add code as it's showing the error It looks like your post is mostly code; please add some more details.
*,
::after,
::before {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
}
.container {
display: flex;
width: 100%;
height: 100vh;
}
.leftcontainer {
background-color: #e9ecef;
width: 20%;
height: 100%;
}
.userprofile::after {
content: "";
display: block;
background: lightgray;
width: 100%;
height: 1px;
bottom: 0;
z-index: 1;
position: absolute;
}
.userprofile img {
width: 50px;
height: 50px;
border-radius: 50%;
}
.maincontent {
width: 100%;
padding: 15px;
}
.maincontent-header p {
text-align: justify;
font-weight: lighter;
font-weight: 200;
}
.readings {
padding-top: 15px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.readings input {
width: 100px;
height: 50px;
border: none;
padding: 15px;
font-weight: 600;
}
.readings input:focus,
button:focus {
outline: none;
}
.readings button:hover {
outline: none;
background-color: #b5e48c;
}
.reading-group p {
padding-top: 5px;
font-size: 10px;
padding-bottom: 15px;
}
.readings button {
height: 50px;
padding: 8px 8px;
background-color: lightgray;
border: none;
font-size: 15px;
font-weight: 600;
color: #14213d;
cursor: pointer;
box-sizing: border-box;
}
.systolic {
position: relative;
}
.systolic::after {
content: "";
display: block;
background: lightgray;
width: 5px;
height: 100%;
bottom: 0;
z-index: 1;
position: absolute;
}
.diastolic {
position: relative;
}
.diastolic::after {
content: "";
display: block;
background: lightgray;
width: 5px;
height: 100%;
bottom: 0;
left: 0;
z-index: 1;
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blood Pressure Calculator</title>
</head>
<body>
<div class="container">
<div class="leftcontainer">
<div class="maincontent">
<div class="maincontent-header">
<p>Enter your blood pressure reading here :</p>
</div>
<div class="readings">
<div class="reading-group">
<span class="systolic"><input type="text" id="sys" placeholder="Systolic"></span>
<span class="diastolic"><input type="text" id="dys" placeholder="Diastolic"></span>
<button type="button" onclick="calculatebp();">Calculate</button>
<p>(mm Hg)</p>
</div>
</div>
</div>
</div>
</body>
</html>
This is the end of the code and looks forward to your support.
You if you want to change color of pseudo-elements, you can do something like make a new css for a class for a new background color, and add or remove that class using javascript
Put this is css:
.red_pseudo::after{
background: red;
}
Now I am adding the class when the function runs, hence when class is added their bg color will change to red
let diastolic_pseudo = document.getElementsByClassName('diastolic')[0]
let systolic_pseudo = document.getElementsByClassName('systolic')[0]
function calculatebp() {
alert('you clicked :)');
diastolic_pseudo.classList.add('red_pseudo')
systolic_pseudo.classList.add('red_pseudo')
}
Try here : https://codepen.io/sachuverma/pen/OJbKBbo

Javascript - bring up infobox on click image

I have some images, I need to have a clickevent on them bringing up an infobox on each image.
$('.show-infobox').on('click', function() {
// Hide all infoboxes to prevent multiple showing at once
$('.infobox').addClass('hidden');
// Show infobox background
$('.infobox-container').removeClass('hidden');
// Show infobox matching last part of ID
$('#' + this.id.replace('show')).removeClass('hidden');
});
$('.hide-infobox').on('click', function() {
// Manually hide all infoboxes and background
$('.infobox-container').addClass('hidden');
$('.infobox').addClass('hidden');
}).children().on('click', function() {
return false;
});
#charset "utf-8";
.container {
height: 800px;
width: 1000px;
margin: 0;
}
body {
padding:0px;
width:100%;
}
header
{
top: 11px;
width: 100%;
padding-bottom: 10px;
}
#wrapper{
margin-left: auto;
margin-right: auto;
width: 1000px;
}
ol {
list-style-type: upper-roman;
}
H3 {
font-size:16px;
text-shadow: 0px 0px 5px grey;
}
.mainBox
{
background-color: #F0F0F0;
width: 700px;
box-shadow: 0px 0px 15px grey;
top: 310px;
border-radius: 20px;
padding-top: 30px;
padding-right: 50px;
padding-left: 50px;
}
.container nav ul {
list-style-type: none;
}
nav
{
width: 720px;
height:40px;
background-color: #F0F0F0;
border-color: grey;
border-width: 1px;
border-style: solid;
border-radius: 10px;
font-family: 'PT Sans';
font-size: 20px;
margin-bottom:50px;
}
ul{
padding-right: 20px;
margin-top: 6px;
}
a {
color: black;
text-decoration: none;
padding: 25px;
}
a:hover
{
color:#00A0C6;
text-decoration:none;
cursor:pointer;
}
.imagePack
{
float:left;
height: 300px;
width: 200px;
border-style:solid;
}
img.staff {
cursor: pointer;
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
img.staff:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.infobox-container {
background: rgba(0, 0, 0, .2);
width: 100%;
height: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.infobox {
background: #fff;
display: inline-block;
padding: 2rem;
border: solid 1px #eee;
}
.show-infobox {
cursor: pointer;
}
.hidden {
display: none;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="jquery-2.1.4.js"></script>
<script>
$( document ).ready(function() {
$('.show-infobox').on('click', function() {
// Hide all infoboxes to prevent multiple showing at once
$('.infobox').addClass('hidden');
// Show infobox background
$('.infobox-container').removeClass('hidden');
// Show infobox matching last part of ID
$('#' + this.id.replace('show')).removeClass('hidden');
});
$('.hide-infobox').on('click', function() {
// Manually hide all infoboxes and background
$('.infobox-container').addClass('hidden');
$('.infobox').addClass('hidden');
}).children().on('click', function() {
return false;
});
});
</script>
<div id="wrapper">
<center><header><img src="Bilder/spegel.jpg"/></header></center>
</head>
<!--Bakgrundsbild-->
<center><body bgcolor="#FFFFFF ">
<!--Javascript-->
<!--Lådan som håller inne allt innehåll-->
<div class="container">
<!--Header-->
<!--Nedan skrivs innehål/text till sidan-->
<div class="mainBox">
<center><img src="Bilder/title.png"></center>
<p>
<div class="infobox-container hide-infobox hidden">
<div id="infobox-1" class="infobox hidden">This is infobox 1! <span class="hide-infobox">[close]</span></div>
<div id="infobox-2" class="infobox hidden">This is infobox 2! <span class="hide-infobox">[close]</span></div>
</div>
<span id="show-infobox-1" class="show-infobox">Show infobox 1</span>
<span id="show-infobox-2" class="show-infobox">Show infobox 2</span>
</div>
</body></center>
</div>
</html>
At the moment Im just trying to bring up the infobox on a simple text just to see if it works. But it doesn't. Only the container comes up without the actual infobox.
I am just showing how this can be done. Still you need to change your code a lot.
I suggest you to go through w3schools for better understanding.
This is DEMO
$(".infobox-container, .infobox").hide();
$(".show-infobox").click(function()
{
var curId = this.id;
if(curId == "show1")
{
$(".infobox-container, #infobox-1").fadeIn(100);
}
if(curId == "show2")
{
$(".infobox-container, #infobox-2").fadeIn(100);
}
});
$(".hide-infobox").click(function()
{
$(".infobox-container, .infobox").fadeOut();
});
#charset"utf-8";
.container {
height: 800px;
width: 1000px;
margin: 0;
}
body {
padding:0px;
width:100%;
}
header {
top: 11px;
width: 100%;
padding-bottom: 10px;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
}
ol {
list-style-type: upper-roman;
}
H3 {
font-size:16px;
text-shadow: 0px 0px 5px grey;
}
.mainBox {
background-color: #F0F0F0;
width: 700px;
box-shadow: 0px 0px 15px grey;
top: 310px;
border-radius: 20px;
padding-top: 30px;
padding-right: 50px;
padding-left: 50px;
}
.container nav ul {
list-style-type: none;
}
nav {
width: 720px;
height:40px;
background-color: #F0F0F0;
border-color: grey;
border-width: 1px;
border-style: solid;
border-radius: 10px;
font-family:'PT Sans';
font-size: 20px;
margin-bottom:50px;
}
ul {
padding-right: 20px;
margin-top: 6px;
}
a {
color: black;
text-decoration: none;
padding: 25px;
}
a:hover {
color:#00A0C6;
text-decoration:none;
cursor:pointer;
}
.imagePack {
float:left;
height: 300px;
width: 200px;
border-style:solid;
}
img.staff {
cursor: pointer;
opacity: 0.4;
filter: alpha(opacity=40);
/* For IE8 and earlier */
}
img.staff:hover {
opacity: 1.0;
filter: alpha(opacity=100);
/* For IE8 and earlier */
}
.infobox-container {
background: rgba(0, 0, 0, .2);
width: 100%;
height: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.infobox {
background: #fff;
display: inline-block;
padding: 2em;
border: solid 1px #eee;
}
.show-infobox {
cursor: pointer;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="wrapper">
<center>
<header>
<img src="Bilder/spegel.jpg" />
</header>
</center>
<center>
<!--Lådan som håller inne allt innehåll-->
<div class="container">
<!--Header-->
<!--Nedan skrivs innehål/text till sidan-->
<div class="mainBox">
<center>
<img src="Bilder/title.png" />
</center>
<p>
<div class="infobox-container">
<div id="infobox-1" class="infobox">This is infobox 1! <span class="hide-infobox">[close]</span></div>
<div id="infobox-2" class="infobox">This is infobox 2! <span class="hide-infobox">[close]</span></div>
</div>
</p>
<span class="show-infobox" id="show1">Show infobox 1</span>
<span class="show-infobox" id="show2">Show infobox 2</span>
</div>
</div>
</center>
</div>

I'm adding <li> via my submit button and it is pushing past my div. My js function can't fix it

So I'm trying to make the page continue to add the list items without breaking past the body element as shown.
I would like to keep the all the list items within the body and div like the first few. My best idea on how to go through this is by using if statement at the bottom of the JS to rerun autoResizeDiv. Thanks for any help!!
JS
$(function() {
var $newItemButton= $('#newItemButton');
var $newItemForm= $('#newItemForm');
var $textInput= $('input:text');
$newItemButton.show();
$newItemForm.hide();
$('#showForm').on('click', function() {
$newItemButton.hide();
$newItemForm.show();
});
$newItemForm.on('submit', function(e) {
e.preventDefault();
// this prevents the form from submitting which you need
var newText=$('input:text').val();
$('li:last').after('<li>'+ newText + '</li>');
$newItemForm.hide();
$newItemButton.show();
$textInput.val('')
// this empties the text box so you can add a new entry
});
function autoResizeDiv() {
document.getElementById('page').style.height = window.innerHeight +'px';
// document.getElementById('newItemButton').style.height = window.innerHeight +'px';
}
window.onresize = autoResizeDiv;
autoResizeDiv();
if(document.getElementById('addButton').clicked == true) {
autoResizeDiv();
}
})
CSS
#media screen and (max-width:700px) {
body {
background: #111;
background-size: 780px;
font-family: 'Dosis', sans-serif;
color: white;
display: block;
height:100%;
}
h1, h2, p {
text-align: center;
}
img {
max-width: 50px;
/* display: inline-block; */
/* margin: 4% 0 0% 165px;*/
padding: 10% 45% 0 44%;
/* vertical-align: middle;*/
/* position: absolute;*/
}
h1 {
margin: -1% 0 0 0;
font-size: .8rem;
letter-spacing: 1.2px;
}
h2 {
min-width: 70%;
letter-spacing: 8px;
text-transform: uppercase;
margin: 5% 0 4% 0%;
font-size: 1.4rem;
}
div {
margin: auto;
background: #222;
width: 360px;
}
#page {
/* padding: auto;*/
/* display: inline-block;*/
height: 465px;
}
ul {
list-style: none;
padding: 0;
margin: 5%;
}
li:nth-child(-n+3) {
background-color: #B80000;
}
li:nth-child(n+4) {
background-color: coral;
}
li {
margin: .3% -5.2% .3% -5.2%;
padding: 12px 0 1px 16px;
height: 35px;
font-size: 1.1rem;
/* width: 100%;*/
/*text-align: 30% 0 30% 30%*/
}
p {
color: #111;
background: #FFF;
border-radius: 1.5% / 10%;
font-size: .85rem;
margin: 0% 10%;
}
#newItemButton {
position: absolute;
background: #222;
}
#newItemForm {
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-justify-content: center;
-webkit-flex-wrap: wrap;
background: #222;
z-index: 10; position:relative
}
#itemDescription {
margin: 3.8px 10px 0 0;
width: 68%;
border: none;
border-radius: 2.5% / 18%;
/* padding: 10px 0 0 0;*/
font-size: 1rem;
text-align: left;
text-indent: 10px;
}
#addButton, #showForm {
background: #B80000;
border: none;
text-transform: uppercase;
font-weight: bold;
font-size: 1rem;
color: white;
letter-spacing: .9px;
text-align: center;
}
#addButton {
border-radius: 8% / 20%;
padding: 10px 22px;
margin: 3px 0px 0 0;
}
#showForm {
border-radius: 3% / 11%;
padding: 10px 22px;
margin: 3px 17px 0 0;
float: right;
}
HTML
<!DOCTYPE html>
<html lang="en">
<script src="jquery-1.11.2.min.js"></script>
<script src="jquery-1.11.2.js"></script>
<script src="myscript.js"></script>
<link href='http://fonts.googleapis.com/css?family=Dosis:300|Yanone+Kaffeesatz'
rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="main.css">
<head>
<title> JavaScript Foundations: Variables</title>
<style>
html {
background: #FAFAFA;
font-family: sans-serif;
}
</style>
</head>
<body id="body">
<div id="page">
<img src="lion.png" alt="there's supposed to be a lion">
<h1 id="header">LISTKING</h1>
<h2>Buy Groceries</h2>
<p>"Lions are awesome, fun to play with, and have to pee a lot"
-J.K. Growling</p>
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
<div id="newItemButton"><button href="#" id="showForm">new item</button></div>
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Add description..." />
<input type="submit" id="addButton" value="add" />
</form>
</div>
</body>
</html>
Please have a look at your CSS and adjust the #page div to have overflow, or remove the height entirely.
#page {
/* padding: auto;*/
/* display: inline-block;*/
height: 465px;
overflow: scroll;
}
try changing your body height:100% to min-height: 100%;
making ul overflow-y:scroll also solves the problem, but a scroll bar may disrupt your look and feel

Categories