Toggling Menu Overlays Using JavaScript

Toggling Menu Overlays Using JavaScript - javascript

I'm currently using JavaScript to show overlay menus that render in the same location on my website. The issue is that while clicking on a space outside the menus closes them, clicking on the other menu buttons does not close them and they end up overlapping each-other. Here is what I have for code so far:
function navitem1(event) {
event.stopPropagation();
document.getElementById("navitem1dropdown").classList.toggle("navitem1contentshow");
}
function navitem2(event) {
event.stopPropagation();
document.getElementById("navitem2dropdown").classList.toggle("navitem2contentshow");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
document.getElementById("navitem1dropdown").classList.remove("navitem1contentshow");
document.getElementById("navitem2dropdown").classList.remove("navitem2contentshow");
}
#navitem1 {
display: inline-block;
background: url('images/inbox.png');
background-size: 60% 60%;
background-repeat: no-repeat;
background-position: center;
background-color: #fff;
width: 15%;
height: 100%;
border-radius: 50%;
border: 2px solid #f3ac12;
cursor: pointer;
}
#navitem1:hover {
background-color: #e7f4fa;
}
#navitem1:active {
background-color: #e7f4fa;
}
#navitem1 .text {
position: relative;
bottom: 25px;
left: -0px;
visibility: hidden;
}
#navitem1:hover .text {
visibility: visible;
}
.navitem1content {
display: none;
position: absolute;
margin-top: 20px;
left: 0.40%;
background-color: #fff;
width: 24.1%;
min-width: 256px;
max-width: 360px;
height: 400px;
padding: 10px;
border: 1px solid #5b696c;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
}
.navitem1contentshow {
display: block;
}
#navitem2 {
display: inline-block;
background: url('images/music.png');
background-size: 60% 60%;
background-repeat: no-repeat;
background-position: center;
background-color: #fff;
width: 15%;
height: 100%;
border-radius: 50%;
border: 2px solid #9e33ef;
}
#navitem2:hover {
background-color: #e7f4fa;
}
#navitem2:active {
background-color: #e7f4fa;
}
#navitem2 .text {
position: relative;
bottom: 25px;
left: -0px;
visibility: hidden;
}
#navitem2:hover .text {
visibility: visible;
}
.navitem2content {
display: none;
position: absolute;
margin-top: 20px;
left: 0.40%;
background-color: #fff;
width: 24.1%;
min-width: 256px;
max-width: 360px;
height: 400px;
padding: 10px;
border: 1px solid #5b696c;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
}
.navitem2contentshow {
display: block;
}
<div id="navitem1" onclick="navitem1(event)">
<p class="text">Inbox</p>
<div id="navitem1dropdown" class="navitem1content"></div>
</div>
<div id="navitem2" onclick="navitem2(event)">
<p class="text">Music</p>
<div id="navitem2dropdown" class="navitem2content"></div>
</div>

I would recommend ensuring that you hide the other content on click, and then toggle between the block and none display state on the element that you're trying to toggle:
function navitem1(event) {
event.stopPropagation();
document.getElementById("navitem2dropdown").style.display = 'none';
if (document.getElementById("navitem1dropdown").style.display == 'none') {
document.getElementById("navitem1dropdown").style.display = 'block';
} else {
document.getElementById("navitem1dropdown").style.display = 'none';
}
}
function navitem2(event) {
event.stopPropagation();
document.getElementById("navitem1dropdown").style.display = 'none';
if (document.getElementById("navitem2dropdown").style.display == 'none') {
document.getElementById("navitem2dropdown").style.display = 'block';
} else {
document.getElementById("navitem2dropdown").style.display = 'none';
}
}
#navitem1 {
display: inline-block;
background: url('images/inbox.png');
background-size: 60% 60%;
background-repeat: no-repeat;
background-position: center;
background-color: #fff;
width: 15%;
height: 100%;
border-radius: 50%;
border: 2px solid #f3ac12;
cursor: pointer;
}
#navitem1:hover {
background-color: #e7f4fa;
}
#navitem1:active {
background-color: #e7f4fa;
}
#navitem1 .text {
position: relative;
bottom: 25px;
left: -0px;
visibility: hidden;
}
#navitem1:hover .text {
visibility: visible;
}
.navitem1content {
display: none;
position: absolute;
margin-top: 20px;
left: 0.40%;
background-color: #fff;
width: 24.1%;
min-width: 256px;
max-width: 360px;
height: 400px;
padding: 10px;
border: 1px solid #5b696c;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
}
.navitem1contentshow {
display: block;
}
#navitem2 {
display: inline-block;
background: url('images/music.png');
background-size: 60% 60%;
background-repeat: no-repeat;
background-position: center;
background-color: #fff;
width: 15%;
height: 100%;
border-radius: 50%;
border: 2px solid #9e33ef;
}
#navitem2:hover {
background-color: #e7f4fa;
}
#navitem2:active {
background-color: #e7f4fa;
}
#navitem2 .text {
position: relative;
bottom: 25px;
left: -0px;
visibility: hidden;
}
#navitem2:hover .text {
visibility: visible;
}
.navitem2content {
display: none;
position: absolute;
margin-top: 20px;
left: 0.40%;
background-color: #fff;
width: 24.1%;
min-width: 256px;
max-width: 360px;
height: 400px;
padding: 10px;
border: 1px solid #5b696c;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
}
.navitem2contentshow {
display: block;
}
<div id="navitem1" onclick="navitem1(event)">
<p class="text">Inbox</p>
<div id="navitem1dropdown" class="navitem1content">navitem1
</div>
</div>
<div id="navitem2" onclick="navitem2(event)">
<p class="text">Music</p>
<div id="navitem2dropdown" class="navitem2content">navitem2
</div>
</div>
Hope this helps! :)

