We Keep Coding

Click open menu click out of the div to close

I have a menu and I want it to open when I click this text from a drop down menu and I want it to close when the mouse clicks anywhere else.
var ignoreClickOnMeElement = document.getElementById('status_menu');
document.addEventListener('click', function(event) {
var isClickInsideElement = ignoreClickOnMeElement.contains(event.target);
if (!isClickInsideElement) {
status_menu.classList.remove("status-menu");
status_menu.classList.add("nostatus-menu");
}
});
.avatar {
height: 7vh;
width: 7vh;
background: url('../images/blankprofilepicture.png');
background-size: cover;
border-radius: 100%;
}
.avatar img {
width: 7vh;
border-radius: 100%;
}
.dropdown {
z-index: 1;
height: 7vh;
width: 7vh;
float: right;
margin-top: 1vh;
margin-right: 3vw;
position: relative;
}
.avatar-dropdown {
display: none;
position: absolute;
padding-top: 0.5%;
}
.avatar-dropdown p {
cursor: pointer;
padding: 0.5vw 1vw;
font-family: "Ubuntu", sans-serif;
color: black;
text-decoration: none;
display: block;
font-size: 1em;
text-align: center;
background-color: white;
margin: 0;
}
.avatar-dropdown p:hover {
background-color: #b5b5b5;
}
.dropdown:hover .avatar-dropdown {
display: block;
}
<header id="header">
<h1>DEVIE</h1>
<div class="dropdown" id="dropdown">
<div class="avatar"></div>
<div class="online-offline"></div>
<div id="status_menu">
<div id="online-div">
</div>
<div id="offline-div">
</div>
</div>
<div class="avatar-dropdown" id="avatar-dropdown">
<p onclick="status_menu();">Change status</p>
<p onclick="window.location.href='profile.php';">Profile</p>
<p onclick="window.location.href='friends.php';">Friends</p>
<p onclick="logout();">Logout</p>
</div>
</div>
</header>
But couldn't make it work and make it remove the Event listener once the div is closed.
Please help, thanks!

Unable to append to a find element

