I want to remove my modal after click outside modal
$("#rightsidebar").removeClass("active");
//I tried this
$(window).click(function(e) {
var cd = $('#rightsidebar').hasClass('active');
var cf = $('#rightsidebar').val();
if(e.target.id == cf){
$("#rightsidebar").removeClass("active");
}
// if(cd == true){
// }else{
// }
// if(){
// alert("hai");
// }else{
// alert("nahi hai")
// }
// alert(e.target.id); // gives the element's ID
//alert(e.target.className); // gives the elements class(es)
});
//html code is below
<aside id="rightsidebar" class="right-sidebar notification active">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#setting">Notifications</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active slideRight" id="setting">
<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: calc(100vh - 70px);"><div class="slim_scroll" style="overflow: hidden; width: auto; height: calc(100vh - 70px);">
<div class="card">
<ul class="setting-list list-unstyled">
<li>
<a href="#">
<span class="icon pink-bg"> <i class="zmdi zmdi-notifications"></i></span>
Blood Pressure test reminder
</a>
</li>
<li>
<a href="#">
<span class="icon green-bg"> <i class="zmdi zmdi-notifications"></i></span>
Hospital Accepted your profile edit request
<button type="button" class="btn btn-sm edit">Edit</button>
</a>
</li>
<li>
<a href="#">
<span class="icon pink-bg"> <i class="zmdi zmdi-notifications"></i></span>
Doctor visit completed
</a>
</li>
<li>
<a href="#">
<span class="icon pink-bg"> <i class="zmdi zmdi-notifications"></i></span>
Blood Pressure test reminder
</a>
</li>
<li>
<a href="#">
<span class="icon green-bg"> <i class="zmdi zmdi-notifications"></i></span>
Hospital Accepted your profile edit request
<button type="button" class="btn btn-sm edit">Edit</button>
</a>
</li>
<li>
<a href="#">
<span class="icon pink-bg"> <i class="zmdi zmdi-notifications"></i></span>
Blood Pressure test reminder
</a>
</li>
<li>
<a href="#">
<span class="icon green-bg"> <i class="zmdi zmdi-notifications"></i></span>
Hospital Accepted your profile edit request
<button type="button" class="btn btn-sm edit">Edit</button>
</a>
</li>
<li>
<a href="#">
<span class="icon pink-bg"> <i class="zmdi zmdi-notifications"></i></span>
Doctor visit completed
</a>
</li>
</ul>
</div>
</div><div class="slimScrollBar" style="background: rgba(0, 0, 0, 0.4); width: 2px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 3px; z-index: 99; right: 1px; height: 168.6px;"></div><div class="slimScrollRail" style="width: 2px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 0px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div></div>
</div>
</div>
</aside>
This is a general solution to do something when clicking outside of the element:
$(window).click(function(e) {
var $target = $(e.target);
if (!$target.closest('#rightsidebar').length) {
$("#rightsidebar").removeClass("active");
}
});
#rightsidebar:not(.active) {
display: none;
}
In this code, I assume that your modal is #rightsidebar
Related
I'm trying to prevent any clicks on the "a" tags that have a class name "disable", I have tried a lot of codes but none have prevented the "a"...
<a href="#view-home" class="tab-link tab-link-active">
<i class="icon f7-icons ios-only">today</i>
<i class="icon f7-icons ios-only icon-ios-fill">today</i>
<i class="icon material-icons md-only">today</i>
<span class="tabbar-label">Home</span>
</a>
<a href="#view-games" class="tab-link disable">
<i class="icon f7-icons">rocket_fill</i>
<i class="icon f7-icons ios-only icon-ios-fill">rocket_fill</i>
<span class="tabbar-label">Games</span>
</a>
<a href="#view-todo" class="tab-link disable">
<i class="icon f7-icons">layers_alt_fill</i>
<i class="icon f7-icons ios-only icon-ios-fill">layers_alt_fill</i>
<span class="tabbar-label">Todo</span>
</a>
<a onclick="loadFirebase()" href="#view-download" class="tab-link disable">
<i class="icon f7-icons">download_fill</i>
<i class="icon f7-icons ios-only icon-ios-fill">download_fill</i>
<span class="tabbar-label">Download</span>
</a>
<a onclick="loadFirebase()" href="#view-search" class="tab-link disable">
<i class="icon f7-icons ios-only">search</i>
<i class="icon f7-icons ios-only icon-ios-fill">search</i>
<i class="icon material-icons md-only">search</i>
<span class="tabbar-label">Search</span>
</a>
This code give me an alert but it still changes the #hash to change page.
$('a#preventPage').on('click', function(event) {
alert("Prevent");
event.preventDefault();
});
This should do the trick:
Array.from(document.querySelectorAll('a.disable')).forEach(c => {
c.href = '';
c.onclick = e => e.preventDefault();
});
<a href="#view-home" class="tab-link tab-link-active">
<i class="icon f7-icons ios-only">today</i>
<i class="icon f7-icons ios-only icon-ios-fill">today</i>
<i class="icon material-icons md-only">today</i>
<span class="tabbar-label">Home</span>
</a>
<a href="#view-games" id="preventPage" class="tab-link disable">
<i class="icon f7-icons">rocket_fill</i>
<i class="icon f7-icons ios-only icon-ios-fill">rocket_fill</i>
<span class="tabbar-label">Games</span>
</a>
<a href="#view-todo" class="tab-link disable">
<i class="icon f7-icons">layers_alt_fill</i>
<i class="icon f7-icons ios-only icon-ios-fill">layers_alt_fill</i>
<span class="tabbar-label">Todo</span>
</a>
<a onclick="loadFirebase()" href="#view-download" class="tab-link disable">
<i class="icon f7-icons">download_fill</i>
<i class="icon f7-icons ios-only icon-ios-fill">download_fill</i>
<span class="tabbar-label">Download</span>
</a>
<a onclick="loadFirebase()" href="#view-search" class="tab-link disable">
<i class="icon f7-icons ios-only">search</i>
<i class="icon f7-icons ios-only icon-ios-fill">search</i>
<i class="icon material-icons md-only">search</i>
<span class="tabbar-label">Search</span>
</a>
Hey your code should be :
$('a.disable').each(function(){
$(this).click( function(event) {
alert("Prevent");
event.preventDefault();
});
});
Add an custom event listener and prevent the default listener which is added automatically on a tags.
[...document.querySelectorAll('a.disable')].forEach(element => {
element.addEventListener('click', event => {
event.preventDefault();
alert('prevented disabled button');
});
});
a {
font-family: Tahoma;
border: 1px solid black;
border-radius: 3px;
text-decoration: none;
color: black;
padding: 5px;
}
a.disable {
color: darkgrey;
}
a:hover {
background-color: lightgray;
}
<div>
Home
Work
Nowhere
</div>
Problem
I'm trying to make a dynamic dropdown, I have already made a static one. I want to get dropdown value from a JSON file.
How do I solve this problem?
HTML
<div class="main-drop-down">
<div class="drop-cat">
<ul class="list-unstyled custom-li">
<li class="item-cat">
Echo & Alexa
<i class="fas fa-chevron-right float-right"></i>
<div class="sub-cat-section">
<div class="ul-sub-cat">
<ul class="list-unstyled">
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
</ul>
</div>
<img src="https://images-eu.ssl-images-amazon.com/images/G/31/img18/AmazonDevices/Neel/GW/500x450_Flyout-new._CB456065619_.png"
alt="img" class="img-fluid" />
</div>
</li>
<li class="item-cat">
Fire Tv Stick
<i class="fas fa-chevron-right float-right"></i>
<div class="sub-cat-section">
<div class="ul-sub-cat">
<ul class="list-unstyled">
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="item-cat">
Kindle E-Reader & eBook
<i class="fas fa-chevron-right float-right"></i>
<div class="sub-cat-section">
<div class="ul-sub-cat">
<ul class="list-unstyled">
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="item-cat">
Amazon prime Video
<i class="fas fa-chevron-right float-right"></i>
<div class="sub-cat-section">
<div class="ul-sub-cat">
<ul class="list-unstyled">
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="item-cat">
Amazon Prime Music
<i class="fas fa-chevron-right float-right"></i>
<div class="sub-cat-section">
<div class="ul-sub-cat">
<ul class="list-unstyled">
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
CSS
.main-drop-down{
top:-7px;
right:0;
left:0;
display: none;
z-index:22;
position: relative;
opacity: 0;
visibility: hidden;
}
.drop-cat{
position: absolute;
left: 166px;
width: 230px;
background: #fff;
height: 468px;
top:-10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
border:1px solid #fafafa;
border-radius: 2px;
}
.drop-cat::before{
content: "";
position: absolute;
top: -5px;
height: 0;
width: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
left: 70px;
}
.custom-li{
padding: 1rem .2rem 1rem .2rem;
}
.item-cat{
margin-left:.2rem;
cursor: pointer;
padding:.2rem 0 .2rem 0;
}
.item-cat:hover{
color:lightcoral;
font-weight: 600;
}
.item-cat:hover > i{
color:#000 !important;
}
.sub-cat-section{
position: absolute;
height: auto;
background-color: #fff;
width: 468px;
left: 229px;
top:0;
visibility: hidden;
height: 100%;
}
.active-sub-cat{
display: block;
visibility: visible;
}
.active-cat{
display: block;
visibility:visible;
opacity: 1;
}
.sub-cat-section img{
bottom:0;
position: absolute;
clear: both;
}
.sub-cat-section > .ul-sub-cat{
padding:1rem;
}
.ul-sub-cat .list-sub-cat{
padding:1rem .5rem 1rem .5rem;
}
.nav-item.dropdown{
z-index:0;
}
JavaScript
let list=document.querySelectorAll(".item-cat");
list.forEach(function(elArg){
elArg.addEventListener("mouseover",function(ev){
let childIn=this.children[1];
childIn.classList.add("active-sub-cat");
})
elArg.addEventListener("mouseleave",function(ev){
let childOut=this.children[1];
childOut.classList.remove("active-sub-cat");
})
});
let nav=document.querySelector(".nav-item.dropdown");
let drp=document.querySelector(".main-drop-down");
nav.addEventListener("mouseenter",function(ev){
document.querySelector(".main-drop-down").classList.add("active-cat");
});
drp.addEventListener("mouseleave",function(ev){
document.querySelector(".main-drop-down").classList.remove("active-cat");
})
Attempt
I excepted these dropdown values from a JSON value, same HTML structure:
let list=document.querySelectorAll(".item-cat");
list.forEach(function(elArg){
elArg.addEventListener("mouseover",function(ev){
let childIn=this.children[1];
childIn.classList.add("active-sub-cat");
})
elArg.addEventListener("mouseleave",function(ev){
let childOut=this.children[1];
childOut.classList.remove("active-sub-cat");
})
});
let nav=document.querySelector(".nav-item.dropdown");
let drp=document.querySelector(".main-drop-down");
nav.addEventListener("mouseenter",function(ev){
document.querySelector(".main-drop-down").classList.add("active-cat");
});
drp.addEventListener("mouseleave",function(ev){
document.querySelector(".main-drop-down").classList.remove("active-cat");
})
body{
background-color: darkcyan;
}
.main-drop-down{
top:-7px;
right:0;
left:0;
display: none;
z-index:22;
position: relative;
opacity: 0;
visibility: hidden;
}
.drop-cat{
position: absolute;
left: 166px;
width: 230px;
background: #fff;
height: 468px;
top:-10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
border:1px solid #fafafa;
border-radius: 2px;
}
.drop-cat::before{
content: "";
position: absolute;
top: -5px;
height: 0;
width: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
left: 70px;
}
.custom-li{
padding: 1rem .2rem 1rem .2rem;
}
.item-cat{
margin-left:.2rem;
cursor: pointer;
padding:.2rem 0 .2rem 0;
}
.item-cat:hover{
color:lightcoral;
font-weight: 600;
}
.item-cat:hover > i{
color:#000 !important;
}
.sub-cat-section{
position: absolute;
height: auto;
background-color: #fff;
width: 468px;
left: 229px;
top:0;
visibility: hidden;
height: 100%;
}
.active-sub-cat{
display: block;
visibility: visible;
}
.active-cat{
display: block;
visibility:visible;
opacity: 1;
}
.sub-cat-section img{
bottom:0;
position: absolute;
clear: both;
}
.sub-cat-section > .ul-sub-cat{
padding:1rem;
}
.ul-sub-cat .list-sub-cat{
padding:1rem .5rem 1rem .5rem;
}
.nav-item.dropdown{
z-index:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-md navbar-light bg-primary">
<a class="navbar-brand text-white" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-white" id="navbarNavDropdown">
<ul class="navbar-nav ">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
</li>
</ul>
</div>
</nav>
<div class="main-drop-down">
<div class="drop-cat">
<ul class="list-unstyled custom-li">
<li class="item-cat">
Echo & Alexa
<i class="fas fa-chevron-right float-right"></i>
<div class="sub-cat-section">
<div class="ul-sub-cat">
<ul class="list-unstyled">
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
</ul>
</div>
<img src="https://images-eu.ssl-images-amazon.com/images/G/31/img18/AmazonDevices/Neel/GW/500x450_Flyout-new._CB456065619_.png"
alt="img" class="img-fluid" />
</div>
</li>
<li class="item-cat">
Fire Tv Stick
<i class="fas fa-chevron-right float-right"></i>
<div class="sub-cat-section">
<div class="ul-sub-cat">
<ul class="list-unstyled">
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="item-cat">
Kindle E-Reader & eBook
<i class="fas fa-chevron-right float-right"></i>
<div class="sub-cat-section">
<div class="ul-sub-cat">
<ul class="list-unstyled">
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="item-cat">
Amazon prime Video
<i class="fas fa-chevron-right float-right"></i>
<div class="sub-cat-section">
<div class="ul-sub-cat">
<ul class="list-unstyled">
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="item-cat">
Amazon Prime Music
<i class="fas fa-chevron-right float-right"></i>
<div class="sub-cat-section">
<div class="ul-sub-cat">
<ul class="list-unstyled">
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
So I am working on a portal and I found a good calendar to throw into my web page. Right now, the css has it set up so that the first div has the attribute "left:250px" and then the "width:200px" and then my second div is set to "left:450". The problem is when I close my side navbar the divs stay stationary. I want them to be responsive and slide over the area where the navbar once was but I haven't figured out how to do that. I've tried using but it wasn't seeming to work very well. Below are pictures of my problems for you guys to see,
Before:
After:
Here is my code, both the css and html. A lot of html, js and css has been left out but I think the code I linked is where the problem is going wrong. If you think the problem might be elsewhere please let me know and I can link it. Thanks for the help friends!!
#lnb {
position: absolute;
left: 250px;
width: 200px;
top: 49px;
bottom: 0;
border-right: 1px solid #d5d5d5;
padding: 14px 10px;
background: #fafafa;
}
#right {
position: absolute;
left: 450px;
top: 49px;
right: 0;
bottom: 0;
}
<div id="lnb">
<div class="lnb-new-schedule">
<button id="btn-new-schedule" type="button" class="btn btn-secondary
btn-block " data-toggle="modal">
New schedule</button>
</div>
<div id="lnb-calendars" class="lnb-calendars">
<div>
<div class="lnb-calendars-item">
<label>
<input class="tui-full-calendar-checkbox-square"
type="checkbox" value="all" checked>
<span></span>
<strong>View all</strong>
</label>
</div>
</div>
<div id="calendarList" class="lnb-calendars-d1">
</div>
</div>
<div class="lnb-footer">
© Noblis ESI
</div>
</div>
<div id="right">
<div id="menu">
<span class="dropdown">
<button id="dropdownMenu-calendarType" class="btn btn-default
btn-sm dropdown-toggle" type="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
<i id="calendarTypeIcon" class="calendar-icon ic_view_month"
style="margin-right: 4px;"></i>
<span id="calendarTypeName">Dropdown</span>
<i class="calendar-icon tui-full-calendar-dropdown-arrow">
</i>
</button>
<ul class="dropdown-menu" role="menu" aria- labelledby="dropdownMenu-calendarType">
<li role="presentation">
<a class="dropdown-menu-title" role="menuitem" data- action="toggle-daily">
<i class="calendar-icon ic_view_day"></i>Daily
</a>
</li>
<li role="presentation">
<a class="dropdown-menu-title" role="menuitem" data- action="toggle-weekly">
<i class="calendar-icon ic_view_week"></i>Weekly
</a>
</li>
<li role="presentation">
<a class="dropdown-menu-title" role="menuitem" data- action="toggle-monthly">
<i class="calendar-icon ic_view_month"></i>Month
</a>
</li>
<li role="presentation">
<a class="dropdown-menu-title" role="menuitem" data- action="toggle-weeks2">
<i class="calendar-icon ic_view_week"></i>2 weeks
</a>
</li>
<li role="presentation">
<a class="dropdown-menu-title" role="menuitem" data- action="toggle-weeks3">
<i class="calendar-icon ic_view_week"></i>3 weeks
</a>
</li>
<li role="presentation" class="dropdown-divider"></li>
<li role="presentation">
<a role="menuitem" data-action="toggle-workweek">
<input type="checkbox" class="tui-full-calendar-
checkbox-square" value="toggle-workweek" checked>
<span class="checkbox-title"></span>Show weekends
</a>
</li>
<li role="presentation">
<a role="menuitem" data-action="toggle-start-day-1">
<input type="checkbox" class="tui-full-calendar-
checkbox-square" value="toggle-start-day-1">
<span class="checkbox-title"></span>Start Week on Monday
</a>
</li>
<li role="presentation">
<a role="menuitem" data-action="toggle-narrow-weekend">
<input type="checkbox" class="tui-full-calendar-
checkbox-square" value="toggle-narrow-weekend">
<span class="checkbox-title"></span>Narrower than weekdays
</a>
</li>
</ul>
</span>
<span id="menu-navi">
<button type="button" class="btn btn-default btn-sm move-today"
data-action="move-today">Today</button>
<button type="button" class="btn btn-default btn-sm move-day"
data-action="move-prev">
<i class="calendar-icon ic-arrow-line-left" data-
action="move-prev"></i>
</button>
<button type="button" class="btn btn-default btn-sm move-day"
data-action="move-next">
<i class="calendar-icon ic-arrow-line-right" data-
action="move-next"></i>
</button>
</span>
<span id="renderRange" class="render-range"></span>
</div>
<div id="calendar"></div>
</div>
<footer>
<div class="container">
<div class="row container">
<div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 no-padding">
<p>Designed by Wiredelta </p>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 no-padding">
<div class="pull-right barMain">
<ul class="social-bar">
<li>
<a href="https://www.facebook.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-facebook fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://twitter.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa fa-twitter fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://plus.google.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-google-plus fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://www.instagram.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-instagram fa-stack-1x"></i></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
not getting footer at bottom of the page when there is no content is present in the body.so i need to fix footer at the bottom only, when i run the code the code.plzz give suggestion how to fix footer at the bottom exactly.
footer {
position: fixed;
bottom: 0;
}
just add this in your css.
A) Footer is fixed:
footer {
background-color: skyblue;
position:fixed;
bottom: 0;
width: 100%;
}
footer {
background-color: skyblue;
position:fixed;
bottom: 0;
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<footer>
<div class="container">
<div class="row container">
<div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 no-padding">
<p>Designed by Wiredelta </p>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 no-padding">
<div class="pull-right barMain">
<ul class="social-bar">
<li>
<a href="https://www.facebook.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-facebook fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://twitter.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa fa-twitter fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://plus.google.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-google-plus fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://www.instagram.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-instagram fa-stack-1x"></i></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
B) Footer is not fixed:
body {
height: 1200px;
position: relative;
}
footer {
background-color: skyblue;
position:absolute;
bottom: 0;
width: 100%;
}
body {
height: 1200px;
position: relative;
}
footer {
background-color: skyblue;
position:absolute;
bottom: 0;
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<footer>
<div class="container">
<div class="row container">
<div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 no-padding">
<p>Designed by Wiredelta </p>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 no-padding">
<div class="pull-right barMain">
<ul class="social-bar">
<li>
<a href="https://www.facebook.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-facebook fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://twitter.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa fa-twitter fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://plus.google.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-google-plus fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://www.instagram.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-instagram fa-stack-1x"></i></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
You have three options from which I would suggest using flex-box.
1. position: fixed
footer {
position: fixed;
left: 0;
bottom: 0;
right: 0;
}
2. Flex-box
HTML
<html>
<body>
<main></main>
<footer></footer>
</body>
</html>
CSS
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex-grow: 1;
}
Demo: https://codepen.io/marcobiedermann/pen/XpoarE
3. Table
HTML
<html>
<body>
<main></main>
<footer></footer>
</body>
</html>
CSS
html {
height: 100%;
}
body {
display: table;
min-height: 100vh;
}
main: {
height: 100%;
}
footer {
display: table-row;
height: 1px;
}
Demo: https://codepen.io/marcobiedermann/pen/jImsc
I'm trying to add a delay for the bootstrap dropdown.
I have already added css to make the dropdown show on hover.
You can test it here http://www.bootply.com/YcVBzvXqrR
Here is my HTML:
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="category-box">
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-bullhorn fa-3x"></i>
<h5>CATEGORY 1</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 1
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-car fa-3x"></i>
<h5>CATEGORY 2</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 2
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-file-text fa-3x"></i>
<h5>CATEGORY 3</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 3
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-home fa-3x" style="margin-bottom: -20px; margin-top: -11px; font-size: 4em;"></i>
<h5>CATEGORY 4</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 4
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-cogs fa-3x"></i>
<h5>CATEGORY 5</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 5
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-users fa-3x"></i>
<h5>CATEGORY 6</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 6
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-heart fa-3x"></i>
<h5>CATEGORY 7</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 7
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-briefcase fa-3x"></i>
<h5>CATEGORY 8</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 8
</div>
</div>
</div>
</div>
</div>
</div>
And here is my CSS:
.dropdown:hover .dropdown-menu {
display: block;
}
.category-overlay{
width:1190px;
height:90px;
background:#ddd;
margin-top:30px;
}
I need to know how to make the dropdown appear with after a small delay.
Two changes I would recommend
Add the below Jquery code to add delay:
jQuery('div.dropdown').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
Remove the css
/.dropdown:hover .dropdown-menu {
display: block;
}/
This is the fiddle I have modified
http://www.bootply.com/YcVBzvXqrR#