Remove the show class from the dropdown not being selected when the other is selected. This covers the problem whether it has been toggled yet or not.
function navitem1(event) {
event.stopPropagation();
document.getElementById( "navitem2dropdown" ).classList.remove( "navitem2contentshow" );
document.getElementById( "navitem1dropdown" ).classList.toggle( "navitem1contentshow" );
}
function navitem2(event) {
event.stopPropagation();
document.getElementById( "navitem1dropdown" ).classList.remove("navitem1contentshow");
document.getElementById( "navitem2dropdown" ).classList.toggle( "navitem2contentshow" );
}

Related

Onclick Function in Dropdown Menu not working

I'm a newbie and practicing dropdown menu using the following Youtube video https://www.youtube.com/watch?v=uFIl4BvYne0. Everything is working except the onclick function.
Can anyone point out where I'm going wrong?
function show(anything) {
document.querySelector('.textBox').value =
anything;
}
let dropdown = document.querySelector('.dropdown');
dropdown.onclick = function() {
dropdown.classList.toggle('active');
}
#import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
background: #fafafa;
}
.dropdown {
position: relative;
margin-top: 100px;
width: 300px;
height: 50px;
}
.dropdown::before {
content: "";
position: absolute;
right: 20px;
top: 15px;
z-index: 10000;
width: 8px;
height: 8px;
border: 2px solid #333;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
transition: 0.5s;
pointer-events: none;
}
.dropdown.active::before {
top: 22px;
transform: rotate(-225deg);
}
.dropdown input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100;
cursor: pointer;
background: #fff;
border: none;
outline: none;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
padding: 12px 20px;
border-radius: 10px;
}
.dropdown .option {
position: absolute;
top: 70px;
width: 100%;
background: #fff;
box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.05);
border-radius: 10px;
overflow: hidden;
/*display: none*/
;
}
.dropdown.active .option {
display: block;
}
.dropdown .option div {
padding: 10px 20px;
cursor: pointer;
}
.dropdown .option div:hover {
background: #62baea;
color: #fff;
}
<body>
<h2>Converter</h2>
<label>Litres</label>
<div class="dropdown">
<input type="text" class="textBox" placeholder="HTML" readonly>
<div class="option">
<div onlcick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
</div>
</div>
</body>
I have tried some fixes but couldn't find out the problem.
Note: I'm pretty new in this field.

You need to add addEventListener in order to append an action:
function show(anything) {
document.querySelector('.textBox').value =
anything;
}
let dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(event) { // add click function
dropdown.classList.toggle('active'); // i don't know what class you want to change so i changed the background to a class to demonstrate the click
});
#import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
background: #fafafa;
}
.dropdown {
position: relative;
margin-top: 100px;
width: 300px;
height: 50px;
}
.dropdown::before {
content: "";
position: absolute;
right: 20px;
top: 15px;
z-index: 10000;
width: 8px;
height: 8px;
border: 2px solid #333;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
transition: 0.5s;
pointer-events: none;
}
.dropdown.active::before {
top: 22px;
transform: rotate(-225deg);
}
.dropdown input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100;
cursor: pointer;
background: #fff;
border: none;
outline: none;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
padding: 12px 20px;
border-radius: 10px;
}
.dropdown .option {
position: absolute;
top: 70px;
width: 100%;
background: #fff;
box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.05);
border-radius: 10px;
overflow: hidden;
/*display: none*/
;
}
.dropdown.active .option {
display: block;
background-color: grey;
}
.dropdown .option div {
padding: 10px 20px;
cursor: pointer;
}
.dropdown .option div:hover {
background: #62baea;
color: #fff;
}
<body>
<h2>Converter</h2>
<label>Litres</label>
<div class="dropdown">
<input type="text" class="textBox" placeholder="HTML" readonly>
<div class="option">
<div onlcick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
</div>
</div>
</body>

How to create an iOS style dragging using HammerJS and CSS?

