Develop Reference

How to get a tooltip to show up when an input is clicked?

I have a form with text inputs and a tooltip should show up whenever an input is clicked (or better yet, focused), and it should disappear whenever something else is clicked. I know that I should probably use JavaScript's getElementById and attach a click event listener but my knowledge stops there. I'm not sure how to toggle the CSS code I have which is currently working but on hover. I am not looking for :active pseudo-class.
HTML:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae consequat dui, ut ultricies tortor. Fusce imperdiet augue sit amet magna lobortis eleifend. Sed gravida consectetur magna vitae luctus. Suspendisse potenti. Cras luctus porttitor viverra. Aenean ac magna ullamcorper, ullamcorper sem non, mattis felis. Morbi ultricies pretium dui, quis posuere sapien tristique sit amet. Sed et velit tincidunt, convallis enim sed, imperdiet lectus. In quis diam aliquet, pharetra nisi et, interdum eros. Nullam rutrum lectus at est lacinia facilisis. Nullam eu gravida felis. Suspendisse ut magna id nisi fringilla venenatis. Cras facilisis tellus at erat fermentum congue. Nullam dapibus varius nibh, eu pharetra leo vehicula nec.
</p>
<label>Username</label>
<div data-tip="Only A-Z">
<span></span>
<input id='username-input' type="text">
</div>
<label>Password</label>
<div data-tip="8 characters minimum">
<span></span>
<input id='password-input' type="text">
</div>
<label>Email</label>
<div data-tip="E-mail is only for registration">
<span></span>
<input id='email-input' type="text">
</div>
CSS:
[data-tip] {
position: relative;
}
[data-tip]::before {
content: '';
display: none;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #ccc;
position: absolute;
top: -10px;
left: 15px;
z-index: 10;
font-size: 1em;
line-height: 2em;
width: 0;
height: 0;
}
[data-tip] > span {
display: none;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-top: 16px solid black;
position: absolute;
top: -9px;
left: 14px;
z-index: 7;
font-size: 1em;
line-height: 2em;
width: 0;
height: 0;
}
[data-tip]::after {
display: none;
content: attr(data-tip);
position: absolute;
top: -54px;
left: 0px;
border: 1px solid black;
padding: 10px 20px;
background-color: #ccc;
color: black;
z-index: 9;
font-size: 0.75em;
height: 4em;
text-align: center;
vertical-align: middle;
line-height: 2em;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
box-sizing: border-box;
white-space: nowrap;
word-wrap: normal;
}
[data-tip]:hover > span,
[data-tip]:hover::before,
[data-tip]:hover::after {
display: block;
}
JavaScript:
input = document.getElementById('email-input');
input.addEventListener('click', function() {
/* toggle CSS code */
});
jsfiddle link

