Develop Reference

Getting Invalid LatLng object when trying to map coordinates using leaflet

I'm trying to figure out how I can loop each of the coordinates,
<div class="map-container" id="mapid"></div>
<ul class="plot">
<li class="markers" data-lattitude="-40.99497" data-longitude="174.50808">Text 1</li>
<li class="markers" data-lattitude="-41.30269" data-longitude="173.63696">Text 2</li>
<li class="markers" data-lattitude="-41.49413" data-longitude="173.5421">Text 3</li>
<li class="markers" data-lattitude="-40.98585" data-longitude="174.50659">Text 4</li>
<li class="markers" data-lattitude="-40.93163" data-longitude="173.81726">Text 5</li>
</ul>
add them to an array, plot them on the map with the popup text shown. Below is an error that I can't seem to solve. not sure which part of the code is wrong.
leaflet.js:5 Uncaught Error: Invalid LatLng object: (e, x)
Below is the sample of the code that I have been working on.
var map = L.map('mapid', {
fullscreenControl: {
pseudoFullscreen: false // if true, fullscreen to page width and height
},
}).setView([30.539255791073, 58.383450508118], 5);
map.createPane('labels');
map.getPane('labels').style.zIndex = 650;
map.getPane('labels').style.pointerEvents = 'none';
var positron = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
noWrap: true,
maxZoom : 10
}).addTo(map);
var positronLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
pane: 'labels',
noWrap: true,
maxZoom : 3
}).addTo(map);
var southWest = L.latLng(-89.98155760646617, -180),
northEast = L.latLng(89.99346179538875, 180),
bounds = L.latLngBounds(southWest, northEast);
map.setMaxBounds(bounds);
map.on('drag', function() {
map.panInsideBounds(bounds, { animate: false });
});
var plot = [];
$('.plot > .markers').each(function() {
plot.push($(this).text(), $(this).data('lattitude'), $(this).data('longitude')
);
});
console.log( plot );
for ( var i = 0; i < plot.length; i++ ) {
marker = new L.marker([plot[i][1], plot[i][2]]).bindPopup(plot[i][0], {autoClose:false}).addTo(map).openPopup();
}
/* required styles */
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
position: absolute;
left: 0;
top: 0;
}
.leaflet-container {
overflow: hidden;
}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-user-drag: none;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
image-rendering: -webkit-optimize-contrast;
}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
width: 1600px;
height: 1600px;
-webkit-transform-origin: 0 0;
}
.leaflet-marker-icon,
.leaflet-marker-shadow {
display: block;
}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg,
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
max-width: none !important;
max-height: none !important;
}
.leaflet-container.leaflet-touch-zoom {
-ms-touch-action: pan-x pan-y;
touch-action: pan-x pan-y;
}
.leaflet-container.leaflet-touch-drag {
-ms-touch-action: pinch-zoom;
/* Fallback for FF which doesn't support pinch-zoom */
touch-action: none;
touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
-ms-touch-action: none;
touch-action: none;
}
.leaflet-container {
-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
filter: inherit;
visibility: hidden;
}
.leaflet-tile-loaded {
visibility: inherit;
}
.leaflet-zoom-box {
width: 0;
height: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 800;
}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
-moz-user-select: none;
}
.leaflet-pane { z-index: 400; }
.leaflet-tile-pane { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane { z-index: 500; }
.leaflet-marker-pane { z-index: 600; }
.leaflet-tooltip-pane { z-index: 650; }
.leaflet-popup-pane { z-index: 700; }
.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg { z-index: 200; }
.leaflet-vml-shape {
width: 1px;
height: 1px;
}
.lvml {
behavior: url(#default#VML);
display: inline-block;
position: absolute;
}
/* control positioning */
.leaflet-control {
position: relative;
z-index: 800;
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
pointer-events: auto;
}
.leaflet-top,
.leaflet-bottom {
position: absolute;
z-index: 1000;
pointer-events: none;
}
.leaflet-top {
top: 0;
}
.leaflet-right {
right: 0;
}
.leaflet-bottom {
bottom: 0;
}
.leaflet-left {
left: 0;
}
.leaflet-control {
float: left;
clear: both;
}
.leaflet-right .leaflet-control {
float: right;
}
.leaflet-top .leaflet-control {
margin-top: 10px;
}
.leaflet-bottom .leaflet-control {
margin-bottom: 10px;
}
.leaflet-left .leaflet-control {
margin-left: 10px;
}
.leaflet-right .leaflet-control {
margin-right: 10px;
}
/* zoom and fade animations */
.leaflet-fade-anim .leaflet-tile {
will-change: opacity;
}
.leaflet-fade-anim .leaflet-popup {
opacity: 0;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
opacity: 1;
}
.leaflet-zoom-animated {
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
will-change: transform;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
-moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
transition: transform 0.25s cubic-bezier(0,0,0.25,1);
}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
.leaflet-zoom-anim .leaflet-zoom-hide {
visibility: hidden;
}
/* cursors */
.leaflet-interactive {
cursor: pointer;
}
.leaflet-grab {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
cursor: crosshair;
}
.leaflet-popup-pane,
.leaflet-control {
cursor: auto;
}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
cursor: move;
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing;
}
/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
pointer-events: none;
}
.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive {
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
pointer-events: auto;
}
/* visual tweaks */
.leaflet-container {
background: #ddd;
outline: 0;
}
.leaflet-container a {
color: #0078A8;
}
.leaflet-container a.leaflet-active {
outline: 2px solid orange;
}
.leaflet-zoom-box {
border: 2px dotted #38f;
background: rgba(255,255,255,0.5);
}
/* general typography */
.leaflet-container {
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}
/* general toolbar styles */
.leaflet-bar {
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
border-radius: 4px;
}
.leaflet-bar a,
.leaflet-bar a:hover {
background-color: #fff;
border-bottom: 1px solid #ccc;
width: 26px;
height: 26px;
line-height: 26px;
display: block;
text-align: center;
text-decoration: none;
color: black;
}
.leaflet-bar a,
.leaflet-control-layers-toggle {
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
}
.leaflet-bar a:hover {
background-color: #f4f4f4;
}
.leaflet-bar a:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.leaflet-bar a:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom: none;
}
.leaflet-bar a.leaflet-disabled {
cursor: default;
background-color: #f4f4f4;
color: #bbb;
}
.leaflet-touch .leaflet-bar a {
width: 30px;
height: 30px;
line-height: 30px;
}
.leaflet-touch .leaflet-bar a:first-child {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.leaflet-touch .leaflet-bar a:last-child {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
/* zoom control */
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
font: bold 18px 'Lucida Console', Monaco, monospace;
text-indent: 1px;
}
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
font-size: 22px;
}
/* layers control */
.leaflet-control-layers {
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
background: #fff;
border-radius: 5px;
}
.leaflet-control-layers-toggle {
background-image: url(images/layers.png);
width: 36px;
height: 36px;
}
.leaflet-retina .leaflet-control-layers-toggle {
background-image: url(images/layers-2x.png);
background-size: 26px 26px;
}
.leaflet-touch .leaflet-control-layers-toggle {
width: 44px;
height: 44px;
}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
display: none;
}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
display: block;
position: relative;
}
.leaflet-control-layers-expanded {
padding: 6px 10px 6px 6px;
color: #333;
background: #fff;
}
.leaflet-control-layers-scrollbar {
overflow-y: scroll;
overflow-x: hidden;
padding-right: 5px;
}
.leaflet-control-layers-selector {
margin-top: 2px;
position: relative;
top: 1px;
}
.leaflet-control-layers label {
display: block;
}
.leaflet-control-layers-separator {
height: 0;
border-top: 1px solid #ddd;
margin: 5px -10px 5px -6px;
}
/* Default icon URLs */
.leaflet-default-icon-path {
background-image: url(images/marker-icon.png);
}
/* attribution and scale controls */
.leaflet-container .leaflet-control-attribution {
background: #fff;
background: rgba(255, 255, 255, 0.7);
margin: 0;
}
.leaflet-control-attribution,
.leaflet-control-scale-line {
padding: 0 5px;
color: #333;
}
.leaflet-control-attribution a {
text-decoration: none;
}
.leaflet-control-attribution a:hover {
text-decoration: underline;
}
.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale {
font-size: 11px;
}
.leaflet-left .leaflet-control-scale {
margin-left: 5px;
}
.leaflet-bottom .leaflet-control-scale {
margin-bottom: 5px;
}
.leaflet-control-scale-line {
border: 2px solid #777;
border-top: none;
line-height: 1.1;
padding: 2px 5px 1px;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
background: rgba(255, 255, 255, 0.5);
}
.leaflet-control-scale-line:not(:first-child) {
border-top: 2px solid #777;
border-bottom: none;
margin-top: -2px;
}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
border-bottom: 2px solid #777;
}
.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
box-shadow: none;
}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
border: 2px solid rgba(0,0,0,0.2);
background-clip: padding-box;
}
/* popup */
.leaflet-popup {
position: absolute;
text-align: center;
margin-bottom: 20px;
}
.leaflet-popup-content-wrapper {
padding: 1px;
text-align: left;
border-radius: 12px;
}
.leaflet-popup-content {
margin: 13px 19px;
line-height: 1.4;
}
.leaflet-popup-content p {
margin: 18px 0;
}
.leaflet-popup-tip-container {
width: 40px;
height: 20px;
position: absolute;
left: 50%;
margin-left: -20px;
overflow: hidden;
pointer-events: none;
}
.leaflet-popup-tip {
width: 17px;
height: 17px;
padding: 1px;
margin: -10px auto 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
background: white;
color: #333;
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}
.leaflet-container a.leaflet-popup-close-button {
position: absolute;
top: 0;
right: 0;
padding: 4px 4px 0 0;
border: none;
text-align: center;
width: 18px;
height: 14px;
font: 16px/14px Tahoma, Verdana, sans-serif;
color: #c3c3c3;
text-decoration: none;
font-weight: bold;
background: transparent;
}
.leaflet-container a.leaflet-popup-close-button:hover {
color: #999;
}
.leaflet-popup-scrolled {
overflow: auto;
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
}
.leaflet-oldie .leaflet-popup-content-wrapper {
zoom: 1;
}
.leaflet-oldie .leaflet-popup-tip {
width: 24px;
margin: 0 auto;
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
}
.leaflet-oldie .leaflet-popup-tip-container {
margin-top: -1px;
}
.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
border: 1px solid #999;
}
/* div icon */
.leaflet-div-icon {
background: #fff;
border: 1px solid #666;
}
/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
position: absolute;
padding: 6px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 3px;
color: #222;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.leaflet-tooltip.leaflet-clickable {
cursor: pointer;
pointer-events: auto;
}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
position: absolute;
pointer-events: none;
border: 6px solid transparent;
background: transparent;
content: "";
}
/* Directions */
.leaflet-tooltip-bottom {
margin-top: 6px;
}
.leaflet-tooltip-top {
margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
left: 50%;
margin-left: -6px;
}
.leaflet-tooltip-top:before {
bottom: 0;
margin-bottom: -12px;
border-top-color: #fff;
}
.leaflet-tooltip-bottom:before {
top: 0;
margin-top: -12px;
margin-left: -6px;
border-bottom-color: #fff;
}
.leaflet-tooltip-left {
margin-left: -6px;
}
.leaflet-tooltip-right {
margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
top: 50%;
margin-top: -6px;
}
.leaflet-tooltip-left:before {
right: 0;
margin-right: -12px;
border-left-color: #fff;
}
.leaflet-tooltip-right:before {
left: 0;
margin-left: -12px;
border-right-color: #fff;
}
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
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;
}
html, body {
width : 100%;
height : 100%;
}
.map-container {
width : 100%;
height : 100%;
}
<link href="https://unpkg.com/leaflet#1.3.4/dist/leaflet.css" rel="stylesheet"/>
<script src="https://unpkg.com/leaflet#1.3.4/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/leaflet.gridlayer.googlemutant#latest/Leaflet.GoogleMutant.js"></script>
<div class="map-container" id="mapid"></div>
<ul class="plot">
<li class="markers" data-lattitude="-40.99497" data-longitude="174.50808">Text 1</li>
<li class="markers" data-lattitude="-41.30269" data-longitude="173.63696">Text 2</li>
<li class="markers" data-lattitude="-41.49413" data-longitude="173.5421">Text 3</li>
<li class="markers" data-lattitude="-40.98585" data-longitude="174.50659">Text 4</li>
<li class="markers" data-lattitude="-40.93163" data-longitude="173.81726">Text 5</li>
</ul>