I'm trying to create an iOS 'style' modal sheet that that will popup and then the users can drag it down and the modal sheet will follow the users touch gesture and then it will disappear OFF the screen using HammerJS.
I've managed to create the modal sheet and I have also implemented the HammerJS to a certain extend.
When the user 'swipes' down the modal sheet, it will disappear but it doesn't follow the swipe/touch gesture before it hides. it just disappears which makes it a bit clunky.
$(document).on('click', '.button', function() {
$('.addreFinder').css('bottom', '0');
$('.sheet-backdrop').addClass('backdrop-in');
});
///custom modal sheet///
$('.c-modal').each(function() {
var mc = new Hammer(this);
mc.get('swipe').set({
direction: Hammer.DIRECTION_ALL
});
mc.on("swipedown", function(ev) {
console.log('dragged');
$('.modal-in').css('bottom', '-1850px');
$('.sheet-backdrop').removeClass('backdrop-in');
});
});
.sheet-modal.modal-in {
position: absolute;
bottom: -1850px;
left: 0;
width: 100%;
padding: 20px;
transition: bottom 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
display: block;
transform: translate3d(0, 0, 0);
z-index: 13200;
}
.sheet-modal.modal-in,
.sheet-modal.modal-out {
transition-duration: .3s;
}
.demo-sheet-swipe-to-close,
.demo-sheet-swipe-to-step {
--f7-sheet-bg-color: #fff;
--f7-sheet-border-color: transparent;
border-radius: 15px 15px 0 0;
overflow: hidden;
}
.sheet-modal {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 60%;
display: none;
box-sizing: border-box;
transition-property: transform;
transform: translate3d(0, 100%, 0);
background: var(--f7-sheet-bg-color);
z-index: 12500;
will-change: transform;
}
.swipe-handler {
height: 16px;
position: absolute;
left: 0;
width: 100%;
top: 0;
background: #fff;
cursor: pointer;
z-index: 10;
}
.page-content {
will-change: scroll-position;
overflow: auto;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
height: 100%;
position: relative;
z-index: 1;
padding-top: calc(var(--f7-page-navbar-offset, 0px) + var(--f7-page-toolbar-top-offset, 0px) + var(--f7-page-subnavbar-offset, 0px) + var(--f7-page-searchbar-offset, 0px) + var(--f7-page-content-extra-padding-top, 0px));
padding-bottom: calc(var(--f7-page-toolbar-bottom-offset, 0px) + var(--f7-safe-area-bottom) + var(--f7-page-content-extra-padding-bottom, 0px));
}
.swipe-handler:after {
content: '';
width: 36px;
height: 6px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -18px;
margin-top: -3px;
border-radius: 3px;
background: #666;
}
.block-title-large {
font-size: 20px;
color: #000;
line-height: 40px;
padding: 10px;
margin-top: 20px;
}
.block {
box-sizing: border-box;
position: relative;
z-index: 1;
color: #000;
padding: 10px;
}
.sheet-backdrop.backdrop-in {
visibility: visible;
opacity: 1;
}
.sheet-backdrop {
z-index: 11000;
}
.actions-backdrop,
.custom-modal-backdrop,
.dialog-backdrop,
.popover-backdrop,
.popup-backdrop,
.preloader-backdrop,
.sheet-backdrop {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4);
z-index: 13000;
visibility: hidden;
opacity: 0;
transition-duration: .4s;
}
.bbody {
width: 100%;
box-sizing: border-box;
margin-top: 50px;
}
.wrapper {
text-align: center;
position: relative;
height: 80px;
font-size: 0;
top: 50%;
transform: translateY(-50%);
}
.search {
padding: 0 30px;
font-size: 18px;
width: 80%;
max-width: 400px;
height: 80px;
border: 1px solid #b3b3b3;
border-radius: 20px 0 0 20px;
box-sizing: border-box;
font-size: 13px;
vertical-align: top;
display: inline-block;
}
.submit {
cursor: pointer;
border: none;
background: url('data:image/png;base64,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') no-repeat center center, #1e1e20;
background-size: 35px 35px;
border-radius: 0 20px 20px 0;
padding: 15px 25px;
display: inline-block;
width: 20%;
height: 80px;
box-sizing: border-box;
font-size: 13px;
vertical-align: top;
}
.pac-container {
width: 100%;
}
.pac-item {
cursor: pointer;
padding: 0 4px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: 30px;
vertical-align: middle;
text-align: left;
border-top: 1px solid #e6e6e6;
color: #999;
width: 100%;
}
.pac-icon {
width: 15px;
height: 20px;
margin-right: 7px;
margin-top: 6px;
display: inline-block;
vertical-align: top;
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
background-size: 34px;
}
.pac-icon-marker {
background-position: -1px -161px;
}
.addressFinderTexts>* {
margin-top: 10px;
}
.addressFinderTexts p {
font-size: 12px;
}
.useMyCureentLOcationBtn {
width: 80%;
height: 25px;
line-height: 25px;
display: inline-block;
background: #ffaf06;
color: #fff;
font-size: 12px;
margin-top: 15px;
overflow: hidden;
}
.addressFinderTexts {
width: 100%;
margin-top: 20px;
min-height: 380px;
height: auto;
text-align: center;
padding: 10px;
box-sizing: border-box;
color: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<div class="sheet-backdrop"></div>
<div class="c-modal sheet-modal demo-sheet-swipe-to-close modal-in addreFinder" id="addressFinder">
<div class="sheet-modal-inner">
<div class="swipe-handler"></div>
<div class="page-content">
<div class="block">
<div class="bbody">
Drag me down to hide me
</div>
</div>
</div>
</div>
</div>
<button class="button">Click Here To show modal</button>
I hope I have explained the situation properly for someone to be able to help me.

Aligning a chat bubble content to the right

I have a bootstrap card that is adding chat bubbles to a list group. I want to align the content to the right so the bubble isn't just in the middle. I tried using align=right and wrapping that div tag in:
$("#messages").append($("<div align=right><div class=bubble-r><li></div></div><br />").text(msg));
but that didn't work. What am I missing?
$("#messages").append(
$("<div class=bubble-r><li></div><br />").text(msg)
);
} else {
$("#messages").append(
$("<div class=bubble><li></div> <br />").text(msg)
);
}
});
}
render() {
return (
<ul id="messages">
<div />
</ul>
);
}
CSS
.chat {
color: white;
}
.chat .dropdown-toggle:after {
content: none;
}
.userbutton {
size: 2px;
}
.card {
color: black;
}
.card-text {
overflow: auto;
height: 10rem;
}
.onlinebar {
position: "absolute";
color: red;
bottom: 0;
left: 0;
}
#chatbtn {
color: black;
width: 200px;
margin-left: 5px;
margin-top: 0px;
}
.chatcollapse {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#chatHeader {
margin: 0px;
padding: 0px;
}
#chatcard {
width: 2rem;
}
.card-deck .card {
max-width: calc(25% + 80px);
}
.card-body {
padding: 0px;
margin: 0px;
}
.bubble-r {
align-items: flex-end;
position: relative;
background: #0072c6;
max-width: 100px;
padding: 5px;
font-family: arial;
margin: 0 auto;
font-size: 14px;
color: white;
border-radius: 6px;
}
.bubble-r:after,
.bubble-r:before {
left: 100%; /*change this from right to left*/
top: 42%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.bubble-r:after {
border-color: rgba(200, 200, 204, 0);
border-left-color: #0072c6; /*change this from right to left */
border-width: 8px;
margin-top: -3px;
}
.bubble-r:before {
border-color: rgba(200, 204, 0, 0);
border-left-color: #0072c6; /*change this from right to left*/
border-width: 8px;
margin-top: -3px;
}
.bubble {
position: relative;
background: #cad5d7;
max-width: 100px;
padding: 5px;
font-family: arial;
margin: 0 auto;
font-size: 14px;
border-radius: 6px;
}
.bubble:after,
.bubble:before {
right: 100%;
top: 42%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.bubble:after {
border-color: rgba(255, 255, 204, 0);
border-right-color: #cad5d7;
border-width: 8px;
margin-top: -3px;
}
.bubble:before {
border-color: rgba(255, 204, 0, 0);
border-right-color: #cad5d7;
border-width: 8px;
margin-top: -3px;
}

How do I close custom popover when click outside?

I'm developing a Cordova app. For that I'm using Vue.js and jQuery for bindings and script and I'm developing UI on my own. I could do page transitions and animations for most of the UI like, Radio buttons and check boxes etc. But I could not be able to develop a custom popover. I have tried following code.
Vue.directive('popover', {
bind: function(el, bindings, vnode) {
$(el).click(function() {
var pageEl = $(this).closest('.ui-page');
pageEl.find('.drawer').toggleClass('active');
$(el).closest('.ui-page').click(function(e) {
// $('.drawer', this).removeClass('active');
});
});
}
})
var pageInstace = new Vue({
el: '#popover-page',
data: {
options: [1, 2, 3, 4, 5]
}
})
html,
body {
position: relative;
width: 100%;
height: 100%;
}
body {
font-family: 'Open Sans';
font-size: 16px;
margin: 0;
overflow: hidden;
}
* {
box-sizing: border-box;
}
*, *:active, *:hover, *:focus {
outline: 0;
}
button {
padding: 0;
}
img {
max-width: 100%;
}
.ui-page,
.header,
.scroll-content {
position: absolute;
width: 100%;
top: 0;
left: 0;
overflow: hidden;
}
.ui-page {
height: 100%;
background-color: #fff;
}
.page-content {
position: relative;
height: 100%;
overflow-y: auto;
z-index: 1;
}
.header {
height: 54px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12), 0 1px 8px 0 rgba(0, 0, 0, 0.2);
background-color: #607D8B;
color: #fff;
display: flex;
align-items: center;
padding-left: 16px;
padding-right: 16px;
z-index: 1;
}
.scroll-content {
bottom: 0;
overflow: auto;
}
.scroll-content.has-header {
top: 54px;
}
.header button {
color: #fff;
height: 100%;
}
.header .header-title {
margin: 0 22px;
font-size: 18px;
font-weight: 600;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.header .buttons {
position: relative;
display: flex;
}
.header .buttons button {
padding: 4px 8px;
}
.header .buttons button:last-child {
padding: 4px 0 4px 8px;
}
.btn {
position: relative;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border: none;
padding: 8px 16px;
font-size: 16px;
border-radius: 4px;
font-family: unset;
overflow: hidden;
}
.btn-clear {
background-color: transparent;
border: none;
}
.item {
position: relative;
display: flex;
overflow: hidden;
border-bottom: 1px solid #bdbdbd;
}
.drawer {
position: absolute;
background-color: #fff;
z-index: 4;
top: 60px;
right: 4px;
border-radius: 2px;
box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.4);
transform: scale(0, 0);
transform-origin: top right;
transition: transform ease 0.3s;
min-width: 180px;
}
.drawer.active {
transform: scale(1, 1);
}
.drawer .drawer-content {
position: relative;
padding: 4px 0;
}
.drawer .drawer-content:after {
content: '';
position: absolute;
border: 8px solid transparent;
border-bottom-color: #fff;
top: -14px;
right: 22px;
}
.drawer .item {
padding: 12px 16px;
font-size: 14px;
}
.drawer .item:last-child {
border-bottom: none;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div class="ui-page" id="popover-page">
<div class="page-content">
<div class="header">
<div class="header-title">
Page Title
</div>
<button class="btn-clear" v-popover>Popover</button>
</div>
<div class="drawer">
<div class="drawer-content">
<div class="item" v-for="option in options">{{ option }}</div>
</div>
</div>
<div class="scroll-content has-header">
<div class="page-content">
<p>Some Content</p>
</div>
</div>
</div>
</div>
This works fine for toggling popover on button click. I tried so much. But I could not hide the popover when click on outside of the popover.
How can I hide popover when clicking out side of it?

Please try this. I have added jQuery
$('body').click(function(e) {
if (!$(e.target).closest('.drawer').length){
$(".drawer").removeClass("active");
}
});
$('body').click(function(e) {
if (!$(e.target).closest('.drawer').length){
$(".drawer").removeClass("active");
}
});
Vue.directive('popover', {
bind: function(el, bindings, vnode) {
$(el).click(function(e) {
e.stopPropagation();
var pageEl = $(this).closest('.ui-page');
pageEl.find('.drawer').toggleClass('active');
$(el).closest('.ui-page').click(function(e) {
// $('.drawer', this).removeClass('active');
});
});
}
})
var pageInstace = new Vue({
el: '#popover-page',
data: {
options: [1, 2, 3, 4, 5]
}
})
html,
body {
position: relative;
width: 100%;
height: 100%;
}
body {
font-family: 'Open Sans';
font-size: 16px;
margin: 0;
overflow: hidden;
}
* {
box-sizing: border-box;
}
*, *:active, *:hover, *:focus {
outline: 0;
}
button {
padding: 0;
}
img {
max-width: 100%;
}
.ui-page,
.header,
.scroll-content {
position: absolute;
width: 100%;
top: 0;
left: 0;
overflow: hidden;
}
.ui-page {
height: 100%;
background-color: #fff;
}
.page-content {
position: relative;
height: 100%;
overflow-y: auto;
z-index: 1;
}
.header {
height: 54px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12), 0 1px 8px 0 rgba(0, 0, 0, 0.2);
background-color: #607D8B;
color: #fff;
display: flex;
align-items: center;
padding-left: 16px;
padding-right: 16px;
z-index: 1;
}
.scroll-content {
bottom: 0;
overflow: auto;
}
.scroll-content.has-header {
top: 54px;
}
.header button {
color: #fff;
height: 100%;
}
.header .header-title {
margin: 0 22px;
font-size: 18px;
font-weight: 600;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.header .buttons {
position: relative;
display: flex;
}
.header .buttons button {
padding: 4px 8px;
}
.header .buttons button:last-child {
padding: 4px 0 4px 8px;
}
.btn {
position: relative;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border: none;
padding: 8px 16px;
font-size: 16px;
border-radius: 4px;
font-family: unset;
overflow: hidden;
}
.btn-clear {
background-color: transparent;
border: none;
}
.item {
position: relative;
display: flex;
overflow: hidden;
border-bottom: 1px solid #bdbdbd;
}
.drawer {
position: absolute;
background-color: #fff;
z-index: 4;
top: 60px;
right: 4px;
border-radius: 2px;
box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.4);
transform: scale(0, 0);
transform-origin: top right;
transition: transform ease 0.3s;
min-width: 180px;
}
.drawer.active {
transform: scale(1, 1);
}
.drawer .drawer-content {
position: relative;
padding: 4px 0;
}
.drawer .drawer-content:after {
content: '';
position: absolute;
border: 8px solid transparent;
border-bottom-color: #fff;
top: -14px;
right: 22px;
}
.drawer .item {
padding: 12px 16px;
font-size: 14px;
}
.drawer .item:last-child {
border-bottom: none;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div class="ui-page" id="popover-page">
<div class="page-content">
<div class="header">
<div class="header-title">
Page Title
</div>
<button class="btn-clear" v-popover>Popover</button>
</div>
<div class="drawer">
<div class="drawer-content">
<div class="item" v-for="option in options">{{ option }}</div>
</div>
</div>
<div class="scroll-content has-header">
<div class="page-content">
<p>Some Content</p>
</div>
</div>
</div>
</div>

Vue.directive('popover', {
bind: function(el, bindings, vnode) {
$(el).click(function() {
$(el).closest('.ui-page').find('.drawer').toggleClass('active');
});
$('body').on('click', $(el).closest('.ui-page'), function(e) {
var $drawer = $(el).closest('.ui-page').find('.drawer');
var $target = $(e.target);
if ($target.closest($(el)).length <= 0
&& $drawer.hasClass('active')
&& $target.closest('.drawer').length <= 0) {
$drawer.removeClass('active');
}
});
}
})
var pageInstace = new Vue({
el: '#popover-page',
data: {
options: [1, 2, 3, 4, 5]
}
})
html,
body {
position: relative;
width: 100%;
height: 100%;
}
body {
font-family: 'Open Sans';
font-size: 16px;
margin: 0;
overflow: hidden;
}
* {
box-sizing: border-box;
}
*, *:active, *:hover, *:focus {
outline: 0;
}
button {
padding: 0;
}
img {
max-width: 100%;
}
.ui-page,
.header,
.scroll-content {
position: absolute;
width: 100%;
top: 0;
left: 0;
overflow: hidden;
}
.ui-page {
height: 100%;
background-color: #fff;
}
.page-content {
position: relative;
height: 100%;
overflow-y: auto;
z-index: 1;
}
.header {
height: 54px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12), 0 1px 8px 0 rgba(0, 0, 0, 0.2);
background-color: #607D8B;
color: #fff;
display: flex;
align-items: center;
padding-left: 16px;
padding-right: 16px;
z-index: 1;
}
.scroll-content {
bottom: 0;
overflow: auto;
}
.scroll-content.has-header {
top: 54px;
}
.header button {
color: #fff;
height: 100%;
}
.header .header-title {
margin: 0 22px;
font-size: 18px;
font-weight: 600;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.header .buttons {
position: relative;
display: flex;
}
.header .buttons button {
padding: 4px 8px;
}
.header .buttons button:last-child {
padding: 4px 0 4px 8px;
}
.btn {
position: relative;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border: none;
padding: 8px 16px;
font-size: 16px;
border-radius: 4px;
font-family: unset;
overflow: hidden;
}
.btn-clear {
background-color: transparent;
border: none;
}
.item {
position: relative;
display: flex;
overflow: hidden;
border-bottom: 1px solid #bdbdbd;
}
.drawer {
position: absolute;
background-color: #fff;
z-index: 4;
top: 60px;
right: 4px;
border-radius: 2px;
box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.4);
transform: scale(0, 0);
transform-origin: top right;
transition: transform ease 0.3s;
min-width: 180px;
}
.drawer.active {
transform: scale(1, 1);
}
.drawer .drawer-content {
position: relative;
padding: 4px 0;
}
.drawer .drawer-content:after {
content: '';
position: absolute;
border: 8px solid transparent;
border-bottom-color: #fff;
top: -14px;
right: 22px;
}
.drawer .item {
padding: 12px 16px;
font-size: 14px;
}
.drawer .item:last-child {
border-bottom: none;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div class="ui-page" id="popover-page">
<div class="page-content">
<div class="header">
<div class="header-title">
Page Title
</div>
<button class="btn-clear" v-popover>Popover</button>
</div>
<div class="drawer">
<div class="drawer-content">
<div class="item" v-for="option in options">{{ option }}</div>
</div>
</div>
<div class="scroll-content has-header">
<div class="page-content">
<p>Some Content</p>
</div>
</div>
</div>
</div>

Why the height of div make a gap between the image and div?

Here is my html struct, simple
<div> <img style="width:100%;height:100%"/> </div>
div shows in the chrome:
and the image, there is a gap between the div and image
noticed that the image supposed to cover the div,
if I change the height of div more than 10px, looks perfect.
the image cover the div
I've tested if the height of div is less, the gap is bigger.
So what's the problem?
there is a example I copy a part of the code from my project, need to point to that image in the chrome dev tools:
._display_style {
display: none;
}
.sketchup_display_style {
display: block;
}
input.text {
margin-bottom: 12px;
width: 95%;
padding: .4em;
}
fieldset {
padding: 0;
border: 0;
margin-top: 25px;
}
h1 {
font-size: 1.2em;
margin: .6em 0;
}
div#users-contain {
width: 350px;
margin: 20px 0;
}
div#users-contain table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
}
div#users-contain table td,
div#users-contain table th {
border: 1px solid #eee;
padding: .6em 10px;
text-align: left;
}
.ui-dialog .ui-state-error {
padding: .3em;
}
.validateTips {
border: 1px solid transparent;
padding: 0.3em;
}
.cab_list_form #shape div img {
width: 80%;
height: 80%;
}
/*
.cab_list_form #shape {
width:150px;height:200px;
}*/
.cab_list_form #shape div {
/*
width:160px;
height:160px;
float:left;
*/
padding: 0.2em 0 0.6em;
text-align: center;
background-repeat: no-repeat;
cursor: pointer;
}
.cab_list_form #shape div span {
width: 100%;
display: block;
}
.toggle-red {
border: 2px solid red;
}
.cab_style_img {
background-color: #fff;
border: 2px solid #ebebeb;
text-align: center;
}
.cab_style_img img {
width: 290px;
height: 240px;
}
.question_img {
padding-right: 1em;
float: left;
}
#cab_condition table td label {
/*
background-repeat:no-repeat;
text-align:center;
padding:0.1em 0.8em 0.3em;
cursor:pointer;
width:50px;
height:100%;
line-height:20px;
margin:auto;
text-align:center;
*/
border-radius: 20px;
text-align: center;
width: 55px;
height: 20px;
line-height: 20px;
margin: auto;
background-color: #ffffff;
cursor: pointer;
padding: 0 0.5em;
}
#cab_condition table td label input {
display: none;
}
#cab_condition table td label span {
margin: 0.1em 0.6em;
}
.howmanypart_td span {
margin: 0.1em 0.7em;
}
.down_search div {
background-repeat: no-repeat;
cursor: pointer;
text-align: center;
height: 30px;
line-height: 30px;
color: #30b2ba;
/*
padding:0.5em 0;
width:50px;
*/
}
.priceDiv select {
border: 1px solid #bdbdbd;
width: 130px;
height: 28px;
border-radius: 20px;
/*text-align:center;*/
color: #30b2ba;
cursor: pointer;
}
.door-background {
position: absolute;
border: 2px solid #000;
border-collapse: collapse;
text-align: center;
padding: 0;
margin: 0;
}
.door-background th,
.door-background td {
border: 2px solid #999;
border-width: 0 2px 2px 0;
padding: 0;
}
.tableizer-table {
border: 1px solid #000;
border-collapse: collapse;
width: 100%;
text-align: center;
}
.tableizer-table th,
.tableizer-table td {
border: 1px solid #999;
border-width: 0 1px 1px 0;
padding: 2px;
}
.wardrobe_type_list {
width: 100%;
height: 40px;
}
.wardrobe_type_list .groups_check {
float: left;
margin-right: 25px;
height: 25px;
line-height: 25px;
}
.wardrobe_type_list .groups_check img {
height: 100%;
}
.wardrobe_type_list .groups_check input[type=radio] {
height: 25px;
line-height: 25px;
}
.display-none {
display: none;
}
.search-container {
float: left;
}
body {
font-size: 14px;
margin: 15px;
}
.pax_layer {
position: absolute;
background-repeat: no-repeat;
}
.pax_highlight {
position: absolute;
border: solid 3px #329afb;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 3;
}
.pax_highlight_text {
color: #329afb;
font-weight: bold;
font-size: 12px;
bottom: 0px;
margin-bottom: -19px;
position: absolute;
text-align: center;
}
#groups_list {
left: 10px;
position: relative;
}
#white_hide_menu {
background-color: white;
height: 51px;
position: absolute;
top: 517px;
width: 5px;
display: none;
}
.menu_groups {
height: 140px;
overflow: hidden;
position: relative;
width: 100%;
}
.thumbs_layers_div_a {
display: none;
}
.items div {
float: left;
}
.items {
overflow-x: scroll;
overflow-y: hidden;
width: 100%;
height: 100%;
}
.thumbs_layers_group {
height: 100px;
}
.thumbs_layers_div {
background-color: white;
cursor: pointer;
float: left;
margin-left: 8px;
padding: 1px;
width: 93px;
height: 93px;
text-align: center;
display: inline-block;
display: inline;
}
.thumbs_layers_div_selected {
border-color: #389CFC;
border-width: 3px;
background-color: #389CFC;
}
.thumbs_layers_div img {
border-color: #D1D1D1;
border-style: solid;
border-width: 1px;
height: 91px;
}
.thumbs_layers_add_item {
width: 100%;
text-align: center;
height: 25px;
line-height: 25px;
overflow: hidden;
}
.thumbs_layers_div_selected img {
border-color: #389CFC;
}
.pax {
height: 180px;
}
#layers_pax_buffer {
pointer-events: none;
}
#layers_pax_buffer {
display: none;
border: 1px solid #CCCCCC;
width: 1048px;
height: 585px;
position: absolute;
top: 98px;
}
.val {
width: 1048px;
height: 150px;
}
#dialog-confirm,
#dialog-confirm2 {
display: none;
}
.pax_h_dimension {
display: none;
position: absolute;
height: 7px;
text-align: center;
font-size: 11px;
font-style: italic;
border-width: 0px 1px 0px 1px;
border-style: solid;
border-color: #444444;
line-height: 23px;
margin-top: -12px;
}
.pax_v_dimension {
display: none;
position: absolute;
width: 7px;
text-align: center;
font-size: 11px;
font-style: italic;
border-width: 1px 0px 1px 0px;
border-style: solid;
border-color: #444444;
}
.pax_h_rule {
height: 1px;
background: #444444;
border: none;
margin: 3px 0 0px 0;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
hr {
margin: 20px 0;
border: 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #fff;
}
.pax_v_rule {
width: 1px;
background: #444444;
border: none;
margin: 0 3px 0 0;
position: absolute;
left: 3px;
}
.pax_v_text {
position: absolute;
top: 50%;
height: 200px;
margin-top: -100px;
margin-left: 88px;
display: block;
white-space: nowrap;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
font-size: 11px;
font-style: italic;
pointer-events: none;
}
.drawboard {
xborder: 2px solid grey;
position: relative;
margin: 10px auto;
}
.pax_layer {
position: absolute;
background-repeat: no-repeat;
xborder: 1px solid green;
background: #f0f0f0;
overflow: hidden;
}
.pax_highlight {
position: absolute;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
box-sizing: border-box;
z-index: 3;
border-width: 3px;
border-style: solid;
border-color: rgb(50, 154, 251);
}
#main {
min-width: 800px;
margin: 0 auto;
height: auto;
}
.attr {
width: 90%;
float: left;
}
.name {
width: 90%;
text-align: left;
margin: 10px;
}
.selectOption {
width: 130px;
float: left;
margin-left: 8px;
text-align: center;
/*cursor: pointer;*/
}
.selectPic {
width: 100px;
height: 100px;
border: 3px solid #eee;
margin: 0 auto;
overflow: hidden;
}
.selectPic img {
width: 100%;
}
.selectRadio {
width: 100%;
font-size: 12px;
}
.choice_collection {
width: 70px;
height: 18px;
border: 1px solid #bbb;
float: left;
margin: 5px;
padding: 5px;
text-align: center;
cursor: pointer;
}
#message {
width: 140px;
height: 80px;
border: 3px solid #ddd;
margin: 5px;
padding: 10px;
float: left;
background: #eee;
}
#message div {
margin-bottom: 10px;
}
.button {
width: 150px;
height: 40px;
padding: 10px;
float: right;
xmargin-top: 300px;
}
.button button {
color: rgb(255, 255, 255);
border: 1px solid rgb(221, 221, 221);
background: rgb(51, 204, 255);
width: 80px;
height: 30px;
margin: 5px;
font-size: 14px;
xfloat: right;
}
.pax {
border: 3px solid #eee;
height: auto;
margin: 20px;
overflow: hidden;
min-width: 800px;
xoverflow-y: hidden;
}
#items_scroll {
overflow-x: scroll;
padding: 5px;
}
.thumbs_layers_div {
overflow: hidden;
height: 120px;
}
.wardrobe_type_list {
xpadding-top: 10px;
xpadding-left: 10px;
xwidth: 90%;
margin: 10px;
margin-bottom: 0;
}
#items {}
.thumbs_layers_div_selected .thumbs_layers_add_item {
color: white;
}
.v #items img {
width: 95px;
height: auto;
}
.v .thumbs_layers_div {
height: 70px;
}
<div id="drawboard1" class="drawboard" style="width: 250px; height: 300px;">
<div name="%E5%B7%A6" class="pax_layer" style="top: 0px; left: 4px; width: 121px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test1&suffix=GTJXG01GMJXG01&width=121">
<div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
<div>%E5%B7%A6</div>
<div>宽度:968</div>
<div>高度:2400</div>
<div>price:0</div>
<div>ratioTop:0</div>
<div>ratioLeft:0</div>
<div>ratioWidth:0</div>
<div>ratioHeight:0</div>
</div>
</div>
<div name="copyRight" class="pax_layer" style="top: 0px; left: 125px; width: 121px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test1&suffix=GTJXG01GMJXG01&width=121">
<div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
<div>copyRight</div>
<div>宽度:968</div>
<div>高度:2400</div>
<div>price:0</div>
<div>ratioTop:0</div>
<div>ratioLeft:0</div>
<div>ratioWidth:0</div>
<div>ratioHeight:0</div>
</div>
</div>
<div name="1" class="pax_layer" style="top: 0px; left: 243.75px; width: 6.25px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test3&suffix=GTJXG01GMJXG01&width=6.25">
<div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
<div>1</div>
<div>宽度:50</div>
<div>高度:2400</div>
<div>price:0</div>
<div>ratioTop:0</div>
<div>ratioLeft:0</div>
<div>ratioWidth:0</div>
<div>ratioHeight:0</div>
</div>
</div>
<div name="1" class="pax_layer" style="top: 0px; left: 0px; width: 6.25px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test3&suffix=GTJXG01GMJXG01&width=6.25">
<div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
<div>1</div>
<div>宽度:50</div>
<div>高度:2400</div>
<div>price:0</div>
<div>ratioTop:0</div>
<div>ratioLeft:0</div>
<div>ratioWidth:0</div>
<div>ratioHeight:0</div>
</div>
</div>
<div name="dingxian" class="pax_layer" style="top: -8.125px; left: -6.25px; width: 262.5px; height: 8.125px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="http://i4.piimg.com/4851/4195cbf23b1d9389.jpg">
<div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
<div>dingxian</div>
<div>宽度:2100</div>
<div>高度:65</div>
<div>price:0</div>
<div>ratioTop:0</div>
<div>ratioLeft:0</div>
<div>ratioWidth:0</div>
<div>ratioHeight:0</div>
</div>
</div>
<div class="pax_highlight" style="width: 121px; height: 300px; top: 0px; left: 125px; display: none;"></div>
</div>

Try to this
img {
vertical-align: top;
}
because img vertical-align is
baseline - the default value.
more about vertical-align

#Zange-chan you aren't exactly right,once you set the position of one element as "absolute",it would be separated from the DOM flow,and it'd still wrap its subelements actually.
The problem is easy to solve ,one solution is setting the display attribute as block for the img.
please try it
img{
display:block;
}

Develop Reference

JavaScript is the programming language of the Web.

Toggling Menu Overlays Using JavaScript - javascript

Related

Onclick Function in Dropdown Menu not working

How to create an iOS style dragging using HammerJS and CSS?

Aligning a chat bubble content to the right

How do I close custom popover when click outside?

Why the height of div make a gap between the image and div?

Categories

Resources