Develop Reference

HTML / Javascript - try to have page pointers as guidance

I am trying to get this small tutorial to show up the first few 5 seconds pointing to the menu bar on visiting the webpage. Anyone can tell me how I can do that with HTML CSS or Javascript?
I circled it with red of what I wanted on the image.
should I use an icon
how do I get it to point to specific point on the web page

One and easy solution is to create an overlay, which will cover the whole page. The purpose of the overlay will than catch the user click, and will destroy itself and also the tooltip.
To create the tooltip just specify the target element, for the tooltip should be created, the easiest way is to use css selector and jQuery.
With jQuery you can than find the target element on the page, get its position and size and according to that create the tooltip element as well.
Here is quick example (also as a fiddle https://jsfiddle.net/2c0q91np/):
$(function() {
// Find the target element on the page
var target = $(".menu li:nth-child(4n)");
var overlay = null;
var tooltip = null;
// Creates overlay which will handle the first click
function createOverlay() {
overlay = $("<div class='overlay'></div>").appendTo("body");
// When user clicks somewhere on the page the overlay will handle the click
overlay.one("click", destroyOverlay);
}
// Destroys the overlay and tooltip
function destroyOverlay() {
if(overlay) {
overlay.remove();
overlay = null;
}
if(tooltip) {
tooltip.remove();
tooltip = null;
}
}
// Creates tooltip for the target element
function createTooltip(text) {
// Get the position of the target
var pos = target.position();
// Get the height of the target
var height = target.outerHeight();
// Create the tooltip
tooltip = $("<div class='tooltip'></div>")
.html(text)
.appendTo("body")
.css({
"top": pos.top + height + "px",
"left": pos.left + "px"
});
}
createOverlay();
createTooltip("Click on one of the tabs to<br>quickly scroll through the page!");
// Desotroy tooltip automatically after 5 seconds
setTimeout(destroyOverlay, 5000);
});
body {
background: black;
font-family: Verdana;
font-size: 12px;
}
.menu {
border: 1px solid gray;
padding: 0;
margin: 0;
width: 100%;
display: flex;
}
.menu li {
list-style-type: none;
color: gray;
padding: 15px;
flex: 1;
text-align: center;
}
.menu li + li {
border-left: 1px solid gray;
}
.menu li a {
color: gray;
text-decoration: none;
}
.overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255,255,255,.0001);
z-index: 999;
}
.tooltip {
position: absolute;
z-index: 1000;
margin: 10px;
color: #fff;
width: 180px;
height: auto;
background: red;
padding: 10px;
}
.tooltip:before {
content:"";
position: absolute;
left: 25%;
transform: translate(-50%,-26px);
width: 0;
height: 0;
border-style: solid;
border-width: 0 13px 26px 13px;
border-color: transparent transparent red transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li>
Home
</li>
<li>
Product
</li>
<li>
Shop
</li>
<li>
About the brand
</li>
<li>
Join us
</li>
<li>
Contact
</li>
</ul>

Javascript Dropdown Staying open

In my site I made a simple dropdown menu, but my problem is that it won't close if mouseleave happens on the <span> that triggers the dropdown.
Here is my code:
//Find the dropdown span
var header = document.getElementById('drop');
//Find the ul with the links
var ul = document.getElementById('nav-dropdown');
//Get the width and apply it to the dropdown items
var width = drop.getBoundingClientRect().width;
ul.style.minWidth = width + "px";
//Round the corners on the last link
var links = document.getElementsByClassName('dropdown-link');
links[links.length - 1].style.borderRadius = "0 0 7px 7px";
var open = 0;
//Onhover, display the dropdown;
header.addEventListener("mouseover", function() {
ul.style.display = "block";
header.style.borderRadius = "7px 7px 0 0";
if (links[0].getBoundingClientRect().width > width) {
links[0].style.borderRadius = "0 7px 0 0";
}
open = 1;
});
//When the mouse leaves the menu, close it.
ul.addEventListener("mouseleave", function() {
ul.style.display = "none";
header.style.borderRadius = "7px";
open = 0;
});
//What I've tried to fix it:
/*
header.addEventListener("mouseleave", function() {
ul.style.display = "none";
header.style.borderRadius = "7px";
});
*/
/*Stylesheet for this stuff*/
* {
font-family: arial;
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 20px;
text-decoration: none;
list-style: none;
}
a:visited {
color: white;
}
a,
#drop {
color: white;
}
a:hover {
color: coral;
}
.header-links-container {
position: relative;
top: 0;
background: rgb(63, 83, 95);
width: 100%;
height: 80px;
opacity: .8;
z-index: 999;
}
.title {
font-weight: bold;
font-size: 30px;
padding: 20px 50px;
position: relative;
float: left;
color: white;
}
.header-links {
position: relative;
float: right;
vertical-align: middle;
}
.nav-links {
margin: auto;
padding-top: 20px;
padding-right: 30px;
}
.nav-link {
position: relative;
float: right;
padding: 0 20px;
font-size: 23px;
padding: 5px 10px;
margin: 5px;
background: #4471ba;
border-radius: 7px;
}
.nav-link:hover {
background: #4480ba;
color: #d1d1d1;
}
#nav-dropdown {
display: none;
margin-top: 42px;
margin-left: 5px;
position: absolute;
}
.dropdown-link {
color: black;
background-color: #ccc;
padding: 5px 10px;
}
.dropdown-link:hover {
color: #000;
background-color: #a7a7a7;
}
.dropdown-link:active {
color: white;
background-color: #3b8cfa;
}
<div class="header-links-container">
<h2 class="title">Title</h2>
<div class="header-links">
<ul class="nav-links">
<li class="nav-link">Photo Gallery</li>
<li class="nav-link">SLAP</li>
<li id="drop" class="nav-link"><span>Dropdown</span></li>
<ul id="nav-dropdown" class="jim">
<a href="#">
<li class="dropdown-link">Link 1</li>
</a>
<a href="#">
<li class="dropdown-link">Link 2</li>
</a>
<a href="#">
<li class="dropdown-link">Longer Link</li>
</a>
<a href="#">
<li class="dropdown-link">Vacuum</li>
</a>
</ul>
</ul>
</div>
</div>
<p>
Relavent JS lines start at Line 16
</p>
And here is the fiddle that might make more sense: https://jsfiddle.net/dLw1hu5n/6/
I've tried closing the dropdown like in the last code block, but then it won't stay open when you go to hover over the links. I've also tried making the menu close when the mouse hovers over the navbar div, but no luck there either.
Can I fix this or do I need to start from square 1?

