Develop Reference

Prevent tooltip from overflowing without changing position

.card-container {
border: 1px solid #ccc;
padding: 20px;
width: 200px;
overflow: auto;
}
.card {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.card-content {
position: relative;
padding: 10px;
}
.tooltip {
display: none;
position: absolute;
top: 0;
left: 100%;
background-color: #333;
color: #fff;
padding: 5px;
border-radius: 5px;
}
.card-content:hover .tooltip {
display: inline-block;
}
<div class="card-container">
<div class="card">
<div class="card-content">
<p>This is the main content of the card.</p>
<span class="tooltip">Hover over me to see the tooltip!</span>
</div>
</div>
</br>
<div class="card">
<div class="card-content">
<p>This is the main content of the card.</p>
<span class="tooltip">Hover over me to see the tooltip!</span>
</div>
</div>
</div>
I have a list of cards inside a container that has overflow hidden. I wish to present the tooltip over of the container without changing the size of the container or position of the tooltip.

modal wont close can someone check whats wrong?

my modal seems to be working all ok except for the close button its throwing undefined error and i am unable to close the modal when click on the link.
would really appreciate if someone here could help me out fixing it. i just cannot seem to get where i am going wrong.
here is my complete code and also fiddle for the code is https://jsfiddle.net/j6xt5eok/
<style>
.modal-dialog {
margin: 0 auto !important;
}
.customs-info a {
background-color: #f00;
display: block;
max-width: 90%;
margin: 25px auto 0;
padding: 15px 0;
font-size: 20px;
border-radius: 14px;
}
#boxes {
display: block;
}
#boxes #dialog {
background-color: #ffffff;
border-radius: 10px;
}
#boxes .window {
display: block;
width: 100% !important;
left: 0 !important;
top: 0px !important;
}
.home-page-popup .close {
display: block;
height: 30px;
margin: 0 auto;
opacity: .75;
overflow: hidden;
position: absolute;
right: 12px;
text-indent: 0;
top: 12px;
width: 30px;
}
.close {
float: right;
font-size: 21px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
}
.content_bx {
background: #fff;
height: calc(100vh - 80px);
width: 100%;
}
.main_img_ct {
padding: 20px 0 10px 0px;
}
.main_img_ct {
width: 100%;
margin: 0 auto;
padding: 0;
padding: 20px 0 50px 0px;
background-color: #FFF;
}
.cont_bx2 {
width: 100%;
text-align: center;
margin-top: 15%;
}
.cont_bx2 h1 {
font-size: 28px;
font-weight: bolder;
color: #ff0000;
margin-bottom: 25px;
text-transform: uppercase;
}
.cont_bx2 a {
font-size: 22px;
}
.fa-2x {
font-size: 30px !important;
margin: 0 7px 0 0;
}
.cont_bx2 a {
font-size: 31px;
color: #009FF1;
font-weight: 700;
text-decoration: none;
text-align: center;
border-radius: 46px;
line-height: normal;
width: 68%;
margin: 0 auto;
text-shadow: #000 0 1px 1px;
margin-top: 20px;
font-weight: normal;
padding: 10px;
border-radius: 10px;
font-weight: bold;
color: #fff;
background-color: #009FF1;
}
.cont_bx2 h4 {
font-size: 22px;
text-align: center;
margin-bottom: 15px;
font-weight: bold;
color: #5F5F63 !important;
font-family: mallory,helveticaneue-bold,helvetica neue,Helvetica,Arial,sans-serif;
margin: 23px 0;
}
.cont_bx2 p strong {
font-size: 22px;
display: block;
margin: 0;
}
.cont_bx2 p {
font-size: 16px;
line-height: 1.5;
font-family: mallory,helveticaneue-bold,helvetica neue,Helvetica,Arial,sans-serif;
color: #02416c;
margin: 10px 0;
}
.cont_bx2 {
width: 100%;
text-align: center;
margin-top: 15%;
}
.cont_bx2 p {
font-size: 16px;
line-height: 1.5;
font-family: mallory,helveticaneue-bold,helvetica neue,Helvetica,Arial,sans-serif;
color: #02416c;
margin: 10px 0;
}
.lakdi_pn {
text-align: center;
overflow: hidden;
margin-top: 20px;
}
.phon-img a img {
width: 35%;
margin: 10px auto;
display:block;
}
.phon-img {
text-align: center;
font-size: 23px;
}
.phon-img a {
color: #000;
}
.modal-dialog {
margin: 0;
}
.home-page-popup a#close_id img {
width: 20px;
}
</style>
<div id="myModal" class="modal " role="dialog" style="display:block">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div id="boxes">
<div class="home-page-popup">
<div style="display: block;" id="dialog" class="window">
<a href="javaScript:void(0);" data-dismiss="modal" id="close_id" onclick="close_dilog(this.id)" class="close">
<img src="img/close-icon.png" alt="close" width="30" height="20"> </a>
<div class="popup-dsgn-box">
<div class="content_bx">
<div class="main_img_ct">
<div class="cont_bx2">
<h1> For Customer Service </h1>
<a href="tel:+1 (000) 000-0000" style="">
<i class="fa fa-phone fa-2x"></i>+1 (000) 000-0000</a>
<h4>EXCLUSIVE DEALS!</h4>
<p style="color:#000 !important; padding:0 10px;"><strong>Call Us Now To Book,</strong> Change or Cancel Reservations and <strong>Get upto 50% OFF</strong></p>
</div>
<div class="row">
<div class="col-md-12">
<div class="phon-img">
<a href="tel:+1 (000) 000-0000">
<img src="img/mobile-phone.png" alt="mobile">
Click to Call
</a>
</div>
</div>
<div class="col-md-12">
<div class="flat-address" style="text-align: center;">
<div class="customs-info">
Call Now: <i class="fa fa-phone-square"></i> +1 (000) 000-0000
</div>
</div><!-- /.top-navigator -->
</div><!-- /.col-md-4 -->
</div>
</div>
</div>
</div>
</div>
<!--<div id="mask" style="display: block; width: 1349px; height: 2538px; opacity: 0.8;"></div>-->
</div>
</div>
</div>
</div>
</div>
thanks alot in advance, really appreciate your help