The problem is in this line:
plot.push(
$(this).text(),
$(this).data('lattitude'),
$(this).data('longitude')
);
You're pushing three items to the plot array, resulting in the plot array looking something like this:
["Text 1", -40.99497, 174.50808, "Text 2", -41.30269, 173.63696
Later, when you try to iterate over the array:
for (var i = 0; i < plot.length; i++) {
marker = new L.marker([plot[i][1], plot[i][2]]).bindPopup(plot[i][0], {
You're accessing the second and third index of the string (the first element in plot), not the second and third index of an array (resulting in the e and x you see, which came from text).
Instead, push an array of those three items to plot:
plot.push([
$(this).text(),
$(this).data('lattitude'),
$(this).data('longitude')
]);
var map = L.map('mapid', {
fullscreenControl: {
pseudoFullscreen: false // if true, fullscreen to page width and height
},
}).setView([30.539255791073, 58.383450508118], 5);
map.createPane('labels');
map.getPane('labels').style.zIndex = 650;
map.getPane('labels').style.pointerEvents = 'none';
var positron = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
noWrap: true,
maxZoom: 10
}).addTo(map);
var positronLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
pane: 'labels',
noWrap: true,
maxZoom: 3
}).addTo(map);
var southWest = L.latLng(-89.98155760646617, -180),
northEast = L.latLng(89.99346179538875, 180),
bounds = L.latLngBounds(southWest, northEast);
map.setMaxBounds(bounds);
map.on('drag', function() {
map.panInsideBounds(bounds, {
animate: false
});
});
var plot = [];
$('.plot > .markers').each(function() {
plot.push([$(this).text(), $(this).data('lattitude'), $(this).data('longitude')]);
});
console.log(plot);
for (var i = 0; i < plot.length; i++) {
marker = new L.marker([plot[i][1], plot[i][2]]).bindPopup(plot[i][0], {
autoClose: false
}).addTo(map).openPopup();
}
/* required styles */
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane>svg,
.leaflet-pane>canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
position: absolute;
left: 0;
top: 0;
}
.leaflet-container {
overflow: hidden;
}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-user-drag: none;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
image-rendering: -webkit-optimize-contrast;
}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
width: 1600px;
height: 1600px;
-webkit-transform-origin: 0 0;
}
.leaflet-marker-icon,
.leaflet-marker-shadow {
display: block;
}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg,
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
max-width: none !important;
max-height: none !important;
}
.leaflet-container.leaflet-touch-zoom {
-ms-touch-action: pan-x pan-y;
touch-action: pan-x pan-y;
}
.leaflet-container.leaflet-touch-drag {
-ms-touch-action: pinch-zoom;
/* Fallback for FF which doesn't support pinch-zoom */
touch-action: none;
touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
-ms-touch-action: none;
touch-action: none;
}
.leaflet-container {
-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
filter: inherit;
visibility: hidden;
}
.leaflet-tile-loaded {
visibility: inherit;
}
.leaflet-zoom-box {
width: 0;
height: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 800;
}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
-moz-user-select: none;
}
.leaflet-pane {
z-index: 400;
}
.leaflet-tile-pane {
z-index: 200;
}
.leaflet-overlay-pane {
z-index: 400;
}
.leaflet-shadow-pane {
z-index: 500;
}
.leaflet-marker-pane {
z-index: 600;
}
.leaflet-tooltip-pane {
z-index: 650;
}
.leaflet-popup-pane {
z-index: 700;
}
.leaflet-map-pane canvas {
z-index: 100;
}
.leaflet-map-pane svg {
z-index: 200;
}
.leaflet-vml-shape {
width: 1px;
height: 1px;
}
.lvml {
behavior: url(#default#VML);
display: inline-block;
position: absolute;
}
/* control positioning */
.leaflet-control {
position: relative;
z-index: 800;
pointer-events: visiblePainted;
/* IE 9-10 doesn't have auto */
pointer-events: auto;
}
.leaflet-top,
.leaflet-bottom {
position: absolute;
z-index: 1000;
pointer-events: none;
}
.leaflet-top {
top: 0;
}
.leaflet-right {
right: 0;
}
.leaflet-bottom {
bottom: 0;
}
.leaflet-left {
left: 0;
}
.leaflet-control {
float: left;
clear: both;
}
.leaflet-right .leaflet-control {
float: right;
}
.leaflet-top .leaflet-control {
margin-top: 10px;
}
.leaflet-bottom .leaflet-control {
margin-bottom: 10px;
}
.leaflet-left .leaflet-control {
margin-left: 10px;
}
.leaflet-right .leaflet-control {
margin-right: 10px;
}
/* zoom and fade animations */
.leaflet-fade-anim .leaflet-tile {
will-change: opacity;
}
.leaflet-fade-anim .leaflet-popup {
opacity: 0;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
opacity: 1;
}
.leaflet-zoom-animated {
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
will-change: transform;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
-moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1);
}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
.leaflet-zoom-anim .leaflet-zoom-hide {
visibility: hidden;
}
/* cursors */
.leaflet-interactive {
cursor: pointer;
}
.leaflet-grab {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
cursor: crosshair;
}
.leaflet-popup-pane,
.leaflet-control {
cursor: auto;
}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
cursor: move;
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing;
}
/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane>svg path,
.leaflet-tile-container {
pointer-events: none;
}
.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane>svg path.leaflet-interactive {
pointer-events: visiblePainted;
/* IE 9-10 doesn't have auto */
pointer-events: auto;
}
/* visual tweaks */
.leaflet-container {
background: #ddd;
outline: 0;
}
.leaflet-container a {
color: #0078A8;
}
.leaflet-container a.leaflet-active {
outline: 2px solid orange;
}
.leaflet-zoom-box {
border: 2px dotted #38f;
background: rgba(255, 255, 255, 0.5);
}
/* general typography */
.leaflet-container {
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}
/* general toolbar styles */
.leaflet-bar {
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
border-radius: 4px;
}
.leaflet-bar a,
.leaflet-bar a:hover {
background-color: #fff;
border-bottom: 1px solid #ccc;
width: 26px;
height: 26px;
line-height: 26px;
display: block;
text-align: center;
text-decoration: none;
color: black;
}
.leaflet-bar a,
.leaflet-control-layers-toggle {
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
}
.leaflet-bar a:hover {
background-color: #f4f4f4;
}
.leaflet-bar a:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.leaflet-bar a:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom: none;
}
.leaflet-bar a.leaflet-disabled {
cursor: default;
background-color: #f4f4f4;
color: #bbb;
}
.leaflet-touch .leaflet-bar a {
width: 30px;
height: 30px;
line-height: 30px;
}
.leaflet-touch .leaflet-bar a:first-child {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.leaflet-touch .leaflet-bar a:last-child {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
/* zoom control */
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
font: bold 18px 'Lucida Console', Monaco, monospace;
text-indent: 1px;
}
.leaflet-touch .leaflet-control-zoom-in,
.leaflet-touch .leaflet-control-zoom-out {
font-size: 22px;
}
/* layers control */
.leaflet-control-layers {
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
background: #fff;
border-radius: 5px;
}
.leaflet-control-layers-toggle {
background-image: url(images/layers.png);
width: 36px;
height: 36px;
}
.leaflet-retina .leaflet-control-layers-toggle {
background-image: url(images/layers-2x.png);
background-size: 26px 26px;
}
.leaflet-touch .leaflet-control-layers-toggle {
width: 44px;
height: 44px;
}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
display: none;
}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
display: block;
position: relative;
}
.leaflet-control-layers-expanded {
padding: 6px 10px 6px 6px;
color: #333;
background: #fff;
}
.leaflet-control-layers-scrollbar {
overflow-y: scroll;
overflow-x: hidden;
padding-right: 5px;
}
.leaflet-control-layers-selector {
margin-top: 2px;
position: relative;
top: 1px;
}
.leaflet-control-layers label {
display: block;
}
.leaflet-control-layers-separator {
height: 0;
border-top: 1px solid #ddd;
margin: 5px -10px 5px -6px;
}
/* Default icon URLs */
.leaflet-default-icon-path {
background-image: url(images/marker-icon.png);
}
/* attribution and scale controls */
.leaflet-container .leaflet-control-attribution {
background: #fff;
background: rgba(255, 255, 255, 0.7);
margin: 0;
}
.leaflet-control-attribution,
.leaflet-control-scale-line {
padding: 0 5px;
color: #333;
}
.leaflet-control-attribution a {
text-decoration: none;
}
.leaflet-control-attribution a:hover {
text-decoration: underline;
}
.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale {
font-size: 11px;
}
.leaflet-left .leaflet-control-scale {
margin-left: 5px;
}
.leaflet-bottom .leaflet-control-scale {
margin-bottom: 5px;
}
.leaflet-control-scale-line {
border: 2px solid #777;
border-top: none;
line-height: 1.1;
padding: 2px 5px 1px;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
background: rgba(255, 255, 255, 0.5);
}
.leaflet-control-scale-line:not(:first-child) {
border-top: 2px solid #777;
border-bottom: none;
margin-top: -2px;
}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
border-bottom: 2px solid #777;
}
.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
box-shadow: none;
}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
border: 2px solid rgba(0, 0, 0, 0.2);
background-clip: padding-box;
}
/* popup */
.leaflet-popup {
position: absolute;
text-align: center;
margin-bottom: 20px;
}
.leaflet-popup-content-wrapper {
padding: 1px;
text-align: left;
border-radius: 12px;
}
.leaflet-popup-content {
margin: 13px 19px;
line-height: 1.4;
}
.leaflet-popup-content p {
margin: 18px 0;
}
.leaflet-popup-tip-container {
width: 40px;
height: 20px;
position: absolute;
left: 50%;
margin-left: -20px;
overflow: hidden;
pointer-events: none;
}
.leaflet-popup-tip {
width: 17px;
height: 17px;
padding: 1px;
margin: -10px auto 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
background: white;
color: #333;
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}
.leaflet-container a.leaflet-popup-close-button {
position: absolute;
top: 0;
right: 0;
padding: 4px 4px 0 0;
border: none;
text-align: center;
width: 18px;
height: 14px;
font: 16px/14px Tahoma, Verdana, sans-serif;
color: #c3c3c3;
text-decoration: none;
font-weight: bold;
background: transparent;
}
.leaflet-container a.leaflet-popup-close-button:hover {
color: #999;
}
.leaflet-popup-scrolled {
overflow: auto;
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
}
.leaflet-oldie .leaflet-popup-content-wrapper {
zoom: 1;
}
.leaflet-oldie .leaflet-popup-tip {
width: 24px;
margin: 0 auto;
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
}
.leaflet-oldie .leaflet-popup-tip-container {
margin-top: -1px;
}
.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
border: 1px solid #999;
}
/* div icon */
.leaflet-div-icon {
background: #fff;
border: 1px solid #666;
}
/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
position: absolute;
padding: 6px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 3px;
color: #222;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.leaflet-tooltip.leaflet-clickable {
cursor: pointer;
pointer-events: auto;
}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
position: absolute;
pointer-events: none;
border: 6px solid transparent;
background: transparent;
content: "";
}
/* Directions */
.leaflet-tooltip-bottom {
margin-top: 6px;
}
.leaflet-tooltip-top {
margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
left: 50%;
margin-left: -6px;
}
.leaflet-tooltip-top:before {
bottom: 0;
margin-bottom: -12px;
border-top-color: #fff;
}
.leaflet-tooltip-bottom:before {
top: 0;
margin-top: -12px;
margin-left: -6px;
border-bottom-color: #fff;
}
.leaflet-tooltip-left {
margin-left: -6px;
}
.leaflet-tooltip-right {
margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
top: 50%;
margin-top: -6px;
}
.leaflet-tooltip-left:before {
right: 0;
margin-right: -12px;
border-left-color: #fff;
}
.leaflet-tooltip-right:before {
left: 0;
margin-left: -12px;
border-right-color: #fff;
}
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
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;
}
html,
body {
width: 100%;
height: 100%;
}
.map-container {
width: 100%;
height: 100%;
}
<link href="https://unpkg.com/leaflet#1.3.4/dist/leaflet.css" rel="stylesheet" />
<script src="https://unpkg.com/leaflet#1.3.4/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/leaflet.gridlayer.googlemutant#latest/Leaflet.GoogleMutant.js"></script>
<div class="map-container" id="mapid"></div>
<ul class="plot">
<li class="markers" data-lattitude="-40.99497" data-longitude="174.50808">Text 1</li>
<li class="markers" data-lattitude="-41.30269" data-longitude="173.63696">Text 2</li>
<li class="markers" data-lattitude="-41.49413" data-longitude="173.5421">Text 3</li>
<li class="markers" data-lattitude="-40.98585" data-longitude="174.50659">Text 4</li>
<li class="markers" data-lattitude="-40.93163" data-longitude="173.81726">Text 5</li>
</ul>

