Just stuck with a problem on a web page I'm making. Also, still new to JS.
I have hidden two divs with display:none; and written some JS to change one or other div based on a value.
I've managed to get that to work, but when I select the not-partici value, the full div is not showing. It only shows on the text inputs when there should be two. I am struggling to find where I went wrong.
Here is the html:
<!DOCTYPE HTML>
<script src="https://kit.fontawesome.com/299fe5d3f3.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="assets/css/form.css" />
<html>
<head>
<title>Bahloo Country</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="is-preload">
<!-- Navbar -->
<div class="topnav" id="myTopnav">
Home
About
Services
Contact
Apply
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<!-- Header -->
<section id="header" class="dark">
<header>
<div class="hedo"><h1>Participant Application Form</h1>
<p>Become a Participant of Bahloo Country's services!</p><br>
<p>Bahloo would like to acknowledge the traditional custodians of the land in which we work, live and learn, the land of the Bundjalung Nation. We pay our respects to elders of the past, present and future emerging</p><br>
<p>May we all work together, within the best of our ability, to preserve the knowledge of our lore, land and culture to preserve for the future generations, and continue to build the strength of our community.</p>
</div></header>
</section>
</div>
<section id="first" class="main">
<form action="" method="get">
<div class="rendered-form">
<div id="detailsSec">
<label for="iddecade" class="formbuilder-select-label">Are you the participant or applying on behalf of someone?<span class="formbuilder-required">*</span></label>
<select class="decade" name="iddecade" id="idParticipant" onchange = "formStarter()" required="required" aria-required="true">
<option disabled selected value> -- select an option -- </option>
<option value="participant" id="idpartici-0">I am the participant</option>
<option value="not-participant" id="idpartici-1">I am applying on behalf of someone</option>
</select>
<!-- If person completing form = participant-->
<div id="partici" style="display:none;">
<label for="undefined" class="formbuilder-text-label">Name of Person Completing Form<span class="required">*</span></label>
<input type="text" class="fullname" access="false" id="control-2763896" title="Enter your full name" required="required" aria-required="true" name="undefined">
</div>
<!-- If Person completing form = not-participant -->
<div id="not-partici" style="display:none;">
<label for="undefined" class="formbuilder-text-label">Name of Person Completing Form<span class="required">*</span></label>
<input type="text" class="fullname" access="false" id="control-2763896" title="Enter your full name" required="required" aria-required="true" name="undefined">
<label for="undefined" class="formbuilder-text-label">Participant's full name<span class="required">*</span></label>
<input type="text" class="fullname" access="false" id="control-2763896" title="Enter your full name" required="required" aria-required="true" name="undefined">
</div>
<p>placeholder</p>
</div>
</div>
</form>
</section>
Here is the CSS:
#import url("fontawesome-all.min.css");
#import url("https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,400,400italic");
#import url('https://fonts.googleapis.com/css2?family=Knewave&display=swap');
html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;}
.topnav {
background-color: #333;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
text-align: center;
}
.topnav a {
color: #f2f2f2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
font-size: 17px;
transition: 1s;
}
.topnav a:hover {
background-color: rgb(223, 122, 8);
color: black;
padding: 16px 30px;
transition: 1s;
}
.topnav .icon {
display: none;
}
body {
line-height: 1;
}
h1 {
font-family: 'Knewave';
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
-webkit-text-size-adjust: none;
}
mark {
background-color: transparent;
color: inherit;
}
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/* Basic */
#-ms-viewport {
width: device-width;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background: #F8F8F8;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 17pt;
line-height: 1.75em;
color: #888;
}
.dark {
color: #aaa;
color: rgba(255, 255, 255, 0.65);
}
input, textarea, select {
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 17pt;
line-height: 1.75em;
color: #888;
}
h1, h2, h3, h4, h5, h6 {
color: #666;
margin: 0 0 1em 0;
font-weight: 100;
line-height: 1.5em;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: inherit;
text-decoration: none;
}
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
color: #fff;
}
strong, b {
font-weight: 400;
color: inherit;
}
.dark strong, .dark b {
color: #fff;
color: rgba(255, 255, 255, 0.85);
}
em, i {
font-style: italic;
}
a {
-moz-transition: border-bottom-color 0.25s ease-in-out;
-webkit-transition: border-bottom-color 0.25s ease-in-out;
-ms-transition: border-bottom-color 0.25s ease-in-out;
transition: border-bottom-color 0.25s ease-in-out;
color: inherit;
border-bottom: dotted 1px rgba(0, 0, 0, 0.25);
}
a:hover {
border-bottom-color: rgba(0, 0, 0, 0);
}
.dark a {
color: #fff;
border-bottom-color: rgba(255, 255, 255, 0.5);
}
.dark a:hover {
border-bottom-color: rgba(255, 255, 255, 0);
}
sub {
top: 0.5em;
font-size: 0.8em;
}
sup {
top: -0.5em;
font-size: 0.8em;
}
hr {
border: 0;
border-top: solid 1px #e6e6e6;
margin: 2em 0 2em 0;
}
.dark hr {
border-top-color: rgba(255, 255, 255, 0.5);
}
blockquote {
border-left: solid 0.25em #e6e6e6;
padding: 1em 0 1em 2em;
font-style: italic;
}
.dark blockquote {
border-left-color: rgba(255, 255, 255, 0.5);
}
p, ul, ol, dl, table {
margin-bottom: 1em;
}
p {
text-align: justify;
}
header {
margin-bottom: 1em;
}
header h1, header h2, header h3, header h4, header h5, header h6 {
margin: 0;
}
header p {
display: block;
margin: 0;
padding: 0.25em 0 0.5em 0;
}
footer {
padding-top: 1.5em;
}
/* Container */
.container {
margin: 0 auto;
max-width: 100%;
width: 1360px;
}
.container.medium {
width: 1020px;
}
#media screen and (max-width: 1680px) {
.container {
width: 1200px;
}
.container.medium {
width: 900px;
}
}
#media screen and (max-width: 1280px) {
.container {
width: 960px;
}
.container.medium {
width: 720px;
}
}
#media screen and (max-width: 1000px) {
.container {
width: 100% !important;
}
}
/* Row */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
/* Image */
.image {
display: inline-block;
border: 0;
}
.image:after {
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("images/overlay.png");
}
.image img {
display: block;
width: 100%;
border-radius: 0.5em;
}
.image.featured {
display: block;
width: 100%;
margin: 0 0 2em 0;
}
.image.fit {
display: block;
width: 100%;
}
.image.left {
float: left;
margin: 0 2em 2em 0;
}
.image.centered {
display: block;
margin: 0 0 2em 0;
}
.image.centered img {
margin: 0 auto;
width: auto;
}
/* Header */
.hedo {
border: solid;
border-color: rgba(0, 0, 0, 0.25);
background-color:rgba(0, 0, 0, 0.4);
max-width: 1200px;
margin: 0 auto;
}
#header {
margin: 0;
background-image: url("images/overlay.png"), url("../../images/header.jpg");
background-size: auto, cover;
background-position: top left, center center;
background-repeat: repeat, no-repeat;
padding: 14em 0 14em 0;
text-align: center;
color: #fff;
}
#header header h1 {
font-size: 2.25em;
line-height: 1.25em;
margin-bottom: 0;
}
#header header p {
margin-top: 1.25em;
font-weight: 100;
padding: 0;
font-size: 1.25em;
line-height: 1.5em;
text-align: center;
}
#header footer {
padding-top: 1.5em;
}
/* Main Sections */
.main {
margin: 0;
}
.main > header {
background: #fff;
text-align: center;
padding: 5em 0 5em 0;
margin: 0;
}
.main > header h2 {
font-size: 2.25em;
font-weight: 100;
margin-bottom: 0;
}
.main > header p {
margin: 2em 0 0 0;
padding: 0;
text-align: center;
}
#first {
width: 50%;
margin: auto;
}
div > #skillsetssec {
border: solid;
border-radius: 5px;
padding: 15px;
margin: 30px 0px;
}
#skillsetssec > label:not(.formbuilder-checkbox-group-label) {
padding: 25px 0px;
}
div > #detailsSec {
border: solid;
border-radius: 5px;
padding: 15px;
margin: 30px 0px;
}
div > #expSec {
border: solid;
border-radius: 5px;
padding: 15px;
margin: 30px 0px;
}
div > #workPrefSec {
border: solid;
border-radius: 5px;
padding: 15px;
margin: 30px 0px;
}
#daysAvbl {
border-top: solid;
border-bottom: solid;
margin-top: 10px 0px;
}
div > #vehDetailsSec {
border: solid;
border-radius: 5px;
padding: 15px;
margin: 30px 0px;
}
div > #formsSec {
border: solid;
border-radius: 5px;
padding: 15px;
margin: 30px 0px;
}
input[type="file"] {
margin-bottom: 45px;
margin-top: 20px;
padding-bottom: 30px;
padding-top: 20px;
border-bottom: solid;
border-right: solid;
border-top: solid;
border-radius: 5px;
width: 100%;
}
.btn {
text-align: center;
}
button[type="submit"] {
margin-bottom: 50px;
padding: 40px 100px;
font-size: 30px;
}
/* Footer */
#footer {
margin: 0;
text-align: center;
padding: 4em 0 8em 0;
box-shadow: inset 0 1px 0 0 #e6e6e6;
}
#footer .copyright {
margin-top: 3em;
font-size: 0.8em;
color: #aaa;
}
#footer .copyright a {
color: inherit;
}
#footer ul.icons a {
box-shadow: inset 0 0 0 1px #d6d6d6;
}
/* Wide */
#media screen and (max-width: 1680px) {
/* Basic */
body, input, textarea, select {
font-size: 15pt;
line-height: 1.75em;
}
}
/* Normal */
#media screen and (max-width: 1280px) {
/* Basic */
body, input, textarea, select {
font-size: 13pt;
line-height: 1.65em;
}
/* Feature Icon */
.feature-icon {
margin-bottom: 2em;
}
/* Header */
#header {
padding: 12em 0 12em 0;
}
/* Main Sections */
.main > header {
padding: 4em 0 4em 0;
}
.main > .content {
padding: 4em 0 4em 0;
}
}
/* Narrow */
#media screen and (max-width: 1000px) {
/* Basic */
header, footer, h2, h3, h4, h5, h6, header > p {
text-align: center;
}
/* Sections/Article */
section, article {
margin: 0 0 2.5em 0 !important;
}
.row > section, .row > article {
margin: 0 0 2.5em 0 !important;
}
/* Table */
.table-wrapper {
width: 100%;
overflow-x: scroll;
padding-left: 1px;
-webkit-overflow-scrolling: touch;
}
/* Header */
#header {
margin: 0 !important;
padding: 8em 2em 8em 2em;
}
#header header p {
margin-top: 1em;
}
#header footer {
padding-top: 1.25em;
}
/* Main Sections */
.main {
margin: 0 !important;
}
.main > header {
padding: 3.5em 2em 3.5em 2em;
}
.main > header h2 {
font-size: 1.85em;
}
.main > header br {
display: none;
}
.main > header p {
margin: 1.5em 0 0 0;
}
.main > .content {
padding: 3.5em 20px 3.5em 20px;
}
.main > .content > .container > :last-child {
margin-bottom: 0 !important;
}
/* Footer */
#footer {
margin: 0 !important;
padding: 3em 0 3em 0;
}
#footer .copyright {
margin-top: 2em;
}
}
.coreSupImg {
border-radius: 50%;
width: 50%;
}
#testies {
border-radius: 50%;
max-width: 200px;
max-height: 200px;
}
/* Mobile */
#media screen and (max-width: 736px) {
/* Basic */
body, input, textarea, select {
font-size: 11pt;
}
/* Sections/Article */
section, article {
margin: 0 0 1.5em 0 !important;
}
.row > section, .row > article {
margin: 0 0 1.5em 0 !important;
}
/* Button */
.button {
padding-left: 0;
padding-right: 0;
width: 100%;
max-width: 24em;
}
/* Icons */
ul.icons li {
padding-left: 0.35em;
}
/* Menu */
ul.menu li {
border: 0;
padding: 0;
display: block;
margin: 1em 0 1em 0;
}
/* Header */
#header {
padding: 6em 20px 6em 20px;
}
#header > header {
padding: 0 1em 0 1em;
}
/* Main Sections */
.main > header {
padding: 3em 20px 3em 20px;
}
.main > header h2 {
font-size: 1.5em;
}
.main > .content {
padding: 3em 20px 3em 20px;
}
.main > .content h3 {
font-size: 1.25em;
}
}
Here is the JS:
(function($) {
var $window = $(window),
$body = $('body');
// Breakpoints.
breakpoints({
wide: [ '1281px', '1680px' ],
normal: [ '1001px', '1280px' ],
narrow: [ '737px', '1000px' ],
mobile: [ null, '736px' ]
});
// Scrolly.
$('.scrolly').scrolly();
})(jQuery);
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
function formStarter() {
var a = document.getElementById("idParticipant");
var partici = document.getElementById("partici")
var notPartici = document.getElementById("not-partici")
if (a.value == 'participant'){
partici.style.display = "block";
} else {
notPartici.style.display = "block";
}
}
Note: I'm editing over a template so it's a complete mess with most likely plenty of unused code...
I've managed to find the answer, as Gert B mentioned in the comments. I did not think I had id attributed the same, but im guessing it turns out that hyphens can omit other the remaining words, causing the getElementById selector to screw up and select take either one as partici.
After i changed the id="not-partici" to id="notPartici" I had no issues.
I am trying to learn how to make a responsive CCS page and is following a tutorial on W3schools (https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp)
I have coded my version and all works good on Desktop size, however when I try to go to Iphone5/Iphone6/Ipad sizes the menu dont show after clicking on the button with the javascript.
I am stuck and have tried my best to find out why it wont work as the one on the tutorial - can somebody help/guide me to what that needs to change for?
My html looks like this:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>My page</title>
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Noto+Sans:400,400i,700,700i" rel="stylesheet">
<link href="../style/style.css" rel="stylesheet">
</head>
<body>
<!-- topp logo start -->
<div class="logo">
<img src="../bilder/logo.gif" alt="Logo">
<p>Some header text</p>
</div><!-- topp logo slutt --><!-- Menu start -->
<div>
<nav>
<div class="topnav" id="myTopnav">
<a class="active" href="/Test.htm">Startpage</a>
<div class="dropdown">
<button class="dropbtn">Group1 <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
Option1
Option1
Option1
Option1
Option1
Option1
Option1
Option1
Option1
Option1
Option1
Option1
Option1
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Group2 <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
Option1
Option1
Option1
Option1
Option1
Option1
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Group3 <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
Option1
Option1
Option1
Option1
</div>
</div><a class="icon" href="javascript:void(0);" onclick="myFunction()" style="font-size:15px;">☰</a>
</div>
</nav>
</div>
<script>
function myFunction() { var x = document.getElementById("myTopnav");
if (x.className === "topnav") { x.className += " responsive"; }
else { x.className = "topnav"; } }
</script>
<!-- menu end -->
<div class="sesbanner">
<picture>
<source media='(min-width: 401px)' srcset='sesbanner/big.jpg'>
<source media='(max-width: 400px)' srcset='sesbanner/tall.jpg'>
<img src='sesbanner/small.jpg'></picture>
<div class="sestext">
SUBJECT<br>
2019
</div>
<div class="sesliten">
Choose option from above menu.
</div>
</div>
<div class="adressbar">
<h3>Company</h3><br>
<br>
Adr1<br>
Adr2<br>
ZIP City<br>
<br>
Phone: +11 11 11 11<br>
Fax: +22 22 22 22<br>
<br>
Email: post#site.com<br>
</div><!-- Footer -->
<div class="footer">
©All rights reserved 2019.
<center>
<table id="footertabell">
<tr>
<td>Made by me</td>
</tr>
</table>
</center>Some text.<br>
Some more text.
</div><!-- END -->
</body>
</html>
and the css style file like this:
h1{
font-size: 2.25em;
line-height: 2.25em;
font-family: 'Fjalla One', sans-serif;
margin-top: 10px;
margin-bottom: 10px;
}
h2{
font-size: 1.875em;
line-height: 2em;
font-family: 'Fjalla One', sans-serif;
}
h3{
font-size: 1.25em;
line-height: 1.375em;
font-family: 'Fjalla One', sans-serif;
}
h4{
font-size: 1em;
line-height: 1.125em;
font-family: 'Fjalla One', sans-serif;
}
h5{
font-size: 0.875em;
line-height: 1em;
font-family: 'Fjalla One', sans-serif;
}
h6{
font-size: 0.75em;
line-height: 0.875em;
font-family: 'Fjalla One', sans-serif;
}
.paragraph {
font-size: 0.875em;
line-height: 1em;
font-family: 'Noto Sans', sans-serif;
}
.medium {
font-size: 0.875em;
line-height: 1em;
font-family: 'Noto Sans', sans-serif;
text-align: center;
color: darkgray;
}
.liten {
font-size: 0.5625em;
line-height: 0.625em;
font-family: 'Noto Sans', sans-serif;
}
p.bold {
font-weight: 600;
}
.logo {
max-width: 100%;
max-height: 100%;
text-align: center;
background-color: black;
font-family:'Fjalla One', sans-serif;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.50);
font-size: 2.00em;
color: white;
}
.vgrtema{
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
max-width: 100%;
max-height: 100%;
background-color: #e7e7e7;
}
.vgrtema.img {
max-width: 100%;
max-height: 100%;
}
.vgrtextheader {
font-family:'Fjalla One', sans-serif;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.50);
font-size: 1.75em;
color: black;
text-align: center;
vertical-align: middle;
line-height: 1.5em;
}
.sesbanner {
position: relative;
text-align: center;
color: white;
background-color: black;
}
.sestext {
font-family:'Fjalla One', sans-serif;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.50);
font-size: 3em;
text-transform: uppercase;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.sesliten {
font-family: 'Noto Sans', sans-serif;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.50);
font-size: 1em;
text-transform: uppercase;
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%, -50%);
}
/*Menu start */
nav {margin:0;
font-family:'Fjalla One', sans-serif;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.50);
font-size: 1.00em;
background-color: black;
}
/* Add a black background color to the top navigation */
.topnav {
overflow: hidden;
background-color: darkgray;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Add an active class to highlight the current page */
.active {
background-color: darkgray;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
float: left;
overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one
("Home"). Show the link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon.
This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
/*Menu end */
HTML
<div class="NavAlignLeft">Site Name</div>
<div class="NavAlignRight">
<!-- Change this to an include later -->
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="icon">
☰
</li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
<!-- Video test -->
<div id="video_overlays">
<div class="abovethefold">
<h1 class="blog-title"><?php bloginfo( 'name' ); ?></h1>
<?php $description = get_bloginfo( 'description', 'display' ); ?>
<?php if($description) { ?><p class="blog-description"><?php echo $description ?></p><?php } ?>
<p class="button">
<a class="blue-button" href="#cta">Call to Action</a></p>
</div></div>
<div class="homepage-hero-module">
<div class="video-container">
<div class="filter"></div>
<video autoplay loop class="fillWidth">
<source src="http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/Busy-People/MP4/Busy-People.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
<source src="http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/Busy-People/WEBM/Busy-People.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
<img src="http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/Busy-People/Snapshot/Busy-People.jpg" title="Your browser does not support the <video> tag">
</video>
<div class="poster hidden">
<img src="http://scott.ewarena.com//blog/wp-content/themes/bootstrapstarter/Busy-People/Snapshots/Busy-People.jpg" alt="">
</div>
</div>
</div></div>
CSS:
body {
background-color: #e2e2e2;
margin: 0px;
}
h1, .h1,
h2, .h2,
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: 0;
font-family: 'Vollkorn', serif;
font-style: oblique;
font-weight: normal;
color: #2e2e2e;
}
h3, .h3 {
font-family: 'Vollkorn', serif;
font-weight: bold;
font-size: 30px;
color: #fff;
}
.NavAlignLeft {
font-family: 'Vollkorn', serif;
/*font-style: oblique;*/
font-weight: bold;
font-size: 22px;
color: #fff;
float: left;
padding-left: 40px;
}
.NavAlignLeft:hover {
font-family: 'Vollkorn', serif;
text-decoration: none;
}
.NavAlignRight {
font-family: 'Vollkorn', serif;
font-weight: bold;
font-size: 22px;
color: #fff;
float: right;
padding-right: 40px;
}
.NavAlignLeft, .NavAlignRight {
/*{ width: 50%; Commenting this out made the nav align completely to the right.*/
display: inline-block;
}
a, .a,
a:visited, .a:visited,
a:active, .a:active {
font-family: 'Vollkorn';
font-style: none; color: #e2e2e2; text-decoration: none;
}
a:hover, .a:hover {
font-family: 'Vollkorn';
font-style: none; color: #fff; text-decoration: none;
}
/*
* Override Bootstrap's default container.
*/
/*#media (min-width: 1200px) {
.container {
width: 100%; padding: 0; margin: 0; vertical-align: middle;
}
} .container2 { width: 100%; padding: 0; margin: 0; }
Nothing changed */
/*
* Masthead for nav
*/
#blog-masthead {
background-color: #2e2e2e;
height: 40px;
width: 100%;
line-height: 40px;
/*z-index: 2;
/*vertical-align: middle;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px; Nothing Changed */
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.41);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.41);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.41);
border-bottom: 1px solid #1a1a1a;
}
.abovethefold {
background-color: transparent;
/*background-image: url("https://static1.squarespace.com/static/518d3dc6e4b00ba5bf4a06b0/t/586e223e197aea98191b014e/1483612772641/photodune-17121963-coffee-shop-owner-standing-at-the-counter-l.jpg"); */
/*height: 250px;
width: 100%;
/*padding-top: 100px;*/
/*vertical-align: middle;
justify-content:center;
align-content:center;
}
.overlay {
background:#2e2e2e;
opacity:40%;
height: 250px;
width: 100%Nothing changed.*/
}
/* Nav links */
.blog-nav-item {
/*position: relative;
display: inline-block;
padding: 5px;
color: #2e2e2e; nothing changed*/
}
.blog-nav-item:hover,
.blog-nav-item:focus {
color: #fff;
text-decoration: none;
}
/* Active state gets a caret at the bottom */
.blog-nav .active {
color: #fff;
}
.blog-nav .active:after {
/*position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent; Nothing Changed*/
}
.menu-menu-1-container {
/*width: 100%;
vertical-align: middle;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px; Nothing changed*/}
/*
* Blog name and description
*/
.blog-header {
padding-top: 20px;
padding-bottom: 20px;
}
.blog-title {
margin-top: 0px;
margin-bottom: 0;
line-height: 80px;
margin-top: 100px;
font-size: 60px;
text-align:center;
font-weight: normal;
color: #fff;
}
.blog-description {
font-size: 30px;
font-style: 'Open Sans';
font-weight: bold;
text-align: center;
color: #2e2e2e;
}
.blog-main {
font-size: 18px;
line-height: 1.5; nothing changed
}
/* Buttons */
.green-button,.green-button:link,.green-button:visited,.blue-button,.blue-button:link,.red-button,.red-button:link,.purple-button,.purple-button:link,.teal-button,.teal-button:link,.orange-button,.orange-button:link,.grey-button,.grey-button:link,.grey-button:visited,.lt-grey-button,.lt-grey-button:link,.lt-grey-button:visited,.shop_table .actions .button,.oldernewer a:link,.oldernewer a:visited,.woocommerce-message .button,#place_order,html body div .quiz-submit, input.course-start {
display: block;
border: 0;
border-radius:1em;
-webkit-border-radius:border-radius:.8em;
text-align: center;
font-size: 20px !important;
padding: 10px 20px;
width: 180px;
}
p.button {
text-align: center;
}
p.button:hover {
text-align: center;
text-decoration: none;
}
p.button a {
margin:0 auto;
font-family: 'Vollkorn', serif;
font-style: none;
text-decoration: none;
}
.blue-button,.blue-button:link,.blue-button:visited {
background: #2f75c5;
color: #f8f8f8 !important;
text-decoration: none;
}
.blue-button:hover {
background: #3584de;
cursor: pointer;
text-decoration: none;
}
.blue-button:active {
background: #2966ab;
font-style: none;}
/* Sidebar modules for boxing content */
/* Sidebars arent being used
.sidebar-module {
padding: 15px;
margin: 0 -15px 15px;
}
.sidebar-module-inset {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child {
margin-bottom: 0;
}
*/
/* Pagination */
.pager {
/*margin-bottom: 60px;
text-align: left;nothing changed*/
}
.pager > li > a {
/* width: 140px;
padding: 10px 20px;
text-align: center;
border-radius: 0px;
list-style: none; nothing changed*/
}
/*
* Blog posts
*/
.blog-post {
margin:50px 50px 0;
}
.blog-post-title {
margin-bottom: 5px;
font-size: 40px; color: #2e2e2e;
}
.subtitle {
font-size: 1.2em;
font-family: 'Vollkorn';
color: #2e2e2e;
}
.blog-post-meta {
margin-bottom: 20px;
color: #999;
}
/*
* Footer
*/
.blog-footer {
padding: 40px 0;
color: #999;
text-align: center;
background-color: #2e2e2e;
border-top: 1px solid #1a1a1a;
-webkit-box-shadow: 2px -5px 5px 0px rgba(0,0,0,0.41);
-moz-box-shadow: 2px -5px 5px 0px rgba(0,0,0,0.41);
box-shadow: 2px -5px 5px 0px rgba(0,0,0,0.41);
}
.blog-footer p:last-child {
margin-bottom: 0;
}
/*** lyrathemes - custom styling ***/
.page_item {
list-style: none;
font-size: 22px;
text-decoration: none;
}
.page_item:hover {
list-style: none;
text-decoration: none;
}
ul.blog-nav {
/*list-style: none;*/
}
/* Nav links */
.menu-item a{
position: relative;
/*display: inline-block; keep this commented out - moved navigation vertically.*/
padding: 10px;
color: #e2e2e2;
}
.menu-item a:hover,
.menu-item a:focus {
color: #fff;
text-decoration: none;
}
/* Active state gets a caret at the bottom */
.menu-item.current-menu-item a{
color: #fff;
}
.menu-item.current-menu-item a:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
/*content: " ";*/
/* border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;*/
-webkit-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.41);
-moz-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.41);
box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.41);
}
/*Not using side bars
.sidebar-module ul {
list-style: none;
padding-left: 0;
}*/
/* Video CSS */
.homepage-hero-module {
border-right: none;
border-left: none;
position: relative;
width: auto;
height: 400px;
}
.no-video .video-container video,
.touch .video-container video {
display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
display: block !important;
}
.video-container {
position: absolute;
bottom: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
/*background: #000;*/
}
.video-container .poster img {
width: 100%;
bottom: 0;
position: absolute;
}
.video-container .filter {
/*z-index: 100;*/
position: absolute;
background: rgba(0, 0, 0, 0.4);
width: 100%;
}
.video-container video {
position: absolute;
/*z-index: 0;*/
bottom: 0;
}
.video-container video.fillWidth {
width: 100%;
}
#video_overlays {
position:absolute;
float:left;
width:100%;
height:400px%;
background-color:transparent;
z-index:1;
}
/* Content Table Styles */
#green-table {
background-color: #ebf2e6;
width: 50%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
margin: auto;
margin-top:30px;
margin-bottom: 30px;
border: 1px solid #d6e8c5;
border-radius:.8em;
}
#dark-table {
background-color: #2e2e2e;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
margin-top:30px;
margin-bottom: 30px;
}
#light-table {
background-color: #e2e2e2;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
margin-top:30px;
margin-bottom: 30px;
}
#dark-narrow-table {
background-color: #2e2e2e;
/*background-image: url("https://static1.squarespace.com/static/518d3dc6e4b00ba5bf4a06b0/t/586e223e197aea98191b014e/1483612772641/photodune-17121963-coffee-shop-owner-standing-at-the-counter-l.jpg"); */
width: 50%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
margin-top:30px;
margin-bottom: 30px;
margin: auto;
border-radius:.8em;
}
/*Heading Styles*/
#light-table-head-style {
font-family: 'Droid Serif';
font-size: 45px;
color: #2e2e2e;
}
#dark-table-head-style {
font-family: 'Droid Serif';
font-size: 45px;
color: #e2e2e2;
}
#green-table-head-style {
font-family: 'Droid Serif';
font-size: 45px;
color: #2e2e2e;
}
#dark-narrow-table-head-style{
font-family: 'Droid Serif';
font-size: 45px;
color: #e2e2e2;
}
/*Content Paragraph Styles*/
#light-table-paragraph {
font-family: 'Droid Serif';
font-size: 22px;
color: #2e2e2e;
text-align: left;
}
#dark-table-paragraph {
font-family: 'Droid Serif';
font-size: 22px;
color: #e2e2e2;
}
#dark-narrow-table-paragraph {
font-family: 'Droid Serif';
font-size: 22px;
color: #e2e2e2;
}
#green-table-paragraph {
font-family: 'Droid Serif';
font-size: 22px;
color: #2e2e2e;
text-align: left;
}
/* Hamburger Test */
/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #2e2e2e;
}
/* Float the list items side by side */
ul.topnav li {float: left;
height: 40px;
}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: #e2e2e2;
text-align: center;
padding: 0px 10px 0px 0px;
text-decoration: none;
transition: 0.3s;
font-family: 'Vollkorn', serif;
font-weight: bold;
font-size: 22px;
color: #e2e2e2;
}
/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #3b3b3b;}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}
/* Hamburger mobile test */
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
#media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/* Fixing Mobile Div Problem */
#media only screen and (max-device-width: 680px) {
#green-table {
width: 95%;
}
#dark-narrow-table {
width: 95%;
}
.NavAlignRight {
padding-right: 2px;
}
.NavAlignLeft {
padding-left: 2px;
JS:
//jQuery is required to run this code
$( document ).ready(function() {
scaleVideoContainer();
initBannerVideoSize('.video-container .poster img');
initBannerVideoSize('.video-container .filter');
initBannerVideoSize('.video-container video');
$(window).on('resize', function() {
scaleVideoContainer();
scaleBannerVideoSize('.video-container .poster img');
scaleBannerVideoSize('.video-container .filter');
scaleBannerVideoSize('.video-container video');
});
});
function scaleVideoContainer() {
var height = $(window).height() + 5;
var unitHeight = parseInt(height) + 'px';
$('.homepage-hero-module').css('height',unitHeight);
}
function initBannerVideoSize(element){
$(element).each(function(){
$(this).data('height', $(this).height());
$(this).data('width', $(this).width());
});
scaleBannerVideoSize(element);
}
function scaleBannerVideoSize(element){
var windowWidth = $(window).width(),
windowHeight = $(window).height() + 5,
videoWidth,
videoHeight;
console.log(windowHeight);
$(element).each(function(){
var videoAspectRatio = $(this).data('height')/$(this).data('width');
$(this).width(windowWidth);
if(windowWidth < 1000){
videoHeight = windowHeight;
videoWidth = videoHeight / videoAspectRatio;
$(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});
$(this).width(videoWidth).height(videoHeight);
}
$('.homepage-hero-module .video-container video').addClass('fadeIn animated');
});
}
So it loooks absolutely fine when it's displayed on my website http://scott.ewarena.com/blog but when viewed on a mobile device there's a gap along the top, underneath the top bar, before the video, that shouldn't be there.
I can't find out what the issue is at all, I've been trying for two days.
Sorry my code is so clunky. I'm new at this and aware it needs cleaning up a bit.
Any help will be MUCH appreciated!
Thanks!
Scott
Having looked at your code in Chrome Dev Tools I noticed that you have the following defined in your style-sheet:
.video-container video {
position: absolute;
z-index: 0;
bottom: 0;
}
If you remove bottom: 0; you wont have this problem!
Basically, you're forcing the video to be at the bottom most point in it's container, creating a gap when the view-port is smart-phone sized.
I made this drop down menu with a link; When I hover over the link the menu retracts to the top of the screen and the link disappears like I moved the mouse off of the menu completely.
Here it is published: http://camron.onyxtek.com/
Html:
<body>
<div id="navigation">
<ul id="navlist">
<li class="titleli">
Some Title
</li>
<li class="breadcrumb" id="bc1" onmouseover="bc1_MouseOver()"><p class="bctitle">Projects</p></li>
<li class="breadcrumb" id="bc2" onmouseover="bc2_MouseOver()"><p class="bctitle">Stuff</p></li>
</ul>
</div>
<div id="navmenu" onmouseover="nm_MouseOver()" onmouseout="nm_MouseOut()">
<ul id="ml1" class="menulist">
<li class="menuli">
<a class="menulink" href="/Main/AsciiPlatformer">Ascii Platformer</a>
</li>
</ul>
</div>
<div class="container">
#RenderBody()
</div>
</body>
CSS:
#navigation, #navlist {
width: auto;
height: 50px;
}
#navigation {
background-color: #888;
margin: 0;
padding: 0;
}
#navmenu {
background-color: #aaa;
position: relative;
margin: 0, 0, 10px, 0;
height: 3px;
transition: height linear 0.25s;
}
#navlist {
list-style: none;
display: block;
clear: left;
}
#navlist li {
float: left;
display: block;
height: inherit;
margin-right: 10px;
}
#titleli {
background-color: #aaa;
}
#titlelink {
font-family: "Lucida Console", Monaco, monospace;
color: #ddd;
font-size: 25px;
text-decoration: none;
display: block;
margin: 12px 2px 0 10px;
}
.breadcrumb {
background-color: #999;
border-left: 2px solid #aaa;
border-right: 2px solid #aaa;
width: 100px;
}
.menulist {
display: none;
position: absolute;
list-style: none;
clear: left;
}
.menulink {
font-family: "Courier New", Courier, monospace;
color: #ddd;
font-size: 15px;
text-decoration: none;
display: block;
margin: 10px 0 0 10px;
}
.bctitle {
font-family: "Courier New", Courier, monospace;
color: #ddd;
font-size: 15px;
text-decoration: underline;
display: block;
margin: 18px 0 0 8px;
}
body {
background-color: #ddd;
}
body, div, ul, li, a {
margin: 0;
padding: 0;
border: 0;
}
JavaScript:
var menuHover = false;
function resetColors() {
document.getElementById("bc1").style.backgroundColor = "#999";
document.getElementById("bc2").style.backgroundColor = "#999";
}
function showMenu(index, bool) {
if (bool) {
document.getElementById("ml" + index).style.display = "block";
} else {
document.getElementById("ml" + index).style.display = "none";
}
}
function bc1_MouseOver() {
resetColors();
document.getElementById("navmenu").style.height = "200px";
showMenu(1, true);
document.getElementById("bc1").style.backgroundColor = "#aaa";
}
function bc2_MouseOver() {
resetColors();
document.getElementById("navmenu").style.height = "200px";
showMenu(1, false);
document.getElementById("bc2").style.backgroundColor = "#aaa";
}
function nm_MouseOver() {
menuHover = true;
}
function nm_MouseOut() {
menuHover = false;
document.getElementById("navmenu").style.height = "3px";
showMenu(1, false);
resetColors();
}
Have you tried setting your <li> element to have the attribute pointer-events: none in the CSS?