I would prefere to solve this via css. However, in your case you can try the following:
function displayDropdown() {
ul.style.display = "block";
header.style.borderRadius = "7px 7px 0 0";
if (links[0].getBoundingClientRect().width > width) {
links[0].style.borderRadius = "0 7px 0 0";
}
open = 1;
}
function hideDropdown() {
ul.style.display = "none";
header.style.borderRadius = "7px";
open = 0;
}
//Onhover, display the dropdown;
header.addEventListener("mouseover", function() {
displayDropdown();
});
ul.addEventListener("mouseover", function() {
displayDropdown();
});
//When the mouse leaves the menu, close it.
ul.addEventListener("mouseleave", function() {
hideDropdown();
});
header.addEventListener("mouseleave", function() {
hideDropdown();
});

Your JS is fine but your event listener for mouseleave needs to be on the enclosing div. This way your element stays open until you hover outside of the header
t.addEventListener("mouseleave", function() {
ul.style.display = "none";
header.style.borderRadius = "7px";
open = 0;
});
What is t?
var t = document.getElementById(t);
What element has id T?
Try this fiddle to find out https://jsfiddle.net/dLw1hu5n/12/

Know if an element can potentially fit another element on window resize

I'm looking for a way to know if a an element (a menu) can potentially fit into another element on window resize. I do not know the width of the element in question (as in, it's not set by CSS).
The content of the menu is dynamic and unknown in data (language) and count (user role/permissions).
The solution I can come up with works fine if my first load happens to have the element fitting, because I store the initial width, but it doesn't work so well if the element doesn't fit (say at a reduced window size). So my question, how can I handle this upsizing?
Sample HTML/CSS:
Look at the snippet in full screen ("expand snippet"). It breaks off at about 604 pixels, and the responsive menu kicks off at 480px.
.header {
font-family: Arial, sans-serif;
overflow: hidden;
background: blue;
}
.header__logo {
float: left;
width: 100px;
height: 40px;
background: #000;
color: #fff;
text-align: center;
line-height: 40px;
}
.menu {
float: left;
list-style: none;
padding: 0;
margin: 0;
}
#media screen and (max-width: 480px) {
.menu {
display: none;
}
}
.menu__item {
padding: 0 10px;
color: #fff;
float: left;
height: 40px;
line-height: 40px;
}
.hamburger {
display: none;
float: right;
font-size: 20px;
text-align: center;
width: 40px;
height: 40px;
line-height: 40px;
color: #fff;
}
#media screen and (max-width: 480px) {
.hamburger {
display: block;
}
}
<div class="header">
<div class="header__logo">logo</div>
<div class="hamburger">=</div>
<ul class="menu">
<li class="menu__item">item 1</li>
<li class="menu__item">item 2</li>
<li class="menu__item">item 3</li>
<li class="menu__item">item 4</li>
<li class="menu__item">item 5</li>
<li class="menu__item">item 6</li>
<li class="menu__item">item 7</li>
</ul>
</div>