You're right that you should handle this with Javascript:
var inputs = document.querySelectorAll('.tooltip');
inputs.forEach(function(el){
el.addEventListener("click", function(e){
inputs.forEach(function(el2){
el2.classList.remove("active");
});
this.classList.add("active");
});
});
[data-tip] {
position: relative;
}
[data-tip]::before {
content: '';
display: none;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #ccc;
position: absolute;
top: -10px;
left: 15px;
z-index: 10;
font-size: 1em;
line-height: 2em;
width: 0;
height: 0;
}
[data-tip] > span {
display: none;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-top: 16px solid black;
position: absolute;
top: -9px;
left: 14px;
z-index: 7;
font-size: 1em;
line-height: 2em;
width: 0;
height: 0;
}
[data-tip]::after {
display: none;
content: attr(data-tip);
position: absolute;
top: -54px;
left: 0px;
border: 1px solid black;
padding: 10px 20px;
background-color: #ccc;
color: black;
z-index: 9;
font-size: 0.75em;
height: 4em;
text-align: center;
vertical-align: middle;
line-height: 2em;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
box-sizing: border-box;
white-space: nowrap;
word-wrap: normal;
}
.tooltip.active > span,
[data-tip].active::before,
[data-tip].active::after {
display: block;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae consequat dui, ut ultricies tortor. Fusce imperdiet augue sit amet magna lobortis eleifend. Sed gravida consectetur magna vitae luctus. Suspendisse potenti. Cras luctus porttitor viverra. Aenean ac magna ullamcorper, ullamcorper sem non, mattis felis. Morbi ultricies pretium dui, quis posuere sapien tristique sit amet. Sed et velit tincidunt, convallis enim sed, imperdiet lectus. In quis diam aliquet, pharetra nisi et, interdum eros. Nullam rutrum lectus at est lacinia facilisis. Nullam eu gravida felis. Suspendisse ut magna id nisi fringilla venenatis. Cras facilisis tellus at erat fermentum congue. Nullam dapibus varius nibh, eu pharetra leo vehicula nec.
</p>
<label>Username</label>
<div class="tooltip" data-tip="Only A-Z">
<span></span>
<input id='username-input' type="text">
</div>
<label>Password</label>
<div class="tooltip" data-tip="8 characters minimum">
<span></span>
<input id='password-input' type="text">
</div>
<label>Email</label>
<div class="tooltip" data-tip="E-mail is only for registration">
<span></span>
<input id='email-input' type="text">
</div>

You don't need javascript to handle this, css input comes with focus pseudo,
I have modified your code, you can run the snippet below:
label { display: inline-block; }
div {
position: relative;
}
input ~ span {
display: none;
position: absolute;
bottom: 30px;
}
input ~ span span {
display: block;
position: relative;
border: 1px solid black;
z-index: 3;
background-color: #ccc;
font-size: 1em;
line-height: 2em;
border-radius: 0.5em;
box-sizing: border-box;
white-space: nowrap;
word-wrap: normal;
color: black;
height: 4em;
text-align: center;
vertical-align: middle;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
padding: 10px 20px;
}
input ~ span::before {
content: '';
display: none;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #ccc;
position: absolute;
bottom: -10px;
left: 14px;
z-index: 9;
font-size: 1em;
line-height: 2em;
width: 0;
height: 0;
}
input ~ span::after {
content: '';
display: none;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-top: 15px solid black;
position: absolute;
bottom: -11px;
left: 13px;
z-index: 1;
font-size: 1em;
line-height: 2em;
width: 0;
height: 0;
}
input:focus ~ span::before,
input:focus ~ span::after,
input:focus ~ span {
display: block;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae consequat dui, ut ultricies tortor. Fusce imperdiet augue sit amet magna lobortis eleifend. Sed gravida consectetur magna vitae luctus. Suspendisse potenti. Cras luctus porttitor viverra. Aenean ac magna ullamcorper, ullamcorper sem non, mattis felis. Morbi ultricies pretium dui, quis posuere sapien tristique sit amet. Sed et velit tincidunt, convallis enim sed, imperdiet lectus. In quis diam aliquet, pharetra nisi et, interdum eros. Nullam rutrum lectus at est lacinia facilisis. Nullam eu gravida felis. Suspendisse ut magna id nisi fringilla venenatis. Cras facilisis tellus at erat fermentum congue. Nullam dapibus varius nibh, eu pharetra leo vehicula nec.
</p>
<label>Username</label>
<div>
<input id='username-input' type="text">
<span><span>Only A-Z</span></span>
</div>
<label>Password</label>
<div>
<input id='password-input' type="text">
<span><span>8 characters minimum</span></span>
</div>
<label>Email</label>
<div >
<input id='email-input' type="text">
<span>
<span>E-mail is only for registration</span>
</span>
</div>

Okay so I went and played a bit with your code and my conclusions are:
You over-complicated yourself without a need when decided to build your tooltip with the pseudo-elements ::before and ::after. If you could simply work with a main <div> container for your tooltip and inside it all your other <div> elements that compose its pieces that would be best for you and prevent such issues.
In regards to your question, there is a way to modify pseudo-class in Javascript but it requires quite a bit of coding and seems very overly complicated for the relatively simple challenge you are facing, any way you can check the solution here
I would kindly advise you though to build your tooltip with <div>s and save yourself all this hassle.
You can then do the following to your tooltip. First set a .tooltip{...} class to the tooltip container and its visibility: hidden or display: none depends on your preference and app needs.
If you go with visibility: hidden you can toggle the property like so on click like you desired:
CSS
.tooltip {
visibility: hidden;
}
JavaScript
document.querySelector("tooltip").classList.add('hidden-tooltip');
To later remove the same class, you could use:
document.getElementById("tooltip").classList.remove('hidden-tooltip');
If you decide to go with display property over the visibility just toggle its values from none to block or flex depends on your needs in that layout. Enjoy

jQuery accordion not working after responsive resizing

The end result of this is to have an accordion that only works under 800px, and anything greater than that it is expanded. as of now, it works when:
the page is opened in a window with a width greater than 800px (accordion contents are locked and won't collapse)
the page is opened in a window with a width lesser than 800px (accordion contents are free to collapse and expand with the on click event)
and won't work when:
the page is opened in a window with a width greater than 800px, resized to lesser than 800px and then resized again to greater than 800px (accordion contents are free to collapse and expand with the on click event at any screen width)
the page is opened in a window with a width lesser than 800px and then resized to greater than 800px (accordion contents are free to collapse and expand with the on click event at any screen width)
js fiddle to test window resizing
(function($) {
"use strict";
function accordion(match) {
if (match.matches) {
console.log("more than 800");
$('.accordion-toggle').slideDown(600);
$('#services, #accordion').find('.accordion-toggle').on('click', function() {
});
} else {
console.log("less than 800");
$(".accordion-content").not($('.accordion-toggle').next()).slideUp(600);
$('#services, #accordion').find('.accordion-toggle').on('click', function() {
//Expand or collapse this panel
$(this).next().slideToggle(500);
//Hide the other panels
$(".accordion-content").not($(this).next()).slideUp(500);
$(this).off(event);
});
}
}
var match = window.matchMedia("(min-width: 800px)");
accordion(match); // Call listener function at run time
match.addListener(accordion); // Attach listener function on state changes
})(jQuery);
.accordion-container {
margin: auto;
max-width: 600px;
}
.accordion-container .accordion-toggle {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
cursor: pointer;
padding-top: 20px;
padding-bottom: 20px;
margin-left: 10vw;
margin-right: 10vw;
font-size: 1.5em;
font-weight: 900;
color: #31353D;
text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
border-bottom: solid;
border-width: 1px;
border-color: rgba(0, 0, 0, 0.05);
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
font-family: "Martel Sans", sans-serif;
}
.accordion-container .accordion-toggle div {
vertical-align: middle;
}
.accordion-container .accordion-toggle:hover {
text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5);
color: #1C1D21;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
.accordion-container .accordion-toggle:hover .accordion-icon {
color: #1C1D21;
-webkit-filter: brightness(150%);
filter: brightness(150%);
text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.8);
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.accordion-container .accordion-content {
display: none;
}
.accordion-container .accordion-content.default {
display: block;
color: #31353D;
}
.accordion-container .accordion-content.default .service-list {
background-color: #fff;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
margin-top: 40px;
margin-bottom: 50px;
margin-left: 10vw;
margin-right: 10vw;
-webkit-box-shadow: 10px 10px 100px 10px rgba(0, 0, 0, 0.2);
box-shadow: 10px 10px 100px 10px rgba(0, 0, 0, 0.2);
font-family: "Martel Sans", sans-serif;
}
.accordion-container .accordion-content.default .service-list .service-list-item {
padding: 5px;
font-size: 1.2em;
color: #445878;
}
.accordion-container .accordion-content.default .service-list .service-list-item span {
vertical-align: middle;
padding: 2px;
}
.accordion-container .accordion-content.default .service-details {
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
margin-left: 10vw;
margin-right: 10vw;
color: #31353D;
text-align: left;
line-height: 1.2;
font-size: 1.1em;
}
.accordion-container .accordion-icon {
color: #31353D;
display: block;
font-size: 1.4em;
vertical-align: middle;
text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.about-container {
margin-bottom: 20px;
padding-top: 40px;
padding-bottom: 40px;
}
.about-container .accordion-container .accordion-content.default {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
margin-left: 10vw;
margin-right: 10vw;
font-weight: normal;
line-height: 1.4;
}
.about-container .accordion-container .accordion-content.default .accordion-content-header {
font-size: 1.6em;
line-height: 1.1;
font-weight: bold;
text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.1);
}
.about-container .accordion-container .accordion-content.default .accordion-content-subheader {
font-weight: bold;
font-size: 1.2em;
color: #1C1D21;
line-height: 1.1;
padding-top: 5px;
padding-bottom: 5px;
}
.jqueryHelper {
float: left;
}
#media only screen and (min-width: 800px) {
.jqueryHelper {
float: none;
}
.accordion-container {
margin: auto;
max-width: 750px;
}
.accordion-container .accordion-toggle {
margin-left: 10px;
margin-right: 10px;
font-size: 1.9em;
}
.accordion-container .accordion-content {
display: inline;
}
.accordion-container .accordion-content.default {
align-items: center;
font-size: 1.2em;
color: #31353D;
}
.services-container .accordion-container .accordion-content.default {
display: flex;
}
.about-continer .accordion-container .accordion-content.default {
display: block;
}
.accordion-container .accordion-content.default .service-list {
background-color: #fff;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
margin-top: 40px;
margin-bottom: 50px;
margin-left: 0px;
margin-right: 0px;
width: 40%;
-webkit-box-shadow: 10px 10px 100px 10px rgba(0, 0, 0, 0.2);
box-shadow: 10px 10px 100px 10px rgba(0, 0, 0, 0.2);
flex-grow: 1;
}
.accordion-container .accordion-content.default .service-list .service-list-item small:hover {
transform: scale(1.05);
-webkit-text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
}
.accordion-container .accordion-content.default .service-details {
width: 60%;
padding: 40px;
margin-left: 0px;
margin-right: 0px;
color: #31353D;
text-align: left;
line-height: 1.6;
font-size: 1.1em;
}
.about-container .accordion-container .accordion-content.default {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
margin-left: 80px;
margin-right: 80px;
font-weight: normal;
line-height: 1.4;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<section class="about-container" id="about">
<div id="accordion">
<div class="accordion-container">
<div class="accordion-toggle ">
<div>1</div>
</div>
<div class="accordion-content default">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus arcu urna, finibus in nunc quis, porta rhoncus nunc. Sed pretium nunc a lobortis tempor. Morbi sit amet ipsum ut nunc rhoncus cursus sit amet sed nunc. Suspendisse in arcu vel enim tristique
bibendum eu at erat. Sed id urna tincidunt, iaculis lacus nec, feugiat purus. Sed leo odio, fermentum a ipsum eu, faucibus facilisis tortor. Nam dignissim erat magna, at euismod risus imperdiet in. Mauris aliquam enim eget eros euismod, in sollicitudin
turpis ultricies. Sed tincidunt maximus diam ut tincidunt. Cras eros ex, fringilla ac mattis ac, pellentesque eget neque. Nulla sed libero nibh. Proin ex metus, varius congue eros quis, volutpat lacinia mi. Pellentesque eu gravida eros. In hac
habitasse platea dictumst. Fusce dictum sit amet felis fringilla laoreet. Sed ut lorem sed urna pharetra dictum id lobortis ex.
</div>
</div>
<div class="accordion-container">
<div class="accordion-toggle">
<div>2</div>
</div>
<div class="accordion-content default">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus arcu urna, finibus in nunc quis, porta rhoncus nunc. Sed pretium nunc a lobortis tempor. Morbi sit amet ipsum ut nunc rhoncus cursus sit amet sed nunc. Suspendisse in arcu vel enim tristique
bibendum eu at erat. Sed id urna tincidunt, iaculis lacus nec, feugiat purus. Sed leo odio, fermentum a ipsum eu, faucibus facilisis tortor. Nam dignissim erat magna, at euismod risus imperdiet in. Mauris aliquam enim eget eros euismod, in sollicitudin
turpis ultricies. Sed tincidunt maximus diam ut tincidunt. Cras eros ex, fringilla ac mattis ac, pellentesque eget neque. Nulla sed libero nibh. Proin ex metus, varius congue eros quis, volutpat lacinia mi. Pellentesque eu gravida eros. In hac
habitasse platea dictumst. Fusce dictum sit amet felis fringilla laoreet. Sed ut lorem sed urna pharetra dictum id lobortis ex.
</div>
</div>
<div class="accordion-container">
<div class="accordion-toggle" style="border: none">
<div>3</div>
</div>
<div class="accordion-content default">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus arcu urna, finibus in nunc quis, porta rhoncus nunc. Sed pretium nunc a lobortis tempor. Morbi sit amet ipsum ut nunc rhoncus cursus sit amet sed nunc. Suspendisse in arcu vel enim tristique
bibendum eu at erat. Sed id urna tincidunt, iaculis lacus nec, feugiat purus. Sed leo odio, fermentum a ipsum eu, faucibus facilisis tortor. Nam dignissim erat magna, at euismod risus imperdiet in. Mauris aliquam enim eget eros euismod, in sollicitudin
turpis ultricies. Sed tincidunt maximus diam ut tincidunt. Cras eros ex, fringilla ac mattis ac, pellentesque eget neque. Nulla sed libero nibh. Proin ex metus, varius congue eros quis, volutpat lacinia mi. Pellentesque eu gravida eros. In hac
habitasse platea dictumst. Fusce dictum sit amet felis fringilla laoreet. Sed ut lorem sed urna pharetra dictum id lobortis ex.
</div>
</div>
</div>
</section>
Also, it appears that if you click the toggle more than once whilst it's moving it stacks up and won't stop until its completed all the animations.
is there a way to stop it from accepting the onclick event whilst its in motion?

I haven't understood 100% your test case, but I spotted a bug here:
$('#services, #accordion').find('.accordion-toggle').on('click', function() {
});
this won't unbind the action of the click, this snippet below will do the job (credits):
$('#services, #accordion').find('.accordion-toggle').prop('onclick',null).off('click');
In order to open all the content you have to add:
if (match.matches) {
console.log("more than 800");
//comment this one, it's useless
//$('.accordion-toggle').slideDown(600);
// this one will open all the contents
$(".accordion-content").slideDown(600);
Demo

Menu is not dropping down after user come back to the top of the page

On my website I've got a sticky, dropdown menu. When page is already loaded (without scrolling) or after user page scrolling there's everything ok - menu is dropping down.
$(document).ready(function(){
$('li').hover(function(){
$(this).find('ul>li').stop().slideToggle(250);
});
});
$(function () {
var stickyHeaderTop = $('#navigationwrap').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#navigationwrap').css({
position: 'fixed',
top: '0px'
});
$('#contentwrap').css('margin-top', $('#navigationwrap').outerHeight(true) + parseInt($('#headerwrap').css('marginBottom')));
} else {
$('#navigationwrap').css({
position: 'static',
top: '0px'
});
$('#contentwrap').css('margin-top', '0px');
}
});
});
body {
font-family: 'Roboto Condensed', sans-serif;
font-size: 18px;
color: #333;
}
p {
padding: 10px;
}
#navigation ul {
margin: 0;
padding: 0;
width: auto;
list-style-type: none;
text-align: center;
display: inline-block;
}
#navigation {
text-align: center;
}
#navigation ul li {
float: left;
font-weight: bold;
font-size: 20px;
line-height: 40px;
text-align: center;
text-shadow: 1px 1px 1px #000;
width: 140px;
}
#navigation ul li:hover {
background: #9D9FA4;
border-radius: 10px;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
}
ul li li {
background: #3F61A9;
color: #fff;
display: none;
}
ul li li:hover {
background: #9D9FA4;
}
ul li li a{
text-decoration: none;
color: #fff;
}
#wrapper {
margin: 0 auto;
width: 1000px;
}
#headerwrap {
width: 1000px;
float: left;
margin: 0 auto;
position: relative;
}
#header {
height: 125px;
background: #000000;
border-radius: 10px;
border: 1px solid #000000;
margin: 5px;
position: relative;
}
#navigationwrap {
width: 1000px;
float: left;
margin: 0 auto;
position: relative;
}
#navigation {
height: 40px;
background: #52bf6e;
border-radius: 10px;
border: 1px solid #3ea858;
margin: 5px;
}
#contentwrap {
width: 700px;
float: left;
margin: 0 auto;
}
#content {
background: #FFFFFF;
border-radius: 10px;
margin: 5px;
}
#leftcolumnwrap {
width: 150px;
float: left;
margin: 0 auto;
}
#leftcolumn {
border-radius: 10px;
margin: 5px;
}
#rightcolumnwrap {
width: 150px;
float: left;
margin: 0 auto;
}
#rightcolumn {
border-radius: 10px;
margin: 5px;
}
#footerwrap {
width: 1000px;
float: left;
margin: 0 auto;
clear: both;
}
#footer {
height: 40px;
background: #9D9FA4;
border-radius: 10px;
border: 1px solid #888a91;
margin: 5px;
background-color: #9D9FA4;
text-align: center;
color: #FFFFFF;
font-weight: bold;
}
#navigationwrap_placeholder {
display:none;
height: 40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="headerwrap">
<div id="header">
</div>
</div>
<div id="navigationwrap">
<div id="navigation">
<ul>
<li>main menu</li>
<li><a>test</a>
<ul class="sub-menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="navigationwrap_placeholder"></div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
<p></p>
</div>
</div>
<div id="contentwrap">
<div id="content">
<br><br>
<p>Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. </p>
<p>Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. </p>
<br><br>
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
<p></p>
</div>
</div>
<div id="footerwrap">
<div id="footer">
</div>
</div>
</div>
</body>
</html>
The problem is when user comes back to the top of the page. Then menu is not dropping down. I have got two JS scripts. One allows to drop down the menu, the other one causes that the menu is sticked to the top of the page after user scrolling.
I found out that when I remove #content and #contentwrap from CSS, then menu is dropping down, but it appears behind the text. However, I wouldn't like to remove it.
Also, when I hover over ul > li > a called 'test' it moves to right a little. I would like to get rid of it.
What should I add or delete so as menu would work properly no matter where menu is displayed. Thanks!

