Develop Reference

How to target and display error message with data-error in JavaScript

I'de like to validate a form with data propriety data-error and data-error-visible. I want to display the error message only with JS and don't use anymore HTML codes to do it.
The current code I use is below and I left only the first input :
/******
*
FORM VALIDATION
*
******/
// DOM
const formData = document.querySelectorAll(".formData");
const form = document.getElementById("form");
const firstName = document.getElementById("firstName");
const lastName = document.getElementById("lastName");
const email = document.getElementById("email");
const birthdate = document.getElementById("birthdate");
const quantity = document.getElementById("quantity");
const tournament = document.getElementsByName("location");
const checkbox = document.getElementsByName("checkbox");
// form preventDefault + checkInputs function
form.addEventListener('submit', e => {
e.preventDefault();
});
/***********
*
DATA-ATTRIBUTE
*
************/
// set error message to "true"
const displayErrorMsg = (element, message) => {
const formData = element
formData.setAttribute("data-error", message)
formData.setAttribute("data-error-visible", true)
}
// Function for remove one error msg
const removeErrorMsg = (element) => {
const formData = element
formData.removeAttribute('data-error')
formData.removeAttribute('data-error-visible')
}
/***********
*
* VALIDATION FUNCTION
*
************/
function validate(formData) {
let isFormValid = true;
// Regex
const nameRegex = /[a-zA-Z]+/i;
// First name
if (firstName.value.match(nameRegex) || firstName.value.length < 2) {
isFormValid = false;
displayErrorMsg(firstName);
} else {
removeErrorMsg(firstName);
}
}
:root {
--font-default: "DM Sans", Arial, Helvetica, sans-serif;
--font-slab: var(--font-default);
--modal-duration: 0.8s;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Landing Page */
body {
margin: 0;
display: flex;
flex-direction: column;
font-family: var(--font-default);
font-size: 18px;
max-width: 1300px;
margin: 0 auto;
}
p {
margin-bottom: 0;
padding: 0.5vw;
}
img {
padding-right: 1rem;
}
.topnav {
overflow: hidden;
margin: 3.5%;
}
.header-logo {
float: left;
}
.main-navbar {
float: right;
}
.topnav a {
float: left;
display: block;
color: #000000;
text-align: center;
padding: 12px 12px;
margin: 5px;
text-decoration: none;
font-size: 20px;
font-family: Roboto, sans-serif;
}
.topnav a:hover {
background-color: #ff0000;
color: #ffffff;
border-radius: 15px;
}
.topnav a.active {
background-color: #ff0000;
color: #ffffff;
border-radius: 15px;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 768px) {
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 768px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
#media screen and (max-width: 540px) {
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
margin-top: -15px;
}
}
main {
font-size: 130%;
font-weight: bolder;
color: black;
padding-top: 0.5vw;
padding-left: 2vw;
padding-right: 2vw;
margin: 1px 20px 15px;
border-radius: 2rem;
text-align: justify;
}
.modal-btn {
font-size: 145%;
background: #fe142f;
display: flex;
margin: auto;
padding: 2em;
color: #fff;
padding: 0.75rem 2.5rem;
border-radius: 1rem;
cursor: pointer;
}
.modal-btn:hover {
background: #3876ac;
}
.footer {
margin: 20px;
padding: 10px;
font-family: var(--font-slab);
}
/* Modal form */
.button {
background: #fe142f;
margin-top: 0.5em;
padding: 1em;
color: #fff;
border-radius: 15px;
cursor: pointer;
font-size: 16px;
}
.button:hover {
background: #3876ac;
}
.smFont {
font-size: 16px;
}
.bground {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(26, 39, 156, 0.4);
}
.content {
margin: 5% auto;
width: 100%;
max-width: 500px;
animation-name: modalopen;
animation-duration: var(--modal-duration);
background: #232323;
border-radius: 10px;
overflow: hidden;
position: relative;
color: #fff;
padding-top: 10px;
}
.modal-body {
padding: 15px 8%;
margin: 15px auto;
}
label {
font-family: var(--font-default);
font-size: 17px;
font-weight: normal;
display: inline-block;
margin-bottom: 11px;
}
input {
padding: 8px;
border: 0.8px solid #ccc;
outline: none;
}
.text-control {
margin: 0;
padding: 8px;
width: 100%;
border-radius: 8px;
font-size: 20px;
height: 48px;
}
.formData[data-error]::after {
content: attr(data-error);
font-size: 0.4em;
color: #e54858;
display: block;
margin-top: 7px;
margin-bottom: 7px;
text-align: right;
line-height: 0.3;
opacity: 0;
transition: 0.3s;
}
.formData[data-error-visible="true"]::after {
opacity: 1;
}
.formData[data-error-visible="true"] .text-control {
border: 2px solid #e54858;
}
/*
input[data-error]::after {
content: attr(data-error);
font-size: 0.4em;
color: red;
} */
.checkbox-label,
.checkbox2-label {
position: relative;
margin-left: 36px;
font-size: 12px;
font-weight: normal;
}
.checkbox-label .checkbox-icon,
.checkbox2-label .checkbox-icon {
display: block;
width: 20px;
height: 20px;
border: 2px solid #279e7a;
border-radius: 50%;
text-indent: 29px;
white-space: nowrap;
position: absolute;
left: -30px;
top: -1px;
transition: 0.3s;
}
.checkbox-label .checkbox-icon::after,
.checkbox2-label .checkbox-icon::after {
content: "";
width: 13px;
height: 13px;
background-color: #279e7a;
border-radius: 50%;
text-indent: 29px;
white-space: nowrap;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: 0.3s;
opacity: 0;
}
.checkbox-input {
display: none;
}
.checkbox-input:checked + .checkbox-label .checkbox-icon::after,
.checkbox-input:checked + .checkbox2-label .checkbox-icon::after {
opacity: 1;
}
.checkbox-input:checked + .checkbox2-label .checkbox-icon {
background: #279e7a;
}
.checkbox2-label .checkbox-icon {
border-radius: 4px;
border: 0;
background: #c4c4c4;
}
.checkbox2-label .checkbox-icon::after {
width: 7px;
height: 4px;
border-radius: 2px;
background: transparent;
border: 2px solid transparent;
border-bottom-color: #fff;
border-left-color: #fff;
transform: rotate(-55deg);
left: 21%;
top: 19%;
}
.close {
position: absolute;
right: 15px;
top: 15px;
width: 32px;
height: 32px;
opacity: 1;
cursor: pointer;
transform: scale(0.7);
}
.close:before,
.close:after {
position: absolute;
left: 15px;
content: " ";
height: 33px;
width: 3px;
background-color: #fff;
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
.btn-submit,
.btn-signup {
background: #fe142f;
display: block;
margin: 0 auto;
border-radius: 7px;
font-size: 1rem;
padding: 12px 82px;
color: #fff;
cursor: pointer;
border: 0;
}
/* custom select styles */
.custom-select {
position: relative;
font-family: Arial;
font-size: 1.1rem;
font-weight: normal;
}
.custom-select select {
display: none;
}
.select-selected {
background-color: #fff;
}
/* Style the arrow inside the select element: */
.select-selected:after {
position: absolute;
content: "";
top: 10px;
right: 13px;
width: 11px;
height: 11px;
border: 3px solid transparent;
border-bottom-color: #f00;
border-left-color: #f00;
transform: rotate(-48deg);
border-radius: 5px 0 5px 0;
}
/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
transform: rotate(135deg);
top: 13px;
}
.select-items div,
.select-selected {
color: #000;
padding: 11px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
border-radius: 8px;
height: 48px;
}
/* Style items (options): */
.select-items {
position: absolute;
background-color: #fff;
top: 89%;
left: 0;
right: 0;
z-index: 99;
}
/* Hide the items when the select box is closed: */
.select-hide {
display: none;
}
.select-items div:hover,
.same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}
/* custom select end */
.text-label {
font-weight: normal;
font-size: 16px;
}
.hero-section {
min-height: 93vh;
border-radius: 10px;
display: grid;
grid-template-columns: repeat(12, 1fr);
overflow: hidden;
box-shadow: 0 2px 7px 2px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}
.hero-content {
padding: 51px 67px;
grid-column: span 4;
background: #232323;
color: #fff;
position: relative;
text-align: left;
min-width: 424px;
}
.hero-content::after {
content: "";
width: 100%;
height: 100%;
background: #232323;
position: absolute;
right: -80px;
top: 0;
}
.hero-content > * {
position: relative;
z-index: 1;
}
.hero-headline {
font-size: 6rem;
font-weight: normal;
white-space: nowrap;
}
.hero-text {
width: 146%;
font-weight: normal;
margin-top: 57px;
padding: 0;
}
.btn-signup {
outline: none;
text-transform: capitalize;
font-size: 1.3rem;
padding: 15px 23px;
margin: 0;
margin-top: 59px;
}
.hero-img {
grid-column: span 8;
}
.hero-img img {
width: 100%;
height: 100%;
display: block;
padding: 0;
}
.copyrights {
color: #fe142f;
padding: 0;
font-size: 1rem;
margin: 60px 0 30px;
font-weight: bolder;
}
.hero-section > .btn-signup {
display: none;
}
footer {
padding-left: 2vw;
padding-right: 2vw;
margin: 0 20px;
}
#media screen and (max-width: 800px) {
.hero-section {
display: block;
box-shadow: unset;
}
.hero-content {
background: #fff;
color: #000;
padding: 20px;
}
.hero-content::after {
content: unset;
}
.hero-content .btn-signup {
display: none;
}
.hero-headline {
font-size: 4.5rem;
white-space: normal;
}
.hero-text {
width: unset;
font-size: 1.5rem;
}
.hero-img img {
border-radius: 10px;
margin-top: 40px;
}
.hero-section > .btn-signup {
display: block;
margin: 32px auto 10px;
padding: 12px 35px;
}
.copyrights {
margin-top: 50px;
text-align: center;
}
}
#keyframes modalopen {
from {
opacity: 0;
transform: translateY(-150px);
}
to {
opacity: 1;
}
}
<form
id="form"
name="reserve"
action="index.html"
method="get"
>
<div class="formData">
<label for="firstName">Prénom</label><br>
<input
class="text-control"
type="text"
id="firstName"
name="first"
minlength="2"
required
/><br>
</div>
<input
class="btn-submit"
type="submit"
class="button"
value="C'est parti"
/>
</form>