You can use media queries and something like fontawesome (there are also other options) to display/hide icons and text at specific break points. You can resize your screen to find the pixel values.
If you are looking for a JS example to find out specific widths, that can be done too - but if this can be solved by CSS, why not!
.header {
font-family: Arial, sans-serif;
overflow: hidden;
background: blue;
}
.header__logo {
float: left;
width: 100px;
height: 40px;
background: #000;
color: #fff;
text-align: center;
line-height: 40px;
}
.menu {
float: left;
list-style: none;
padding: 0;
margin: 0;
}
#media screen and (max-width: 480px) {
.menu {
display: none;
}
}
.menu__item {
padding: 0 10px;
color: #fff;
float: left;
height: 40px;
line-height: 40px;
}
.hamburger {
display: none;
float: right;
font-size: 20px;
text-align: center;
width: 40px;
height: 40px;
line-height: 40px;
color: #fff;
}
#media screen and (max-width: 480px) {
.hamburger {
display: block;
}
}
.menu__item .fa {
display: none;
}
li.menu__item a {
color: white;
display: block;
}
/*(min-width:465px) and (max-width:545px) */
/* or whatever widths you need */
#media all and (min-width: 0) and (max-width: 1000px) {
.menu__item a span {
color: salmon;
display: inline-block;
text-indent: -9999px;
text-align: center;
}
.menu__item a .fa {
display: block;
text-indent: 0;
color: #a00;
text-align: center;
line-height: 40px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="header">
<div class="header__logo">logo</div>
<div class="hamburger">=</div>
<ul class="menu">
<li class="menu__item"><i class="fa fa-bell" aria-hidden="true"></i><span>item 1</span>
</li>
<li class="menu__item"><i class="fa fa-bell" aria-hidden="true"></i><span>item 2</span>
</li>
<li class="menu__item"><i class="fa fa-bell" aria-hidden="true"></i><span>item 3</span>
</li>
<li class="menu__item"><i class="fa fa-bell" aria-hidden="true"></i><span>item 4</span>
</li>
<li class="menu__item"><i class="fa fa-bell" aria-hidden="true"></i><span>item 5</span>
</li>
<li class="menu__item"><i class="fa fa-bell" aria-hidden="true"></i><span>item 6</span>
</li>
<li class="menu__item"><i class="fa fa-bell" aria-hidden="true"></i><span>item 7</span>
</li>
</ul>
</div>

So I have come up with a solution that works pretty well. It is heavily inspired of the work of Ridiculously Responsive Social Sharing Buttons
var Menu = (function() {
// setup classes used
var headerClass = 'header__wrapper';
var elClass = 'main-nav';
var itemsClass = 'main-nav__item';
var smallClass = itemsClass + '--small';
// setup jQuery elements
var $header = $('.' + headerClass).not('.clone');
// setup the clone used to make operations/checks
var clone = '.clone.' + headerClass;
// currently, only a set height is supported
var originalHeight = 60;
var stealth = function(el) {
var $el = (el instanceof jQuery) ? el : $(el);
$el.css({
height: 'auto',
// position absolute is needed to be out of the DOM structure,
// while still having a testable height
position: 'absolute',
left: 0,
right: 0,
visibility: 'hidden'
});
}
return {
init() {
Menu.reset();
Menu.exec();
Menu.bindEvents();
},
exec() {
// create a clone if it doesn't exist
if (!$(clone).length) {
Menu.clone(clone);
}
// reset the menu to its largest form
Menu.reset();
// does it fit?
if (Menu.checkFit()) {
// it fits, use the clone data;
Menu.replace();
} else {
// it didn't fit, so attempt to fit
Menu.attemptToFit();
}
},
reset() {
$(clone).find('.' + itemsClass).removeClass(smallClass);
},
bindEvents() {
$(window).resize(function() {
Menu.exec();
});
$(window).focus(function() {
Menu.exec();
});
},
checkFit() {
return $(clone).height() == originalHeight;
},
attemptToFit() {
var itemsArr = $(clone).find('.' + itemsClass).sort(function(a, b) {
// TODO: handle and make sure nodes without data-priority are handled by DOM order
var a = $(a).attr('data-priority') || 0;
var b = $(b).attr('data-priority') || 0;
return b - a;
});
// count iterations that do not fit
var noFit = 0;
// cycle over items, attempting to fit
itemsArr.each(function(i) {
var item = itemsArr[i];
$(item).addClass(smallClass);
// exit the loop if it fits!
if (Menu.checkFit()) {
// it fits, exit the loop!
return false;
} else {
// this attempt didn't fit, try the next done
noFit++;
}
});
// could we make it fit?
if (noFit == itemsArr.length - 1) {
// TODO: handle this scenario
// couldn't make it fit :( handle it
} else {
// we were able to make it fit, replace the original with the clone content
Menu.replace();
}
},
clone(el) {
$header.clone().addClass('clone').insertAfter($header);
stealth(el);
},
replace() {
var content = $(clone).clone().contents();
// replace the content of the original with the clone
$header.empty().append(content);
}
};
})();
Menu.init();
See it in action on CodePen: http://codepen.io/veksen/pen/ORAmVa

Disappearing drop down menu

I am trying to create a disappearing drop down menu that disappears into the top of the page, and you can only see the word 'open'. This opens the the menu, the word open changes to the word close which when clicked makes the menu disappear again. Help would be much appricated.
<html>
<head>
<title>dropdown</title>
<link rel="stylesheet" type="text/css" href="dropdown_css.css">
<script type = "text/javascript">
function navagate(menu) {
var panel = document.getElementById(menu),maxh = "-362px", navg = document.getElementById('navag');
if (panel.style.marginTop == maxh){
panel.style.marginTop = "0px";
navag.innerHTML = "Close";
}
else {
panel.style.marginTop = maxh;
navag.innerHTML = "Open";
}
}
window.onload = function(){panel.style.marginTop = "-362px";}
</script>
<body>
<div id = "panel">
<ul>
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
</ul>
<div id ="sections_button">
<a onclick = "navigate ('panel')" id = "navag">Open</a>
</div>
</div>
</body>
</body>
</html>
#panel {
width : 160px;
height: 130px;
background-color: gray;
margin-left: 30px;
margin-top:20px;
}
#panel li {
list-style-type: none;
}