You need to change the position to relative instead of static when you are scrolling up.
$(document).ready(function(){
$('li').hover(function(){
$(this).find('ul>li').stop().slideToggle(250);
});
});
$(function () {
var stickyHeaderTop = $('#navigationwrap').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#navigationwrap').css({
position: 'fixed',
top: '0px'
});
$('#contentwrap').css('margin-top', $('#navigationwrap').outerHeight(true) + parseInt($('#headerwrap').css('marginBottom')));
} else {
$('#navigationwrap').css({
position: 'relative',
top: '0px'
});
$('#contentwrap').css('margin-top', '0px');
}
});
});
body {
font-family: 'Roboto Condensed', sans-serif;
font-size: 18px;
color: #333;
}
p {
padding: 10px;
}
#navigation ul {
margin: 0;
padding: 0;
width: auto;
list-style-type: none;
text-align: center;
display: inline-block;
}
#navigation {
text-align: center;
}
#navigation ul li {
float: left;
font-weight: bold;
font-size: 20px;
line-height: 40px;
text-align: center;
text-shadow: 1px 1px 1px #000;
width: 140px;
}
#navigation ul li:hover {
background: #9D9FA4;
border-radius: 10px;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
}
ul li li {
background: #3F61A9;
color: #fff;
display: none;
}
ul li li:hover {
background: #9D9FA4;
}
ul li li a{
text-decoration: none;
color: #fff;
}
#wrapper {
margin: 0 auto;
width: 1000px;
}
#headerwrap {
width: 1000px;
float: left;
margin: 0 auto;
position: relative;
}
#header {
height: 125px;
background: #000000;
border-radius: 10px;
border: 1px solid #000000;
margin: 5px;
position: relative;
}
#navigationwrap {
width: 1000px;
float: left;
margin: 0 auto;
position: relative;
}
#navigation {
height: 40px;
background: #52bf6e;
border-radius: 10px;
border: 1px solid #3ea858;
margin: 5px;
}
#contentwrap {
width: 700px;
float: left;
margin: 0 auto;
}
#content {
background: #FFFFFF;
border-radius: 10px;
margin: 5px;
}
#leftcolumnwrap {
width: 150px;
float: left;
margin: 0 auto;
}
#leftcolumn {
border-radius: 10px;
margin: 5px;
}
#rightcolumnwrap {
width: 150px;
float: left;
margin: 0 auto;
}
#rightcolumn {
border-radius: 10px;
margin: 5px;
}
#footerwrap {
width: 1000px;
float: left;
margin: 0 auto;
clear: both;
}
#footer {
height: 40px;
background: #9D9FA4;
border-radius: 10px;
border: 1px solid #888a91;
margin: 5px;
background-color: #9D9FA4;
text-align: center;
color: #FFFFFF;
font-weight: bold;
}
#navigationwrap_placeholder {
display:none;
height: 40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="headerwrap">
<div id="header">
</div>
</div>
<div id="navigationwrap">
<div id="navigation">
<ul>
<li>main menu</li>
<li><a>test</a>
<ul class="sub-menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="navigationwrap_placeholder"></div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
<p></p>
</div>
</div>
<div id="contentwrap">
<div id="content">
<br><br>
<p>Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. </p>
<p>Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. </p>
<p>Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. </p>
<p>Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. </p>
<br><br>
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
<p></p>
</div>
</div>
<div id="footerwrap">
<div id="footer">
</div>
</div>
</div>
</body>
</html>