Menu icon doesn't show up in Safari on desktop or at all on mobile

This is the mobile menu I have created for window sizes of 735px or less. The mobile menu icon (top right corner) doesn't show up in Safari on desktop or any mobile browsers (including Chrome and Safari). I have a feeling I might be overlooking something obvious, but I just can't figure it out.
Could it be something to do with overflow:hidden? I found that if I disable it in my class .mobilenav, the menu icon shows up, but obviously, the close icon does as well. If this is the root of the problem, how can I fix it while keeping the menu's functionality intact?
Browsers it works in on desktop: Chrome 75.0.3770.142, Firefox 68.0, Edge 42.17134.1.0 Browsers it doesn't work in on desktop: Safari 12.1.1 On mobile, it doesn't seem to work in any browser. I checked both Safari and Chrome.
// BEGIN MOBILE NAV
function openMobile() {
document.getElementById("myMobilenav").style.width = "100%";
document.getElementById("myMobilenav").style.borderLeft = "none";
}
function closeMobile() {
document.getElementById("myMobilenav").style.width = "0";
document.getElementById("myMobilenav").style.borderLeft = "none";
}
// END MOBILE NAV
// MOBILE DROPDOWN
//* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content\*/
var dropdown = document.getElementsByClassName("mobile-dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("mobileactive");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
document.getElementById("myMobilenav").ontouchmove = function(e) {
e.preventDefault();
}
body {
margin: 0;
}
#media (max-width:735px) {
.nav {
display: none;
}
.navcontainer {
display: none;
}
header.Header.Header--top {
display: none;
}
}
/* END MAIN NAV STYLE */
.mobilehead {
width: 120px !important;
display: block;
margin-left: 10px;
padding-top: -10px;
}
#mobilehead {
width: 100%;
height: 80px;
background-color: #e9e5fb;
border-bottom: solid 1px #000;
margin-bottom: 80px;
}
/* BEGIN MOBILE NAV STYLE */
.mobilenavcontainer {
height: 100%;
width: 0px;
background-color: #e9e5fb;
position: fixed;
top: 0;
right: 0;
z-index: 997;
}
#mobilemenuicon {
width: 80px;
height: auto;
z-index: 5000;
}
.mobilenav .mobilemenuicon {
top: 20px;
right: 18px;
position: fixed;
z-index: 50000;
}
#mobilecloseicon {
width: 80px;
}
.mobilenav .mobileclosebtn {
top: 20px;
right: 18px;
margin-left: 10px;
position: absolute;
}
.mobilenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1000;
top: 0;
right: 0;
background-color: #e9e5fb;
overflow: hidden;
padding-top: 120px;
font-family: "AmerigoBT";
}
.mobilemainitems a {
text-decoration: none;
font-size: 3em;
color: #000;
display: block;
-webkit-text-stroke: .75px #000;
-webkit-text-fill-color: #e9e5fb;
line-height: 50px;
width: 180px;
}
.mobilemainitems {
padding-left: 30px;
padding-top: 0px;
margin-top: -96px;
}
.mobilesocialitems a {
text-decoration: none;
font-size: 1.5em;
color: #000;
display: inline-block;
font-weight: 400;
}
.mobilesocialitems {
padding-left: 30px;
line-height: 35px;
top: 480px;
position: absolute;
}
.row1social {
padding-left: 50px;
display: block;
width: 250px !important;
}
/* dropdown button */
.mobile-dropdown-btn {
font-family: "AmerigoBT";
text-decoration: none;
font-size: 18px !important;
color: #000;
display: block;
transition: 0.3s;
line-height: 54px;
border: none;
background: none;
width: 200px;
text-align: left;
outline: none;
margin-left: -11px !important;
padding-bottom: 5px;
}
/* active class for active dropdown button */
.mobileactive a {
background-color: none;
-webkit-text-stroke: .75px #000 !important;
-webkit-text-fill-color: #e9e5fb !important;
}
/* dropdown container */
.mobile-dropdown-container {
display: none;
background-color: none;
padding-left: 20px;
font-family: "UniversEx";
font-size: 11px;
padding-bottom: 20px;
}
.mobile-dropdown-container a {
line-height: 32px;
-webkit-text-fill-color: #000 !important;
-webkit-text-stroke: transparent !important;
}
.mobile-dropdown-container a:hover {
color: #000 !important;
-webkit-text-stroke: transparent !important;
}
#media (min-width:736px) {
.mobilenav {
display: none;
}
.mobilenavcontainer {
display: none;
}
#mobilehead {
display: none !important;
}
}
<header id="mobilehead"><img src="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07d5346b960f00012d395a/1560794420116/ck4%40300x.png" alt="Cathrine Khom" class="mobilehead" /></header>
<!-- BEGIN MOBILE NAV -->
<div id="myMobilenav" class="mobilenav">
<img id="mobilecloseicon" src="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07e8d86b960f00012f1522/1560799448192/closeup%40300x.png" />
<div class="mobilemainitems">
<button class="mobile-dropdown-btn">Journal</button>
<div class="mobile-dropdown-container">
all
design
fashion
personal
swoon
travel
</div>
Work
About
Contact
</div>
<div class="mobilesocialitems">
<div class="row1social">
Twitter
Instagram
</div>
<div class="row2social">
Pinterest
Magazine
Spotify
</div>
</div>
</div>
<div class="mobilenavcontainer">
<span class="mobilenav" onclick="openMobile()"><img id="mobilemenuicon" class="mobilemenuicon" src="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07d2bda44aaa000188164d/1560793789313/menudown%40300x.png"/></span>
</div>
<!-- END MOBILE NAV -->

