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

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.

Related

How do I fix the Notification box caret?

I have created a messages notification using Bootstrap dropdown. If you see I have added a caret to represent that the caret belongs to the message icon now when I'm normally checking including the responsive design the caret moves away from the message notification icon.
I want the caret to be fixed under the messages icon in any design including mobile devices.
Can someone help me with this issue, please?
P.S: I tried adding right Bootstrap files but it seems like I was not been able to add them that's why I'm leaving a JS fiddle link too!
.top-head {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
background: #FFFFFF;
width: 100%;
float: left;
height: 50px;
}
.top-head h1 {
color: #fff;
font-size: 26px;
font-weight: 600;
line-height: 50px;
margin-bottom: 0px;
}
.top-menu-right {
float: right;
}
.top-head .user-bar {
text-align: right;
float: right;
}
.top-head .user-bar a {
color: rgba(0, 0, 0, .7);
font-size: 15px;
font-weight: 400;
line-height: 49px;
position: relative;
padding: 0 7px;
}
.top-head .user-bar a:hover {
color: #02b875;
}
.top-head .user-bar a i {
margin-right: 6px;
}
.top-head .user-bar .ping {
background: #02b875;
border-radius: 50%;
height: 10px;
position: absolute;
right: 9px;
top: 13px;
width: 10px;
z-index: 1;
}
.top-head .user-bar img {
float: left;
height: 32px;
width: 32px;
margin-top: 9px;
}
/* DROPDOWN MENU */
.dropbtn {
color: rgba(0, 0, 0, .7);
padding: 13px 7px;
font-size: 15px;
border: none;
margin-top: 0px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 180px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 999;
float: left;
text-align: left;
}
.dropdown-content a {
text-decoration: none;
display: block;
padding: 10px 25px 10px 15px !important;
line-height: 1.42857 !important;
}
.dropdown-content a:hover {
color: #02b875;
text-decoration: none;
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #fff;
color: #02b875;
}
.dropdown-divider {
height: 0;
margin: 0px;
overflow: hidden;
border-top: 1px solid #e9ecef;
}
.dropdown-menu-arrow {
top: -25px;
left: 27.2%;
width: 0;
height: 0;
position: relative;
}
.dropdown-menu-arrow:before,
.dropdown-menu-arrow:after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-width: 11px 12px;
border-style: solid;
border-color: transparent;
z-index: 1001;
}
.dropdown-menu-arrow:after {
bottom: -17px;
right: -8px;
border-bottom-color: #fff;
}
.dropdown-menu-arrow:before {
bottom: -16px;
right: -8px;
border-bottom-color: rgba(0, 0, 0, .15);
}
/* ========== Navigation Start ========== */
.account-name {
font-weight: 600;
}
/* NOTIFICATION */
.notification {
color: rgba(0, 0, 0, .7) !important;
font-size: 17px !important;
}
.notification:hover,
.messages:hover {
color: #183247;
}
.notification-imp {
font-weight: 600;
color: #1d2129;
}
.messages {
color: rgba(0, 0, 0, .7) !important;
font-size: 17px !important;
margin-left: -5px !important;
}
/* Message DropBox*/
.message-box {
min-width: 430px;
background-color: #fff;
padding-bottom: 0px;
border-radius: 0px;
border: 1px solid #e2e2e2 !important;
position: absolute !important;
margin-left: -99px;
top: -1px !important;
z-index: 1001;
}
/* Message Heading */
.message-box .msg-title {
border-bottom: 1px solid #e2e2e2;
padding: 0px 15px 8px 15px;
font-size: 13px;
}
/* Message Notification */
.messages-noti {
font-weight: 600;
}
/* Message Content */
.message-box .msg-box-content {
min-height: 380px;
max-height: 280px;
overflow-y: scroll;
z-index: 1001;
}
/* Message Image Container */
.msg-box-content .msg-img {
float: left;
display: inline-block;
width: 55px;
height: 45px;
margin: 0px 0px 8px 0px;
}
/* Messsage Image */
.msg-box-content .msg-img img {
width: 40px;
height: 40px;
}
.message-box .msg-box-content a {
display: block;
font-size: 13px;
font-weight: 600;
padding-top: 10px;
padding-bottom: 5px;
padding-right: 17px;
padding-left: 0px;
line-height: inherit;
border-bottom: 1px solid #e2e2e2;
}
.message-box .msg-box-content a:hover {
color: rgb(0, 0, 0, .7);
background-color: #fafafa;
text-decoration: none;
}
.message-box .msg-box-content .pd-l0 {
padding-left: 0px;
}
/* Message box scroller hides */
.message-box .msg-box-content::-webkit-scrollbar,
.message-box .msg-box-content::-webkit-scrollbar-thumb {
display: none;
}
.message-box .msg-box-content p {
font-size: 13px;
color: #1d2129;
font-weight: normal;
margin: 1px 0px 8px 0px;
}
.message-box .msg-box-content p.time {
font-size: 12px;
font-weight: 600;
margin: 0px -55px 0px 0px;
position: relative;
display: inline-block;
color: #90949c;
}
/* Unread Notification */
.message-box .msg-box-content>a:nth-child(2n+0) {
background-color: #fafafa;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<div class="top-head fixed-top">
<div class="container container-responsive">
<div class="row">
<div class="col-md-10 col-lg-9 user-bar">
<div class="top-menu-right">
<nav class="nav nav-inline">
Register
Login
<!-- START OF MESSAGES NOTIFICATIONS -->
<div class="dropdown">
<span class="ping"></span><i class="far fa-comment-alt"></i>
<div class="dropdown-menu message-box">
<span class="dropdown-menu-arrow"></span>
<div class="msg-title">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">Messages (<span class="messages-noti">4</span>)</div>
</div>
</div>
<div class="msg-box-content">
<!-- Message Block -->
<a href="subscription.php">
<!-- User Image -->
<div class="col-3">
<div class="msg-img">
<img src="http://grafreez.com/wp-content/temp_demos/river/img/admin-bg.jpg">
</div>
</div>
<!-- User Name -->
<div class="col-9 pd-l0 float-left">
<span class="col-6 pl-0">
John Smith
</span>
<!-- Timestamp -->
<span class="col-6">
<p class="time float-right">2m ago</p>
</span>
</div>
<!-- User Message -->
<div class="col-12">
<p>Hey! Can you please send me your Post Code and your ...</p>
</div>
</a>
<a href="subscription.php">
<div class="col-3">
<div class="msg-img">
<img src="http://grafreez.com/wp-content/temp_demos/river/img/admin-bg.jpg">
</div>
</div>
<div class="col-9 pd-l0 float-left">
<span class="col-6 pl-0">
John Smith
</span>
<span class="col-6">
<p class="time float-right">2m ago</p>
</span>
</div>
<div class="col-12">
<p>Hey! Can you please send me your Post Code and your ...</p>
</div>
</a>
<a href="subscription.php">
<div class="col-3">
<div class="msg-img">
<img src="http://grafreez.com/wp-content/temp_demos/river/img/admin-bg.jpg">
</div>
</div>
<div class="col-9 pd-l0 float-left">
<span class="col-6 pl-0">
John Smith
</span>
<span class="col-6">
<p class="time float-right">2m ago</p>
</span>
</div>
<div class="col-12">
<p>Hey! Can you please send me your Post Code and your ...</p>
</div>
</a>
</div>
</div>
</div>
<!-- END OF MESSAGES NOTIFICATIONS -->
</nav>
<!-- END OF NAV BAR -->
</div>
<!-- END OF TOP MENU RIGHT -->
</div>
<!-- END OF COLUMN USER-BAR -->
</div>
<!-- END OF ROW -->
</div>
<!-- END OF CONTAINER -->
</div>
<!-- END OF NAVIGATION -->
https://jsfiddle.net/dmronev0/

Mostly HTML Devs have this issue, but the solution it's very simple you don't need to add arrow icon in your hidden container. You should add arrow icon in the bottom of the button where you click/hover. It will not disturb the UI. I just update your code with few changes i hope it'll help you out. Thanks
.top-head {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
background: #FFFFFF;
width: 100%;
float: left;
height: 50px;
}
.top-head h1 {
color: #fff;
font-size: 26px;
font-weight: 600;
line-height: 50px;
margin-bottom: 0px;
}
.top-menu-right {
float: right;
}
.top-head .user-bar {
text-align: right;
float: right;
}
.top-head .user-bar a {
color: rgba(0, 0, 0, .7);
font-size: 15px;
font-weight: 400;
line-height: 49px;
position: relative;
padding: 0 7px;
}
.top-head .user-bar a:hover {
color: #02b875;
}
.top-head .user-bar a i {
margin-right: 6px;
}
.top-head .user-bar .ping {
background: #02b875;
border-radius: 50%;
height: 10px;
position: absolute;
right: 9px;
top: 13px;
width: 10px;
z-index: 1;
}
.top-head .user-bar img {
float: left;
height: 32px;
width: 32px;
margin-top: 9px;
}
/* DROPDOWN MENU */
.dropbtn {
color: rgba(0, 0, 0, .7);
padding: 13px 7px;
font-size: 15px;
border: none;
margin-top: 0px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 180px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 999;
float: left;
text-align: left;
}
.dropdown-content a {
text-decoration: none;
display: block;
padding: 10px 25px 10px 15px !important;
line-height: 1.42857 !important;
}
.dropdown-content a:hover {
color: #02b875;
text-decoration: none;
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #fff;
color: #02b875;
}
.dropdown-divider {
height: 0;
margin: 0px;
overflow: hidden;
border-top: 1px solid #e9ecef;
}
.dropdown-menu-arrow {
display: none;
bottom: 16px;
left: 20px;
position: absolute;
z-index: 1002;
}
.dropdown-menu-arrow:before,
.dropdown-menu-arrow:after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-width: 11px 12px;
border-style: solid;
border-color: transparent;
z-index: 1001;
}
.dropdown-menu-arrow:after {
bottom: -17px;
right: -8px;
border-bottom-color: #fff;
}
.dropdown-menu-arrow:before {
bottom: -16px;
right: -8px;
border-bottom-color: rgba(0, 0, 0, .15);
}
/* ========== Navigation Start ========== */
.account-name {
font-weight: 600;
}
/* NOTIFICATION */
.notification {
color: rgba(0, 0, 0, .7) !important;
font-size: 17px !important;
}
.notification:hover,
.messages:hover {
color: #183247;
}
.notification-imp {
font-weight: 600;
color: #1d2129;
}
.messages {
color: rgba(0, 0, 0, .7) !important;
font-size: 17px !important;
margin-left: -5px !important;
}
/* Message DropBox*/
.message-box {
min-width: 430px !important;
background-color: #fff;
padding-bottom: 0px;
border-radius: 0px;
border: 1px solid #e2e2e2 !important;
position: absolute !important;
margin-left: -99px;
top: 42px !important;
z-index: 1001;
}
/* Message Heading */
.message-box .msg-title {
border-bottom: 1px solid #e2e2e2;
padding: 0px 15px 8px 15px;
font-size: 13px;
}
/* Message Notification */
.messages-noti {
font-weight: 600;
}
/* Message Content */
.message-box .msg-box-content {
min-height: 380px;
max-height: 280px;
overflow-y: scroll;
z-index: 1001;
}
/* Message Image Container */
.msg-box-content .msg-img {
float: left;
display: inline-block;
width: 55px;
height: 45px;
margin: 0px 0px 8px 0px;
}
/* Messsage Image */
.msg-box-content .msg-img img {
width: 40px;
height: 40px;
}
.message-box .msg-box-content a {
display: block;
font-size: 13px;
font-weight: 600;
padding-top: 10px;
padding-bottom: 5px;
padding-right: 17px;
padding-left: 0px;
line-height: inherit;
border-bottom: 1px solid #e2e2e2;
}
.message-box .msg-box-content a:hover {
color: rgb(0, 0, 0, .7);
background-color: #fafafa;
text-decoration: none;
}
.message-box .msg-box-content .pd-l0 {
padding-left: 0px;
}
/* Message box scroller hides */
.message-box .msg-box-content::-webkit-scrollbar,
.message-box .msg-box-content::-webkit-scrollbar-thumb {
display: none;
}
.message-box .msg-box-content p {
font-size: 13px;
color: #1d2129;
font-weight: normal;
margin: 1px 0px 8px 0px;
}
.message-box .msg-box-content p.time {
font-size: 12px;
font-weight: 600;
margin: 0px -55px 0px 0px;
position: relative;
display: inline-block;
color: #90949c;
}
.dropdown.show .dropdown-menu-arrow {
display: block;
}
/* Unread Notification */
.message-box .msg-box-content>a:nth-child(2n+0) {
background-color: #fafafa;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<div class="top-head fixed-top">
<div class="container container-responsive">
<div class="row">
<div class="col-md-10 col-lg-9 user-bar">
<div class="top-menu-right">
<nav class="nav nav-inline">
Register
Login
<!-- START OF MESSAGES NOTIFICATIONS -->
<div class="dropdown">
<a href="#" class="nav-link messages" data-toggle="dropdown">
<span class="ping"></span>
<i class="far fa-comment-alt"></i>
<span class="dropdown-menu-arrow"></span>
</a>
<div class="dropdown-menu message-box">
<div class="msg-title">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">Messages (<span class="messages-noti">4</span>)</div>
</div>
</div>
<div class="msg-box-content">
<!-- Message Block -->
<a href="subscription.php">
<!-- User Image -->
<div class="col-3">
<div class="msg-img">
<img src="http://grafreez.com/wp-content/temp_demos/river/img/admin-bg.jpg">
</div>
</div>
<!-- User Name -->
<div class="col-9 pd-l0 float-left">
<span class="col-6 pl-0">
John Smith
</span>
<!-- Timestamp -->
<span class="col-6">
<p class="time float-right">2m ago</p>
</span>
</div>
<!-- User Message -->
<div class="col-12">
<p>Hey! Can you please send me your Post Code and your ...</p>
</div>
</a>
<a href="subscription.php">
<div class="col-3">
<div class="msg-img">
<img src="http://grafreez.com/wp-content/temp_demos/river/img/admin-bg.jpg">
</div>
</div>
<div class="col-9 pd-l0 float-left">
<span class="col-6 pl-0">
John Smith
</span>
<span class="col-6">
<p class="time float-right">2m ago</p>
</span>
</div>
<div class="col-12">
<p>Hey! Can you please send me your Post Code and your ...</p>
</div>
</a>
<a href="subscription.php">
<div class="col-3">
<div class="msg-img">
<img src="http://grafreez.com/wp-content/temp_demos/river/img/admin-bg.jpg">
</div>
</div>
<div class="col-9 pd-l0 float-left">
<span class="col-6 pl-0">
John Smith
</span>
<span class="col-6">
<p class="time float-right">2m ago</p>
</span>
</div>
<div class="col-12">
<p>Hey! Can you please send me your Post Code and your ...</p>
</div>
</a>
</div>
</div>
</div>
<!-- END OF MESSAGES NOTIFICATIONS -->
</nav>
<!-- END OF NAV BAR -->
</div>
<!-- END OF TOP MENU RIGHT -->
</div>
<!-- END OF COLUMN USER-BAR -->
</div>
<!-- END OF ROW -->
</div>
<!-- END OF CONTAINER -->
</div>
<!-- END OF NAVIGATION -->

My HTML div tag won't include the list and also won't show the bottom border

My div tag named 2nd-bar won't show up below navigation bar and also won't show bottom border and due to that also my list elements won't come inside it.
I am new to HTML and CSS so would be glad to get some help, thank you here is my code.
<htmL>
<head>
<title>Lawyer Up</title>
</head>
<link rel="shortcut icon" type="image/png" href="file:
/User/rahul%20saini/Desktop/Testproject1/index.png"/>
<link href="https://fonts.googleapis.com/css?family=Oxygen"
rel="stylesheet">
<style type = "text/css">
body{
/* background-color:#F8B195; */
}
#navibar{
position: relative;
width: 100%;
height: 45px;
/* background-color: #355C7D; */
padding: 0px;
margin: 0px;
}
#logo{
width:45px;
height: 45px;
float: left;
padding-right:4px;
}
.give-border{
border-bottom-color: darkgrey;
border-bottom-style: inset;
border-bottom-width: medium;
width: 1px;
height: 2px;
}
#searchlogo{
float:right;
width: 25px;
height: 25px;
position: absolute;
top: 2px;
left: 160px;
}
.border{
float:right;
position: absolute;
top: 0px;
left: 154px;
border-left-color:darkslategrey;
border-left-style: solid;
height: 30px;
border-left-width: thin;
}
#loginlogo{
float:right;
position: relative;
top:-24px;
left: -10px;
border-left-color: darkslategray;
border-left-style: dotted;
}
.bordertop{
float: left;
border: 1px;
border-left-color: #302929;
border-left-style: solid;
height: 45px;
padding-left: 4px;
}
#thename{
font-size: 2em;
font-weight: bolder;
font-family: 'oxygen',sans-serif;
color: #000033;
padding-left: 3px;
}
#2ndbar{
float: left
margin: 0px;
width: 20px;
height: 20px;
background-color: antiquewhite;
border-bottom-color: dimgrey;
border-bottom-style: double;
border-bottom-width: thin;
}
#navibar a{
float:right;
font-size: 150%;
color:#F67280;
padding: 5px 10px 5px 10px;
text-decoration: none;
}
a:hover{
font-size: 150%;
text-decoration: underline;
color: wheat;
background-color: skyblue;
background-size: contain;
transition-property: background;
transition-duration: 0.8s;
}
body{
margin: 0px;
padding: 0px;
}
h1{
text-align: center;
font-size: 50px;
font-weight: 100;
font-family: sans-serif;
color: brown;
}
.input{
position:relative;
left: 1100px;
width: 185px;
height: 30px;
top:6px;
}
.input input{
position: relative;
height: 30px;
width: 150px;
top:-45px;
background-color: #E9E9E9;
}
ul{
list-style-type: none;
}
.list{
float:left;
padding-right: 10px;
border-right-style: solid;
border: 1px;
border-right-width: thin;
border-right-color: aqua;
}
</style>
<body>
<div id="fullpage">
<div id="navibar" class="give-border">
<img id="logo" src="logo.png">
<div id="thename" >
<span class="bordertop" >Lawyer Up</span>
</div>
<div class="input">
<form>
<input type="search" placeholder="Search">
</form>
<div class="border">
</div>
<img id="searchlogo" src="search.png">
</div>
<div id="loginlogo">
<a href="login.html">
<img src="login.png">
</a>
</div>
</div>
<div id="2ndbar">
<ul>
<li class ="list">name</li>
<li class="list">another name</li>
<li class="list">one more name</li>
</ul>
</div>
<!-- <h1> Welcome </h1> -->
</div> <! div=fullpage >
</body>
</htmL
the problem is the the 2nd bar which isn't working Idk why, I have made some changes but I still can't get it why, I think it might be due to the positions I gave for divs, but I tried that too so it would be a great help if anyone can help me or tell me what am I doing wrong here.