Content Editable not saving with localStorage

I have created a basic content editable section using the tutorial from this website. HTML 5 Contenteditable
I have made a save button within the .toolbar at the top. When I go to change the text and press the .saveContent button, it doesn't save the content to localStorage so once refreshed, it disappears and goes back to the default text.
I have made the page as a .php page due to a login system I have made, would this be a factor at all in why it isn't working.
Code Here:
var theContent = $('#editable');
$('.saveContent').on('click', function() {
var editedContent = theContent.html();
localStorage.newContent = editedContent;
});
if(localStorage.getItem('newContent')) {
theContent.html(localStorage.getItem('newContent'));
}
/* ~ Copyright (c) Summit Learning Management System (made by students, for students). 2019. */
html > body {
overflow: hidden;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Trebuchet MS', sans-serif;
}
#wrapper {
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #1B315E;
}
.backdrop {
background-image: url(Assets/Images/backdrop.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.loginBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 320px;
height: 420px;
background: rgba(0,0,0,0.6);
color: #FFF;
padding: 40px 30px;
box-sizing: border-box;
}
.loginBox p {
margin: 0;
padding: 0;
font-weight: bold;
}
.loginBox input {
width: 100%;
margin-bottom: 20px;
}
.loginBox input[type="text"], input[type="password"] {
border: none;
outline: none;
border-bottom: 1px solid #FFF;
background: transparent;
height: 40px;
font-size: 14px;
color: #FFF;
}
.loginBox input[type="submit"] {
border: none;
outline: none;
height: 40px;
font-size: 16px;
color: #FFF;
background: #777;
font-weight: bold;
}
.loginBox input[type="submit"]:hover {
cursor: pointer;
color: #FFF;
background: #888;
}
.institution, .message {
font-size: 12px;
text-align: justify;
}
* {
box-sizing: border-box;
}
.navigation {
background: #333;
overflow: hidden;
font-family: 'Trebuchet MS', sans-serif;
}
.navLinks {
margin-top: 8px;
margin-right: 4px;
float: right;
border: none;
outline: none;
color: #1B315E;
background: #B6B6B6;
padding: 4px 6px;
font-size: 16px;
text-align: center;
}
.navLinks:hover {
background: #A5A5A5;
}
.menuDropDown {
float: left;
overflow: hidden;
}
.menuDropDown > .menuButton {
border: none;
outline: none;
color: #FFF;
background: inherit;
font: inherit;
margin: 0;
font-size: 16px;
padding: 12px 6px;
}
.menuButton:hover, .navigation > .menuDropDown:hover > .menuButton {
background: #999;
color: #1B315E;
outline: none;
border: none;
}
.menuContent {
display: none;
width: 100%;
background: none;
position: absolute;
z-index: 1;
left: 0;
overflow: auto;
max-height: 85vh;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.menuDropDown:hover > .menuContent {
display: block;
}
.menuColumn {
float: left;
width: 25%;
padding: 8px;
overflow-y: auto;
background: #999;
height: 235px;
}
.menuColumn > a {
float: none;
color: #1B315E;
padding: 10px;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
}
.menuRow:after {
content: "";
display: table;
clear: both;
}
.menuColumn > a:hover {
background: #A5A5A5;
}
.menuColumn > a.current {
background: #B6B6B6;
}
.menuHeader {
color: #1B315E;
margin-top: 0px;
margin-bottom: 8px;
}
.workspaceMain {
float: left;
width: 72.5%;
height: calc(100vh - 43px);
position: relative;
overflow: auto;
padding-right: 2px;
background: #FFF;
}
.toolbar {
background: #777;
border-bottom: 1px solid #666;
}
.toolbar > .saveContent {
color: #1B315E;
border: none;
outline: none;
background: #B6B6B6;
padding: 6px 6px;
font-size: 12px;
font: inherit;
}
.saveContent, .saveContent:hover, .toolLinks:hover {
background: #A5A5A5;
}
.toolLinks {
margin-top: 2px;
margin-right: 4px;
float: right;
border: none;
outline: none;
color: #1B315E;
background: #B6B6B6;
padding: 4px 6px;
font-size: 16px;
text-align: center;
}
.mainHeader {
text-align: center;
color: #1B315E;
}
table {
width: 100%;
font-size: 12px;
}
.tableName {
color: #1B315E;
font-size: 14px;
font-weight: bold;
}
<!DOCTYPE HTML>
<!--
~ Copyright (c) Summit Learning Management System (made by students, for students). 2019.
-->
<html lang="en-AU">
<head>
<title>Welcome — Summit — School Name</title>
<link rel="stylesheet" type="text/css" href="../style.css"> <!-- Internal Stylesheet -->
<script src="https://kit.fontawesome.com/d3afa470fb.js"></script> <!-- Vector Icons -->
<link rel="shortcut icon" href="../Assets/Images/favicon.png"> <!-- Favicon -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<?php
session_start();
if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] == false ) {
header("Location: index.php");
}
?>
<div id="wrapper">
<div class="navigation">
<button class="navLinks" title="Logout"><i class="fas fa-sign-out-alt"></i></button>
<button class="navLinks" title="Help"><i class="fas fa-question-circle"></i></button>
<button class="navLinks" title="Quick Links"><i class="fas fa-bookmark"></i></button>
<div class="menuDropDown">
<button class="menuButton" title="Site Navigation"><i class="fas fa-bars"></i> Menu</button>
<div class="menuContent">
<div class="menuRow">
<div class="menuColumn"> <!-- Home Workspace -->
<h5 class="menuHeader">Home Workspace</h5>
<i class="fas fa-door-open"></i> Welcome
</div>
<div class="menuColumn"> <!-- Learning Workspace -->
</div>
<div class="menuColumn"> <!-- Student Management Workspace -->
</div>
<div class="menuColumn"> <!-- Administration Workspace -->
</div>
</div>
</div>
</div>
</div>
<div class="workspaceMain">
<div class="toolbar">
<button class="saveContent" title="Save Changes"><i class="fas fa-save"></i> Save</button>
<button class="toolLinks" title="Collapse Panel"><i class="fas fa-arrow-right"></i></button>
<button class="toolLinks" title="Change Background Colour"><i class="fas fa-fill-drip"></i></button>
</div>
<h3 class="mainHeader" id="editable" contenteditable="true">SCHOOL NAME</h3>
<table class="tableSet" id="editable" contenteditable="true">
<caption class="tableName">Weekly Outline</caption>
</table>
</div>
<div class="workspaceSide"></div>
</div>
</body>
</html>
Any help would be greatly appreciated.
Thanks, Tom