I am running a check to see if the data-attribute, availability is Yes or No. If it is no, I am finding that specific .smallCatalogBlock and wanting to append the .soonOverlay on top of it.
As on now, the element is not being appended to .smallCatalogBlock. I have a console.log check in place to see if the condition is running successfully, and it is, with the correct number of found elements. The html just isn't being appended.
Does anyone see what I am doing wrong?
$('.smallCatalogBlock').each(function() {
if ($(this).data('availability') === 'No') {
$(this).find('.smallCatalogBlock').append('<div class="soonOverlay"><div class="soonOverlayInner"><div class="total-center"><p class="dGw">Coming Soon</p></div></div></div>');
console.log("It should be working");
}
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 25%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogBlock img {
width: 80%;
height: auto;
box-shadow: 10px 5px 5px rgba(0,0,0,.3);
display: block;
margin: 0px auto 15px auto;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.comingSoonSmall {
position: relative;
}
.comingSoonSmall .soonOverlay {
width: 80%;
height: 100%;
background: #b82222;
opacity: .8;
position: absolute;
top: 0;
margin: 0 10%;
}
.soonOverlayInner {
position: relative;
min-height: 350px;
}
.soonOverlayInner .dGw {
font-weight: 600;
text-transform: uppercase;
font-size: 2.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
<div class="smallCatalogBlock" data-availability="Yes">
<span class="smallCatalogTitle">A</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div><div class="smallCatalogBlock comingSoonSmall" data-availability="No">
<span class="smallCatalogTitle">B</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div><div class="smallCatalogBlock comingSoonSmall" data-availability="No">
<span class="smallCatalogTitle">C</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
</div>

It's because when you're using $(this), the object itself is the item with class .smallCatalogBlock. So when you run $(this).find('.smallCatalogBlock'), it tries to find an element with class smallCatalogBlock WITHIN the element with class smallCatalogBlock, and fails. Since it can't find, it can't append. It should work if you simply do $(this).append(...).

The dynamically added template div doesn't persist and disappears within seconds

I am new to web development and am trying to make a chat interface as a mini project. So, I am testing whether the messages can be displayed in the chat history window. I wrote the code in such a way that when I click the send button(even without typing anything in textbox) , the chat history must add a message for itself.
To do this, I have put a template for every new message. And when send is clicked, I am trying to add it through appendChild(). But, when I am clicking the send button, the new message stays for a fraction of second and disappears. You can say, it blinks. But I want it to be visible completely. Is my way of doing it wrong or is there a better and easy way to do it.
I have read that using innerHTML will have some side-effects and I have no knowledge about jQuery. So, please answer with that perspective.
Other suggestions regarding my coding style are also appreciated.
<html>
<head>
<style>
#message {
-webkit-border-radius: 15px;
float: bottom;
position: fixed;
max-width: 400px;
background: blue;
word-wrap: break-word;
}
#sender {
text-align: left;
padding-left: 20px;
padding-top: 5px;
font-family: Arial;
font-weight: bold;
color: white;
}
#text {
text-align: left;
font-size: 18px;
padding-left: 20px;
padding-right: 20px;
}
#time {
text-align: right;
padding-right: 15px;
font-size: 15px;
}
#nav {
height: 10%;
margin: 0px;
padding: 0px;
background: blue;
}
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#nextwhole {
-webkit-orient: horizontal;
}
#navbar {
width: 25%;
background: green;
height: 90%;
float: left;
}
#msgchat {
width: 75%;
height: 100%;
position: relative;
float: right;
}
#messages {
background: orange;
height: 80%;
width: 100%;
}
#chatint {
background: red;
height: 10%;
width: 100%;
}
#chattext {
width: 90%;
height: 90%;
}
#send {
width: 9.5%;
height: 90%;
}
</style>
<script>
function submitfun() {
if ('content' in document.createElement('template')) {
var t = document.querySelector('#msgtemplate');
var td = t.content.querySelectorAll("p");
td[0].textContent = "user";
td[1].textContent = "this is message";
td[2].textContent = "time";
var tb = document.querySelector("#messages");
var clone = document.importNode(t.content, true);
tb.appendChild(clone);
}
}
</script>
</head>
<body>
<div id="nav">
</div>
<div id="nextwhole">
<div id="navbar"></div>
<div id="msgchat">
<div id="messages">
</div>
<div id="chatint">
<form onsubmit="submitfun()">
<input type="text" id="chattext">
<input type="submit" id="send" value="SEND">
</form>
</div>
</div>
</div>
<template id="msgtemplate">
<div id="message">
<p id="sender"></p>
<p id="text"></p>
<p id="time"></p>
</div>
</template>
</body>
</html>

Because you're making use of a <form>, it attempts to submit the form by default.
To prevent this, you need to update your onsubmit to also pass the event:
<form onsubmit="submitfun(event)">
And prevent the default behaviour with:
function submitfun(e) {
e.preventDefault();
...
This can be seen in the following:
function submitfun(e) {
e.preventDefault();
if ('content' in document.createElement('template')) {
var t = document.querySelector('#msgtemplate');
var td = t.content.querySelectorAll("p");
td[0].textContent = "user";
td[1].textContent = "this is message";
td[2].textContent = "time";
var tb = document.querySelector("#messages");
var clone = document.importNode(t.content, true);
tb.appendChild(clone);
}
}
#message {
-webkit-border-radius: 15px;
float: bottom;
position: fixed;
max-width: 400px;
background: blue;
word-wrap: break-word;
}
#sender {
text-align: left;
padding-left: 20px;
padding-top: 5px;
font-family: Arial;
font-weight: bold;
color: white;
}
#text {
text-align: left;
font-size: 18px;
padding-left: 20px;
padding-right: 20px;
}
#time {
text-align: right;
padding-right: 15px;
font-size: 15px;
}
#nav {
height: 10%;
margin: 0px;
padding: 0px;
background: blue;
}
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#nextwhole {
-webkit-orient: horizontal;
}
#navbar {
width: 25%;
background: green;
height: 90%;
float: left;
}
#msgchat {
width: 75%;
height: 100%;
position: relative;
float: right;
}
#messages {
background: orange;
height: 80%;
width: 100%;
}
#chatint {
background: red;
height: 10%;
width: 100%;
}
#chattext {
width: 90%;
height: 90%;
}
#send {
width: 9.5%;
height: 90%;
}
<body>
<div id="nav"></div>
<div id="nextwhole">
<div id="navbar"></div>
<div id="msgchat">
<div id="messages">
</div>
<div id="chatint">
<form onsubmit="submitfun(event)">
<input type="text" id="chattext">
<input type="submit" id="send" value="SEND">
</form>
</div>
</div>
</div>
<template id="msgtemplate">
<div id="message">
<p id="sender"></p>
<p id="text"></p>
<p id="time"></p>
</div>
</template>
</body>