Not sure why you're nesting fixed positioned elements but for whatever reason Safari is getting lost with it's layers because of it.
Adding the following solves your problem on Safari and mobile...
.mobilenavcontainer > .mobilenav {
position: relative;
}
// BEGIN MOBILE NAV
function openMobile() {
document.getElementById("myMobilenav").style.width = "100%";
document.getElementById("myMobilenav").style.borderLeft = "none";
}
function closeMobile() {
document.getElementById("myMobilenav").style.width = "0";
document.getElementById("myMobilenav").style.borderLeft = "none";
}
// END MOBILE NAV
// MOBILE DROPDOWN
//* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content\*/
var dropdown = document.getElementsByClassName("mobile-dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("mobileactive");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
document.getElementById("myMobilenav").ontouchmove = function(e) {
e.preventDefault();
}
body {
margin: 0;
}
#media (max-width:735px) {
.nav {
display: none;
}
.navcontainer {
display: none;
}
header.Header.Header--top {
display: none;
}
}
/* END MAIN NAV STYLE */
.mobilehead {
width: 120px !important;
display: block;
margin-left: 10px;
padding-top: -10px;
}
#mobilehead {
width: 100%;
height: 80px;
background-color: #e9e5fb;
border-bottom: solid 1px #000;
margin-bottom: 80px;
}
/* BEGIN MOBILE NAV STYLE */
.mobilenavcontainer {
height: 100%;
width: 0px;
background-color: #e9e5fb;
position: fixed;
top: 0;
right: 0;
z-index: 997;
}
.mobilenavcontainer > .mobilenav {
position: relative;
}
#mobilemenuicon {
width: 80px;
height: auto;
z-index: 5000;
}
.mobilenav .mobilemenuicon {
top: 20px;
right: 18px;
position: fixed;
z-index: 50000;
}
#mobilecloseicon {
width: 80px;
}
.mobilenav .mobileclosebtn {
top: 20px;
right: 18px;
margin-left: 10px;
position: absolute;
}
.mobilenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1000;
top: 0;
right: 0;
background-color: #e9e5fb;
overflow: hidden;
padding-top: 120px;
font-family: "AmerigoBT";
}
.mobilemainitems a {
text-decoration: none;
font-size: 3em;
color: #000;
display: block;
-webkit-text-stroke: .75px #000;
-webkit-text-fill-color: #e9e5fb;
line-height: 50px;
width: 180px;
}
.mobilemainitems {
padding-left: 30px;
padding-top: 0px;
margin-top: -96px;
}
.mobilesocialitems a {
text-decoration: none;
font-size: 1.5em;
color: #000;
display: inline-block;
font-weight: 400;
}
.mobilesocialitems {
padding-left: 30px;
line-height: 35px;
top: 480px;
position: absolute;
}
.row1social {
padding-left: 50px;
display: block;
width: 250px !important;
}
/* dropdown button */
.mobile-dropdown-btn {
font-family: "AmerigoBT";
text-decoration: none;
font-size: 18px !important;
color: #000;
display: block;
transition: 0.3s;
line-height: 54px;
border: none;
background: none;
width: 200px;
text-align: left;
outline: none;
margin-left: -11px !important;
padding-bottom: 5px;
}
/* active class for active dropdown button */
.mobileactive a {
background-color: none;
-webkit-text-stroke: .75px #000 !important;
-webkit-text-fill-color: #e9e5fb !important;
}
/* dropdown container */
.mobile-dropdown-container {
display: none;
background-color: none;
padding-left: 20px;
font-family: "UniversEx";
font-size: 11px;
padding-bottom: 20px;
}
.mobile-dropdown-container a {
line-height: 32px;
-webkit-text-fill-color: #000 !important;
-webkit-text-stroke: transparent !important;
}
.mobile-dropdown-container a:hover {
color: #000 !important;
-webkit-text-stroke: transparent !important;
}
#media (min-width:736px) {
.mobilenav {
display: none;
}
.mobilenavcontainer {
display: none;
}
#mobilehead {
display: none !important;
}
}
<header id="mobilehead"><img src="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07d5346b960f00012d395a/1560794420116/ck4%40300x.png" alt="Cathrine Khom" class="mobilehead" /></header>
<!-- BEGIN MOBILE NAV -->
<div id="myMobilenav" class="mobilenav">
<img id="mobilecloseicon" src="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07e8d86b960f00012f1522/1560799448192/closeup%40300x.png" />
<div class="mobilemainitems">
<button class="mobile-dropdown-btn">Journal</button>
<div class="mobile-dropdown-container">
all
design
fashion
personal
swoon
travel
</div>
Work
About
Contact
</div>
<div class="mobilesocialitems">
<div class="row1social">
Twitter
Instagram
</div>
<div class="row2social">
Pinterest
Magazine
Spotify
</div>
</div>
</div>
<div class="mobilenavcontainer">
<span class="mobilenav" onclick="openMobile()"><img id="mobilemenuicon" class="mobilemenuicon" src="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07d2bda44aaa000188164d/1560793789313/menudown%40300x.png"/></span>
</div>
<!-- END MOBILE NAV -->