How do I center my mobile menu's contents?

They're aligning left and apparently I'm not smart enough to figure this out. Generally, how would I change its alignment? Center it, for example?
Additionally, if I wanted to expand the size of each item in the instance that the screen is < 950 px, I would do that as conditional formatting under the relevant media query portion of my CSS, right?
$(document).ready(function() {
$(document).bind("contextmenu", function(e) {
if (e.target.nodeName == 'IMG') {
//context menu attempt on top of an image element
return false;
}
});
//dropdown nav
$("#nav").addClass("js");
$("#nav").addClass("js").before('<div id="menu">☰</div>');
$("#menu").click(function() {
$("#nav").toggle();
});
$(window).resize(function() {
if (window.innerWidth > 950) {
$("#nav").removeAttr("style");
}
});
});
html,
body {
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 12px;
color: #c5e8ea;
background-color: #000000;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased !important;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}
.hidden {
display: none;
}
p {
text-align: justify;
}
#header {
position: fixed;
margin: 0;
padding: 4px;
float: left;
margin-top: 0px;
z-index: 1;
}
#navmain {
position: fixed;
top: 0px;
width: 100%;
height: 75px;
margin-top: 0px;
font-family: 'Cedarville Cursive', cursive;
font-size: 25px;
color: #E5E5E5;
background-color: #000000;
box-shadow: ;
padding: 0px;
z-index: 1;
opacity: .8;
}
h1 {
margin: 0;
margin-left: 15px;
margin-top: 0px;
padding: 0;
float: left;
opacity: ;
color: #E5E5E5;
text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
ul.navmain {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
float: right;
}
li.navmain {
float: left;
}
a.navmain:link,
a.navmain:visited {
display: block;
height: 75px;
width: 110px;
font-family: 'Old Standard TT', serif;
font-size: 23px;
color: #E5E5E5;
background-color: #000000;
text-align: center;
line-height: 95px;
padding: 0px;
text-decoration: none;
text-transform: lowercase;
}
a.navmain:hover,
a.navmain:active {
background-color: #181818;
}
.active {
background-color: #0b0b0a;
}
#content1 {
position: absolute;
width: 100%;
height: 100%;
background-color: #000000;
background-image: url("../img/bg.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
-webkit-animation: fadein 6s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 6s;
/* Firefox < 16 */
-ms-animation: fadein 6s;
/* Internet Explorer */
-o-animation: fadein 6s;
/* Opera < 12.1 */
animation: fadein 6s;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Internet Explorer */
#-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#content2 {
position: absolute;
width: 60%;
height: 100%;
background-color: #000000;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#content2 h1 {
margin-top: 95px;
padding: 10px;
font-size: 40px;
font-family: 'Source Sans Pro', sans-serif;
}
#content2 p {
margin-top: 10px;
margin-left: 45px;
margin-right: 45px;
font-size: 16px;
font-family: 'Source Sans Pro', sans-serif;
float: left;
}
#content3 {
float: right;
width: 40%;
height: 100%;
}
#content3 img {}
#footer {
clear: both;
height: 15px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
color: #E5E5E5;
border-top: 1 px solid #efefef;
padding: 8px 10px;
line-height: 15px;
background-color: #0b0b0a;
}
#footer a {
color: #E5E5E5;
text-decoration: none;
}
#footer a:hover {
Color: #db6d16
}
#footer #altnav {
width: 350px;
float: right;
text-align: right;
}
/* dropdown nav */
#media screen and (max-width: 950px) {
#menu {
width: 1.4em;
display: block;
background: ;
font-size: 1.35em;
text-align: center;
float: right;
}
#nav.js {
display: none;
}
ul {
width: 100%;
overflow: hidden;
background-color: #000000;
}
li {
width: 100%;
border-right: none;
}
#content2 {
position: absolute;
width: 100%;
height: 100%;
background-color: #000000;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#content2 h1 {
margin-top: 95px;
padding: 10px;
font-size: 40px;
font-family: 'Source Sans Pro', sans-serif;
}
}
#media screen and (min-width: 950px) {
#menu {
display: none;
}
}
/* dropdown nav */
<style>
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:700');
</style>
<style>
#import url('https://fonts.googleapis.com/css?family=Cedarville+Cursive');
</style>
<style>
#import url('https://fonts.googleapis.com/css?family=Old+Standard+TT:400i');
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="navmain">
<div id="header">
<a href="#">
<h1>Some Dude</h1>
</a>
</div>
<ul class="navmain" id="nav">
<li class="navmain"><a class="navmain" href="#">fauna</a></li>
<li class="navmain"><a class="navmain" href="#">flora</a></li>
<li class="navmain"><a class="navmain" href="#">scenic</a></li>
<li class="navmain"><a class="navmain" href="#">urban</a></li>
<li class="navmain"><a class="navmain" href="#">about</a></li>
<li class="navmain"><a class="navmain" href="#">contact</a></li>
</ul>
</div>
<div id="content1">
</div>