Here, I've made a JS fiddle that may help you out: http://jsfiddle.net/942z0nhh/ I did not play around with the styling at all.
A few things I noticed:
You're making some mistakes that I think you wouldn't make if you indented properly. Take a look here, where you closed your body twice:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
</div>
</div>
</body>
</body>
Second, you have some spelling mistakes:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
vs
function navagate(menu) {
You can see there that your function would never be called because of it.
Lastly, your 'open' and 'close' a here:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
Was within the div your function was overwriting. The function would change it to 'close'- but then it wouldn't be visible to the user anyway! I moved it above, which I hope makes sense.
Please let me know if you have any other questions, or if I misunderstood.

You could also do it only with CSS. It's the "css checkbox hack". I'm having it not like you want it but it is pretty close. Changing the text from open to close should be also possible.
At the moment, I don't know how to move the open/close label below the ul list.
*, html {
padding: 0px;
font-family: sans-serif;
}
/* Checkbox Hack */
input[type=checkbox] {
position: absolute;
display: none;
}
label {
display: block;
cursor: pointer;
content: "close";
}
/* Default State */
#wrapper {
display: block;
background: gray;
color: white;
text-align: center;
}
/* Toggled State */
input[type=checkbox]:checked ~ #menu {
display: block;
background: lightgray;
color: black;
top:0px;
}
.menuToggle ul{
display: none;
width: 100%;
}
#menu {
padding-top: 5px;
margin: 0px;
list-style: none;
}
<div id="wrapper">
<div class="menuToggle">
<label for="toggle-1">open</label>
<input type="checkbox" id="toggle-1"/>
<ul id="menu">
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
</ul>
</div>
</div>