In HTML you cannot begin an id with a number. Try changing the id from 2ndbar to bar2 and your styles should affect it from that point.

Loading hidden div as Popup using <a> tag

I have a div as custom popup
<div class="deletePopup">
<header class="popupHeader">Confirm Delete!!!
<span class="glyphicon glyphicon-remove"></span>
</header>
<section class="popupContent">
<p class="deleteMessage">Are you Sure You want to delete this Timecard?</p>
</section>
<footer class="popupFooter">
<span>
<button id="okDelete" type="submit" class="btn btn-info btn-sm deletebuttons" data-toggle="tooltip" title="Delete" onclick="okDelete();">
Delete
</button>
</span>
</footer>
</div>
which is hidden by default.
what i want to do is show the div when someone clicks on this link
<a href="#">Click Me<a>
is it possible to pass the div ID/Class in href link and load the div without using JQuery/Javascript.
here is the css part too if you need.
/** CSS for Delete Popup**/
.deletePopup {
display: none;
position: fixed;
z-index: 10;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.popupHeader{
margin: auto;
background-color: #37d4ff;
color: white;
width:300px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 10px 10px 0px 0px;
text-align: center;
font-weight: bolder;
}
.popupContent {
background-color: #f8f8f8;
margin: auto;
padding: 20px;
width: 300px;
height: 80px;
font-weight: bold;
font-family: cursive;
}
.popupFooter{
margin: auto;
background-color: #f8f8f8;
width: 300px;
height: 50px;
border-radius: 0px 0px 10px 10px;
text-align: center;
}
.deletebuttons {
color: white;
}
.cancelButton{
position: fixed;
top:88px;
margin-left: 79px;
background-color: #37d4ff;
float: right;
height: 25px;
width:25px;
margin-right: 10px;
border:2px solid #37d4ff;
border-radius: 13px;
z-index: 10;
color: white;
}
.cancelButton:hover {
color: white;
}
.cancelButton span{
margin-top: 2px;
}
.deleteMessage{
text-align: center;
}

In a tag add the id name of the popup and add the below css.
#popup {
display: none;
}
#popup:target {
display: block;
}
.deletePopup {
display: none;
position: fixed;
z-index: 10;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.popupHeader{
margin: auto;
background-color: #37d4ff;
color: white;
width:300px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 10px 10px 0px 0px;
text-align: center;
font-weight: bolder;
}
.popupContent {
background-color: #f8f8f8;
margin: auto;
padding: 20px;
width: 300px;
height: 80px;
font-weight: bold;
font-family: cursive;
}
.popupFooter{
margin: auto;
background-color: #f8f8f8;
width: 300px;
height: 50px;
border-radius: 0px 0px 10px 10px;
text-align: center;
}
.deletebuttons {
color: white;
}
.cancelButton{
position: fixed;
top:88px;
margin-left: 79px;
background-color: #37d4ff;
float: right;
height: 25px;
width:25px;
margin-right: 10px;
border:2px solid #37d4ff;
border-radius: 13px;
z-index: 10;
color: white;
}
.cancelButton:hover {
color: white;
}
.cancelButton span{
margin-top: 2px;
}
.deleteMessage{
text-align: center;
}
<a href="#popup">Click Me<a>
<div id="popup" class="deletePopup">
<header class="popupHeader">Confirm Delete!!!
<span class="glyphicon glyphicon-remove"></span>
</header>
<section class="popupContent">
<p class="deleteMessage">Are you Sure You want to delete this Timecard?</p>
</section>
<footer class="popupFooter">
<span>
<button id="okDelete" type="submit" class="btn btn-info btn-sm deletebuttons" data-toggle="tooltip" title="Delete" onclick="okDelete();">
Delete</button></span>
</footer>
</div>
I hope this will work :)