Set your margins.
a.navmain:link, a.navmain:visited {
margin: 0 auto;
}
New code snippet:
html, body{
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 12px;
color: #c5e8ea;
background-color:#000000;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased !important;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
.hidden {
display: none;
}
p {
text-align: justify;
}
#header {
position:fixed;
margin: 0;
padding: 4px;
float: left;
margin-top: 0px;
z-index:1;
}
#navmain {
position: fixed;
top: 0px;
width: 100%;
height:75px;
margin-top: 0px;
font-family: 'Cedarville Cursive', cursive;
font-size:25px;
color:#E5E5E5;
background-color: #000000;
box-shadow: ;
padding: 0px;
z-index:1;
opacity:.8;
}
h1 {
margin:0;
margin-left:15px;
margin-top:0px;
padding: 0;
float: left;
opacity:;
color:#E5E5E5;
text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
ul.navmain {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
float:right;
}
li.navmain {
float:left;
}
a.navmain:link,a.navmain:visited {
margin: 0 auto;
display:block;
height:75px;
width:110px;
font-family: 'Old Standard TT', serif;
font-size: 23px;
color:#E5E5E5;
background-color:#000000;
text-align:center;
line-height:95px;
padding:0px;
text-decoration:none;
text-transform:lowercase;
}
a.navmain:hover,a.navmain:active {
background-color:#181818;
}
.active {
background-color: #0b0b0a;
}
#content1 {
position: absolute;
width: 100%;
height: 100%;
background-color: #000000;
background-image: url("../img/bg.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
-webkit-animation: fadein 6s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 6s; /* Firefox < 16 */
-ms-animation: fadein 6s; /* Internet Explorer */
-o-animation: fadein 6s; /* Opera < 12.1 */
animation: fadein 6s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#content2 {
position:absolute;
width: 60%;
height: 100%;
background-color: #000000;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#content2 h1 {
margin-top:95px;
padding:10px;
font-size: 40px;
font-family: 'Source Sans Pro', sans-serif;
}
#content2 p {
margin-top:10px;
margin-left:45px;
margin-right:45px;
font-size: 16px;
font-family: 'Source Sans Pro', sans-serif;
float:left;
}
#content3 {
float:right;
width:40%;
height:100%;
}
#content3 img {
}
#footer {
clear: both;
height: 15px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
color: #E5E5E5;
border-top: 1 px solid #efefef;
padding: 8px 10px;
line-height: 15px;
background-color:#0b0b0a;
}
#footer a {
color: #E5E5E5;
text-decoration: none;
}
#footer a:hover {
Color: #db6d16
}
#footer #altnav {
width: 350px;
float: right;
text-align: right;
}
/* dropdown nav */
#media screen and (max-width: 950px) {
#menu {
width:1.4em;
display: block;
background:;
font-size:1.35em;
text-align: center;
float:right;
}
#nav.js {
display: none;
}
ul {
width:100%;
overflow: hidden;
background-color:#000000;
}
li {
width:100%;
border-right:none;
}
#content2 {
position:absolute;
width: 100%;
height: 100%;
background-color: #000000;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#content2 h1 {
margin-top:95px;
padding:10px;
font-size: 40px;
font-family: 'Source Sans Pro', sans-serif;
}
}
#media screen and (min-width: 950px) {
#menu {
display: none;
}
}
/* dropdown nav */
<!DOCTYPE html>
<html>
<head>
<title>| Home</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
<style>#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:700');</style>
<style>#import url('https://fonts.googleapis.com/css?family=Cedarville+Cursive');</style>
<style>#import url('https://fonts.googleapis.com/css?family=Old+Standard+TT:400i');</style>
<style type="text/css" media="all">#import "css/master.css";</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).bind("contextmenu",function(e){
if(e.target.nodeName == 'IMG'){
//context menu attempt on top of an image element
return false;
}
});
//dropdown nav
$("#nav").addClass("js");
$("#nav").addClass("js").before('<div id="menu">☰</div>');
$("#menu").click(function(){
$("#nav").toggle();
});
$(window).resize(function(){
if(window.innerWidth > 950) {
$("#nav").removeAttr("style");
}
});
});
</script>
</head>
<body>
<div id="navmain">
<div id="header">
<h1>Some Dude</h1>
</div>
<ul class="navmain" id="nav">
<li class="navmain"><a class="navmain" href="#">fauna</a></li>
<li class="navmain"><a class="navmain" href="#">flora</a></li>
<li class="navmain"><a class="navmain" href="#">scenic</a></li>
<li class="navmain"><a class="navmain" href="#">urban</a></li>
<li class="navmain"><a class="navmain" href="#">about</a></li>
<li class="navmain"><a class="navmain" href="#">contact</a></li>
</ul>
</div>
<div id="content1">
</div>
</body>
</html>