make div appear over another div on scroll

Firstly I'm sorry, there's probably quite an easy way to do this but I'm an amateur with javascript, etc. which I expect you need. Here's what i want to do:
I have a basic 'parallax' website (something along the lines of this) but I'd like to add a footer which covers half of the bottom slide when you scroll down to it, with the content in the bottom slide staying put.
As in at the moment, the content in the fifth slide moves when you scroll down to the footer, but I want it to stop at the fifth slide, with the footer sliding over the top.
Any help will be greatly appreciated!
Sorry: here's the Lorem ipsumed code:
//I have no idea what javascript i should be using.
* {
margin: 0;
padding: 0;
min-height: 15px;
}
.page {
height: 100vh;
position: relative;
}
.page-title {
font-family: 'Quattrocento Sans';
font-size: 2.5em;
transform: translateY(100%);
margin-left: 50px;
margin-right: 50px;
}
.page-sub {
font-family: 'Coming Soon';
font-size: 1.5em;
text-align: center;
margin: 50px;
}
.page-para {
font-family: 'Quattrocento Sans';
font-size: 1.2em;
line-height: 1.5;
margin-top: 50px;
margin-bottom: 50px;
margin-right: 50px;
margin-left: 50%;
position: relative;
}
.page-link {
text-decoration: none;
color: #F0C808;
}
.page-link:hover {
color: #F0C808;
font-weight: bold;
}
.link-box {
color: #F0C808;
background-color: #07A0C3;
border: 1px solid #07A0C3;
font-family: 'Coming Soon';
font-size: 1.5em;
text-align: center;
height: 3em;
width: 8em;
line-height: 3em;
bottom: 100px;
right: 150px;
position: absolute;
}
#page-one {
background: url('img/page-one.jpg') no-repeat fixed;
background-size: 100%;
}
.main-title {
font-family: 'Quattrocento Sans';
font-size: 3em;
text-align: center;
padding: auto;
align-items: center;
width: 35%;
margin-left: auto;
margin-right: auto;
position: relative;
top: 50%;
transform: translateY(-100%);
}
#page-two {
background: url(img/page-two.png) no-repeat;
background-size: 100%;
background-color: #E2E2E2;
}
#page-three {
background: url(img/page-three.jpg) no-repeat fixed;
background-size: 100%;
}
#page-four {
background: url(img/page-four.jpg) no-repeat;
background-size: 100%;
background-color: #E2E2E2;
}
#page-five {
background: url(img/page-five.jpg) no-repeat fixed;
background-size: 100%;
}
.page-five-para {
margin: 0;
}
.page-five-bold {
font-family: 'Coming Soon';
font-size: 1.2em;
margin: 0;
}
#footer {
background-color: #E2E2E2;
}
.foot {
margin: 0;
display: inline-block;
vertical-align: top;
width: 33%;
height: 50vh;
}
h5 {
font-family: 'Coming Soon';
font-size: 1.5em;
margin: 15px;
padding-left: 15px;
}
.right-foot-spacer {
height: 2.41em;
margin: 15px;
padding-left: 15px;
}
.foot-content {
font-family: 'Quattrocento Sans';
font-size: 1.2em;
margin: 20px;
}
.foot-list {
list-style: none;
}
.foot-link {
color: black;
text-decoration: none;
}
blockquote {
margin: 0px;
margin-bottom: 15px;
}
.right-footer p {
text-align: right;
}
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Quattrocento+Sans|Coming+Soon' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="page" id="page-one">
<h1 class="main-title">Title</h1>
</div>
<div class="page" id="page-two">
<h2 class="page-title">Page two title</h2>
<h4 class="page-sub">subtitle</h4>
<p class="page-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida. Phasellus bibendum leo ut tortor semper, vitae euismod arcu mattis. Proin sagittis risus sollicitudin eros finibus, et semper ex varius. In nec sagittis
metus. Aliquam in sem eu diam pretium vulputate. Sed pretium ante id sem posuere mollis. Suspendisse sed massa purus. Donec et nulla rhoncus, gravida lectus ac, pretium quam.</p>
</div>
<div class="page" id="page-three">
<h2 class="page-title">Page three title</h2>
<h4 class="page-sub">subtitle</h4>
<p class="page-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida. Phasellus bibendum leo ut tortor semper, vitae euismod arcu mattis. Proin sagittis risus sollicitudin eros finibus, et semper ex varius. In nec sagittis
metus. Aliquam in sem eu diam pretium vulputate. Sed pretium ante id sem posuere mollis. Suspendisse sed massa purus. Donec et nulla rhoncus, gravida lectus ac, pretium quam.</p>
<a href="http://www.google.com" class="page-link">
<div class="link-box">Link</div>
</a>
</div>
<div class="page" id="page-four">
<h2 class="page-title">Page title</h2>
<h4 class="page-sub">subtitle</h4>
<p class="page-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida. Phasellus bibendum leo ut tortor semper, vitae euismod arcu mattis. Proin sagittis risus sollicitudin eros finibus, et semper ex varius. In nec sagittis
metus. Aliquam in sem eu diam pretium vulputate. Sed pretium ante id sem posuere mollis. Suspendisse sed massa purus. Donec et nulla rhoncus, gravida lectus ac, pretium quam.</p>
<a href="http://www.bing.com" class="page-link">
<div class="link-box">Link</div>
</a>
</div>
<div class="page page-five" id="page-five">
<h2 class="page-title">Page title</h2>
<h4 class="page-sub">Lorem ipsum dolor</h4>
<div class="page-para">
<p class="page-five-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida.</p>
<h6 class="page-five-bold">Lorem ipsum dolor</h6>
<p class="page-five-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div id="footer">
<div class="foot left-footer">
<h5>Lorem Ipsum</h5>
<p class="foot-content email">someone#example.com</p>
</div>
<div class="foot center-footer">
<h5>Footer</h5>
<ul class="foot-content">
<li class="foot-list">Google
</li>
<li class="foot-list">Bing
</li>
<li class="foot-list">Yahoo
</li>
</ul>
</div>
<div class="foot right-footer">
<div class="right-foot-spacer"></div>
<div class="foot-content quote">
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>
<p>-Lorem Ipsum</p>
</div>
</div>
</div>
</body>
</html>