You need to use localStorage.setItem('key', value) to store the value in local storage
Your will then look like:
var theContent = $('#editable');
$('.saveContent').on('click', function() {
var editedContent = theContent.html();
localStorage.setItem('newContent',editedContent)
});

You are using the id "editable" twice, could you change that and retry?

<span (focusout)="JumpTo()" contenteditable="true">Click to Change text</span>
JumpTo(){
var contenteditable = document.querySelector('[contenteditable]');
localStorage.setItem('newContent',contenteditable.textContent);
}
If you want to change it instantly use ngOnChanges()

How can I horizontally center 3 divs?

So I have 3 cards that I am going to put my projects inside, and I need them to be perfectly centered horizontally. I have tried many things but none have worked so far.
Here is the code for the cards.
.card {
background: #fff;
border-radius: 3px;
display: inline-block;
height: 300px;
margin: 1rem;
position: relative;
width: 290px;
overflow: hidden;
opacity: 1;
}
.card .topImage {
display: inline-flex;
width: 100%;
height: 220px;
overflow: hidden;
align-content: center;
}
.topImage {
background-color: rgba(0, 0, 0, .3);
}
.card .topImage img {
height: 220px;
}
.card .bottom {
height: 80px;
width: 100%;
}
.card .bottom p {
text-align: left;
height: 80px;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
padding-left: 20px;
display: flex;
align-items: center;
text-decoration: none;
color: #444;
font-size: 18px;
font-family: Roboto, sans-serif;
}
.card-1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card-1:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
cursor: pointer;
}
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 1</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 2</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 3</p>
</div>
</div>