Why is scrolling inconsistent between Firefox, Safari and Chrome?

I'm working on this web page at http://helpir-staging.herokuapp.com. It isn't perfect but it scrolls fine on Safari. In Firefox it only scrolls using the arrow keys (no mouse scroll), and in Chrome I don't get any scroll at all.
There must be something horrifically wrong in my CSS. Any help would be really appreciated.
I'm using bootstrap, bootcards, angularjs and angular-dynamic-layout.
app.scss:
$icon-font-path: "../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap/";
$hero-image: "../assets/images/slider.jpg";
#import '../bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap';
#import '../bower_components/bootstrap-social/bootstrap-social.scss';
$fa-font-path: "../bower_components/font-awesome/fonts";
#import '../bower_components/font-awesome/scss/font-awesome';
// App-wide Styles
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
// KAREL CSS
$heynay-background: #FAFAFA;
$heynay-peach: #f27949;
$helpir-gray: rgba(255,255,255,0.5);
html, body {
height: 100%;
width: 100%;
// background-color: blue;
}
h1 {
font-size: 2em;
}
p {
font-size: 0.85em;
}
hr {
display: none;
}
body {
font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
}
.alert {
margin: 10px 0px;
}
.margined {
margin: 5px;
}
.navbar-default,
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-text
{
color: #eeeeee;
background-color: transparent;
}
.footer > p,
.footer > p > a,
{
color: #888888;
background-color: transparent;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>li>a.active,
.navbar-default .navbar-nav>li>a:focus ,
.navbar-default .navbar-nav>li>a>p.active ,
.navbar-default .navbar-nav>li>a>p:focus {
border-radius: 3px;
color: #111111;
background-color: $helpir-gray;
}
#profile-button {
margin: 0px;
padding: 12px 5px;
height: 50px;
}
#profile-button:hover,
#profile-button.active {
border-radius: 3px;
color: white;
background-color: $heynay-peach;
}
.navbar-default .navbar-nav>li>a>p {
color: white;
background: none;
margin: 0px;
padding: 0px;
}
.navbar-default .navbar-nav>li>a>p>img {
height: 30px;
width: 30px;
padding: 3px;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: white;
}
.btn-default {
color: #000;
background-color: $heynay-peach;
}
.btn-default {
color: #f00;
background-color: $heynay-peach;
}
.btn-default[disabled] {
background-color: #9B9B9B;
}
.btn-default:hover {
background-color: $heynay-background;
color: white;
}
.btn {
display: inline-block;
padding: 6px 12px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 0px solid transparent;
border-radius: 4px;
}
.icon-brand {
color: $heynay-background;
}
.heynay-legal {
text-align: left;
}
.panel-default > .panel-heading {
background: $heynay-background;
}
.panel-title > a,
.panel-title > a {
text-decoration: none;
color: white;
}
.panel-title > a:hover,
.panel-title > a.active {
text-decoration: none;
color: black;
}
[ng-click],
[data-ng-click],
[x-ng-click] {
cursor: pointer;
}
// GLOBAL STYLES
footer {
height: 60px;
text-align: center;
background-color: $heynay-background;
padding-top:20px;
padding-bottom:20px;
font-size: 0.8em;
}
#heynay-logo {
font-size: 25px;
color: #000000;
}
.navbar-toggle {
background-color: $heynay-peach;
border-color: transparent;
}
.desktop-footer {
display : none;
}
.mobile-footer {
display : inline;
}
// not sure if tyhis is used.
.general-section {
text-align: left;
padding: 50px 10px;
min-height: 75%;
font-size: 0.9em;
}
.floating-pane-holder {
display: none;
z-index:1000;
color: white;
background-color: $heynay-peach;
position: fixed;
height: 50px;
width: 90px;
top: 100px;
left: 48%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.floating-pane-content {
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
position: absolute;
}
#media(min-width: 450px) {
.navbar-default,
.navbar-default .navbar-nav>li>a,
.footer > p,
.footer > p > a
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
font-size: 0.95em;
border-color: transparent;
}
h1 {
font-size: 3em;
}
p {
font-size: 1em;
}
hr {
display: block;
}
}
#media(min-width:1000px) {
.navbar-default,
.navbar-default .navbar-nav>li>a,
.footer > p,
.footer > p > a
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
font-size: 1em;
border-color: transparent;
}
#heynay-logo {
font-size: 35px;
}
}
// TABLES
.desktop-table {
display : none;
}
.mobile-table {
display : inline;
}
// TABLES END
// MODAL BEGIN
.ngdialog.ngdialog-theme-default
.ngdialog-content {
width: 700px;
}
// MODAL END
#media(min-width:750px) {
.navbar {
padding: 20px 0;
background-color: transparent;
-webkit-transition: background .35s ease-in-out,padding .5s ease-in;
-moz-transition: background .35s ease-in-out,padding .5s ease-in;
transition: background .35s ease-in-out,padding .5s ease-in;
border-color: transparent;
}
.desktop-footer {
display : inline;
}
.mobile-footer {
display : none;
}
.top-nav-collapse {
padding: 0;
background-color: $heynay-background;
}
footer {
height: 60px;
font-size: 1em;
bottom:0;
height:2em;
}
.general-section {
padding: 100px 10px;
font-size: 1em;
}
.navbar-default .navbar-nav>li>p {
padding: 15px;
margin: 0px;
border-color: transparent;
}
}
#media(min-width: 900px) {
.desktop-table {
display : inline;
}
.floating-pane-holder {
top: 150px;
left: 10px;
transform: none;
-webkit-transform: none;
}
.mobile-table {
display : none;
}
}
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
// SPINNER
.spinner {
margin: 100px auto 0;
margin-bottom: 100px;
width: 70px;
text-align: center;
}
.spinner > div {
width: 18px;
height: 18px;
background-color: $heynay-background;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
// Prevent first frame from flickering when animation starts
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
#-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
#keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
// Component styles are injected through grunt
// injector
#import 'admin/admin.scss';
#import 'main/main.scss';
#import '../components/category-tile/category-tile.scss';
#import '../components/footer/footer.scss';
#import '../components/modal/modal.scss';
#import '../components/oauth-buttons/oauth-buttons.scss';
// endinjector
category-tile.css
// dynamic layout bits...
#media (min-width: 1000px) {
[dynamic-layout] {
width: 1000px;
margin-top: 25px;
}
.dynanamic-layout-col-4 {
width: 250px;
margin-top: 20px;
}
.dynamic-layout-col-8 {
width: 500px;
}
}
#media (min-width: 900px) {
[dynamic-layout]{
width: 900px;
margin-top: 20px;
}
.dynamic-layout-col-4{
width : 300px;
}
.dynamic-layout-col-8{
width : 600px;
}
}
#media (min-width: 600px) and (max-width: 900px){
[dynamic-layout]{
width: 600px;
margin-top: 8px;
}
.dynamic-layout-col-4{
width : 300px;
}
.dynamic-layout-col-8{
width : 600px;
}
}
#media (max-width: 600px){
[dynamic-layout]{
width: 300px;
margin-top: 6px;
}
.dynamic-layout-col-4{
width : 300px;
}
.dynamic-layout-col-8{
width : 300px;
}
}
.dynamic-layout-item {
padding: 10px;
width: auto;
}
.move-items-animation{
transition-property: left, top;
transition-duration: .25s;
transition-timing-function: ease-in-out;
}
.dynamic-layout-item-parent.ng-enter{
transition: .25s ease-in-out;
opacity:0;
}
.dynamic-layout-item-parent.ng-enter.ng-enter-active{
opacity:1;
}
.dynamic-layout-item-parent.ng-leave{
transition: .5s ease-in-out;
opacity:1;
}
.dynamic-layout-item-parent.ng-leave.ng-leave-active{
opacity:0;
}
[dynamic-layout]{
// float: left;
position: absolute;
// overflow: hidden;
// height: 1000px;
}
.container-fluid{
position: absolute;
left: 50%;
transform: translate(-50%);
height:auto;
}
.title {
// margin-bottom: 50px;
}
main.css
.thing-form {
margin: 20px 0;
}
#banner {
border-bottom: none;
margin-top: -45px;
}
#banner h1 {
font-size: 60px;
line-height: 1;
letter-spacing: -1px;
}
.hero-unit {
background-image: url("#{$hero-image}");
position: relative;
# padding: 30px 15px;
color: #F5F5F5;
# background: #4393B9;
background-size:cover;
background-repeat: no-repeat;
color: #fff;
cursor: default;
padding: 1em 0 0 0;
}
.header-text {
text-align: center;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
cursor: default;
position: relative;
}
.navbar-text {
margin-left: 15px;
}
.privacy-terms {
margin-top: 75px;
}
.support-section {
padding-top: 150px;
text-align: center;
min-height: 85%;
}
#media(min-width: 400px) {
.intro-section {
// background: url("#{$hero-image}") no-repeat 98% 30%;
}
}
#media(min-width: 750px) {
.intro-section {
padding-top: 150px;
}
}