If I've understood your question correctly, one way to achieve the effect you are looking for is by monitoring the getBoundingClientRect().top property of the final <div> and the getBoundingClientRect().bottom property of the penultimate <div>.
When the getBoundingClientRect().top property of the final <div> hits the top of the viewport, you can change the element's style rules to fix it in that position;
When the getBoundingClientRect().bottom property of the penultimate <div> comes back into view at the top of the viewport, you can unfix the final <div> so that it starts scrolling as normal again.
Example:
function fixPage5() {
var footer = document.getElementsByTagName('footer')[0];
var pages = document.getElementsByClassName('page');
if (pages[(pages.length - 1)].getBoundingClientRect().top < 1) {
pages[(pages.length - 1)].classList.add('fixed');
footer.style.marginTop = '424px';
}
if (pages[(pages.length - 2)].getBoundingClientRect().bottom > -1) {
footer.style.marginTop = '0';
pages[(pages.length - 1)].classList.remove('fixed');
}
}
window.addEventListener('scroll',fixPage5,false);
body {
margin: 0;
padding: 0;
}
.page {
position: relative;
width: 100%;
height: 400px;
padding: 12px;
font-size: 72px;
}
footer {
position: relative;
width: 100%;
z-index: 12;
height: 400px;
font-size: 72px;
color: rgb(255,255,255);
background-color: rgb(31,31,31);
}
.page:nth-of-type(odd) {
color: rgb(255,255,255);
background-color: rgb(127,127,127);
}
.fixed {
position: fixed;
top: 0;
left: 0;
z-index: -12;
}
<div class="page">Page One</div>
<div class="page">Page Two</div>
<div class="page">Page Three</div>
<div class="page">Page Four</div>
<div class="page">Page Five</div>
<footer>Footer</footer>