Try this
function displayPopup(){
document.getElementsByClassName('deletePopup')[0].style.display = 'block';
}
.deletePopup {
display: none;
position: fixed;
z-index: 10;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.popupHeader{
margin: auto;
background-color: #37d4ff;
color: white;
width:300px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 10px 10px 0px 0px;
text-align: center;
font-weight: bolder;
}
.popupContent {
background-color: #f8f8f8;
margin: auto;
padding: 20px;
width: 300px;
height: 80px;
font-weight: bold;
font-family: cursive;
}
.popupFooter{
margin: auto;
background-color: #f8f8f8;
width: 300px;
height: 50px;
border-radius: 0px 0px 10px 10px;
text-align: center;
}
.deletebuttons {
color: white;
}
.cancelButton{
position: fixed;
top:88px;
margin-left: 79px;
background-color: #37d4ff;
float: right;
height: 25px;
width:25px;
margin-right: 10px;
border:2px solid #37d4ff;
border-radius: 13px;
z-index: 10;
color: white;
}
.cancelButton:hover {
color: white;
}
.cancelButton span{
margin-top: 2px;
}
.deleteMessage{
text-align: center;
}
<a href="#" onclick="displayPopup()">Click Me<a>
<div class="deletePopup">
<header class="popupHeader">Confirm Delete!!!
<span class="glyphicon glyphicon-remove"></span>
</header>
<section class="popupContent">
<p class="deleteMessage">Are you Sure You want to delete this Timecard?</p>
</section>
<footer class="popupFooter">
<span>
<button id="okDelete" type="submit" class="btn btn-info btn-sm deletebuttons" data-toggle="tooltip" title="Delete" onclick="okDelete();">
Delete</button></span>
</footer>
</div>

This can be done using CSS.
HTML:
<div id="deletePopup">
<header class="popupHeader">Confirm Delete!!!
<span class="glyphicon glyphicon-remove"></span>
</header>
<section class="popupContent">
<p class="deleteMessage">Are you Sure You want to delete this Timecard?</p>
</section>
<footer class="popupFooter">
<span>
<button id="okDelete" type="submit" class="btn btn-info btn-sm deletebuttons" data-toggle="tooltip" title="Delete" onclick="okDelete();">Delete</button>
</span>
</footer>
</div>
click to show
CSS:
#deletePopup{
display: none;
}
#deletePopup:target {
display: block;
}
Working CodePen Link