How to make value - same after key in and selected

Need help.
I want to make content input are same as keyin when selected and disable dropdown when edit at textarea.
Currently, content will appear after dropdown. When key-in at textarea and select that list, its not appears same as key-in at top when close. After select that list, when try to key-in, dropdown will open. How to disable it.
$(document).on('click', '.btn-select', function (e) {
e.preventDefault();
var ul = $(this).find("ul");
if ($(this).hasClass("active")) {
if (ul.find("li").is(e.target)) {
var target = $(e.target);
target.addClass("selected").siblings().removeClass("selected");
var value = target.html();
$(this).find(".btn-select-input").val(value);
$(this).find(".btn-select-value").html(value);
}
ul.hide();
$(this).removeClass("active");
}
else {
$('.btn-select').not(this).each(function () {
$(this).removeClass("active").find("ul").hide();
});
ul.slideDown(300);
$(this).addClass("active");
}
});
$('.dropinput').click(function(e) {
e.stopPropagation();
});
.form-control {
background-color: #fff;
background-image: none;
border: 1px solid #e9e9e9;
border-radius: 3px;
box-shadow: none;
color: #4f5858;
display: block;
font-size: 13px;
height: 34px;
line-height: 1.42857;
padding: 6px;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
width: 100%;
font-weight: normal;
margin: 0px;
}
.form-control:focus {
border-color: #b6b6b6;
box-shadow: none;
outline: 0 none;
}
.close {
color: #4f5858;
text-shadow: none;
font-weight: normal;
font-size: 26px;
opacity: 1.0;
}
.close:hover, .close:focus {
color: #000;
opacity: 0.5;
}
.form-control::-moz-placeholder {
color: #4f5858;
}
.btn-grey {
background-color: #fff;
border: 1px solid #e9e9e9;
border-radius: 50%;
color: #4f5858;
cursor: pointer;
display: block;
font-weight: 300;
height: 60px;
margin: 0px auto 0;
text-align: center;
text-transform: uppercase;
transition: opacity 0.25s ease-in-out 0s;
width: 60px;
font-size: 11px;
display: inline;
}
.btn-grey:hover {
border: none;
color: #fff;
background-color: #f05423;
}
.btn-select {
position: relative;
padding: 6px;
width: 100%;
border-radius: 3px;
}
.btn-select .btn-select-value {
padding: 2px 6px;
display: block;
position: absolute;
left: 0;
right: 35px;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
border: none !important;
}
.btn-select .btn-select-arrow {
float: right;
line-height: 18px;
padding: 3px 10px;
top: 0;
font-size: 10px;
}
.btn-select ul {
display: none;
background-color: #fff;
color: #4f5858;
clear: both;
list-style: none;
padding: 0;
margin: 0;
position: absolute;
right: -0.5px;
left: -1px;
top: 33px;
z-index: 999;
}
.btn-select ul li {
padding: 6px;
text-align: left;
background-color: #fff;
display: flex;
}
.btn-select ul li:hover {
background-color: #fff;
color: #f05423;
}
.btn-select ul li span {
color: #b3b3b3;
position: absolute;
left: 10px;
}
.btn-select ul li.selected {
color: #f05423;
}
.btn-select.btn-default:hover, .btn-select.btn-default:active, .btn-select.btn-default.active {
border-color: #b6b6b6;
background-color: #fff;
}
.btn-select.btn-default ul li.selected {
background-color: #fff;
}
.btn-select.btn-default ul, .btn-select.btn-default .btn-select-value {
background-color: transparent;
border: #b6b6b6 1px solid;
border-top: 0px;
}
.btn-default {
color: #4f5858;
background-color: #fff;
border-color: #e9e9e9;
font-size: 13px;
font-weight: normal;
}
.btn.active, .btn:active {
-webkit-box-shadow: none;
box-shadow: inone;
}
.btn-default span {
color: #4f5858;
}
.btn-select.btn-default ul li.selected span {
color: #4f5858;
}
textarea.form-control {
height: 100px;
}
.dropinput {
color: #000;
background-color: #ebebeb;
border: none;
padding: 2px 5px;
margin-left: 10px;
width: 170px;
font-size: 12px;
}
.oth {
width: 300px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
<a class="btn btn-default btn-select">
<input class="btn-select-input" type="hidden">
<span class="btn-select-value">Purpose of Enquiry</span>
<span class="btn-select-arrow glyphicon glyphicon-triangle-bottom"></span>
<ul style="display: none;">
<li>Media & Publications</li>
<li>New Business Collaborations<input maxlength="30" class="dropinput" type="text" placeholder="Please specify project location"></li>
<li>Others<input maxlength="58" class="dropinput oth" type="text" placeholder="Please specify"></li>
</ul>
</a>
</div>
tq

There you go:
function init(){
$(document).on('click', '.btn-select', function (e) {
if(document.activeElement==$(this).find('.btn-select-value input')[0]) // prevent opening when textfield is focused
return
e.preventDefault();
var ul = $(this).find("ul");
if ($(this).hasClass("active")) {
if (ul.find("li").is(e.target)) {
selectLine(this,$(e.target))
}
ul.hide();
$(this).removeClass("active");
}
else {
$('.btn-select').not(this).each(function () {
$(this).removeClass("active").find("ul").hide();
});
ul.slideDown(300);
$(this).addClass("active");
}
});
$('.dropinput').blur(function(e) {
if(e.currentTarget.value.length==0) // if nothing has been entered, skip
return
var dropdown = $(e.currentTarget).parent().parent().parent();
var ul = dropdown.children('ul')
selectLine(dropdown[0],$(e.currentTarget).parent())
ul.hide();
dropdown.removeClass("active");
});
$('.dropinput').click(function(e) {
e.stopPropagation();
});
}
function selectLine(dropdown,target){
var input_text = target.find('input').val() // take input value from input in list
target.addClass("selected").siblings().removeClass("selected");
var value = target.html();
$(dropdown).find(".btn-select-input").val(value);
$(dropdown).find(".btn-select-value").html(value);
$(dropdown).find(".btn-select-value input").val(input_text); // put input value into input in selected input
}
$(document).ready(init)
It's quite the spaghetti code, but it works. It's always smart to wrap your code into an init function which will get called once your document is ready.

Scroll Nav in Wordpress not working

I want to create a 'scroll-nav' for my website. So I separated 2 Navs and added some jquery:
<nav class="main-nav clearfix">
<?php wp_nav_menu(array('theme_location' => 'main_nav')); ?>
</nav>
<nav id="scroll-nav" style="display:none">
<?php wp_nav_menu(array('theme_location' => 'main_nav')); ?>
</nav>
$(window).scroll(function() {
if ($(window).scrollTop() > 50 ){
$('#scroll-nav').css('display', 'block');
} else {
$('#scroll-nav').css('display', 'none');
};
});
But it´s not working. Do I have to do something different because of WordPress? It tested it in a normal html, it works fine there.

You are putting clearfix like ID when you have to do it in class attribute.
<nav id="scroll-nav" class="clearfix" style="display:none">
And put your
$(window).scroll(function() {
if ($(window).scrollTop() > 50 ){
$('#scroll-nav').css('display', 'block');
} else {
$('#scroll-nav').css('display', 'none');
};
});
into
$(document).ready(function(){
});

#import url(http://fonts.googleapis.com/css?family=Pacifico|Roboto:400,500);
nav {
background: #333;
overflow: auto;
padding: 60px;
position: relative;
z-index: 2;
}
ul {
text-align: center;
float: right;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration: none;
display: block;
padding: 5px 10px;
margin: 0 10px;
color: #eee;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
font-size: 14px;
line-height: 32px;
font-weight: bold;
transition: all 200ms linear;
}
nav a:hover,
nav#small a:hover {
color: #C18055;
background: #fff;
}
nav#small {
background: #fff;
padding: 20px 40px;
position: fixed;
box-sizing: border-box;
width: 100%;
top: 0;
z-index: 1;
box-shadow: 0px 2px 2px #fff;
}
nav#small h1,
nav#small a {
color: #333;
}
nav#small h1 {
font-size: 38px;
}
nav#small h1>a {
color: #C18055;
}
nav#small h1>a:hover {
color: #3ab4a6;
}
div#content {
height: 2200px;
background: url('https://s-media-cache-ak0.pinimg.com/originals/03/95/6f/03956fed74537b3d7b0858e9a814748d.jpg')repeat 0 0;
opacity: 0.9;
}
div#content h2 {
color: #fff;
font-weight: bold;
transform: rotate(-10deg);
line-height: 60px;
font-size: 48px;
text-transform: uppercase;
position: fixed;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
width: 10%;
bottom: 10%;
text-shadow: 2px 2px 2px #333;
font-family: 'Pacifico', cursive;
}
div#content h2:before {
display: inline-block;
background: url('http://www.menoftheras.com/wp-content/gallery/test/arrow.png')no-repeat 0 0;
background-size: cover;
width: 239px;
height: 200px;
content: "";
transform: rotate(-80deg);
margin-bottom: 40px;
}
#media (max-width: 700px) {
nav {
padding: 20px;
}
nav h1 {
display: block;
float: none;
text-align: center;
padding: 20px;
}
nav ul {
float: none;
padding: 20px;
}
div#content h2 {
width: 30%;
}
nav#small {
padding: 20px;
}
nav#small ul {
padding: 5px;
}
nav#small h1 {
padding: 10px;
font-size: 28px;
margin-bottom: 5px;
}
nav#small a {
font-weight: normal;
}
}
<header>
<nav>
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<nav id="small">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="content">
<h2>Scroll!</h2>
</div>
Would you please check my above snippet?