How can I make my text in my HTML responsive?

So my images and boxes respond to the browser window size when I shrink it down but the text doesn't. I have tried many different things: percentages, ems and media queries but none seem to work. Maybe I am placing them wrong?
Here is the code for the CSS:
body {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-size:12px;
background: #394BA0;
color:#C180E4;
border-color:#88C6ED;
}
#wrapper {
width:62.7%;
margin:0px auto;
border:1px solid #bbb;
padding:10px;
height: 1199px;
}
#header {
border:1px solid #bbb;
height:100px;
padding:10px;
}
#content-left {
width: 21%;
height: 61.4%;
border:1px solid #bbb;
float: left;
margin-top: 0.4%;
}
#content-main {
float: center;
width: 77%;
height: 61.3%;
border:1px solid #bbb;
margin-top: 0.5%;
margin-left:23%;
word-wrap: break-word;
}
#content-box1 {
width: 49%;
height: 26%;
margin-top: 1%;
float: left;
}
#content-box2 {
width: 49%;
height: 26%;
border:0px solid #bbb;
margin-top: 2%;
margin-left:51%;
float: center;
}
And Here is the code for my main page:
<html>
<head>
<link rel="stylesheet" type="text/css" href="Responsive Web design CSS.css">
<style>
a:link {color:#C180E4; font-style: normal;} /* unvisited link */
h2 {text-align:center}
h3 {text-align:center}
h3 {margin-top:50%}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h2><font size="6">Locked Down Data</font></h2>
</div>
<div id="content-box1">
<p><img src="download.jpg" width="99%" height="94%" border="1px" alt="picture1"></p>
</div>
<div id="content-box2">
<p><img src="foto-locked-down-iphone.jpg" width="99%" height="94%" border="1px" alt="picture2"></p>
</div>
<div id="content-left">
<h1><font size="5"> Menu</font></h1>
<p><font size="4"> -Home</font></p>
<p><font size="4"> -Threats</font></p>
<p><font size="4"> -Protection</font></p>
<p><font size="4"> -Practical Application</font></p>
<p><font size="4"> -Contact</font></p>
<h3><img src="it-security.png" width="79%" height="30%" alt="picture2" /></h3>
</div>
<div id="content-main">
Aenean ac turpis lectus. Vestibulum vel nulla eget libero tristique egestas venenatis id est. Mauris dictum ac nulla ullamcorper accumsan. Donec ipsum metus, molestie sit amet pretium a, adipiscing ac tellus. Nulla eu ullamcorper enim. Aliquam adipiscing facilisis erat ultrices aliquam. Nam eu libero est. Mauris semper urna rutrum, suscipit erat ut, varius lectus. Aenean ut orci lobortis ante ultricies facilisis. Curabitur tempus orci et eleifend fermentum. Etiam pharetra mauris sed consequat commodo. Quisque at lacus non massa consequat consequat mattis sit amet elit. Aliquam in tellus faucibus, aliquet mi at, faucibus neque.
<p><iframe width="56%" height="31%" src="http://www.youtube.com/embed/W90gNMoeY6c" frameborder="0" allowfullscreen></iframe></p>
</div>
</body>
</html>

The FlowType library (http://simplefocus.com/flowtype/) might be what you're looking for.