Develop Reference

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>

How can I also animate border radius in jquery?

I'm trying to animate the div to extend width (like slide out animation) but I've gotten that to work, however I'm also trying to remove the border radius as this happens but when I do this the entire function doesn't work like.
Thank you for any help!
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
$(this).animate({
width: "950px",
border - radius: "0px"
}, 1000);
$('#enquiry-form').slideToggle('slow');
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
transition: width ease 1s;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 10px 19px 0 0;
display: inline-block;
}
#enquiry-form {
width: 950px;
height: 400px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
</div>
</div>

just change border-radius: "0px"; to borderRadius: "0px"
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
$(this).animate({
width: "950px",
borderRadius: "0px"
}, 1000);
$('#enquiry-form').slideToggle('slow');
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
transition: width ease 1s;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 10px 19px 0 0;
display: inline-block;
}
#enquiry-form {
width: 950px;
height: 400px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
</div>
</div>

You also can change the function like this: Notice "border-radius":"0px"
$(this).animate({
"width": "950px",
"border-radius": "0px"}, 1000);

Content doesn't show up on toggle button with jQuery

i'm creating a toggle button with jquery. I've watched a tutorial from youtube (lynda.com) on how to create toggle button with jquery. I tried copying the code but the content under "p tag" doesn't show up. it's working perfectly on the tutorial. i'm not good in javascript. maybe you could see what i missed or maybe libraries idk. here's my code. thank you in advance.
HTML:
<div id="toggle">
<div id="poptext"> toggle </div>
<div id="box">
<p> hello</p>
</div>
</div>
CSS:
#toggle {
position: fixed;
bottom: 0px;
left: 50%;
width: 240px;
margin: 0 auto;
margin-bottom: 10px;
margin-left: -120px;
}
#box {
margin: 0 auto;
position: relative;
margin-bottom: 10px;
margin-top: 10px;
border-radius: 19px;
text-shadow: 0 1px 2px #000;
background-color: #644d52;
display: none;
opacity: .9;
}
#box p {
margin: 0;
padding: 5px 20px 15px 20px;
text-align: left;
color: #FFF;
}
#poptext {
width: 50px;
height: 18px;
font-size: 14px;
text-align: left;
padding-left: 23px;
overflow: hidden;
cursor: pointer;
margin: 0 auto;
border-radius: 10px;
}
#poptext.highlight {
background: url("images/blue.jpg") no-repeat 5px 18px rgba(255, 128, 0, 0.8);
}
JAVASCRIPT:
<script>
window.jQuery || document.write('script src=\'jquery.min.js\'></script>');
$(document).ready(function () {
$('#poptext').click(function () {
$('#poptext').toggleClass('#highlight');
$('#box').animate({
height: 'toggle',
opacity: 'toggle',
width: 'toggle'
}, 500);
});
});
</script>

There are 2 issues here, 1 appending script tag as given won't work, you need to split it, second you need to wait for the script to load to execute your code. You can use the window load event to do that
document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></' + 'script>');
window.addEventListener('load', function() {
$('#poptext').click(function() {
$('#poptext').toggleClass('#highlight');
$('#box').animate({
height: 'toggle',
opacity: 'toggle',
width: 'toggle'
}, 500);
});
})
#toggle {
position: fixed;
bottom: 0px;
left: 50%;
width: 240px;
margin: 0 auto;
margin-bottom: 10px;
margin-left: -120px;
}
#box {
margin: 0 auto;
position: relative;
margin-bottom: 10px;
margin-top: 10px;
border-radius: 19px;
text-shadow: 0 1px 2px #000;
background-color: #644d52;
display: none;
opacity: .9;
}
#box p {
margin: 0;
padding: 5px 20px 15px 20px;
text-align: left;
color: #FFF;
}
#poptext {
width: 50px;
height: 18px;
font-size: 14px;
text-align: left;
padding-left: 23px;
overflow: hidden;
cursor: pointer;
margin: 0 auto;
border-radius: 10px;
}
#poptext.highlight {
background: url("images/blue.jpg") no-repeat 5px 18px rgba(255, 128, 0, 0.8);
}
<div id="toggle">
<div id="poptext">toggle</div>
<div id="box">
<p>hello</p>
</div>
</div>