Just use flexbox. Make a container for the cards and put display: flex; on it and then justify-content: center to center them no matter the size of the new container div
.card {
background: #fff;
border-radius: 3px;
display: inline-block;
height: 300px;
margin: 1rem;
position: relative;
width: 290px;
overflow: hidden;
opacity: 1;
}
.card .topImage {
display: inline-flex;
width: 100%;
height: 220px;
overflow: hidden;
align-content: center;
}
.topImage {
background-color: rgba(0, 0, 0, .3);
}
.card .topImage img {
height: 220px;
}
.card .bottom {
height: 80px;
width: 100%;
}
.card .bottom p {
text-align: left;
height: 80px;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
padding-left: 20px;
display: flex;
align-items: center;
text-decoration: none;
color: #444;
font-size: 18px;
font-family: Roboto, sans-serif;
}
.card-1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card-1:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
cursor: pointer;
}
.card-container {
display: flex;
justify-content: center;
}
<div class="card-container">
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 1</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 2</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 3</p>
</div>
</div>
</div>

Using flexbox this is easy. On the element that contains your divs just add display: flex; and justify-content: center;:
.card {
background: #fff;
border-radius: 3px;
display: inline-block;
height: 300px;
margin: 1rem;
position: relative;
width: 290px;
overflow: hidden;
opacity: 1;
}
.card .topImage {
display: inline-flex;
width: 100%;
height: 220px;
overflow: hidden;
align-content: center;
}
.topImage {
background-color: rgba(0, 0, 0, .3);
}
.card .topImage img {
height: 220px;
}
.card .bottom {
height: 80px;
width: 100%;
}
.card .bottom p {
text-align: left;
height: 80px;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
padding-left: 20px;
display: flex;
align-items: center;
text-decoration: none;
color: #444;
font-size: 18px;
font-family: Roboto, sans-serif;
}
.card-1 {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.card-1:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
cursor: pointer;
}
body {
display: flex;
justify-content: center;
}
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 1</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 2</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 3</p>
</div>
</div>

Create a parent with text-align: center
.card {
background: #fff;
border-radius: 3px;
display: inline-block;
height: 300px;
margin: 1rem;
position: relative;
width: 290px;
overflow: hidden;
opacity: 1;
}
.card .topImage {
display: inline-flex;
width: 100%;
height: 220px;
overflow: hidden;
align-content: center;
}
.topImage {
background-color: rgba(0, 0, 0, .3);
}
.card .topImage img {
height: 220px;
}
.card .bottom {
height: 80px;
width: 100%;
}
.card .bottom p {
text-align: left;
height: 80px;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
padding-left: 20px;
display: flex;
align-items: center;
text-decoration: none;
color: #444;
font-size: 18px;
font-family: Roboto, sans-serif;
}
.card-1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card-1:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
cursor: pointer;
}
.parent {
text-align: center;
}
<div class="parent">
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 1</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 2</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 3</p>
</div>
</div>
</div>