you can use onclick event to change the style. obviously you need jquery for this.
<a href="#" onclick="$('.deletePopup').css('display', 'block')">Click Me<a>
hope this will help you

If you can not use Javascript.
Maybe this thread can help you:
Show / hide div on click with CSS
And maybe this works, is just JS, not jQuery:
document.getElementById('a_x200').style.visibility = 'visible';

Why slideToggle is going downwards and out of the screen?

I am writing some code to toggle a div class. I want to slide down the div up to the bottom of the page and slide up when clicked again.
My HTML code contains:
<div class="chat-sidebar">
<div class="chat_head">
<h4 align="center"><b>Online Users</b></h4>
</div>
<div class="chat_body">
<div class="sidebar-name" ></div>
</div>
</div>
and the CSS for this HTML :
.chat-sidebar{
width: 200px;
position: fixed;
height: 370px;;
right: 10px;
bottom: 0px !important;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid rgba(29, 49, 91, .3);
border-radius:5px 5px 0px 0px;
}
.sidebar-name{
padding-left: 10px;
padding-right: 10px;
margin-top : 0.8cm;
font-size: 20px;
}
.chat_head{
background:#f39c12;
color:white;
padding:2px;
font-weight:bold;
cursor:pointer;
border-radius:5px 5px 0px 0px;
margin-top: -10px;
}
and now I am sliding the main chat-sidebar DIV using jQuery function like :
$(document).ready(function() {
$('.chat_head').click(function(){
$('.chat-sidebar').slideToggle('slow');
});
});
slideToggle is working fine when click the .chat_head div. But it is going down too far so that it is not visible anymore (out of the screen). What am I missing here?