Ideally you should not submit the form.
Try something like below
<html>
<head>
<style>
#message {
-webkit-border-radius: 15px;
float: bottom;
position: fixed;
max-width: 400px;
background: blue;
word-wrap: break-word;
}
#sender {
text-align: left;
padding-left: 20px;
padding-top: 5px;
font-family: Arial;
font-weight: bold;
color: white;
}
#text {
text-align: left;
font-size: 18px;
padding-left: 20px;
padding-right: 20px;
}
#time {
text-align: right;
padding-right: 15px;
font-size: 15px;
}
#nav {
height: 10%;
margin: 0px;
padding: 0px;
background: blue;
}
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#nextwhole {
-webkit-orient: horizontal;
}
#navbar {
width: 25%;
background: green;
height: 90%;
float: left;
}
#msgchat {
width: 75%;
height: 100%;
position: relative;
float: right;
}
#messages {
background: orange;
height: 80%;
width: 100%;
}
#chatint {
background: red;
height: 10%;
width: 100%;
}
#chattext {
width: 90%;
height: 90%;
}
#send {
width: 9.5%;
height: 90%;
}
</style>
<script>
function submitfun() {
if ('content' in document.createElement('template')) {
var t = document.querySelector('#msgtemplate');
var td = t.content.querySelectorAll("p");
td[0].textContent = "user";
td[1].textContent = "this is message";
td[2].textContent = "time";
var tb = document.querySelector("#messages");
var clone = document.importNode(t.content, true);
tb.appendChild(clone);
}
}
</script>
</head>
<body>
<div id="nav">
</div>
<div id="nextwhole">
<div id="navbar"></div>
<div id="msgchat">
<div id="messages">
</div>
<div id="chatint">
<form onsubmit="javascript:return false;">
<input type="text" id="chattext">
<input type="submit" id="send" value="SEND" onclick="submitfun();">
</form>
</div>
</div>
</div>
<template id="msgtemplate">
<div id="message">
<p id="sender"></p>
<p id="text"></p>
<p id="time"></p>
</div>
</template>
</body>
</html>

Why are these elements not staying within their DIV container?

I am new to CSS and it's not clear to me why the header and menu links stay within the container but not the other elements. I can fix this by including margins for the other elements but I would like to understand why this is happening.
Is there a way to keep elements within the container without specifying margins for each element or (div). See JS fiddle code and code below, for example. I would like to keep the #main content within #container.
JSFiddle link: http://jsfiddle.net/6qt8ry1L/
body {
background-color: #F7F7F0;
}
#container {
width: 1000px;
position: relative;
margin: 0 auto;
text-align: center;
background-color: #8e8e20;
}
header {
background-image: url("header.jpg");
background-repeat: no-repeat;
height: 224;
}
h1 {
color: #ffffff;
padding: 10px;
text-align: left;
}
#nav ul {
list-style: none;
background-color: black;
height: 40px;
margin-top: 0;
color: white;
}
#nav li {
display: inline-block;
padding-top: 10px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 10px;
}
#MainContent {
margin-top: 10px;
padding-top: 20px;
border-top: 1px solid #545454;
background-color: #b6c5a3;
height: 200;
color: #492b40;
font: 11px/12px Verdana, Arial, Helvetica, sans-serif;
}
#col1 {
width: 20%;
height: 30%;
margin-top: 15px;
float: left;
background-color: lightgray;
}
#col2 {
float: left;
margin-left: 1%;
margin-top: 15px;
height: 30%;
width: 20%;
background-color: lightgray;
}
#col3 {
float: left;
margin-top: 15px;
width: 20%;
height: 30%;
margin-left: 1%;
background-color: lightgray;
}
#Content:after {
content: '';
display: block;
clear: both;
}
#footer {
float: left;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #545454;
background-color: #b6c5a3;
height: 60;
width: 950px;
color: #492b40;
font: 11px/12px Verdana, Arial, Helvetica, sans-serif;
}
<html>
<head>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<div id="container">
<header>
<div id="heading">
<h1> Hello there !!! </h1>
</div>
</header>
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Links</li>
</ul>
</div>
</div>
<div id="MainContent">
Main Content
</div>
<div id="Content">
<div id="col1">
Col1
</div>
<div id="col2">
col2
</div>
<div id="col3">
col 3
</div>
</div>
<div id="footer">
<p>Copyright 2004 xyz Association</p>
<p>All rights reserved etc etc..</p>
</div>
</div>
<!--end container-->
</body>
</html>