Use translateX and left rules to position them.
.card {
background: #fff;
border-radius: 3px;
display: inline-block;
height: 300px;
margin: 1rem;
position: relative;
width: 290px;
overflow: hidden;
opacity: 1;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.card .topImage {
display: inline-flex;
width: 100%;
height: 220px;
overflow: hidden;
align-content: center;
}
.topImage {
background-color: rgba(0, 0, 0, .3);
}
.card .topImage img {
height: 220px;
}
.card .bottom {
height: 80px;
width: 100%;
}
.card .bottom p {
text-align: left;
height: 80px;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
padding-left: 20px;
display: flex;
align-items: center;
text-decoration: none;
color: #444;
font-size: 18px;
font-family: Roboto, sans-serif;
}
.card-1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card-1:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
cursor: pointer;
}
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 1</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 2</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 3</p>
</div>
</div>

link didn't work outside of div in notification dropdown menu?

I am creating Notification section, where the link is provided on Notification in dropdown menu, but the link on Notification is not working, it is showing the link which i provided in left bottom of the browser but it can't clickable?
HTML
<i class="fa fa-globe"><span class="badge badge-notify">.</span></i>
<div id="notificationContainer">
<div id="notificationTitle">Notifications</div>
<div id="notificationsBody" class="notifications">
<div class="col-sm-12 col-md-12 col-lg-12">
<a href="notifications.php#1" id="details-container-notification">
<ul class="area-notification">
<li>
<div class="profile-image-notification">
<div id="profile-container-notification">
<image id="profileImageNotification" src="../images/img_avatar.png" />
</div>
</div>
</li>
<li class="description-notification"><p>KEntury Fried Chicken, KFC is now following you is now following you, can you want to follow back him , Thanks.</p></li>
</ul>
</a>
</div>
</div>
</div>
CSS
#notificationContainer {
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: hidden;
position: absolute;
top: 40px;
margin-left: -250px;
width: 400px;
display: none;
z-index: 1;
}
#notificationTitle {
z-index: 1000;
padding: 8px;
font-size: 18px;
background-color: #ffffff;
width: 384px;
border-bottom: 1px solid #dddddd;
font-family:Bookman Old Style ;
}
#notificationsBody {
padding: 0px 0px 0px 0px !important;
min-height:100px;
font-family:Bookman Old Style ;
margin-bottom:0px;
}
#details-container-notification{
margin-top:0%;
text-decoration:none;
float:left;
width:100%;
margin-left:0%;
font-size: 14px;
word-spacing: 1px;
line-height: 150%;
color: darkblack;
text-decoration:none;
font-family:Bookman Old Style ;
border-bottom:1px solid #f5f8fa;
padding:10px;
}
#details-container-notification:hover{
background-color:#fafafa;
}
.area-notification{
width:100%;
}
#profile-container-notification {
float:left;
margin-left:0%;
margin-right:2%;
width: 60px;
height: 60px;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
margin-bottom:15px;
}
#profile-container-notification img {
width: 60px;
height: 60px;
}
#notificationFooter{
background-color: #e9eaed;
text-align: center;
padding: 8px;
width:100%;
font-size: 18px;
border-top: 1px solid #dddddd;
text-decoration:none;
font-family:Bookman Old Style ;
}
.badge-notify{
background:#3897f0;
position:relative;
top: -10px;
left: -35px;
}
JSFIDDLE:- https://jsfiddle.net/r33osLt9/1/

