Hello everyone i was finishing the last touches on my simple math function plotter then when i used developer tools to see how it looks on mobiles i realized that the header text isn't centered like how it is on the normal version (pc screen) so i tried to add some media queries and still doesn't work.(it always goes to the left on the mobile version), by the way initial scale is set to 1.0 in the meta data.
So here is the code and hope u help me
HTML
<div id="header-container">
<p id="header">راسم منحنيات الدوال</P>
</div>
CSS
#header-container {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -35px;
width: 100%;
}
#header {
font-family: Font3;
font-size: 45px;
}
Also if you want to check the whole application source code visit this codepen post over here
Note: when u switch to phone view make it fullscreen by clicking twice to see that the text does't stay at the middle.
Thanks
If you want your header to be centered above the graph at all times then put the graph and the header inside the same div. So that the width for your header is the same as the width for graph in all viewports.
var parameters = {
target: '#myFunction',
width: '834',
height: '540',
data: [{
fn: 'x*x',
color: '',
derivative: {
fn: '2*x',
updateOnMouseMove: true
}
},
{
fn: 'x*x',
color: 'red',
derivative: {
fn: '2*x',
updateOnMouseMove: true
}
}
],
grid: true,
yAxis: {
domain: [-9, 9]
},
xAxis: {
domain: [-7, 7]
}
};
function plot() {
let f = document.querySelector("#function").value;
let color = document.querySelector("#color").value;
let derivative = document.querySelector("#der").value;
let f2 = document.querySelector("#function2").value;
let color2 = document.querySelector("#color2").value;
let derivative2 = document.querySelector("#der2").value;
parameters.data[0].fn = f;
parameters.data[0].color = color;
parameters.data[0].derivative.fn = derivative;
parameters.data[1].fn = f2;
parameters.data[1].color = color2;
parameters.data[1].derivative.fn = derivative2;
functionPlot(parameters);
};
plot();
#font-face {
font-family: "Font";
src: url("Almarai-Regular.ttf");
}
#font-face {
font-family: "Font2";
src: url("Cairo-Regular.ttf");
}
#font-face {
font-family: "Font3";
src: url("MarkaziText-Regular.ttf");
}
#plot {
touch-action: none;
float: left;
}
.layer {
display: grid;
grid-template-columns: auto auto;
grid-gap: 0px;
}
#plotSettings {
float: right;
padding: 0px;
}
#func1 {
margin-top: 20px;
font-family: Font2;
font-size: 18px;
}
.input {
width: 110px;
float: left;
margin-right: 20px;
padding: 10px;
border: 1px rgb(15, 97, 74) solid;
border-radius: 7px;
}
table {
border-collapse: collapse;
}
table,
td,
th {
border: 1px solid black;
padding: 8px 15px;
}
.tableheads {
text-align: center;
font-family: Font;
height: 30px;
}
th {
font-family: Font;
font-size: 20px;
height: 50px;
}
#header-container {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -35px;
width: 100%;
}
#header {
font-family: Font3;
font-size: 45px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<script src="https://unpkg.com/d3#3/d3.min.js"></script>
<script src="https://unpkg.com/function-plot#1/dist/function-plot.js"></script>
<div class="container">
<div class="layer">
<section id="plot">
<div id="header-container">
<p id="header">راسم منحنيات الدوال</p>
</div>
<div id="myFunction"></div>
</section>
<div dir="rtl" id="plot-settings">
<table>
<tr>
<th>اعدادات المنحنيات</th>
</tr>
<tr>
<td class="tableheads">المنحنى الأول</td>
</tr>
<tr>
<td>
<section id="func1">
<label for="function"> دستور الدالة 1 : </label>
<input id="function" type="text" value="x*x" onchange="plot();" dir="ltr" class="input" />
<p></p>
<label for="derivative"> مشتقة الدالة 1 : </label>
<input type="text" id="der" value="2*x" onchange="plot();" dir="ltr" class="input" />
<p></p>
<p></p>
<label for="color">لون المنحني : </label>
<input type="color" id="color" onchange="plot();" dir="ltr" />
<p></p>
</section>
</td>
</tr>
<tr>
<td class="tableheads">المنحنى الثاني</td>
</tr>
<tr>
<td>
<section id="func1">
<label for="function"> دستور الدالة 2 : </label>
<input id="function2" type="text" value="x^3" onchange="plot();" dir="ltr" class="input" />
<p></p>
<label for="derivative"> مشتقة الدالة 2 : </label>
<input type="text" id="der2" value="3*x^2" onchange="plot();" dir="ltr" class="input" />
<p></p>
<label for="color">لون المنحني : </label>
<input type="color" id="color2" onchange="plot();" dir="ltr" value="Red" />
<p></p>
</section>
</td>
</tr>
</table>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Try this by adding it in to css
p#header {
text-align: center;
}
#header-container {
margin-left: auto;
margin-right: auto;
margin-top: -35px;
width: fit-content;
}
Related
I am trying to make a to-do list by myself and it's going pretty well, but I can't remove the correct div. It always removes the first one in the pile. I am not creating new divs, I am basically cloning a template that I've made and setting the display as none.
let d = document.getElementById('botao')
d.addEventListener('click', addTarefa())
function addTarefa() {
let divtarefa = document.getElementById('TarefaEscondida')
clone = divtarefa.cloneNode(true)
clone.id = 'tarefa'
clone.class = "tarefa"
container.appendChild(clone)
clone.setAttribute('display', 'flex')
clone.setAttribute('class', 'tarefa')
clone.setAttribute('id', 'tarefa')
}
function suma() {
let father = document.getElementById('container')
let son = document.getElementById('tarefa')
let apaga = father.removeChild(son)
}
* {
margin: 0;
box-sizing: border-box;
}
body {
background-color: aqua;
}
header {
text-align: center;
background-color: rgb(255, 208, 0);
}
#container {
display: flex;
background-color: beige;
margin-top: 15px;
margin-left: 15%;
margin-right: 15%;
height: 90vh;
align-items: stretch;
padding-top: 8px;
flex-direction: column;
flex-wrap: nowrap;
gap: 8px;
}
.tarefa {
padding: 5px;
background-color: brown;
margin-left: 8px;
margin-right: 8px;
display: flex;
}
.texto {
border: none;
margin-left: 8px;
background-color: brown;
color: white;
width: 90%;
padding: 8px;
}
::placeholder {
color: white;
opacity: 1;
}
.remove {
float: right;
height: 40px;
width: 40px;
color: #333;
cursor: pointer;
}
#botao {
position: fixed;
background-color: brown;
height: 80px;
width: 80px;
border-radius: 50%;
bottom: .8%;
left: 1.5%;
text-align: center;
color: white;
font-weight: 900;
font-size: 4.5rem;
}
#TarefaEscondida {
padding: 5px;
background-color: brown;
/* margin-top: 8px; */
margin-left: 8px;
margin-right: 8px;
display: none;
}
#TextoEscondido {
border: none;
margin-left: 8px;
background-color: brown;
color: white;
width: 90%;
padding: 8px;
}
<!DOCTYPE html>
<html lang="pt-br">
<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">
<link rel="stylesheet" href="style.css">
<title>My To Do list</title>
</head>
<body>
<header id="header">
<h1>My To do list</h1>
</header>
<main id="container">
<div id="TarefaEscondida">
<input type="button" value="Feito" class="remove" onclick="suma()">
<input type="text" placeholder="Escreva aqui..." id="TextoEscondido">
</div>
<div id='tarefa' class="tarefa">
<input type="button" value="Feito" class="remove" onclick="suma()">
<input type="text" placeholder="Escreva aqui..." class="texto">
</div>
</main>
<div id="botao" onclick="addTarefa()">
<P>+ </P>
</div>
<script src="main.js"></script>
</body>
</html>
You don't need to bother with element IDs. DOM navigation will allow you to find the parent of the clicked element, and remove it:
<main id="container">
<div id="TarefaEscondida">
<input type="button" value="Feito" class="remove" onclick="suma(this)">
<input type="text" placeholder="Escreva aqui..." id="TextoEscondido">
</div>
<div id='tarefa' class="tarefa">
<input type="button" value="Feito" class="remove" onclick="suma(this)">
<input type="text" placeholder="Escreva aqui..." class="texto">
</div>
</main>
(Notice how I've changed the onclick so it passes this element)
And then your remove function can simply locate the parent of the clicked element and remove it.
function suma(element) {
element.parentNode.remove();
}
Also, please note: In your function that adds a new element, you should be aware of duplicating element IDs. That will create invalid HTML because IDs must be unique.
Here is a Fiddle example.
let d = document.getElementById('botao')
d.addEventListener('click', addTarefa())
function addTarefa() {
let divtarefa = document.getElementById('TarefaEscondida')
clone = divtarefa.cloneNode(true)
clone.id = 'tarefa'
clone.class = "tarefa"
container.appendChild(clone)
clone.setAttribute('display', 'flex')
clone.setAttribute('class', 'tarefa')
clone.setAttribute('id', 'tarefa')
}
function suma(element) {
element.parentNode.remove();
}
<main id="container">
<div id="TarefaEscondida">
<input type="button" value="Feito" class="remove" onclick="suma(this)">
<input type="text" placeholder="Escreva aqui..." id="TextoEscondido">
</div>
<div id='tarefa' class="tarefa">
<input type="button" value="Feito" class="remove" onclick="suma(this)">
<input type="text" placeholder="Escreva aqui..." class="texto">
</div>
</main>
<div id="botao" onclick="addTarefa()">
<P>+ </P>
</div>
In .addEventListener you put function but don't call it.
d.addEventListener('click',addTarefa)
What I'm Doing
I am creating a picture framing calculator using HTML, CSS, and JavaScript.
What the Calculator Solves
The following are example user inputs:
Frame Width (wf): 16
Frame Height (hf): 20
Picture Width (wp): 11
Picture Height (hp): 17
Mat Overlap (o): .25
The equations for my calculator are:
Width = (1 / 2) * (hf - hp + o) = 1.625 which equates to the <div id="width">
Height = (1 / 2) * (wf - wp + o) = 2.625 which equates to the <div id="height">
The Code
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
/*Fieldset and legend */
fieldset {
margin: 2em 0;
padding: 1em 2em;
border: solid 1px #ccc;
border-radius: 6px;
min-width: P 200px;
}
legend {
font-size: 1.25em;
padding: 0 .25em;
color: #999;
}
/* Labels */
label {
display: block;
margin-top: 1em;
}
.checks label {
margin-top: 0;
}
label:first-of-type {
margin-top: 0;
}
/* Inputs and textarea */
input {
padding: .5em;
border: solid 1px #999;
background-color: #D3D3D3
}
input[type="number"],
input[type="text"] {
width: 15em;
background-color: #D3D3D3
}
textarea {
min-height: 8em;
min-width: 100%;
padding: .5em;
border: solid 1px #999;
background-color: #D3D3D3
}
/* radio buttons and checkboxes */
.checks {
margin-bottom: 1em;
}
.checks p {
margin-bottom: 0;
}
input[type="checkbox"]+label,
input[type="radio"]+label {
display: inline-block;
padding-top: 0;
margin-top: 0;
}
input[type="radio"] {
margin-left: 1.5em;
margin-right: 0;
}
input[type="radio"]:first-of-type {
margin-left: 0;
}
#dvemail {
display: none;
}
#chkYes:checked~#dvemail {
display: block;
}
/* Submit Button */
input[type="button"] {
padding: .5em 1em;
border-radius: 6px;
background-color: #333;
color: #fff;
font-family: 'Lato', sans-serif;
font-size: .8em;
}
/* Large screen rules */
#media screen and (min-width: 430px) {
legend {
font-size: 1.75em;
}
fieldset {
width: 40%;
min-width: 320px;
margin: auto;
}
.checks label {
display: inline-block;
padding-top: .5em;
margin-top: 0;
margin-right: .5em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name "viewport" content="width=device-width,
initial-scale=1.0">
<title>I Was Framed - Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<form id="frm1" action="form_action.asp">
<fieldset>
<legend>
I Was Framed Calculator
</legend>
<label for="frameWidth">Frame Width:</label><input type="number" step="any" min="0" name="wf" id="wf">
<label for="frameHeight">Frame Height:</label><input type="number" step="any" min="0" name="hf" id="hf"><br>
<label for="pictureWidth">Picture Width:</label><input type="number" step="any" min="0" name="wp" id="wp">
<label for="pictureHeight">Picture Height:</label><input type="number" step="any" min="0" name="hp" id="hp"><br>
<label for="matOverlap">Mat Overlap:</label><input type="number" min="0" step="any" name="o" id="o"><br>
<input type="button" onclick="calc()" value="Calculate" name="cmdCalc" />
</fieldset>
</form>
</section>
<script>
function calc()
{
var wf = document.getElementById('wf').value
var hf = document.getElementById('hf').value
var wp = document.getElementById('wp').value
var hp = document.getElementById('hp').value
var o = document.getElementById('o').value
var width = (1 / 2) * (hf - hp + o);
var height = (1 / 2) * (wf - wp + o);
document.getElementById('width').innerHTML = width;
document.getElementById('height').innerHTML = height;
}
</script>
<center>
<div style="width:300px;height:300px;border:1px solid #000;">
<center>
<div id="width"><div id="height"></div></div>
</center>
</div>
</center>
</body>
</html>
The Problem & What I've Tried
My code is able to display the Width which is <div id="width"> on the resulting rectangle. However, I cannot display the Height which is <div id="height">. Here is the portion of the code in question:
<center><div style="width:300px;height:400px;border:1px solid #000;"><center><div id="width"><div id="height"></div></center></div></center>
My Question
How do I display <div id="height"> as shown in the image here: placement of height? In the image, the 1.625 is the calculation and correct placement of <div id="width">.
I have finally figured out a solution for the following question:
How do I display as shown in the image here,
placement of Cut Height, Cut Width is already included.
I added a div with the id of height to the rectangle:
<center>
<div style="width:200px;height:300px;border:1px solid #000;">
<center>
<div id="width"></div>
</center>
<div id="height"></div>
</div>
</center>
And then this accompanying CSS:
#height {
text-align: left;
margin-top: 130px;
margin-left: 4px;
}
First, I aligned the text to the left of the rectangle.
Then, I moved the rectangle down by 130 pixels, about half of the 300px tall box (I didn’t put 150px, exactly half, because adding margin on top adds space above the text. If the top of the box was 150px down from the top, it wouldn’t look centered, since the top of the text would be centered. It’s more about eyeballing that 130px until it looks right).
Lastly, I added 4px of margin on the left so the text isn’t so close to the left edge and looks less cramped.
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
/*Fieldset and legend */
fieldset {
margin: 2em 0;
padding: 1em 2em;
border: solid 1px #ccc;
border-radius: 6px;
min-width: P 200px;
}
legend {
font-size: 1.25em;
padding: 0 .25em;
color: #999;
}
/* Labels */
label {
display: block;
margin-top: 1em;
}
.checks label {
margin-top: 0;
}
label:first-of-type {
margin-top: 0;
}
/* Inputs and textarea */
input {
padding: .5em;
border: solid 1px #999;
background-color: #D3D3D3
}
input[type="number"],
input[type="text"] {
width: 15em;
background-color: #D3D3D3
}
textarea {
min-height: 8em;
min-width: 100%;
padding: .5em;
border: solid 1px #999;
background-color: #D3D3D3
}
/* radio buttons and checkboxes */
.checks {
margin-bottom: 1em;
}
.checks p {
margin-bottom: 0;
}
input[type="checkbox"]+label,
input[type="radio"]+label {
display: inline-block;
padding-top: 0;
margin-top: 0;
}
input[type="radio"] {
margin-left: 1.5em;
margin-right: 0;
}
input[type="radio"]:first-of-type {
margin-left: 0;
}
#height {
text-align: left;
margin-top: 150px;
margin-left: 4px;
}
/* Submit Button */
input[type="button"] {
padding: .5em 1em;
border-radius: 6px;
background-color: #333;
color: #fff;
font-family: 'Lato', sans-serif;
font-size: .8em;
}
/* Large screen rules */
#media screen and (min-width: 430px) {
legend {
font-size: 1.75em;
}
fieldset {
width: 40%;
min-width: 320px;
margin: auto;
}
.checks label {
display: inline-block;
padding-top: .5em;
margin-top: 0;
margin-right: .5em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name "viewport" content="width=device-width,
initial-scale=1.0">
<title>I Was Framed - Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<form id="frm1" action="form_action.asp">
<fieldset>
<legend>
I Was Framed Calculator
</legend>
<label for="frameWidth">Frame Width:</label><input type="number" step="any" min="0" name="wf" id="wf">
<label for="frameHeight">Frame Height:</label><input type="number" step="any" min="0" name="hf" id="hf"><br>
<label for="pictureWidth">Picture Width:</label><input type="number" step="any" min="0" name="wp" id="wp">
<label for="pictureHeight">Picture Height:</label><input type="number" step="any" min="0" name="hp" id="hp"><br>
<label for="matOverlap">Mat Overlap:</label><input type="number" min="0" step="any" name="o" id="o"><br>
<br>
<input type="button" onclick="calc()" value="Calculate" name="cmdCalc"/>
</fieldset>
</form>
</section>
<script>
function calc()
{
var wf = document.getElementById('wf').value
var hf = document.getElementById('hf').value
var wp = document.getElementById('wp').value
var hp = document.getElementById('hp').value
var o = document.getElementById('o').value
var width = (1/2)*(hf-hp+o);
var height = (1/2)*(wf-wp+o);
document.getElementById('width').innerHTML = width;
document.getElementById('height').innerHTML = height;
}
</script>
<center>
<div style="width:400px;height:500px;border:2px solid #000; margin-top: 30px; margin-bottom: 30px;">
<center>
<div id="width"></div>
</center>
<div id="height"></div>
</div>
</center>
</body>
</html>
Now there are calculated numbers which display on a rectangle in the width and height portions of the shape: based on the input of a picture framing calculator.
Decimal to Fraction - Optional
EDIT: I conducted some more research, so I hope you find this valuable. I discovered a way to display the output in fraction form as opposed to decimal.
First Edit for Fractions
To accomplish this in the HTML code above:
Find:
<input type="button" onclick="calc()" value="Calculate" name="cmdCalc"/>
</fieldset>
</form>
</section>
Add After:
<script src="https://unpkg.com/fractional#1.0.0/index.js"></script>
I found this library called fraction.js. So you can load fraction.js through the unpkg.com website.
Second Edit for Fractions
Find:
document.getElementById('width').innerHTML = width;
document.getElementById('height').innerHTML = height;
Replace With:
document.getElementById('width').innerHTML = new Fraction(width).toString();
document.getElementById('height').innerHTML = new Fraction(height).toString();
You’ll notice that, instead of width, I wrote new Fraction(width).toString(). That’s what the documentation of the library told me to do, in order to use their library (which converts decimals into fractions).
I made a form for an event. When I click the first radio button, then submit. The warning message disappears, however, if I click the second radio button, the warning does not. My question is the some function not suitable for this case? How do I revise it? What kind of case do we use some function? Thank you!
const form = document.querySelector('.apply__form');
function createWarning(node) {
// if there is no warning msg, then create one
if (!node.querySelectorAll('.warning__style').length) {
const warning__msg = document.createElement('p');
warning__msg.innerHTML = 'Please fill in';
warning__msg.classList.add('warning__style');
node.appendChild(warning__msg);
}
}
form.addEventListener('submit', e => {
e.preventDefault();
let result = [];
// Check the required answer for name, phone, email, resource
const reqAns = document.querySelectorAll('.required .answer');
const reqAnsArray = [...reqAns];
reqAnsArray.map(element => {
if (element.value === "") {
createWarning(element.parentElement);
}
if (element.value && element.parentElement.querySelectorAll('.warning__style').length) {
element.parentElement.lastChild.classList.add('warning__disappear')
}
result.push(element.value)
})
// Check the required answer for the type of applying event
const reqChoice = document.querySelectorAll('.required input[type=radio]');
const reqChoiceArray = [...reqChoice];
reqChoiceArray.some(element => {
if (!element.checked) {
createWarning(element.parentElement.parentElement);
}
if (element.checked && element.parentElement.parentElement.querySelectorAll('.warning__style').length) {
element.parentElement.parentElement.lastChild.classList.add('warning__disappear')
}
})
})
body, html {
box-sizing: border-box;
font-size: 16px;
}
.wrapper {
width: 100%;
background:#f0f0f0;
padding: 30px 0;
}
.apply__form {
border-top: 8px solid #f00;
margin: 0 auto;
max-width: 645px;
background: #fff;
padding: 50px;
}
.form__title {
font: normal normal bold 1.8rem "Microsoft JhengHei";
}
.event__info {
margin: 2rem 0;
font: normal normal normal 0.9rem "Microsoft JhengHei";
}
.event__info .event__place {
margin-top: 0.5rem;
}
.notice {
color: #e74149;
font: normal normal normal 1rem "Microsoft JhengHei";
}
.notice::before {
content: "*";
padding-right: 5px;
}
.questions {
width: 100%;
}
.question {
font: normal normal normal 1rem "Microsoft JhengHei";
margin-top: 50px;
}
.question .question__title {
margin-bottom: 20px;
}
.question .question__title::after {
content: "*";
color: #e74149;
padding-left: 5px;
}
.question:nth-child(4) .type1 {
margin-bottom: 23px;
}
.question:nth-child(6) .question__title::after {
content: none;
}
.sub__title{
margin-bottom: 30px;
}
.question .answer {
width: 250px;
padding: 5px;
}
.button__section {
margin-top: 55px;
font: normal normal normal 1rem "Microsoft JhengHei";
}
.submit__btn {
background: #fad312;
border-radius: 3px;
outline: none;
border: none;
padding: 1rem 2rem;
margin-bottom: 20px;
cursor: pointer;
}
.warning {
font-size: 14px;
}
.copy__right {
height: 30px;
background: #000;
color: #999;
text-align: center;
padding: 15px 0;
line-height: 30px;
font-family: "Microsoft JhengHei";
}
.warning__style {
color: #e74149;
font-size: 14px;
position: absolute;
}
.warning__disappear {
display: none;
}
.wrong__format {
border: 1px solid #f00;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<title>Lazy-Form</title>
</head>
<body>
<div class="wrapper">
<form class="apply__form">
<h1 class="form__title">ABC FORM</h1>
<div class="event__info">
<p class="event__time">Event time</p>
<p class="event__place">Event location</p>
</div>
<h3 class="notice">Must</h3>
<div class="questions">
<div class="question required">
<p class="question__title">Nick name</p>
<input type="text" placeholder="Answer" class="answer">
</div>
<div class="question required">
<p class="question__title">Email</p>
<input type="email" placeholder="Answer" class="answer">
</div>
<div class="question required">
<p class="question__title">Phone</p>
<input type="text" placeholder="Answer" class="answer" id="number">
</div>
<div class="question required">
<p class="question__title">type</p>
<div class="type1 radioType">
<input type="radio" name="type" id="bed">
<label for="bed">Bed</label>
</div>
<div class="type2 radioType">
<input type="radio" name="type" id="phone">
<label for="phone">Phone</label>
</div>
</div>
<div class="question required">
<p class="question__title">How do you know this?</p>
<input type="text" placeholder="Answer" class="answer">
</div>
<div class="question">
<p class="question__title">Other</p>
<input type="text" placeholder="Answer" class="answer">
</div>
</div>
<div class="button__section">
<input type="submit" class="submit__btn" value="Submit">
</div>
</form>
</div>
<script src="app.js"></script>
</body>
</html>
I see two potential issues here. You are using querySelectorAll, which returns a static nodeList. But this shouldn't be the issue here, just something you need to be aware of.
You are using the some method in a wrong way.
You need to give it a function which checks each element and returns true or false.
If any of the element matches, the some method returns true as a whole.
So, it should look more like. (element down there is not correct, but I hope you get the idea.)
var response = reqChoiceArray.some(element => {
if (!element.checked) {
return false;
}
if (element.checked && element.parentElement.parentElement.querySelectorAll('.warning__style').length) {
return true;
}
})
if(!!response){
element.parentElement.parentElement.lastChild.classList.add('warning__disappear');
}else{
createWarning(element.parentElement.parentElement);
}
Slinding Feedback Form isn't responsive at the moment. I've tested it on the phone and the text goes over the screen.
I've changed the CSS #mrova-feedback to: max-with:90%; still not working.
I have tried nearly everything and my issue is that I can not make it responsive.
What am I doing wrong?
Any thoughts?
(function($) {
$.fn.vAlign = function() {
return this.each(function(i) {
var h = $(this).height();
var oh = $(this).outerHeight();
var mt = (h + (oh - h)) / 2;
$(this).css("margin-top", "-" + mt + "px");
$(this).css("top", "50%");
});
};
$.fn.toggleClick = function() {
var functions = arguments;
return this.click(function() {
var iteration = $(this).data('iteration') || 0;
functions[iteration].apply(this, arguments);
iteration = (iteration + 1) % functions.length;
$(this).data('iteration', iteration);
});
};
})(jQuery);
$(window).load(function() {
//cache
$img_control = $("#mrova-img-control");
$mrova_feedback = $('#mrova-feedback');
$mrova_contactform = $('#mrova-contactform');
//setback to block state and vertical align to center
$mrova_feedback.vAlign()
.css({
'display': 'block',
'height': $mrova_feedback.outerHeight()
});
//Aligning feedback button to center with the parent div
$img_control.vAlign()
//animate the form
.toggleClick(function() {
$mrova_feedback.animate({
'right': '-2px'
}, 1000);
}, function() {
$mrova_feedback.animate({
'right': '-' + $mrova_feedback.outerWidth()
}, 1000);
});
//Form handling
$('#mrova-sendbutton').click(function() {
var url = 'send.php';
var error = 0;
$('.required', $mrova_contactform).each(function(i) {
if ($(this).val() === '') {
error++;
}
});
// each
if (error > 0) {
alert('Please fill in all the mandatory fields. Mandatory fields are marked with an asterisk *.');
} else {
$str = $mrova_contactform.serialize();
//submit the form
$.ajax({
type: "GET",
url: url,
data: $str,
success: function(data) {
if (data == 'success') {
// show thank you
$('#mrova-contact-thankyou').show();
$mrova_contactform.hide();
} else {
alert('Unable to send your message. Please try again.');
}
}
});
//$.ajax
}
return false;
});
});
label {
display: block;
padding-bottom: 5px;
margin-top: 20px;
}
#mrova-feedback {
display: hidden;
width: 420px;
position: fixed;
right: -462px;
border: 1px solid #3cb58c;
padding: 8px 20px;
background-color: #fff;
}
#mrova-contactform ul {
margin: 0;
padding: 0;
}
#mrova-contactform input,
#mrova-contactform textarea {
width: 400px;
padding: 10px;
border: 1px solid #ccc;
}
#mrova-contactform ul li {
list-style: none;
padding-bottom: 20px;
}
#mrova-img-control {
cursor: pointer;
position: absolute;
left: -52px;
width: 52px;
background: transparent url('feedback_buttons/feedback.jpg');
height: 168px;
}
#mrova-contactform #mrova-sendbutton {
width: 60px;
background: #db4f4a;
color: #fff;
cursor: pointer;
padding: 5px 10px;
border: none;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>
Feedback Form Demo
</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- Files For mRova Feedback Form [Dependency: jQuery] -->
<script src="mrova-feedback-form.js" type="text/javascript"></script>
<link rel="stylesheet" href="mrova-feedback-form.css" type="text/css" />
<!-- END -->
<!-- Just For Demo -->
<style type="text/css">
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
body {
background-color: #f2f2f2;
font-family: helvetica, arial, tahoma, verdana, sans-serif;
}
h1 {
text-align: center;
margin-top: 40px;
color: #333;
}
</style>
<!-- END -->
</head>
<body>
<h1>Free Feedback Form</h1>
<!--Feedback Form HTML START -->
<div id="mrova-feedback">
<div id="mrova-contact-thankyou" style="display: none;">
Thank you. We'hv received your feedback.
</div>
<div id="mrova-form">
<form id="mrova-contactform" action="#" method="post">
<ul>
<li>
<label for="mrova-name">Your Name*</label> <input type="text" name="mrova-name" class="required" id="mrova-name" value="">
</li>
<li>
<label for="mrova-email">Email*</label> <input type="text" name="mrova-email" class="required" id="mrova-email" value="">
</li>
<li>
<label for="mrova-message">Message*</label>
<textarea class="required" id="mrova-message" name="mrova-message" rows="8" cols="30"></textarea>
</li>
</ul>
<input type="submit" value="Send" id="mrova-sendbutton" name="mrova-sendbutton">
</form>
</div>
<div id="mrova-img-control"></div>
</div>
<!-- Feedback Form HTML END -->
</body>
</html>
Many things are wrong.
I've tweaked your code and improved it.
The edit was made only on your HTML and CSS.
* {
box-sizing: border-box;
}
body{
background-color: #f2f2f2;
font-family: helvetica,arial,tahoma,verdana,sans-serif;
}
h1{
text-align: center;
margin-top: 40px;
color: #333;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #db4f4a;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
/*background-color: #f2f2f2;*/
padding: 20px;
display: hidden;
/*width: 420px;*/
/*position: fixed;*/
/*right: -462px;*/
border: 1px solid #3cb58c;
/*padding: 8px 20px;*/
background-color: #fff;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<h1>ReFree Feedback Form</h1>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">First Name*</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last Name*</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="message">Message*</label>
</div>
<div class="col-75">
<textarea id="message" name="message" placeholder="Write youre message.." style="height:200px"></textarea>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
Well forget my HTML & CSS code
the problem in this script:
$img_control.vAlign()
//animate the form
.toggleClick(function() {
$mrova_feedback.animate({
'right': '-2px'
}, 1000);
}, function() {
$mrova_feedback.animate({
'right': '-' + $mrova_feedback.outerWidth()
}, 1000);
});
The script after modification:
You must change the value of 'right': '-2px'.
I think -120 is very appropriate, try it and tell me the result.
$img_control.vAlign()
//animate the form
.toggleClick(function() {
$mrova_feedback.animate({
'right': '-120px'
}, 1000);
}, function() {
$mrova_feedback.animate({
'right': '-' + $mrova_feedback.outerWidth()
}, 1000);
});
Do not forget this tag to make the page responsive :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This tag should be in <head>
as the title suggests. what im trying to do is get my button to show or hide the above text ( on my Tutorial Quiz page), by clicking the button. So what happens is the text shows. but when i click the button it will not hide.
Here is my html code for "Tutorial Quiz" Page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial Quiz</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<script src="quizconfig.js">
</script>
<script>
var actualchoices=new Array()
document.cookie="ready=yes"
</script>
</head>
<body>
<header>
<a href="Tutorial Quiz.html" id="logo">
<h1>Webprograming Quiz</h1>
<h2>by Chris Moore</h2>
</a>
<nav>
<ul>
<li>Home</li>
<li>Tutorial</li>
<li>Quiz</li>
<li>Feedback</li>
</ul>
</nav>
</header>
<div id="wrapper">
<p align="center">
<form method="POST" name="myquiz">
<font face="Arial"><big><big>General Knowledge Quiz</big></big></font></p>
<div class="qheader">1) What is the colour of Irn-Bru</div>
<div class="qselections">
<input type="radio" value="a" name="question1">a) Orange.<br>
<input type="radio" value="b" name="question1">b) Red.<br>
<input type="radio" value="c" name="question1">c) Green.<br>
<input type="radio" value="d" name="question1">d) Purple.<br>
</div>
<div id="target"> This is the hint you want to hide</div>
<button type="button" id="toggle">Get Hint</button>
<script>
var button = document.getElementById ("toggle");
var target = document.getElementById("target");
var bool = true;
function displayToggle() {
if (bool) {
target.setAttribute("class", "hide");
bool = false;
} else {
target.setAttribute("class", "show");
bool = true;
}
}
button.addEventListener("click",displayToggle, false);
</script>
<br>
<div class="qheader">
2) What is the world's most common religion?</div>
<div class="qselections">
<input type="radio" value="a" name="question2">a) Christianity<br>
<input type="radio" value="b" name="question2">b) Buddhism<br>
<input type="radio" value="c" name="question2">c) Hinduism<br>
<input type="radio" value="d" name="question2">d) Muslim<br>
</div>
<br>
<div class="qheader">
3) Which city ranks as the world's most populous city (2002)?</div>
<div class="qselections">
<input type="radio" value="a" name="question3">a) New York (US)<br>
<input type="radio" value="b" name="question3">b) Mexico City (Mexico)<br>
<input type="radio" value="c" name="question3">c) Tokyo (Japan)<br>
<input type="radio" value="d" name="question3">d) Shanghai (China)<br>
</div>
<br>
<div class="qheader">
4) What is the second largest country (in size) in the world?</div>
<div class="qselections">
<input type="radio" value="a" name="question4">a) USA<br>
<input type="radio" value="b" name="question4">b) China<br>
<input type="radio" value="c" name="question4">c) Canada<br>
<input type="radio" value="d" name="question4">d) Russia<br>
</div>
<br>
<div class="qheader">
5) As of January 2003, how much is Microsoft Chairman Bill Gates's net worth?</div>
<div class="qselections">
<input type="radio" value="a" name="question5">a) 10 million US<br>
<input type="radio" value="b" name="question5">b) 10 billion US<br>
<input type="radio" value="c" name="question5">c) 35 billion US<br>
<input type="radio" value="d" name="question5">d) 50 billion US<br>
</div>
<br>
<div class="qheader">
6) Which country below is not one of the members of the UN security council (Jan 2003)?</div>
<div class="qselections">
<input type="radio" value="a" name="question6">a) USA<br>
<input type="radio" value="b" name="question6">b) China<br>
<input type="radio" value="c" name="question6">c) Germany<br>
<input type="radio" value="d" name="question6">d) France<br>
</div>
<br>
<form>
<div align="center">
<input type="button" value="Grade Me!" name="B1" onClick="gradeit()"> <input type="button" value="Reset" name="B2" onClick="document.myquiz.reset()"></div>
</form>
<footer>
<img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">
<img src="img/facebook-wrap.png" alt="Twitter Logo" class="social-icon">
<p>© 2014 Chris Moore.</p>
</footer>
</div>
</body>
</html>
Here of my Javascript for making a feedback page
//Enter total number of questions:
var totalquestions=6
//Enter the solutions corresponding to each question:
var correctchoices=new Array()
correctchoices[1]='c' //question 1 solution
correctchoices[2]='a' //question 2 solution, and so on.
correctchoices[3]='c'
correctchoices[4]='c'
correctchoices[5]='c'
correctchoices[6]='c'
/////Don't edit beyond here//////////////////////////
function gradeit(){
var incorrect=null
for (q=1;q<=totalquestions;q++){
var thequestion=eval("document.myquiz.question"+q)
for (c=0;c<thequestion.length;c++){
if (thequestion[c].checked==true)
actualchoices[q]=thequestion[c].value
}
if (actualchoices[q]!=correctchoices[q]){ //process an incorrect choice
if (incorrect==null)
incorrect=q
else
incorrect+="/"+q
}
}
if (incorrect==null)
incorrect="a/b"
document.cookie='q='+incorrect
if (document.cookie=='')
alert("Your browser does not accept cookies. Please adjust your browser settings.")
else
window.location="Feedback.html"
}
function showsolution(){
var win2=window.open("","win2","width=200,height=350, scrollbars")
win2.focus()
win2.document.open()
win2.document.write('<title>Solution</title>')
win2.document.write('<body bgcolor="#FFFFFF">')
win2.document.write('<center><h3>Solution to Quiz</h3></center>')
win2.document.write('<center><font face="Arial">')
for (i=1;i<=totalquestions;i++){
for (temp=0;temp<incorrect.length;temp++){
if (i==incorrect[temp])
wrong=1
}
if (wrong==1){
win2.document.write("Question "+i+"="+correctchoices[i].fontcolor("red")+"<br>")
wrong=0
}
else
win2.document.write("Question "+i+"="+correctchoices[i]+"<br>")
}
win2.document.write('</center></font>')
win2.document.write("<h5>Note: The solutions in red are the ones to the questions you had incorrectly answered.</h5><p align='center'><small><a href='http://www.javascriptkit.com' target='_new'>JavaScript Kit quiz script</a></small>")
win2.document.close()
}
Here is my main.css
/*************************
GENERAL
**************************/
body {
font-family: 'Open Sans' , sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
#img {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
/*************************
HEADING
**************************/
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Changa One', sans-serif;
margin: 15px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-size: 0.75em;
margin: -5px 0 0;
font-weight: normal;
}
/*************************
Navigation
**************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0 ;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
/*************************
FOOTER
**************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top:50px;
color:#F5F5F5;
}
.social-icon {
width: 30px;
height: 30px;
margin: 0 5px;
}
/*************************
PAGE: Images
**************************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 28%;
margin:2.5%;
background-color: #f5f5f5;
color:#bdc3c7;
}
#gallery li a p {
margin: 0;
padding: 0.5%;
font-size: 1em;
color: #bdc3c7
}
#gallery1 {
margin: 0;
padding: 0;
list-style: none;
}
#gallery1 li {
float: center;
width: 50%;
margin:2.5%;
background-color: #f5f5f5;
color:#bdc3c7;
}
#gallery1 li a p {
margin: 0;
padding: 0.5%;
font-size: 1em;
color: #000
}
#gallery2 {
margin: 0;
padding-left: 330px;
list-style: none;
}
#gallery2 li {
float: left;
width: 28%;
margin:1%;
background-color: #A0A8A8;
color:#bdc3c7;
}
#gallery2 li a {
margin: 0%;
padding: 0.5%;
font-size: 1em;
color: #000
}
#gallery3 {
margin: 0;
padding-left: 210px;
list-style: none;
}
#gallery3 li {
float: left;
width: 28%;
margin:1%;
background-color: #A0A8A8;
color:#bdc3c7;
}
#gallery3 li a {
margin: 0%;
padding: 0.5%;
font-size: 1em;
color: #000
}
/*************************
COLORS
**************************/
/* site body */
body {
background-color:#A0A8A8;
color: #000000;
}
/* green header */
header {
background: #959E9E;
border-color: #A6B4B5;
}
/* nav background on mobile devices */
nav{
background: #959E9E;
}
/* logo text */
h1, h2 {
color:#F5F5F5;
}
/* links */
a {
color: #6ab47b;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color:#4D4D4D;
}
/*HINT SHOW/HIDE*/
.hide{
display: hidden;
}
.show {
display: block;
}
Here is my feedback page ( working as intended)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial Feedback</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="Feedback.html" id="logo">
<h1>Feedback</h1>
<h2>by Chris Moore</h2>
</a>
<nav>
<ul>
<li>Home</li>
<li>Tutorial</li>
<li>Quiz</li>
<li>Feedback</li>
</ul>
</nav>
</header>
<p align="center"><strong><font face="Arial">
<script src="quizconfig.js">
</script>
<big>Instant Quiz Results</big></font></strong></p>
<div align="center"><center>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form method="POST" name="result"><table border="0" width="100%" cellpadding="0" height="116">
<tr>
<td height="25" bgcolor="#A0A8A8"><strong><font face="Arial"># of questions you got right:</font></strong></td>
<td height="25"><p><input type="text" name="p" size="24"></td>
</tr>
<tr>
<td height="17" bgcolor="#B2B9B9"><strong><font face="Arial">The questions you got wrong:</font></strong></td>
<td height="17"><p><textarea name="T2" rows="3" cols="24" wrap="virtual"></textarea></td>
</tr>
<tr>
<td height="25" bgcolor="#B2B9B9"><strong><font face="Arial">Grade in percentage:</font></strong></td>
<td height="25"><input type="text" name="q" size="8"></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</center></div>
<form method="POST"><div
align="center"><center><p>
<script>
var wrong=0
for (e=0;e<=2;e++)
document.result[e].value=""
var feedback=document.cookie.split(";")
for (n=0;n<=feedback.length-1;n++){
if (feedback[n].charAt(1)=='q')
parse=n
}
var incorrect=feedback[parse].split("=")
incorrect=incorrect[1].split("/")
if (incorrect[incorrect.length-1]=='b')
incorrect=""
document.result[0].value=totalquestions-incorrect.length+" out of "+totalquestions
document.result[2].value=(totalquestions-incorrect.length)/totalquestions*100+"%"
for (temp=0;temp<incorrect.length;temp++)
document.result[1].value+=incorrect[temp]+", "
</script>
<input type="button" value="Take the quiz again" name="B1"
onClick="location.href='Tutorial Quiz.html'"> <input type="button" value="View solution" name="B2"
onClick="showsolution()"></p>
</center></div>
</form>
<footer>
<img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">
<img src="img/facebook-wrap.png" alt="Twitter Logo" class="social-icon">
<p>© 2014 Chris Moore.</p>
</footer>
</body>
</html>
It looks like you are missing the braces on your function definition:
<script>
var button = document.getElementById ("toggle")
var target = document.getElementById("target")
var bool = true;
function displayToggle() { // Added '{' here
if (bool) {
target.setAttribute("class", "hide");
bool = false;
} else {
target.setAttribute("class", "show");
bool = true;
}
} // Added this line
button.addEventListener("click",displayToggle, false);
</script>
It looks like your css may be different than what you originally posted as well. Try updating your .hide class:
/*HINT SHOW/HIDE*/
.hide{
display: none;
}