You need to slideToggle the .chat_body instead of the whole wrapper div. So just remove the height from .chat-sidebar and move it to .chat_body. Now apply the slideToggle() function on .chat_body:
$(document).ready(function() {
$('.chat_head').click(function() {
$('.chat_body').slideToggle('slow');
});
});
.chat-sidebar {
width: 200px;
position: fixed;
right: 10px;
bottom: 0px !important;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid rgba(29, 49, 91, .3);
border-radius: 5px 5px 0px 0px;
}
.sidebar-name {
padding-left: 10px;
padding-right: 10px;
margin-top: 1px;
font-size: 20px;
}
.chat_head {
background: #f39c12;
color: white;
padding: 2px;
font-weight: bold;
cursor: pointer;
border-radius: 5px 5px 0px 0px;
margin-top: -10px;
}
.chat_body {
height: 120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chat-sidebar">
<div class="chat_head">
<h4 align="center"><b>Online Users</b></h4>
</div>
<div class="chat_body">
<div class="sidebar-name"></div>
</div>
</div>

Try this :
$(document).ready(function() {
$(".head").on("click",function(){
$(".chat-sidebar").slideToggle("slow");
})
})
.wrapper {
border: 1px solid gray;
width: 200px;
position: fixed;
right: 10px;
bottom: 0;
min-height: 50px;
border-radius:3px 3px 0px 0px;
}
.head {
background:#f39c12;
color:white;
font-weight:bold;
cursor:pointer;
position: absolute;
width: 200px;
height: 50px;
border-radius:5px 5px 0px 0px;
}
.chat-sidebar {
background-color: #fff;
height: 200px;
}
<div class="wrapper">
<div class="head">
<h4 align="center"><b>Online Users</b></h4>
</div>
<div class="chat-sidebar"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

convert css code from :hover to click

i have a problem :
there is in code , popup opens and close when the mouse hovers over the image, I want it to open and close when i press on the image .
photo on this code:
<a class="textlink" href="#" style="padding:10px 0;">
<img src="alert/images.gif" style="width: 21px;" />
<span id="mes">$count</span>
</a>
the full code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<style type="text/css">
a {
text-decoration: none;
color: #838383;
}
a:hover {
color: black;
}
#menu {
position: relative;
margin-left: auto;
top: -34px;
}
#menu ul {
list-style-type: none;
}
#menu li {
float: left;
position: relative;
text-align: center;
}
#menu ul.sub-menu {
position: absolute;
left: -10px;
z-index: 90;
display: none;
}
#menu ul.sub-menu li {
text-align: right;
}
#menu li:hover ul.sub-menu {
display: block;
}
.egg {
padding: 10px;
margin: 5px 5px 5px 5px;
position: relative;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
background-color: #fff;
border-radius: 3px 3px 3px 3px;
border: 1px solid rgba(100, 100, 100, 0.4);
}
.egg_Body {
border-top: 1px solid #D1D8E7;
color: #808080;
}
.egg_Message {
font-size: 13px !important;
font-weight: normal;
overflow: hidden;
}
h3 {
font-size: 13px;
color: #333;
margin: 0;
padding: 0;
}
.comment_ui {
border-bottom: 1px solid #e5eaf1;
clear: left;
float: none;
overflow: hidden;
padding: 6px 4px 3px 6px;
width: 331px;
cursor: pointer;
white-space: pre-line;
}
.comment_ui:hover {
background-color: #F7F7F7;
}
.comment_actual_text img {
margin: 0px 0px 0px 7px;
}
.dddd {
background-color: #f2f2f2;
border-bottom: 1px solid #e5eaf1;
clear: left;
float: none;
overflow: hidden;
margin-bottom: 2px;
padding: 6px 4px 3px 6px;
width: 331px;
}
.comment_text {
border-radius: 2px 2px 2px 2px;
padding: 2px 0 4px;
color: #333333;
}
.comment_actual_text {
display: inline;
padding-left: .4em;
}
ol {
list-style: none;
margin: 0 auto;
width: 500px;
margin-top: 20px;
}
#mes {
padding: 0px 3px;
border-radius: 3px 3px 3px 3px;
background-color: rgb(240, 61, 37);
background-color: #FF00CC;
font-size: 9px;
font-weight: bold;
color: #fff;
position: absolute;
top: 5px;
left: 73px;
}
.toppointer {
background-image: url(alert/top.png);
background-position: -82px 0;
background-repeat: no-repeat;
height: 11px;
position: absolute;
top: -11px;
width: 20px;
right: 276px;
}
.clean {
display: none
}
.textlink {
display: block;
width: 140px;
}
</style>
<span id="menu">
<ul>
<li>
<a class="textlink" href="#" style="padding:10px 0;">
<img src="alert/images.png" style="width: 21px;" />
<span id="mes">$count</span>
</a>
<ul class="sub-menu">
<li class="egg">
<div class="toppointer">
<img src="alert/top.png" />
</div>
<div id="view_comments"></div>
$all
<if condition="$count_all > 0 ">
<div class="bbbbbbb" id="view">
<div style="background-color: #F7F7F7; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; position: relative; z-index: 100; padding:8px; cursor:pointer;">
view all
</div>
</div>
</if>
</li>
</ul>
</li>
</ul>
</span>
Thank you very much !

Instead of the :hover pseudo-class, use the :active pseudo-class.
So the CSS block would look like this:
a:active {
color: black;
}
For more info, take a look at this: https://developer.mozilla.org/en-US/docs/Web/CSS/:active

Toggle with only CSS is a little bit tricky, but here is one way of doing it:
Demo: http://jsfiddle.net/DerekL/R5Bm5/
<input id="control" type="checkbox">
<label for="control"><span id="toggle">Toggle</span></label>
<div class="more">Here's more</div>
.more{
height: 0px;
overflow: hidden;
}
#control:checked ~ .more{
/*Do whatever you want here*/
height: 20px;
}
#control{
display: none;
}
#toggle{
color: blue;
text-decoration: underline;
cursor: pointer;
}
Of course, you can always toggle with JavaScript:
$("#toggle").click(function(){
$(".more").toggle();
});
A better demo according to your description: http://jsfiddle.net/DerekL/R5Bm5/2/

Categories

Resources