i don't know exactly what your issue , if my thought is right remove
return false from you js , check with working fiddle
$("#notificationContainer").click(function() {
//return false
});
https://jsfiddle.net/r33osLt9/2/
just try with this also
$(function(){
$("#notificationLink").on('click', function(e){
e.preventDefault(); /* this will block the link */
e.stopPropagation();
$("#notificationContainer").slideToggle(300);
});
$("#settingLink").on('click', function(e){
e.preventDefault(); /* this will block the link */
e.stopPropagation();
$("#settingContainer").fadeToggle(300);
});
$(document).on('click', function(){
$("#notificationContainer").hide();
$("#settingContainer").hide();
});
});
.navigation {
width: 100%;
height: 70px;
background-color: #fafafa;
margin-bottom: 1%;
}
#notificationContainer {
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: hidden;
position: absolute;
top: 40px;
margin-left: 0px;
width: 400px;
display: none;
z-index: 1;
}
#notificationTitle {
z-index: 1000;
padding: 8px;
font-size: 18px;
background-color: #ffffff;
width: 384px;
border-bottom: 1px solid #dddddd;
font-family: Bookman Old Style;
}
#notificationsBody {
padding: 0px 0px 0px 0px !important;
min-height: 100px;
font-family: Bookman Old Style;
margin-bottom: 0px;
}
#details-container-notification {
margin-top: 0%;
text-decoration: none;
float: left;
width: 100%;
margin-left: 0%;
font-size: 14px;
word-spacing: 1px;
line-height: 150%;
color: darkblack;
text-decoration: none;
font-family: Bookman Old Style;
border-bottom: 1px solid #f5f8fa;
padding: 10px;
}
#details-container-notification:hover {
background-color: #fafafa;
}
.area-notification {
width: 100%;
}
#profile-container-notification {
float: left;
margin-left: 0%;
margin-right: 2%;
width: 60px;
height: 60px;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
margin-bottom: 15px;
}
#profile-container-notification img {
width: 60px;
height: 60px;
}
#notificationFooter {
background-color: #e9eaed;
text-align: center;
padding: 8px;
width: 100%;
font-size: 18px;
border-top: 1px solid #dddddd;
text-decoration: none;
font-family: Bookman Old Style;
}
.badge-notify {
background: #3897f0;
position: relative;
top: -10px;
left: -35px;
}
#settingContainer {
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: hidden;
position: absolute;
top: 40px;
margin-left: 0px;
width: 180px;
display: none;
z-index: 1;
}
#settingsBody {
padding: 10px 0px 0px 0px !important;
height: 50px;
font-family: Bookman Old Style;
}
.area-setting {
width: 100%;
}
#details-container-setting {
text-decoration: none;
float: left;
width: 100%;
margin-left: 1%;
font-size: 18px;
word-spacing: 1px;
color: darkblack;
text-decoration: none;
font-family: Bookman Old Style;
line-height: 50%;
margin-bottom: 10px;
margin-top: 0%;
padding: 10px;
}
#details-container-setting:hover {
background-color: #fafafa;
}
.icon-bar a {
width: 50px;
float: left;
font-size: 30px;
color: black;
}
.icon1 {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="navigation">
<div class="icon-bar"> <i class="fa fa-search"><span></span></i> <i class="fa fa-envelope"><span class="badge badge-notify">.</span></i> <i class="fa fa-globe"><span class="badge badge-notify">.</span></i>
<div id="notificationContainer">
<div id="notificationTitle">Notifications</div>
<div id="notificationsBody" class="notifications">
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="notifications.php#1" id="details-container-notification">
<ul class="area-notification">
<li>
<div class="profile-image-notification">
<div id="profile-container-notification">
<image id="profileImageNotification" src="http://www.w3schools.com/w3css/img_avatar3.png" />
</div>
</div>
</li>
<li class="description-notification">
<p>KEntury Fried Chicken, KFC is now following you is now following you, can you want to follow back him , Thanks.</p>
</li>
</ul>
</a> </div>
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="notifications.php#2" id="details-container-notification">
<ul class="area-notification">
<li>
<div class="profile-image-notification">
<div id="profile-container-notification">
<image id="profileImageNotification" src="http://www.w3schools.com/w3css/img_avatar3.png" />
</div>
</div>
</li>
<li>
<p class="description-notification">KEntury Fried Chicken</p>
</li>
</ul>
</a> </div>
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="notifications.php#3" id="details-container-notification">
<ul class="area-notification">
<li>
<div class="profile-image-notification">
<div id="profile-container-notification">
<image id="profileImageNotification" src="http://www.w3schools.com/w3css/img_avatar3.png" />
</div>
</div>
</li>
<li>
<p class="description-notification">KFC</p>
</li>
</ul>
</a> </div>
</div>
<a href="notifications.php" id="notificationFooter">
<p>See All</p>
</a> </div>
<i class="fa fa-cog"></i>
<div id="settingContainer">
<div id="settingsBody" class="setting">
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="../edit-profile/edit-profile.php" id="details-container-setting">
<ul class="area-setting">
<li>
<p class="description-setting">Setting</p>
</li>
</ul>
</a> </div>
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="../logout/logout.php" id="details-container-setting">
<ul class="area-setting">
<li>
<p class="description-setting">Logout</p>
</li>
</ul>
</a> </div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Your tag a needs to have display:block.
If not, the tag a cannot contain a block element. Because of a rule of html the unblock-level element cannot have the block-level element inside. If you do, the unblock-level one will not work well.