jQuery-UI resizable bug with slide animation

I cannot seem to figure out what the jQueryUI resizable function is doing to cause the anchor point of the "chat box" div element I've created. The problem is that when you resize this element by dragging the top right corner, it does resize correctly, but when you press the close button to play the jQuery animation to collapse it, it will collapse in the wrong direction. If you do not resize the box at all then this collapse animation works correctly.
There seems to be another problem where resizing it causes the box to jump higher on the page, but this only seems to happen on Google Chrome, Firefox works fine, and not sure why!
Try resizing the box and then closing it to see the problem:
$(document).ready(function() {
// controls resizing of the chat box
$('.chat_box').resizable({
handles: 'n, e, ne',
minWidth: 300,
minHeight: 100,
maxWidth: 700,
maxHeight: 500,
});
});
function minimize(chatId) {
var bottom_bar = document.getElementById("bottom_bar");
var box = bottom_bar.getElementsByClassName("chat_box")[chatId];
var bar = bottom_bar.getElementsByClassName("chat_bar")[chatId];
bar.className = "chat_bar chat_box_minimized";
$(box).stop().animate({
height: "0px",
width: bar.offsetWidth,
},
'normal', function() {
$(box).hide();
}
);
}
#bottom_bar {
position: fixed;
z-index: 10;
bottom: 0px;
left: 0px;
right: 0px;
max-height: 40px;
background-color: #0042b3;
padding: 2px 20px;
}
div.chat_box {
position: fixed;
width: 350px;
height: 180px;
margin: 0px 4px;
bottom: 45px;
}
div.close_btn {
position: absolute;
top: 0px;
right: 0px;
width: 30px;
height: 100%;
}
div.close_btn:before {
content: 'x';
display: block;
text-align: center;
vertical-align: middle;
line-height: 25px;
font-weight: bold;
font-family: Arial, sans-serif;
pointer-events: none;
}
div.close_btn:hover {
background-color: rgba(0, 9, 26, 0.8);
cursor: pointer;
}
div.chat_box_maximized {
background-color: white;
width: 350px;
margin: 5px 0px;
padding: 2px;
border: 3px solid #0045cc;
border-radius: 5px;
display: inline-block;
}
div.chat_box_maximized input {
width: 100%;
border: none;
}
div.chat_box_maximized p {
display: none;
}
div.chat_box_minimized {
background-color: #002266;
;
max-width: 200px;
min-width: 80px;
margin: 5px 0px;
padding: 2px;
border: 3px solid #002266;
;
border-radius: 5px;
display: inline-block;
}
div.chat_box_minimized:hover {
background-color: #3378ff;
border: 3px solid #3378ff;
cursor: pointer;
}
div.chat_box_minimized form {
display: none;
}
div.chat_box_minimized p {
margin: 0px 5px;
font-size: 10pt;
color: white;
font-weight: bold;
pointer-events: none;
}
.light_container,
.dark_container {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
border: 1px solid #005eff;
padding: 1px;
}
.light_container {
background-color: rgba(0, 34, 102, 0.9);
}
.dark_container {
background-color: rgba(0, 9, 26, 0.9);
}
.light_container .body,
.dark_container .body {
padding: 5px;
}
div.basic_title {
position: relative;
width: 100%;
background-color: #005eff;
padding: 4px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
div.basic_title p {
margin: 0px;
pointer-events: none;
}
div.basic_panel div.basic_title {
font-size: 14px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="bottom_bar">
<div class="chat_box dark_container">
<div class="basic_title">
<p>Chat Box</p>
<div class="close_btn" onclick="minimize(0)"></div>
</div>
<div class="body"></div>
</div>
<div class="chat_bar chat_box_maximized">
<p>Chat Box</p>
<form>
<input type="text" placeholder="send a message">
</form>
</div>
</div>

When you resize from top handle, it changes top coordinate and height. Since you set the position with bottom, normally on animate the height will change but not bottom coordinate. But as soon as resizable sets top coordinate, then the animation will be made but with top coordinate remaining.
What you can do is use resize callback to prevent top coordinate to be set when you resize. Then it'll keep the proper direction on animation, and the resize will work as well.
$(document).ready(function() {
// controls resizing of the chat box
$('.chat_box').resizable({
handles: 'n, e, ne',
minWidth: 300,
minHeight: 100,
maxWidth: 700,
maxHeight: 500,
resize: function(event, ui) {
ui.helper.css('top', '');
}
});
});
function minimize(chatId) {
var bottom_bar = document.getElementById("bottom_bar");
var box = bottom_bar.getElementsByClassName("chat_box")[chatId];
var bar = bottom_bar.getElementsByClassName("chat_bar")[chatId];
bar.className = "chat_bar chat_box_minimized";
$(box).stop().animate({
height: "0px",
width: bar.offsetWidth,
},
'normal', function() {
$(box).hide();
}
);
}
#bottom_bar {
position: fixed;
z-index: 10;
bottom: 0px;
left: 0px;
right: 0px;
max-height: 40px;
background-color: #0042b3;
padding: 2px 20px;
}
div.chat_box {
position: fixed;
width: 350px;
height: 180px;
margin: 0px 4px;
bottom: 45px;
}
div.close_btn {
position: absolute;
top: 0px;
right: 0px;
width: 30px;
height: 100%;
}
div.close_btn:before {
content: 'x';
display: block;
text-align: center;
vertical-align: middle;
line-height: 25px;
font-weight: bold;
font-family: Arial, sans-serif;
pointer-events: none;
}
div.close_btn:hover {
background-color: rgba(0, 9, 26, 0.8);
cursor: pointer;
}
div.chat_box_maximized {
background-color: white;
width: 350px;
margin: 5px 0px;
padding: 2px;
border: 3px solid #0045cc;
border-radius: 5px;
display: inline-block;
}
div.chat_box_maximized input {
width: 100%;
border: none;
}
div.chat_box_maximized p {
display: none;
}
div.chat_box_minimized {
background-color: #002266;
;
max-width: 200px;
min-width: 80px;
margin: 5px 0px;
padding: 2px;
border: 3px solid #002266;
;
border-radius: 5px;
display: inline-block;
}
div.chat_box_minimized:hover {
background-color: #3378ff;
border: 3px solid #3378ff;
cursor: pointer;
}
div.chat_box_minimized form {
display: none;
}
div.chat_box_minimized p {
margin: 0px 5px;
font-size: 10pt;
color: white;
font-weight: bold;
pointer-events: none;
}
.light_container,
.dark_container {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
border: 1px solid #005eff;
padding: 1px;
}
.light_container {
background-color: rgba(0, 34, 102, 0.9);
}
.dark_container {
background-color: rgba(0, 9, 26, 0.9);
}
.light_container .body,
.dark_container .body {
padding: 5px;
}
div.basic_title {
position: relative;
width: 100%;
background-color: #005eff;
padding: 4px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
div.basic_title p {
margin: 0px;
pointer-events: none;
}
div.basic_panel div.basic_title {
font-size: 14px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="bottom_bar">
<div class="chat_box dark_container">
<div class="basic_title">
<p>Chat Box</p>
<div class="close_btn" onclick="minimize(0)"></div>
</div>
<div class="body"></div>
</div>
<div class="chat_bar chat_box_maximized">
<p>Chat Box</p>
<form>
<input type="text" placeholder="send a message">
</form>
</div>
</div>

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/