Your script vendor (idk what it is) is breaking it, in chrome under inspect I see this:
body, html {
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
change hidden to visible and it works, at least in chrome. initialize your custom css file after the vendor script and the css property should be fixed.

Webpage doesn't adjust to any screen height automatically

I had an issue with the blank space below the footer. I've managed to solve this by adding a jQuery sticky footer as the CSS methods doesn't work for me.
However, I do have a problem with main content of the webpage. If I adjust .bg-photo's height, it will affect how low or high the footer's placement will go.
Any content within .bg-photo will not affect the footer's placement at all.
I'm thinking it could be my HTML or CSS that's doing this sort of issue. Although, I'm not sure.
What I want is that the page automatically adjust to any screen's height and the user doesn't have to scroll down to view just the footer.
Here's the webpage:
http://planet.nu/dev/test/index.html
Here's the jsFiddle:
https://jsfiddle.net/mqfrnjaa/
And the codes if you need to view them right away.
$(window).bind("load", function() {
var footerHeight = 0,
footerTop = 0,
$footer = $(".footer");
positionFooter();
function positionFooter() {
footerHeight = $footer.height();
footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
if ( ($(document.body).height()+footerHeight) < $(window).height()) {
$footer.css({
position: "absolute"
}).animate({
top: footerTop
})
} else {
$footer.css({
position: "static"
})
}
}
$(window)
.scroll(positionFooter)
.resize(positionFooter)
});
html, body {
height: 100%;
}
*{
margin: 0;
}
body {
background: #fff;
min-height: 600px;
}
body * {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #393c3d;
line-height: 22px;
}
#fw_header {
margin: 0 auto;
position: relative;
width: 980px;
}
#fw_header ul {
list-style-type: none;
}
.forums #fw_header {
margin-bottom: 0;
}
#fw_header ul {
padding-left: 12px;
padding-top: 6px;
}
#fw_header li {
float: left;
padding: 0 3px;
}
#fw_header li a {
padding: 0 8px;
}
#fw_header li a:hover {
border-bottom: 5px solid #829AC6;
text-decoration: none;
}
#fw_header li a.active {
border-bottom: 5px solid #4E6CA3;
}
#fw_header ul.submenu li a.active,
#fw_header ul.subsubmenu li a.active {
border-bottom: 5px solid #829AC6;
}
#fw_header ul.submenu,
#fw_header ul.subsubmenu {
margin-top: 1em;
padding-top: 0;
}
#fw_header ul.submenu_usage {
padding-left: 32px;
}
#fw_header ul.submenu_plugins {
padding-left: 20px;
}
#fw_header ul.submenu_development {
padding-left: 23px;
}
#fw_header ul.submenu_extras {
padding-left: 14px;
}
#fw_header ul.submenu_testing {
padding-left: 480px;
}
#fw_header ul.submenu_styling {
padding-left: 80px;
}
#fw_header ul.subsubmenu {
padding-left: 120px;
}
#fw_header ul.submenu li,
#fw_header ul.subsubmenu li {
font-size: 80%;
}
#fw_header {
font-size: 16px;
}
#fw_header a {
color: #4E6CA3 !important;
}
#fw_header h1 {
border-bottom: medium none;
color: black;
font-size: 2em;
line-height: 1.45em;
margin-top: 32px;
vertical-align: middle;
}
#fw_header h1 img {
margin-top: -5px;
vertical-align: middle;
}
#fw_header h1 a {
color: black !important;
}
#fw_header h1 a:hover {
text-decoration: none;
}
#header_options {
position: absolute;
right: 150px;
top: -32px;
width: 495px;
}
#header_options .option {
float: left;
padding: 12px 0;
text-align: center;
width: 165px;
}
#header_options a:hover {
text-decoration: none;
}
#header_options .option:hover {
background-color: #F5F7FA;
}
#header_options div.option img {
margin-right: 7px;
vertical-align: middle;
}
#header_options .option table {
margin: 0 auto;
}
#header_options .option table td {} #header_options #options_search {
padding: 7px 0;
width: 495px;
}
#header_options #options_download {} #options_search input[type="text"] {
height: 20px;
width: 350px;
}
#header_download {
background: url("../images/dl_button_220.jpg") no-repeat scroll left top transparent;
font-size: 0.9em;
height: 36px;
padding-top: 13px;
position: absolute;
right: 0;
text-align: center;
top: -8px;
width: 220px;
}
#header_donate {
background: url("../images/donate_button.jpg") no-repeat scroll left top transparent;
font-size: 0.9em;
height: 36px;
padding-top: 13px;
position: absolute;
right: 220px;
text-align: center;
top: -8px;
width: 220px;
}
#header_download a,
#header_donate a {
color: white;
}
#header_download a:hover,
#header_donate a:hover {
text-decoration: none;
}
#dontate_wrapper {
background-color: #FCFCFC;
border: 1px dotted #A5A5A5;
color: #555555;
font-size: 0.8em;
margin: 0 0 1.5em;
padding: 5px;
text-align: center;
}
#header_advert {
background-color: white;
height: 200px;
overflow: visible;
position: absolute;
right: 0;
top: -32px;
width: 150px;
}
body .adpacks {} body .one .bsa_it_ad {
background: none repeat scroll 0 0 transparent;
border: medium none;
color: #999999;
margin: 0;
text-align: left;
}
body .one .bsa_it_ad:hover {
background-color: #F5F7FA;
color: black;
}
body .one .bsa_it_ad .bsa_it_i {
display: block;
float: none;
font-size: 11px !important;
margin: 0;
padding: 0;
text-align: center;
}
body .one .bsa_it_ad .bsa_it_d {
font-size: 11px !important;
}
body .one .bsa_it_ad .bsa_it_i img {
border: medium none;
padding: 0;
}
body .one .bsa_it_ad .bsa_it_t {
padding: 6px 0 0;
}
body .one .bsa_it_p {
display: none;
}
.one .bsa_it_ad {
color: #F5F7FA;
padding: 4px 0 0 !important;
}
body #bsap_aplink,
body #bsap_aplink:hover {
display: block;
font-size: 10px;
left: 104px;
position: absolute;
text-decoration: none;
top: 45px;
transform: rotate(90deg);
width: 100px;
}
.css_small {
font-size: 75%;
line-height: 1.45em;
}
.css_vsmall {
font-size: 65%;
line-height: 1.45em;
}
#dt_example #container {
margin: 64px auto 30px !important;
}
.header {
width: 100%;
background: rgba(255, 255, 255, 0.6);
color: #034e7c;
text-align: center;
padding: 20px 0;
height: 115px;
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D73000', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */
}
.header img.logo {
height: 105px;
}
.header ul.breadcrumb li a {
font-family: 'Open Sans';
font-size: 23px;
color: #4a4a4a
}
.header ul.log-in {
list-style-type: none;
display: inline;
float: right;
margin-top: 55px;
margin-right: 40px;
}
.header ul li {
display: inline;
color: red;
margin-right: 35px;
}
.header ul.log-in li,
.header ul.log-in li a {
display: inline;
font-size: 19px;
color: red;
text-decoration: none
}
.header .dateButton,
.dateButton {
width: 300px;
height: 45px;
background: #e63308;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e63308), color-stop(100%, #db3304));
background: -webkit-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -o-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -ms-linear-gradient(top, #e63308 0%, #db3304 100%);
background: linear-gradient(to bottom, #e63308 0%, #db3304 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e63308', endColorstr='#db3304', GradientType=0);
float: right;
-webkit-border-radius: 2px;
border-radius: 2px;
margin-right: 70px;
text-align: center;
cursor: pointer;
margin-top: -8px;
}
.header .dateButton a,
.dateButton a {
height: 30px;
vertical-align: middle;
line-height: 45px;
font-weight: bold;
color: #f0f0f0;
font-size: 23px;
}
.header .dateButton img,
.dateButton img {
padding-right: 5px
}
.footer {
width: 100%;
background: #FFF;
text-align: center;
height: 40px;
}
.footer p {
color: #4a4a4a;
font-family: 'Open Sans', sans-serif;
padding: 30px 0;
}
.footer p a {
color: #9fcf64;
}
.navigation {
min-width: 1300px;
width: 100%;
border-top: solid 1px #d6d6d6;
border-bottom: solid 1px #d6d6d6;
height: 60px;
background: linear-gradient(to bottom, #f5f5f5 0%, #ececec 10%, #ededed 100%);
}
.navigation ul.breadcrumb {
padding: 0px;
margin: 0;
margin-left: 50px;
margin-top: 15px;
margin-right: 0px;
width: 1000px;
}
.navigation ul li {
list-style-type: none;
}
.navigation ul li a {
color: #4a4a4a;
text-decoration: none;
font-weight: bold;
font-size: 23px;
float: left;
margin-right: 10px;
}
.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 3px 0 3px 5.2px;
border-color: transparent transparent transparent #4a4a4a;
float: left;
margin-top: 8px;
margin-right: 10px;
}
.top-section {
height: 100px;
}
body * {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: #393c3d;
line-height: 22px;
}
.bg-photo{
background:url(http://planet.nu/dev/test/images/bg.jpg);
background-size: cover;
height: 75%;
text-align: center;
}
.bg-photo:before{
content: '';
display: inline-block;
vertical-align: middle;
margin-right: -0.25em;
}
.loginText{
font-size: 16px;
}
#createCampaignButton {
transition-property: background-color, color;
transition-duration: 1s;
transition-timing-function: ease-out;
font-size: 18px;
/* font-weight: bold; */
color: #fff;
background: #8bbd3a;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
table{
margin-bottom: 20px;
background: rgba(255, 255, 255, 0.9);
}
h1{
color: #4a4a4a;
font-size: 48px;
}
table th{
color: #666666;
padding-top: 10px;
text-align: left;
padding-left: 15px;
}
table td {
padding-left: 15px;
}
table td input{
padding-left: 5px;
height: 30px;
font-size: 22px;
margin-bottom: 20px;
width: 100%;
}
tbody{
width: 95%;
display: table;
}
<div class="header">
<div class="top-section">
<img class="logo" src="http://planet.nu/dev/test/images/littleforest_logo.jpg">
</div>
</div>
<div class="bg-photo col-md-12 col-xs-12">
<div class="col-md-6 col-sm-9">
<h1 style="font-size: 35px; text-align:center; color:#FFF;margin:20px 0 0 0">
Welcome to LFi
</h1>
<p style="text-align:center; color: #FFF; font-size: 20px; padding: 28px 0 0 0;">Insight that drives web success</p>
<br>
<form method="post" action="/crawler/LoginServlet">
<table style="width: 40%; padding: 20px 30px; display: inline-block; vertical-align: middle; margin: 30px 0 0 0; background: rgba(255,255,255, 0.9);">
<tbody>
<tr>
<th>
User Name
</th>
</tr>
<tr>
<td>
<input type="text" name="username" class="textInput loginText" placeholder="User Name">
</td>
</tr>
<tr>
<th>
Password
</th>
</tr>
<tr>
<td>
<input type="password" name="password" value="" class="textInput loginText" placeholder="Password">
</td>
</tr>
</tbody>
</table>
<div>
<p class="submit">
<input type="submit" name="commit" class="button" id="createCampaignButton" value="Log in" style="width:260px; display: inline-block; vertical-align: middle; margin: 20px 0 0 0;">
</p>
</div>
</form>
</div>
</div>
<div class="footer col-md-12 col-xs-12">
<p>
Powered by Little Forest a tool that encourages continuous improvement towards web success.
</p>
</div>

What can come in handy in situation like this is css property vh.
Depends on which browsers you have to support, but to adjust to height of view port you can do height: 100vh or vmin.
More details on browser support: http://caniuse.com/#feat=viewport-units

You could achieve sticky-footer without any plugins. Here i did "sticky footer and header" only with css. One can add up more content under the form and get assured that the page stretches right down while content stays above the footer - here.
/**sticky-footer layout**/
body {
min-height: 500px;
}
.header,
#main,
.footer {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.header {
height:120px !important;
overflow:hidden;
background:#ffffff !important;
position:relative;
z-index: 10;
padding:0 !important;
opacity:0.9;
}
.footer {
height:100px !important;
background:#ffffff !important;
overflow:hidden;
opacity:0.9;
padding:0 !important;
}
#main {
min-height:100%;
margin:-120px 0 -100px;
height:auto !important;
}
#main:after,
#main:before {
content:"";
display:block !important;
margin:0;
}
#main:before {
height:120px;
}
#main:after {
height:100px;
}
However, you might not like the fact that your bg container .bg-photo#main lays underneath header and footer (which i made opaque on purpose to demonstrate, how the blocks are positioned), thus cutting bits of your leaves background.
You would instinctively wish to transfer the background to an inner immediate div inside the main section. I've sketched this eventuality as well, however since it's uses vh units,
min-height: calc( 100vh - 220px);
it might not work in all browsers, so beware, i also used calc to subtract the header and the footer. I hope it'll work reliably for you.

