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>
Related
I am making a colour counter application, That has has 6 different colours.
I am currently trying to implement a pure JavaScript counter that has a individual counter for each colour.
(Correction: It is not to count the different colours displayed on the page, but when the user sees a colour in their surrounding environment that matches one of the 6 colours, they increase the counter by 1, for example the user sees the sky is blue and the grass is green, The user hovers over the blue colour, the increase and decrease buttons appear, the user increases the blue colour by 1 increment, Then for the grass the user hovers over the green colour, again the button appears and the user increases the green counter by 1.)
When a user hovers over the colour buttons must appear to increase or decrease the counter by 1, to a minimum of 0.
The count of each colour must always be displayed above the colour.
My current method seems rather long I'm sure there is a way to set up some sort of a method to handle all colours but again to have separate counters for each colour.
Please see the below image for what I am trying to achieve:
See this image
Any help would be appreciated,
I have included my current code below for reference
var green = 0;
var countEl1 = document.getElementById("green");
function plus1(){
green++;
countEl1.value = green;
}
function minus1(){
if (green > 0) {
green--;
countEl1.value = green;
}
}
var brown = 0;
var countEl2 = document.getElementById("brown");
function plus2(){
brown++;
countEl2.value = brown;
}
function minus2(){
if (brown > 0) {
brown--;
countEl2.value = brown;
}
}
var blue = 0;
var countEl3 = document.getElementById("blue");
function plus3(){
blue++;
countEl3.value = blue;
}
function minus3(){
if (blue > 0) {
blue--;
countEl3.value = blue;
}
}
var yellow = 0;
var countEl4 = document.getElementById("yellow");
function plus4(){
yellow++;
countEl4.value = yellow;
}
function minus4(){
if (yellow > 0) {
yellow--;
countEl4.value = yellow;
}
}
var gold = 0;
var countEl5 = document.getElementById("gold");
function plus5(){
gold++;
countEl5.value = gold;
}
function minus5(){
if (gold > 0) {
gold--;
countEl5.value = gold;
}
}
var red = 0;
var countEl6 = document.getElementById("red");
function plus6(){
red++;
countEl6.value = red;
}
function minus6(){
if (red > 0) {
red--;
countEl6.value = red;
}
}
.pyramid {
clip-path: polygon(50% 0, 100% 100%, 0 100%);
width: 100vmin;
aspect-ratio: 9 / 15; /* 2/1 */
background-color: white;
display: grid;
grid-template-columns: 1fr;
}
.pyramid > * {
background: white;
}
.one {
background-color: rgba(234, 27, 7, 0.97);
}
.two {
background-color: rgba(244, 182, 0, 0.98);
margin-top: 10px;
}
.three {
background-color: rgba(249, 224, 41, 0.98);
margin-top: 10px;
}
.four {
background-color: rgba(4, 157, 252, 0.98);
}
.five {
background-color: rgba(167, 118, 67, 0.99);
gap: 0% !important;
}
.six {
background-color: rgba(92, 213, 51, 0.98);
}
.counter input[type=button], input[type=text] {
display: inline-block;
width: 20px;
background-color: transparent;
outline: none;
border: none;
text-align: center;
cursor: pointer;
padding: 0px;
color: black;
height: 33px;
font-family: 'Open Sans';
}
#container {
width: 100px;
height: 100px;
position: relative;
}
#navi,
#infoi {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#infoi {
z-index: 10;
}
button {
border-radius: 50%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Colour counter</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/Main.js"></script>
</head>
<body>
<div id="container">
<h1>Colour counter</h1>
<div class="pyramid">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
</div>
<h1>Counter Test</h1>
<div id="input_div">
<input type="button" value="-" id="minus1" onclick="minus1()">
<input type="text" size="25" value="0" id="green">
<input type="button" value="+" id="plus1" onclick="plus1()">
<script src="js/Main.js"></script>
</div>
<div id="input_div2">
<input type="button" value="-" id="minus2" onclick="minus2()">
<input type="text" size="25" value="0" id="brown">
<input type="button" value="+" id="plus2" onclick="plus2()">
<script src="js/Main.js"></script>
</div>
</div>
</body>
</html>
Use an array from which do the operations on the DOM and apply map to do each colour's job, which would be to programatically attach the event listener to the DOM elements. Also, ensure the DOM has fully loaded before running your JS code:
window.onload = function() {
let colours = ["green", "brown", "blue", "yellow", "gold", "red"]
.map(id => {
let colour = {
elementCount: document.getElementById(id),
elementPlus: document.getElementById(`${id}_plus`),
elementMinus: document.getElementById(`${id}_minus`),
counter: 0,
};
colour.elementPlus.addEventListener("click", function() {
colour.counter++;
colour.elementCount.value = colour.counter;
});
colour.elementMinus.addEventListener("click", function() {
if (colour.counter > 0) {
colour.counter--;
colour.elementCount.value = colour.counter;
}
});
return colour;
});
};
Adapt the HTML so the IDs match the ones used in the JS:
Instead of minus1, use green_minus. Do the same for the rest of minus buttons.
Instead of plus1, use green_minus. Do the same for the rest of plus buttons.
Adapt the HTML removing the onClick attribute (it is now assigned programatically using JS).
As a plus, now you have the colours variable, where all the DOM elements and each colour counter are stored for further inspection and or modification.
As an example, one colour in the HTML would be like:
<div id="input_div">
<input type="button" value="-" id="green_minus">
<input type="text" size="25" value="0" id="green">
<input type="button" value="+" id="green_plus">
</div>
<!-- Other colours... -->
<script src="js/Main.js"></script>
window.onload = function() {
let colours = ["green", "brown", "blue", "yellow", "gold", "red"]
.map(id => {
let colour = {
elementCount: document.getElementById(id),
elementPlus: document.getElementById(`${id}_plus`),
elementMinus: document.getElementById(`${id}_minus`),
counter: 0,
};
colour.elementPlus.addEventListener("click", function() {
colour.counter++;
colour.elementCount.value = colour.counter;
});
colour.elementMinus.addEventListener("click", function() {
if (colour.counter > 0) {
colour.counter--;
colour.elementCount.value = colour.counter;
}
});
return colour;
});
};
.pyramid {
clip-path: polygon(50% 0, 100% 100%, 0 100%);
width: 100vmin;
aspect-ratio: 9 / 15; /* 2/1 */
background-color: white;
display: grid;
grid-template-columns: 1fr;
}
.pyramid > * {
background: white;
}
.one {
background-color: rgba(234, 27, 7, 0.97);
}
.two {
background-color: rgba(244, 182, 0, 0.98);
margin-top: 10px;
}
.three {
background-color: rgba(249, 224, 41, 0.98);
margin-top: 10px;
}
.four {
background-color: rgba(4, 157, 252, 0.98);
}
.five {
background-color: rgba(167, 118, 67, 0.99);
gap: 0% !important;
}
.six {
background-color: rgba(92, 213, 51, 0.98);
}
.counter input[type=button], input[type=text] {
display: inline-block;
width: 20px;
background-color: transparent;
outline: none;
border: none;
text-align: center;
cursor: pointer;
padding: 0px;
color: black;
height: 33px;
font-family: 'Open Sans';
}
#container {
width: 100px;
height: 100px;
position: relative;
}
#navi,
#infoi {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#infoi {
z-index: 10;
}
button {
border-radius: 50%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Colour counter</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/Main.js"></script>
</head>
<body>
<div id="container">
<h1>Colour counter</h1>
<div class="pyramid">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
</div>
<h1>Counter Test</h1>
<div id="input_div">
<input type="button" value="-" id="green_minus">
<input type="text" size="25" value="0" id="green">
<input type="button" value="+" id="green_plus">
</div>
<div id="input_div2">
<input type="button" value="-" id="brown_minus">
<input type="text" size="25" value="0" id="brown">
<input type="button" value="+" id="brown_plus">
</div>
<div id="input_div3">
<input type="button" value="-" id="blue_minus">
<input type="text" size="25" value="0" id="blue">
<input type="button" value="+" id="blue_plus">
</div>
<div id="input_div4">
<input type="button" value="-" id="yellow_minus">
<input type="text" size="25" value="0" id="yellow">
<input type="button" value="+" id="yellow_plus">
</div>
<div id="input_div5">
<input type="button" value="-" id="gold_minus">
<input type="text" size="25" value="0" id="gold">
<input type="button" value="+" id="gold_plus">
</div>
<div id="input_div6">
<input type="button" value="-" id="red_minus">
<input type="text" size="25" value="0" id="red">
<input type="button" value="+" id="red_plus">
</div>
</div>
</body>
</html>
I have made a variaton adding dinamically colors using an input so you can call any color name you want.
Put the buttons above each color is kinda dificult because you are using a polygon, so in this example the button are in the left side
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Colour counter</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/Main.js"></script>
<style>
.grid {
display: flex;
text-align: center;
max-width: 480px;
}
.grid .counter {
margin-right: 15px;
}
.counter .column {
text-align: center;
vertical-align: middle;
}
.column {
height: 100px;
width: 100px;
display: flex;
align-content: center;
justify-content: center;
align-items: center;
}
.form {
margin: 10px 0;
}
.form input[type='text'] {
margin: 3px 0;
border: 1px solid black;
width: 200px;
}
input[type='button'] {
border: 1px solid black;
margin: 0 4px;
}
.pyramid {
clip-path: polygon(50% 0, 100% 100%, 0 100%);
width: 300px;
aspect-ratio: 9 / 15;
/* 2/1 */
background-color: white;
display: grid;
grid-template-columns: 1fr;
}
.pyramid>* {
background: white;
}
.counter input[type=button],
input[type=text] {
display: inline-block;
width: 20px;
background-color: transparent;
outline: none;
border: none;
text-align: center;
cursor: pointer;
padding: 0px;
color: black;
height: 33px;
font-family: 'Open Sans';
}
#container {
width: 100px;
height: 100px;
position: relative;
}
button {
border-radius: 50%;
}
</style>
</head>
<body>
<div class="color-counter">
<h1>Colour counter</h1>
</div>
<div class="form">
<form>
<label for="fcolour">Enter the colour name: </label>
<br>
<input id="fcolour" type="text" name="fcolour">
<br>
<input type="button" value="Submit">
</form>
</div>
<div id="container">
<div class="grid">
<div class="counter">
</div>
<div class="pyramid">
</div>
</div>
</div>
<script>
document.querySelector('form input[type="button"]').addEventListener('click', function (e) {
var colCounter = document.querySelector('.grid .counter')
var colPyramid = document.querySelector('.grid .pyramid')
var colorName = document.getElementById('fcolour').value
var newCounterChild = document.createElement('div')
newCounterChild.classList.add('column')
newCounterChild.innerHTML = `
<input type="button" value="-" id="minus_${colorName}">
<input type="text" size="25" value="0" id=counter_${colorName}>
<input type="button" value="+" id="plus_${colorName}">
`
colCounter.appendChild(newCounterChild)
var newPyramidChild = document.createElement('div')
newPyramidChild.classList.add('column')
newPyramidChild.style.backgroundColor = colorName
newPyramidChild.style.marginTop = '10px'
colPyramid.appendChild(newPyramidChild)
document.getElementById(`plus_${colorName}`).addEventListener('click', function (v) {
document.getElementById(`counter_${colorName}`).value++
})
document.getElementById(`minus_${colorName}`).addEventListener('click', function (v) {
var val = document.getElementById(`counter_${colorName}`)
val.value > 0 ? val.value-- : null
})
})
</script>
</body>
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);
}
I have written a own search which is actually getting the results by an Ajax. I have rewritten that code from Ajax to jQuery to show you what my fault is. Run the code below with Google Chrome or Safari. It will work. Either Type Max or Jil in the search bar and you will get an result. But if you try to get a result with Mozilla Firefox, the result box is not showing up. It gets set to display: none again and again... why is that an how can I fix that?
Here is my code:
var results = {
Max: '<div class="search-items">2: Max</div>',
Jil: '<div class="search-items">3: Jil</div>'
}
$(document).on('focus', '#search_input', function() {
$("#autocomplete-list").css("display", "block");
//$("#autocomplete-list").show();
});
$(document).on('keyup', '#search_input', function() {
var serach_request = $("#search_input").val();
if(serach_request in results){
console.log(serach_request);
$("#autocomplete-list").html(results[serach_request]);
}else{
$("#autocomplete-list").empty();
}
});
$(document).on('click', function() {
$("#autocomplete-list").hide();
});
$("#autocomplete-list, #search_input_wrapper").on('click', function() {
event.stopPropagation();
});
/* Autocomplete Stlying */
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 15px;
right: 15px;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
text-align: left;
}
/* When hovering an item: */
.autocomplete-items div:hover {
background-color: #e9e9e9;
}
/* When navigating through the items using the arrow keys: */
.autocomplete-active {
background-color: DodgerBlue !important;
color: #ffffff;
}
<!DOCTYPE html>
<html>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" >
<div class="row" id="actions">
<div class="col-md-8 text-right">
<div class="col-md-4 col-sm-12">
<div id="search_input_wrapper" class="autocomplete form-group" style="margin: 0px">
<input id="search_input" type="text" name="search_input" class="form-control" autocomplete="off" placeholder="Kunde" style="margin-top: 25px;">
<div id="autocomplete-list" class="autocomplete-items">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Kind regards
Add event parameter to the function call . An error was showing in the console regarding the same.
$("#autocomplete-list, #search_input_wrapper").on('click', function(event) {
event.stopPropagation();
});
var results = {
Max: '<div class="search-items">2: Max</div>',
Jil: '<div class="search-items">3: Jil</div>'
}
$(document).on('focus', '#search_input', function() {
$("#autocomplete-list").css("display", "block");
//$("#autocomplete-list").show();
});
$(document).on('keyup', '#search_input', function() {
var serach_request = $("#search_input").val();
if (serach_request in results) {
console.log(serach_request);
$("#autocomplete-list").html(results[serach_request]);
} else {
$("#autocomplete-list").empty();
}
});
$(document).on('click', function() {
$("#autocomplete-list").hide();
});
$("#autocomplete-list, #search_input_wrapper").on('click', function(event) {
event.stopPropagation();
});
/* Autocomplete Stlying */
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 15px;
right: 15px;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
text-align: left;
}
/* When hovering an item: */
.autocomplete-items div:hover {
background-color: #e9e9e9;
}
/* When navigating through the items using the arrow keys: */
.autocomplete-active {
background-color: DodgerBlue !important;
color: #ffffff;
}
<!DOCTYPE html>
<html>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="row" id="actions">
<div class="col-md-8 text-right">
<div class="col-md-4 col-sm-12">
<div id="search_input_wrapper" class="autocomplete form-group" style="margin: 0px">
<input id="search_input" type="text" name="search_input" class="form-control" autocomplete="off" placeholder="Kunde" style="margin-top: 25px;">
<div id="autocomplete-list" class="autocomplete-items">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
i have a Sidebar on the left of the Screen. I can toggle it by pressing a button. On the right I have the content.
I want to place the button on a horizontal bar on the top. The sidebar seems to cover this bar so I can not see the button.
This is my current code:
The Html File:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>
</title>
</head>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="MainController.js"></script>
<link rel="stylesheet" type="text/css" href="MainStyle.css">
<body onload="InitDocument()">
<div id="topBar">
<button id="btnNavToggle" type="button" onclick="ToggleNavbar()">Menu</button>
</div>
<div id="container">
<div id="sideNav">
<button type="button" onclick="NewEntry()">+</button>
<p>test</p>
</div>
<div id="mainArea">
<p>Title:</p>
<input id="titleInputField" type="text">
<p>Text:</p>
<textarea id="textArea"> </textarea>
<p></p>
<button type="button" onclick="SaveEntry()">Save</button>
</div>
</div>
</body>
</html>
The Css File:
body{
background-color: #EEEEEE;
color: #000000;
}
* {
margin: 0;
padding: 0;
}
#sideNav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
background-color: #333333;
color: #EEEEEE;
}
The Js File:
var navIsOpen = true;
function InitDocument(){ // Initialization
ToggleNavbar();
}
function ToggleNavbar(){ // show - hide the navbar
var sideNavWidth = "0px";
var mainAreaWidth = "0px";
if (navIsOpen)
{
sideNavWidth = "200px";
mainAreaWidth = "200px";
}
$("#sideNav").width(sideNavWidth);
$("#mainArea").css('margin-left',mainAreaWidth);
navIsOpen = !navIsOpen;
}
function SaveEntry(){ // save the entry
var txtTitle = $("#titleInputField").val();
var txtField = $("#textArea").val();
alert(txtTitle + "#" + txtField);
}
function NewEntry() { // create a new entry
alert("neuer Eintrag");
}
This is what I want to archieve
It seems I just have to fix the CSS to get it done.
I added margin-top:0; to your topBar and removed top: 0; from your sideNav.
Try this:
var navIsOpen = true;
function InitDocument(){ // Initialization
ToggleNavbar();
}
function ToggleNavbar(){ // show - hide the navbar
var sideNavWidth = "0px";
var mainAreaWidth = "0px";
if (navIsOpen)
{
sideNavWidth = "200px";
mainAreaWidth = "200px";
}
$("#sideNav").width(sideNavWidth);
$("#mainArea").css('margin-left',mainAreaWidth);
navIsOpen = !navIsOpen;
}
function SaveEntry(){ // save the entry
var txtTitle = $("#titleInputField").val();
var txtField = $("#textArea").val();
alert(txtTitle + "#" + txtField);
}
function NewEntry() { // create a new entry
alert("neuer Eintrag");
}
body{
background-color: #EEEEEE;
color: #000000;
}
*{
margin: 0;
padding: 0;
}
#topBar {
margin-top:0;
background-color: navy;
}
#sideNav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
overflow-x: hidden;
background-color: #333333;
color: #EEEEEE;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>
</title>
</head>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="MainController.js"></script>
<link rel="stylesheet" type="text/css" href="MainStyle.css">
<body onload="InitDocument()">
<div id="topBar">
<button id="btnNavToggle" type="button" onclick="ToggleNavbar()">Menu</button>
</div>
<div id="container">
<div id="sideNav">
<button type="button" onclick="NewEntry()">+</button>
<p>test</p>
</div>
<div id="mainArea">
<p>Title:</p>
<input id="titleInputField" type="text">
<p>Text:</p>
<textarea id="textArea"> </textarea>
<p></p>
<button type="button" onclick="SaveEntry()">Save</button>
</div>
</div>
</body>
</html>
Try this:
var navIsOpen = true;
function InitDocument(){ // Initialization
ToggleNavbar();
}
function ToggleNavbar(){ // show - hide the navbar
var sideNavWidth = "0px";
var mainAreaWidth = "0px";
if (navIsOpen)
{
sideNavWidth = "200px";
mainAreaWidth = "200px";
}
$("#sideNav").width(sideNavWidth);
$("#mainArea").css('margin-left',mainAreaWidth);
navIsOpen = !navIsOpen;
}
function SaveEntry(){ // save the entry
var txtTitle = $("#titleInputField").val();
var txtField = $("#textArea").val();
alert(txtTitle + "#" + txtField);
}
function NewEntry() { // create a new entry
alert("neuer Eintrag");
}
body{
background-color: #EEEEEE;
color: #000000;
}
* {
margin: 0;
padding: 0;
}
#main {
display: flex;
flex-direction: column;
}
#sideNav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 50px;
left: 0;
overflow-x: hidden;
background-color: #333333;
color: #EEEEEE;
}
#topBar {
position: fixed;
display: inline-block;
width: 100%;
height: 50px;
background-color: red;
}
#container {
display: flex;
padding-top: 50px;
flex: 1;
flex-direction: row;
}
<html>
<head>
<meta charset="utf-8" />
<title>
</title>
</head>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="MainController.js"></script>
<link rel="stylesheet" type="text/css" href="MainStyle.css">
<body onload="InitDocument()">
<div id="main">
<div id="topBar">
<button id="btnNavToggle" type="button" onclick="ToggleNavbar()">Menu</button>
</div>
<div id="container">
<div id="sideNav">
<button type="button" onclick="NewEntry()">+</button>
<p>test</p>
</div>
<div id="mainArea">
<p>Title:</p>
<input id="titleInputField" type="text">
<p>Text:</p>
<textarea id="textArea"> </textarea>
<p></p>
<button type="button" onclick="SaveEntry()">Save</button>
</div>
</div>
</div>
</body>
</html>
Take a look flex-box concepts
Checkout this example of using the new HTML5 semantic elements.
http://www.w3schools.com/html/html5_semantic_elements.asp
I have taken most of the example elements from the link above and created a simple HTML5 page.
You can add/remove/modify any of the section below by removing the HTML or removing/adding additional CSS properties.
var toggleButton = document.getElementById('toggle-button');
var pageWrapper = document.getElementsByClassName('wrapper')[0];
toggleButton.addEventListener('click', function() {
toggleClass(pageWrapper, 'toggle-hidden')
});
function toggleClass(el, className) {
if (el.classList) {
el.classList.toggle(className);
} else {
var classes = el.className.split(' ');
var existingIndex = classes.indexOf(className);
if (existingIndex >= 0) classes.splice(existingIndex, 1);
else classes.push(className);
el.className = classes.join(' ');
}
}
header, footer {
width: 100%;
text-align: center;
background: #DDD;
padding: 0.25em !important;
}
.title {
font-weight: bold;
font-size: 2.25em;
margin-bottom: 0.5em;
}
.subtitle {
font-size: 1.5em;
font-style: italic;
}
.wrapper {
background: #EEE;
}
nav {
text-align: center;
background: #CCC;
padding: 0.25em !important;
}
aside {
float: left;
top: 0;
width: 12em;
height: 100%;
padding: 0.25em !important;
}
aside a {
display: block;
text-decoration: none;
margin-bottom: 0.5em;
}
aside a:before {
content: '➢ ';
}
article, section {
margin-left: 12em !important;
background: #FFF;
padding: 0.25em !important;
}
/* Default HTML4 typography styles */
h1 { font-size: 2.00em !important; margin: 0.67em 0 !important; }
h2 { font-size: 1.50em !important; margin: 0.75em 0 !important; }
h3 { font-size: 1.17em !important; margin: 0.83em 0 !important; }
h5 { font-size: 0.83em !important; margin: 1.50em 0 !important; }
h6 { font-size: 0.75em !important; margin: 1.67em 0 !important; }
h1, h2, h3, h4, h5, h6 { font-weight: bolder !important; }
p { font-size: 1.00em !important; margin: 1em 0 !important; }
#toggle-button {
display: block;
position: absolute;
width: 5em;
height: 5em;
line-height: 1.5em;
text-align: center;
}
.wrapper.toggle-hidden aside {
display: none;
width: 0;
}
.wrapper.toggle-hidden article, .wrapper.toggle-hidden section {
margin-left: 0 !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
<header>
<button id="toggle-button">Toggle<br />Sidebar</button>
<div class="title">What Does WWF Do?</div>
<div class="subtitle">WWF's mission:</div>
</header>
<div class="wrapper">
<nav>
HTML |
CSS |
JavaScript |
jQuery
</nav>
<aside>
<h1>Links</h1>
HTML
CSS
JavaScript
jQuery
</aside>
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
</div>
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: someone#example.com.</p>
</footer>