With jQuery you could do it like the example below.
I think it is now almost like you wanted it. Maybe some styling improvements are required.
With the css hack I couldn't manage the text change. With js you have more possibilities. You could also improve/modify the animations.
$(function() {
var $menuButton = $('#openButton');
var $menu = $('#menu');
var btnToggleAnim = function() {
$menuButton.animate({opacity: 'toggle'}, "fast");
};
var menuToggleAnim = function() {
$('#menu').animate({
height:'toggle',
//opacity: 'toggle'
}, { duration: "slow" });
};
$('#closeButton,#openButton').on('click', function() {
menuToggleAnim();
btnToggleAnim();
});
});
*, html {
padding: 0px;
font-family: sans-serif;
}
a {
text-decoration:none;
}
#openButton {
display:block;
background: gray;
color: #fff;
text-decoration: none;
border: 2px solid lightgray;
border-radius: 15px;
}
#closeButton{
display: block;
background: gray;
color: #fff;
text-align: center;
border: 2px solid lightgray;
border-bottom-left-radius: 13px;
border-bottom-right-radius: 13px;
}
#wrapper {
display: block;
text-align: center;
}
#menu {
display: none;
background: lightgray;
color: black;
padding-top: 5px;
margin: 0px;
list-style: none;
}
#menu {
color: #000;
text-decoration: none;
border: 2px solid lightgray;
border-radius: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
open
<ul id="menu">
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
<li>close</li>
</ul>
</div>

jquery on handler not working for inserted element

I've got a simple to-do list app. To-do items are inserted by jQuery as <li> items. When they're checked off, they're removed from #todolist and prepended to #donelist. I want to let the user replace to-do items they've accidentally checked off, hence the .on handler for #donelist .checkbox elements, but it's not working. I've been puzzling over this for an embarrassingly long amount of time. How can I get the click handler working for #donelist .checkboxes?
HTML:
<div id="topform">
<input type="text" id="task" placeholder=" New task...">
</div>
<ul id="todolist">
</ul>
<ul id="donelist">
</ul>
JS:
$('#todolist').on('click', '.checkbox', checkTask);
$('#donelist').on('click', '.checkbox', replaceTask);
$('input').keypress(function (e) {
if (e.which == 13) {
addTask(e);
}
});
function addTask(e) {
taskToAdd = $('#task').val();
var listItem = "<li><span class='todotask'>" + taskToAdd + "</span><div class='checkbox'></div></li>";
$('#todolist').prepend(listItem);
}
function checkTask() {
var listItem = $(this).parent();
listItem.remove();
$('#donelist').prepend(listItem);
}
function replaceTask() {
alert('hey buddy');
}
Full CSS:
html,
body {
margin: 0;
padding: 0;
background-color: #313131;
font-family: 'Helvetica', sans-serif;
}
#task {
width: 98%;
margin: 5px auto 7px auto;
padding: 0;
display: block;
height: 45px;
border: none;
border-radius: 2px;
font-size: 25px;
background-color: #F7F7F7;
}
ul {
margin: 0 auto 0 auto;
padding: 0;
width: 98%;
}
li {
list-style-type: none;
padding: 0;
margin: 5px auto 0 auto;
width: 100%;
height: 45px;
line-height: 45px;
position: relative;
font-size: 25px;
border-radius: 2px;
background-color: #F7F7F7;
}
#donelist li {
opacity: .5;
text-decoration: line-through;
}
.todotask {
margin-left: 7px;
}
.checkbox {
height: 31px;
width: 31px;
border-radius: 2px;
background-color: #C1C1C1;
position: absolute;
right: 7px;
top: 7px;
}
checkTask() works just fine, which is what really confuses me. checkTask() is called when the user clicks on a dynamically inserted element (a div in a li that's inserted by addTask(). Why doesn't replaceTask() fire as well?

Having the corresponding HTML in the OP would have helped, so I've had to guess a bit about how the structure, but here's a working example of what I think you're looking for:
HTML
<h1>ADD</h1>
<input id="task"></input>
<button id="add">Add</button>
<h1>TODO</h1>
<ul id="todolist">
<li><span class='todotask'>" Take out the garbage "</span><div class='checkbox'></div></li>
<li><span class='todotask'>" Do the dishes "</span><div class='checkbox'></div></li>
</ul>
<h1>DONE</h1>
<ul id="donelist">
</ul>
CSS
.checkbox{
width: 15px;
height: 15px;
background-color: black;
display: inline-block;
cursor: pointer;
}
JavaScript inside document.ready()
$('#todolist').on('click', '.checkbox', checkTask);
$('#donelist').on('click', '.checkbox', replaceTask);
$("#add").click(addTask);
function addTask(e) {
taskToAdd = $('#task').val();
var listItem = "<li><span class='todotask'>" + taskToAdd + "</span><div class='checkbox'></div></li>";
$('#todolist').prepend(listItem);
}
function checkTask() {
var listItem = $(this).parent();
listItem.remove();
$('#donelist').prepend(listItem);
}
function replaceTask() {
var listItem = $(this).parent();
listItem.remove();
$('#todolist').prepend(listItem)
}