How to make only one selectable menu option html and jquery

I have a menubar that i am trying to make have only one selectable root listitem at a time. When the user click on one of the top headings, it's respective submenu is displayed. the problem i'm having is when the user clicks one head and moves the mouse up or to the side without ever hovering into the submenu, they can now lick another heading and 2 submenus are displayed at the same time.
If you view it from a mobile phone, then you can click as many root menu items as available, and they all display their respective menus at the same time...NOT ideal.
BUT, if the user clicks a heading, and moves the mouse into the submenu, then everything works, because when they leave that menu to click another root item, the first menu (and its submenus) disappear.
FIDDLE HERE
Thanks in advance guys/girls.
HTML:
<!-- <LINK REL="SHORTCUT ICON" HREF="favicon.ico"> -->
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="includes/menu.js"></script></script>
<link type="text/css" href="includes/menu.css" rel="stylesheet" />
</head>
<body>
<div style="z-index:100;width:100%;position:fixed;top:0;left: 0;min-width:1000px;">
<div id="menuJQ">
<ul class="menuJQ">
<li class="parent"><span>Home</span></li>
<li><a class="parent" href="#"><span>Product View</span></a>
<div class="submenu">
<ul>
<li><span>DevTask Search</span></li>
<li><span>Active Machines</span></li>
</ul>
</div>
</li>
<li class="parent"><span>Request Tool</span></li>
<li><span>Search</span>
<div class="submenu">
<ul>
<li><span>DevTask Search</span></li>
<li><span>Active Machines</span></li>
<li><span>Integrity Query</span></li>
<li><span>Internal DevTasks</span></li>
<li><span>Results</span>
<div class="submenu">
<ul>
<li><a href="#" target='_blank'><span>Latest Smoke Results</span></a></li>
<li><a href="#" target='_blank'><span>Latest Smoke Results</span></a>
<div class="submenu">
<ul>
<li><span>DevTask Search</span></li>
<li><span>Active Machines</span></li>
<li><span>Integrity Query</span></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li><span>Issues for Stability Team</span></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS:
/* menu::base */
.expand{
display:block;
}
.collapse{
display:none;
}
div#menuJQ {
height: 46px;
padding-left: 0px;
width:auto;
/* background: url(../includes/images/right2.png) repeat right 0; */
background-color:black;
}
div#menuJQ ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
div#menuJQ ul.menuJQ {
padding-right: 0px;
}
div#menuJQ li {
position: relative;
margin: 0;
padding: 0;
display: block;
float: left;
z-index: 9;
width: auto;
}
div#menuJQ ul ul li {
z-index: 9;
}
div#menuJQ li div {
list-style: none;
float: left;
position: absolute;
z-index: 11;
top: 39px;
left: -18px;
-left: 4px;
visibility: hidden;
transition-delay: 0.5s;
-moz-transition-delay: 0.5s; /* Firefox 4 */
-webkit-transition-delay: 0.5s; /* Safari and Chrome */
-o-transition-delay: 0.5s; /* Opera */
width: 180px;
margin: 0px 0 0 -4px;
padding: 0;
background: url(../includes/images/submenu-top.png) no-repeat 0px 0;
-background: url(../includes/images/submenu-top.gif) no-repeat 0px 0;
}
div#menuJQ ul ul { /*submenu*/
display:none;
z-index: 12;
width: 180px;
padding: 0px 0px 12px 0px;
-padding: 0px 0px 3px 0px;
background: url(../includes/images/submenu-bottom.png) no-repeat 0px bottom;
-background: #E4E4E2 none;
margin: 14px 0 0 0;
-margin: 5px 0 0 0;
}
div#menuJQ li > div {
visibility: visible;
}
div#menuJQ a {
position: relative;
z-index: 10;
height: 38px;
display: block;
float: left;
line-height: 38px;
text-decoration: none;
margin-top: 1px;
white-space: nowrap;
width: auto;
padding-right:5px;
text-align:center;
}
div#menuJQ span {
margin-top: 2px;
padding-left: 15px;
color: #fff;
font: normal 13px Tahoma;
background: none;
line-height: 38px;
display: block;
cursor: pointer;
background-repeat: no-repeat;
background-position: 95% 0;
text-align: center;
}
/* menu::level1 */
div#menuJQ a {
padding: 0 15px 0 0;
line-height: 38px;
height: 46px;
_margin-right: 1px;
background: none;
font-weight:bold;
}
div#menuJQ span {
font-weight:bold;
}
div#menuJQ a:hover{
background-image: url(../includes/images/selected-sub.png);
background-repeat: repeat-x;
background-position: right -1px;
-background: url(../includes/images/selected-sub.gif) repeat-x right -1px;
}
div#menuJQ li.current a,
div#menuJQ ul.menuJQ>li:hover>a {
background-image: url(../includes/images/selected-sub.png);
background-repeat: repeat-x;
background-position: right -1px;
-background: url(../includes/images/selected-sub.gif) repeat-x right -1px;
}
div#menuJQ a:hover span{
color: #000000;
}
div#menuJQ ul.menuJQ>li:hover>a span {
color: #000000;
}
div#menuJQ li {}
div#menuJQ li.last { background: none; }
/* menu::level2 */
div#menuJQ ul ul li {
background-image: url(../includes/images/sep-sub.png);
background-repeat: repeat-x;
background-position: left bottom;
margin: 0;
padding: 0;
}
div#menuJQ ul ul li:hover {
background-image: url(../includes/images/sub-item-hover.gif);
background-color: #717171;
background-repeat: repeat-x;
background-position: left top;
}
div#menuJQ ul ul a {
color: #000000;
height: auto;
float: none;
display: block;
line-height: 25px;
font-size: 13px;
z-index: -1;
padding: 6px 0 6px 0px;
white-space: normal;
width: 166px;
margin: 0 0px 0 13px;
background: none;
}
div#menuJQ ul ul a span {
color: #000000;
padding: 0 3px;
line-height: 25px;
font-size: 13px;
font-weight: normal;
margin:0;
}
div#menuJQ li.current ul a,
div#menuJQ li.current ul a span {
background: none;
}
div#menuJQ ul ul a:hover {
background: none;
color: #fff;
}
div#menuJQ ul ul a:hover span {
background: none;
color: #fff;
}
div#menuJQ ul ul a.parent {
background: url(../includes/images/submenu-pointer.png) no-repeat right top;
-background: url(../includes/images/submenu-pointer.gif) no-repeat right top;
margin-right: -1px;
}
div#menuJQ ul ul a.parent span {
padding-right: 26px;
}
div#menuJQ ul ul a.parent:hover {
background: url(../includes/images/submenu-pointer-hover.gif) no-repeat right top;
-background: url(../includes/images/submenu-pointer.gif) no-repeat right top;
}
div#menuJQ ul ul a.parent:hover span {
}
div#menuJQ ul ul span {
margin-top: 0;
text-align: left;
}
div#menuJQ ul ul li.last { background: none; }
div#menuJQ ul ul li {
width: 100%;
}
/* menu::level3 */
div#menuJQ ul ul div {
width: 180px;
padding: 0;
background: url(../includes/images/subsubmenu-top.png) no-repeat 0px 0;
-background: url(../includes/images/subsubmenu-top.gif) no-repeat 0px 0;
margin: -32px 0 0 198px !important;
margin: -32px 0 0 176px;
}
div#menuJQ ul ul ul {
padding: 11px 0px 9px 0px;
margin: 20px 0 0 0;
}
div#menuJQ ul ul div li {
position:relative;
top:-10px;
}
/* lava lamp */
div#menuJQ li.back {
background: url(../includes/images/selected-sub.png) no-repeat 0 0;
-background: url(../includes/images/selected-sub.gif) no-repeat 0 0;
width: 5px;
height: 46px;
z-index: 8;
position: absolute;
padding: 0;
margin: 0px 0 0 0;
}
div#menuJQ li.back .left {
padding:0;
width:auto;
background: url(../includes/images/selected-sub.png) repeat-x right 0;
-background: url(../includes/images/selected-sub.gif) repeat-x right 0;
height: 46px;
margin: 0 0 0 5px;
float: none;
position: relative;
top: 0;
left: 0;
visibility: visible;
}
Jquery:
$(document).ready(function(){
$(function() {
$('#menuJQ > ul li').click(function(e) {
e.preventDefault();
$('ul:first', this).show("fast").siblings().hide("fast");
});
});
$('.submenu').mouseleave(function() {
$('ul', this).hide("fast");
});
});

Change the Javascript to this:
$(document).ready(function(){
$('#menuJQ').on('click', 'li', function(e) {
e.preventDefault();
$('.submenu').find('ul').css('display', 'none'); //display none all submenus
$('ul:first', this).show("fast").siblings().hide("fast");
});
$('.submenu').on('mouseleave', 'ul', function(e) {
e.preventDefault();
$(this).hide("fast");
});
});
Here is a JS fiddle update: http://jsfiddle.net/2SC5G/3/