Underline text using Jquery

I would like to make it so that when a div with the class "dropdown" is hovered over, a certain piece of text with the id "workButton" would underline. I would like to do this using jQuery, unless it is possible to make it happen in CSS. I currently have it so that when the text is hovered over it underlines and turns white, but I would like the same to happen when "dropdown" is hovered over. (the text with the id "workbutton" also has the class "menuContent")
CSS:
.menuContent:hover {
text-decoration: underline;
cursor: pointer;
color: #ffffff;
}
.menuContent {
font-family: "cicle-gordita";
text-align: center;
padding: 0px;
margin: 0px;
margin-top: 10px;
color: #b4b0b0;
text-decoration: none;
font-size: 40px;
}
.dropdown {
margin-top: 50px;
height: 50px;
width: 100%;
background: #ffffff;
position: fixed;
display: none;
}
.dropdown-menuBit {
height: 40px;
margin: 0px;
padding: 0px;
float: left;
margin-left: 20px;
}
.dropdown-menuContent {
font-family: "cicle-gordita";
text-align: center;
padding: 0px;
margin: 0px;
color: #b4b0b0;
text-decoration: none;
font-size: 30px;
padding-top: 5px;
}
.dropdown-menuContent:hover {
text-decoration: underline;
cursor: pointer;
color: #ffffff;
}
JQuery:
var main = function() {
$('.dropdown').hide(function() {
$('.main').animate({
top: "-50px"
}, 0);
});
$('#workButton').hover(function() {
$('.dropdown').fadeIn(1)
$('.main').animate({
top: "0px"
}, 100)
});
$('.main, #blogButton, #homeButton, .logo').hover(function() {
$('.dropdown').fadeOut(200)
$('.main').animate({
top: "-50px"
}, 200)
});

Just place the :hover on the parent and it should work just fine:
.dropdown:hover #workButton