Your container is closed just after closing div#nav.
Put that closing div at the end and your problem'd be fixed.

I noticed you have more closing tags than you have opening DIVs. As a habit when ever you create a <DIV> be sure to insert </DIV> immediately. To keep track of the opening and closing DIVs. I am guessing this mismatch closing DIVs is likely the cause of your problem.

Fading in an object when hovering over another one

I'd like to slide down a tooltip element when hovering on another element.
I tried using jQuery, but i'm experiencing that nothing will be faded in if I hover on countbox1. countbox1 is a timer made with javascript.
I don't think the script is wrong. I think it doesn't detect jQuery for some reason.
I also tried to download jQuery and put this in the "src:" directly.
$(document).ready(function(){
$("#countbox1").onmouseover(function(){
$("#tooltip").fadeIn();
});
$("#countbox1").onmouseout(function(){
$("#tooltip").fadeOut();
});
});
#countbox1 {
width: 400px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: bebas;
font-size: 70px;
color: white;
cursor: default;
}
#tooltip {
width: 500px;
margin-left: auto;
margin-right: auto;
color: white;
font-family: mix_thin;
font-size: 18px;
text-align: center;
margin-bottom: -5px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="home">
<p id="tooltip">Wochen:Tage:Stunden:Minuten:Sekunden</p>
<div id="countbox1"></div>
<hr style="width: 500px;">
</div>

If all you want is the tooltip to enter the screen on hover of something else, I'd suggest using CSS transition.
If you nest the <p id="tooltip"> within the #countbox1 and put a :hover-event on that, you can get exactly the thing you want.
HTML
<div id=home>
<div id="countbox1">
<p id="tooltip">Wochen:Tage:Stunden:Minuten:Sekunden</p>
</div>
<hr style="width: 500px;">
</div>
CSS
#home {
height: 50%;
background: red;
}
#countbox1 {
width: 400px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: bebas;
font-size: 70px;
color: white;
cursor: default;
height: 50px;
background: #f4f4f4;
}
#countbox1:hover #tooltip {
opacity: 1;
}
#tooltip {
width: 500px;
color: white;
font-family: mix_thin;
font-size: 18px;
text-align: center;
height: 30px;
background: #0000ff;
position: absolute;
left: 50%;
margin-left: -250px;
top: -15px;
opacity: 0;
transition: all 1s;
}
Here's a working demo. Hover over the grey area for the tooltip to enter the view.
Here's a working demo where the tooltip enters the screen from the top.

You might be using deprecated methods.
Replace your code for the one below, and try again:
$(document).on('ready',function(){
$("#countbox1").on('mouseover',function(){
$("#tooltip").stop(true).fadeIn();
});
$("#countbox1").on('mouseout',function(){
$("#tooltip").stop(true).fadeOut();
});
});

You should use mouseover instead of onmouseover:
$(document).ready(function(){
$("#home").mouseover(function(){
$("#tooltip").fadeIn();
});
$("#home").mouseout(function(){
$("#tooltip").fadeOut();
});
});
#countbox1 {
width: 400px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: bebas;
font-size: 70px;
color: white;
cursor: default;
}
#tooltip {
width: 500px;
margin-left: auto;
margin-right: auto;
color: white;
font-family: mix_thin;
font-size: 18px;
text-align: center;
margin-bottom: -5px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<body>
<div id=home>
<p id="tooltip">Wochen:Tage:Stunden:Minuten:Sekunden</p><div id="countbox1"></div>
<hr style="width: 500px;">
</div>
</body>
Check it out also on this JSFiddle.