Develop Reference

css animation does not get triggered a second time

I have a problem, which is for sure simple to solve, except for me. Let me explain, the snippet below shows a dialogue-box. I added an interaction feedback. If the input field is empty and a user tries to access the cross, the field blinks red.
In case the input field is set, the cross can be clicked which displays options. If this are clicked too the input field blinks green. The problem: Unfortunately it works just once, even than I try to remove those CSS classes afterwards. Further if green appeared once and the input field is empty again, I can´t trigger the red blinking again.
My thoughts are, that JavaScript can´t remove and add CSS classes during the same time action. Or the animation will not start over again. I am not sure. I would be glad if somebody can enlighten me.
var dialogSettingToggle = document.getElementById("dialog-setting-toggle")
var dialogSettingInput = document.getElementById("dialog-setting-input")
dialogSettingToggle.addEventListener("click", function() {
if (isEmpty(dialogSettingInput.value)) {
dialogSettingInput.classList.toggle("dialog-input-alert")
} else {
dialogSettingToggle.classList.toggle("open")
var dialogSettingContext = document.getElementById("dialog-setting-button-context")
dialogSettingContext.addEventListener("click", function() {
dialogSettingInput.classList.remove("dialog-input-alert")
dialogSettingInput.classList.add("dialog-input-confirm")
dialogSettingInput.value = ""
dialogSettingToggle.classList.remove("open")
})
var dialogSettingLink = document.getElementById("dialog-setting-button-link")
dialogSettingLink.addEventListener("click", function() {
dialogSettingInput.classList.remove("dialog-input-alert")
dialogSettingInput.classList.add("dialog-input-confirm")
dialogSettingInput.value = ""
dialogSettingToggle.classList.remove("open")
})
var dialogSettingObject = document.getElementById("dialog-setting-button-object")
dialogSettingObject.addEventListener("click", function() {
dialogSettingInput.classList.remove("dialog-input-alert")
dialogSettingInput.classList.add("dialog-input-confirm")
dialogSettingInput.value = ""
dialogSettingToggle.classList.remove("open")
})
}
})
function isEmpty(str) {
return !str.trim().length
}
body {
height: 100%;
background: #e6e7ee;
}
section {
word-wrap: break-word;
word-break: normal;
width: 95%;
max-width: 350px;
margin: 40px auto;
border-radius: 10px;
}
hr {
color: white;
height: 0px;
cursor: default;
}
h5 {
margin: 10px;
font-size: 1.2em;
font-weight: normal;
color: #7b7e8c;
cursor: default;
}
button {
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
background: #f2f3f7;
cursor: pointer;
border: 0;
padding: 10px;
margin: 7px;
margin-top: 10px;
width: 150px;
font-size: 1rem;
transition-property: background-color, box-shadow;
transition-duration: .2s;
color: #7b7e8c;
}
select {
appearance: none;
width: 270px;
background: url(data:image/png;base64,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);
background-repeat: no-repeat;
background-position: right;
background-size: 1.8em;
border-radius: 10px;
padding: 10px;
margin: 7px;
font-size: 1rem;
color: #7b7e8c;
border: 0;
cursor: pointer;
box-shadow: 0 0 transparent, 0 0 transparent, inset 3px 3px 5px rgba(0, 0, 0, 0.1), inset -3px -3px 5px white;
}
input {
width: 270px;
background: #f8f9fb;
border-radius: 10px;
padding: 10px;
margin: 7px;
font-size: 1rem;
color: #7b7e8c;
border: 0;
cursor: text;
box-shadow: 0 0 transparent, 0 0 transparent, inset 3px 3px 5px rgba(0, 0, 0, 0.1), inset -3px -3px 5px white;
}
button:hover,
select:hover,
input:hover {
color: #3498db;
}
button:active {
box-shadow: 0 0 transparent, 0 0 transparent, inset 3px 3px 5px rgba(0, 0, 0, 0.1), inset -3px -3px 5px white;
}
.border-round {
border-radius: 10px;
}
.dialog {
position: absolute;
left: 0;
right: 0;
padding: 10px 20px 20px;
margin-top: 20px;
width: 340px;
min-height: 100px;
font-size: 1.2em;
background: #f2f3f7;
}
.box-shadow {
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
}
.dialog-setting-button-delete {
position: relative;
margin-top: 7px;
width: 40px;
height: 40px;
border-radius: 10px;
background: #ecf0f3;
cursor: pointer;
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
}
.dialog-setting-close {
position: absolute;
width: 25px;
height: 25px;
padding: 0px;
margin: 0px;
left: 350px;
top: 5px;
border-radius: 10px;
background: #ecf0f3;
cursor: pointer;
box-shadow: none;
}
.dialog-input-alert {
animation: input-alert 1.5s;
}
#keyframes input-alert {
from {
background: red;
color: white
}
to {
background: #f8f9fb;
color: #7b7e8c;
}
}
.dialog-input-confirm {
animation: input-confirm 1.5s;
}
#keyframes input-confirm {
from {
background: greenyellow;
color: white
}
to {
background: #f8f9fb;
color: #7b7e8c;
}
}
/****************************************
******** dialog-setting-toggle ***********
****************************************/
.dialog-setting-toggle {
position: relative;
margin-top: 7px;
margin-right: 7px;
width: 40px;
height: 40px;
border-radius: 10px;
background: #ecf0f3;
cursor: pointer;
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
}
.dialog-setting-toggle::before,
.dialog-setting-toggle::after {
content: "";
background: #7b7e8c;
border-radius: 5px;
width: 20px;
height: 5px;
position: absolute;
left: 10px;
top: 18px;
transition: 0.2s ease;
z-index: 1;
}
.dialog-setting-toggle::before {
transform: rotate(0deg);
}
.dialog-setting-toggle::after {
transform: rotate(-90deg);
}
.dialog-setting-toggle:hover::before {
transform: rotate(0deg);
background-color: #3498db;
}
.dialog-setting-toggle:hover::after {
transform: rotate(-90deg);
background-color: #3498db;
}
.dialog-setting-toggle.open::before {
transform: rotate(45deg);
background-color: #3498db;
}
.dialog-setting-toggle.open::after {
transform: rotate(-45deg);
background-color: #3498db;
}
.dialog-setting-toggle.open .dialog-setting-button {
opacity: 1;
pointer-events: auto;
}
.dialog-setting-toggle.open .dialog-setting-button:first-of-type {
right: -50px;
justify-content: center;
align-items: center;
}
.dialog-setting-toggle.open .dialog-setting-button:nth-of-type(2) {
right: -100px;
justify-content: center;
align-items: center;
transition-delay: 0.05s;
}
.dialog-setting-toggle.open .dialog-setting-button:last-of-type {
right: -150px;
justify-content: center;
align-items: center;
transition-delay: 0.1s;
}
.dialog-setting-button {
width: 40px;
height: 40px;
border-radius: 10px;
cursor: pointer;
background: #ecf0f3;
position: absolute;
color: #7b7e8c;
display: flex;
opacity: 0;
pointer-events: none;
box-shadow: inherit;
}
.dialog-setting-button:hover {
transform: scale(1.2);
color: #3498db;
}
<script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
<section id="dialog-setting" class="dialog box-shadow">
<div>
<h5 style="text-align:center">Options</h5>
<button style="float: right" id="dialog-setting-close" class="dialog-setting-close border-round"><i class="fas fa-times"></i></button>
</div>
<hr class="border-round">
<input style="float: left" id="dialog-setting-input" type="search" placeholder="context / link / object" class="item dialog-setting-input"></input>
<div style="float: right" id="dialog-setting-toggle" class="dialog-setting-toggle">
<div title="Kontext" id="dialog-setting-button-context" class="dialog-setting-button"><i class="fab fa-uncharted"></i></div>
<div title="Link" id="dialog-setting-button-link" class="dialog-setting-button"><i class="fas fa-link"></i></div>
<div title="Objekt" id="dialog-setting-button-object" class="dialog-setting-button"><i class="fas fa-server"></i></div>
</div>
</section>

It isn´t the best solution but it is one solution. I added a timeout with the same duration as the animation goes. Works fine for my needs.
dialogSettingToggle.addEventListener("click", function () {
if (isEmpty(dialogSettingInput.value)) {
dialogSettingInput.classList.add("dialog-input-alert")
setTimeout(function() {
dialogSettingInput.classList.remove("dialog-input-alert")
}, 1000)
} else {
dialogSettingToggle.classList.toggle("open")
var dialogSettingContext = document.getElementById("dialog-setting-button-context")
dialogSettingContext.addEventListener("click", function() {
resetInput()
})
var dialogSettingLink = document.getElementById("dialog-setting-button-link")
dialogSettingLink.addEventListener("click", function() {
resetInput()
})
var dialogSettingObject = document.getElementById("dialog-setting-button-object")
dialogSettingObject.addEventListener("click", function() {
resetInput()
})
}
})
function resetInput() {
dialogSettingInput.classList.add("dialog-input-confirm")
setTimeout(function() {
dialogSettingInput.classList.remove("dialog-input-confirm")
}, 1000)
dialogSettingInput.value=""
dialogSettingToggle.classList.remove("open")
}

Display Tooltip after a Click instead when Hover

I have a Clipboard Tooltip button script that display tooltip when hover with the cursor on it.
In the Clipboard page under Copy text from attribute example, it display tooltip after a click to copy, while hover do nothing.
And that exactly what i want to achive. Cuz i only success display tooltip when hover.
I have tried to play with the Clipboard page main.css and primer.css and didnt got it to work as i want (display tooltip after clicking)
Also looked at the tooltip creator documentation but even there it has only hover tooltips.
Here is the HTML code:
<div id="example-text" class="example">
<div class="table">
<div class="table-row">
<div class="table-cell">ebay</div>
<div class="table-cell">amazon</div>
</div>
<div class="table-row"><p></p></div>
<div class="table-row">
<div class="table-cell"><button class="btn" data-clipboard-text="ebay">ebay-link</button></div>
<div class="table-cell"><button aria-label="copied!" class="btn tooltipped tooltipped-e border p-2 mb-2 mr-2 left" data-clipboard-text="amazon">amazon-link</button></div>
</div>
</div>
<script src="https://clipboardjs.com/dist/clipboard.min.js"></script>
</script>
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
And here is the CSS:
#example-text {width: 500px;}
.table
{
display:table;
text-align: center;
}
.table-row
{
display:table-row;
width: 400px;
}
.table-cell
{
display:table-cell;
width: 200px;
color: black;
font-family: arial;
font-size: 14px;
}
.btn[disabled] .clippy {
opacity: .3;
}
.example {
position: relative;
margin: 15px 0 0;
padding: 39px 19px 14px;
background-color: #fff;
border-radius: 4px 4px 0 0;
border: 1px solid #ddd;
z-index: 2;
}
.example p {
color: #666;
}
.example:after {
content: "copy the link";
position: absolute;
top: 0;
right: 0;
padding: 2px 8px;
font-size: 14px;
font-weight: bold;
background-color: #f5f5f5;
color: #9da0a4;
border-radius: 4px 0 4px 0;
}
.example+.snippet {
background: #f8f8f8;
border-radius: 4px;
border: 1px solid #ddd;
clear: both;
top: -20px;
padding: 20px 0 0;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0
}
button {
overflow: visible
}
button,
select {
text-transform: none
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer
}
button[disabled],
html input[disabled] {
cursor: default
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0
}
input {
line-height: normal
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto
}
input[type="search"] {
-webkit-appearance: textfield;
box-sizing: content-box
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none
}
.form-control.focus,
.form-control:focus,
input[type="text"].focus,
input[type="text"]:focus,
input[type="password"].focus,
input[type="password"]:focus,
input[type="email"].focus,
input[type="email"]:focus,
input[type="number"].focus,
input[type="number"]:focus,
input[type="tel"].focus,
input[type="tel"]:focus,
input[type="url"].focus,
input[type="url"]:focus,
select.focus,
select:focus,
textarea.focus,
textarea:focus {
border-color: #51a7e8;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5)
}
select:not([multiple]) {
height: 34px;
vertical-align: middle
}
input.input-contrast,
.input-contrast {
background-color: #fafafa
}
input.input-contrast:focus,
.input-contrast:focus {
background-color: #fff
}
::-webkit-input-placeholder {
color: #aaa
}
::-moz-placeholder {
color: #aaa
}
:-ms-input-placeholder {
color: #aaa
}
::placeholder {
color: #aaa
}
input.input-mini {
min-height: 26px;
padding-top: 4px;
padding-bottom: 4px;
font-size: 12px
}
input.input-large {
padding: 6px 10px;
font-size: 16px
}
.input-block {
display: block;
width: 100%
}
.input-monospace {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace
}
.select {
display: inline-block;
max-width: 100%;
padding: 7px 24px 7px 8px;
vertical-align: middle;
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right 8px center;
background-size: 8px 10px;
box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.075);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 8px \9;
background-image: none \9
}
.select:focus {
outline: none;
border-color: #51a7e8;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5)
}
.select::-ms-expand {
opacity: 0
}
.select-sm {
padding-top: 3px;
padding-bottom: 3px;
font-size: 12px
}
.select-sm:not([multiple]) {
height: 26px;
min-height: 26px
}
.clearfix:before {
display: table;
content: ""
}
.clearfix:after {
display: table;
clear: both;
content: ""
}
.btn {
position: relative;
display: inline-block;
padding: 6px 12px;
font-size: 13px;
font-weight: bold;
line-height: 20px;
color: #333;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-color: #eee;
background-image: linear-gradient(#fcfcfc, #eee);
border: 1px solid #d5d5d5;
border-radius: 3px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: none
}
.btn i {
font-style: normal;
font-weight: 500;
opacity: 0.6
}
.btn .octicon {
vertical-align: text-top
}
.btn .counter {
text-shadow: none;
background-color: #e5e5e5
}
.btn:focus {
text-decoration: none;
border-color: #51a7e8;
outline: none;
box-shadow: 0 0 5px rgba(81, 167, 232, 0.5)
}
.btn:focus:hover,
.btn.selected:focus {
border-color: #51a7e8
}
.btn:hover,
.btn:active,
.btn.zeroclipboard-is-hover,
.btn.zeroclipboard-is-active {
text-decoration: none;
background-color: #ddd;
background-image: linear-gradient(#eee, #ddd);
border-color: #ccc
}
.btn:active,
.btn.selected,
.btn.zeroclipboard-is-active {
background-color: #dcdcdc;
background-image: none;
border-color: #b5b5b5;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15)
}
.btn.selected:hover {
background-color: #cfcfcf
}
.btn:disabled,
.btn:disabled:hover,
.btn.disabled,
.btn.disabled:hover {
color: rgba(102, 102, 102, 0.5);
cursor: default;
background-color: rgba(229, 229, 229, 0.5);
background-image: none;
border-color: rgba(197, 197, 197, 0.5);
box-shadow: none
}
.btn-primary {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
background-color: #60b044;
background-image: linear-gradient(#8add6d, #60b044);
border-color: #5ca941
}
.btn-primary .counter {
color: #60b044;
background-color: #fff
}
.btn-primary:hover {
color: #fff;
background-color: #569e3d;
background-image: linear-gradient(#79d858, #569e3d);
border-color: #4a993e
}
.btn-primary:active,
.btn-primary.selected {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
background-color: #569e3d;
background-image: none;
border-color: #418737
}
.btn-primary.selected:hover {
background-color: #4c8b36
}
.btn-primary:disabled,
.btn-primary:disabled:hover,
.btn-primary.disabled,
.btn-primary.disabled:hover {
color: #fefefe;
background-color: #add39f;
background-image: linear-gradient(#c3ecb4, #add39f);
border-color: #b9dcac #b9dcac #a7c89b
}
.btn-danger {
color: #900
}
.btn-danger:hover {
color: #fff;
background-color: #b33630;
background-image: linear-gradient(#dc5f59, #b33630);
border-color: #cd504a
}
.btn-danger:active,
.btn-danger.selected {
color: #fff;
background-color: #b33630;
background-image: none;
border-color: #9f312c
}
.btn-danger.selected:hover {
background-color: #9f302b
}
.btn-danger:disabled,
.btn-danger:disabled:hover,
.btn-danger.disabled,
.btn-danger.disabled:hover {
color: #cb7f7f;
background-color: #efefef;
background-image: linear-gradient(#fefefe, #efefef);
border-color: #e1e1e1
}
.btn-danger:hover .counter,
.btn-danger:active .counter,
.btn-danger.selected .counter {
color: #b33630;
background-color: #fff
}
.btn-outline {
color: #4078c0;
background-color: #fff;
background-image: none;
border: 1px solid #e5e5e5
}
.btn-outline .counter {
background-color: #eee
}
.btn-outline:hover,
.btn-outline:active,
.btn-outline.selected,
.btn-outline.zeroclipboard-is-hover,
.btn-outline.zeroclipboard-is-active {
color: #fff;
background-color: #4078c0;
background-image: none;
border-color: #4078c0
}
.btn-outline:hover .counter,
.btn-outline:active .counter,
.btn-outline.selected .counter,
.btn-outline.zeroclipboard-is-hover .counter,
.btn-outline.zeroclipboard-is-active .counter {
color: #4078c0;
background-color: #fff
}
.btn-outline.selected:hover {
background-color: #396cad
}
.btn-outline:disabled,
.btn-outline:disabled:hover,
.btn-outline.disabled,
.btn-outline.disabled:hover {
color: #767676;
background-color: #fff;
background-image: none;
border-color: #e5e5e5
}
.btn-with-count {
float: left;
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.btn-sm {
padding: 2px 10px
}
.tooltipped {
position: relative
}
.tooltipped:after {
position: absolute;
z-index: 1000000;
display: none;
padding: 5px 8px;
font: normal normal 11px/1.5 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
color: #fff;
text-align: center;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-wrap: break-word;
white-space: pre;
pointer-events: none;
content: attr(aria-label);
background: rgba(0, 0, 0, 0.8);
border-radius: 3px;
-webkit-font-smoothing: subpixel-antialiased;
}
.tooltipped:before {
position: absolute;
z-index: 1000001;
display: none;
width: 0;
height: 0;
color: rgba(0, 0, 0, 0.8);
pointer-events: none;
content: "";
border: 5px solid transparent
}
.tooltipped:hover:before,
.tooltipped:hover:after,
.tooltipped:active:before,
.tooltipped:active:after,
.tooltipped:focus:before,
.tooltipped:focus:after {
display: inline-block;
text-decoration: none
}
.tooltipped-multiline:hover:after,
.tooltipped-multiline:active:after,
.tooltipped-multiline:focus:after {
display: table-cell
}
.tooltipped-s:after,
.tooltipped-se:after,
.tooltipped-sw:after {
top: 100%;
right: 50%;
margin-top: 5px
}
.tooltipped-s:before,
.tooltipped-se:before,
.tooltipped-sw:before {
top: auto;
right: 50%;
bottom: -5px;
margin-right: -5px;
border-bottom-color: rgba(0, 0, 0, 0.8)
}
.tooltipped-se:after {
right: auto;
left: 50%;
margin-left: -15px
}
.tooltipped-sw:after {
margin-right: -15px
}
.tooltipped-n:after,
.tooltipped-ne:after,
.tooltipped-nw:after {
right: 50%;
bottom: 100%;
margin-bottom: 5px
}
.tooltipped-n:before,
.tooltipped-ne:before,
.tooltipped-nw:before {
top: -5px;
right: 50%;
bottom: auto;
margin-right: -5px;
border-top-color: rgba(0, 0, 0, 0.8)
}
.tooltipped-ne:after {
right: auto;
left: 50%;
margin-left: -15px
}
.tooltipped-nw:after {
margin-right: -15px
}
.tooltipped-s:after,
.tooltipped-n:after {
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%)
}
.tooltipped-w:after {
right: 100%;
bottom: 50%;
margin-right: 5px;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%)
}
.tooltipped-w:before {
top: 50%;
bottom: 50%;
left: -5px;
margin-top: -5px;
border-left-color: rgba(0, 0, 0, 0.8)
}
.tooltipped-e:after {
bottom: 50%;
left: 100%;
margin-left: 5px;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%)
}
.tooltipped-e:before {
top: 50%;
right: -5px;
bottom: 50%;
margin-top: -5px;
border-right-color: rgba(0, 0, 0, 0.8)
}
.tooltipped-multiline:after {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
max-width: 250px;
word-break: break-word;
word-wrap: normal;
white-space: pre-line;
border-collapse: separate
}
.tooltipped-multiline.tooltipped-s:after,
.tooltipped-multiline.tooltipped-n:after {
right: auto;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%)
}
.tooltipped-multiline.tooltipped-w:after,
.tooltipped-multiline.tooltipped-e:after {
right: 100%
}
#media screen and (min-width: 0\0) {
.tooltipped-multiline:after {
width: 250px
}
}
.tooltipped-sticky:before,
.tooltipped-sticky:after {
display: inline-block
}
.tooltipped-sticky.tooltipped-multiline:after {
display: table-cell
}
.fullscreen-overlay-enabled.dark-theme .tooltipped:after {
color: #000;
background: rgba(255, 255, 255, 0.8)
}
.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-s:before,
.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-se:before,
.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-sw:before {
border-bottom-color: rgba(255, 255, 255, 0.8)
}
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-n:before,
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-ne:before,
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-nw:before {
border-top-color: rgba(255, 255, 255, 0.8)
}
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-e:before {
border-right-color: rgba(255, 255, 255, 0.8)
}
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-w:before {
border-left-color: rgba(255, 255, 255, 0.8)
}
EDIT: Getting closer:
This is the related code:
<div id="example-text" class="example">
<button class="btn" data-clipboard-demo="" data-clipboard-action="copy" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>
</div>
<pre class="snippet">
<button class="btn" data-clipboard-snippet="">
<img class="clippy" width="13" src="./index_files/clippy.svg" alt="Copy to clipboard">
</button>
<code class="html hljs xml">
<span class="hljs-comment"><!-- Trigger --></span>
<span class="hljs-tag"><<span class="hljs-title">button</span>
<span class="hljs-attribute">class</span>=<span class="hljs-value">"btn"</span>
<span class="hljs-attribute">data-clipboard-text</span>=<span class="hljs-value">"Just because you can doesn't mean you should — clipboard.js"</span>></span>
Copy to clipboard
<span class="hljs-tag"></<span class="hljs-title">button</span>></span>
</code>
</pre>
Tried and still without success- Wonder what exactly triger that.
How do i get tooltip After i click (like in the clipboardpage)?
Here's a live one:

Got it. It was hiding in the demoes.js file.
And especially that line:
<button class="btn" data-clipboard-demo="" data-clipboard-action="copy" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>
This is the corrected code:
<script src="https://clipboardjs.com/assets/scripts/demos.js"></script>
<div id="example-text" class="example">
<button class="btn" data-clipboard-demo="" data-clipboard-action="copy" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>
</div>
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
Now it is working.
Here's the result: HERE

Add close button div to close the boxing

Here is my JSFiddle
Preview is shown in div box. I want to add close option on right top. How could be done so that when user click on it box should be disabled.
Code Snippet
.duyurular {
background-color: rgba(255, 255, 255, 0.8);
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
color: #212121;
height: 42px;
line-height: 42px;
padding: 0 16px;
}
.duyurular > i {
background-color: #27ae60;
border-radius: 4px 0 0 4px;
color: #fff;
float: left;
font-size: 16px;
height: 42px;
line-height: 42px;
margin: 0 16px 0 -16px;
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
width: 42px;
}
.otomesaj {
float: left;
font-family: "Exo 2",sans-serif;
font-size: 13px;
margin: 1px auto 0;
padding: 0 5px;
width: 680px;
}
.otomesaj ul {
margin: 0;
padding: 0;
}
.duyurus {
color: #212121;
display: none;
list-style: outside none none;
text-align: left;
}
<div class="duyurular" original-title="">
<i class="fa fa-bullhorn" original-title=""></i>
<div class="otomesaj" original-title="">
<ul>
<li class="duyurus" style="display: list-item;">Temamız yapım aşamasındadır sürekli yenilenmekte ve geliştirilmektedir.</li>
<li class="duyurus" style="display: none;">denem amaçlı yazılmıştır gerekli değişiklikleri header kısmından yapabilirsiniz...</li>
<li class="duyurus" style="display: none;">deneme için yazıldı temamız özel yapım bir temadır kesinlikle emek temasıdır saygı duyalım.</li>
</ul>
</div>
</div>

try this code,this may help you
$(document).ready(function(){
$('.right').click(function(){
$(this).parent().hide('slow');
})
})
.duyurular {
background-color: rgba(255, 255, 255, 0.8);
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
color: #212121;
height: 42px;
line-height: 42px;
padding: 0 16px;
}
.duyurular > i {
background-color: #27ae60;
border-radius: 4px 0 0 4px;
color: #fff;
float: left;
font-size: 16px;
height: 42px;
line-height: 42px;
margin: 0 16px 0 -16px;
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
width: 42px;
}
.otomesaj {
float: left;
font-family: "Exo 2",sans-serif;
font-size: 13px;
margin: 1px auto 0;
padding: 0 5px;
width: 680px;
}
.otomesaj ul {
margin: 0;
padding: 0;
}
.duyurus {
color: #212121;
display: none;
list-style: outside none none;
text-align: left;
}
.right{
position:relative;
text-align:right;
left:350px;
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="duyurular" original-title="">
<i class="fa fa-bullhorn" original-title="">s</i>
<div class="otomesaj" original-title="">
<ul>
<li class="duyurus" style="display: list-item;">Temamız yapım aşamasındadır sürekli yenilenmekte ve geliştirilmektedir.</li>
<li class="duyurus" style="display: none;">denem amaçlı yazılmıştır gerekli değişiklikleri header kısmından yapabilirsiniz...</li>
<li class="duyurus" style="display: none;">deneme için yazıldı temamız özel yapım bir temadır kesinlikle emek temasıdır saygı duyalım.</li>
</ul>
</div>
<button class="right">x</button>
</div>

Add it this way.
<style>
#preview {
height: 70%;
width: 70%;
position: fixed;
z-index: 1;
top:30;
left: 20;
background-color: #ff00ff;
overflow-x: hidden;
padding-top: 60px;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
</style>
<body>
<div id="preview">
<a href="javascript:void(0)" class="closebtn"
onclick="closePreview()">x</a>
<p style="text-align:center" >Your Content</p>
</div>
<script>
function closePreview(){
var btn = document. getElementById("preview");
btn.style.display="none"
}
</script>
</body>

I updated your Fiddle :)
http://jsfiddle.net/djxnznen/3/
http://jsfiddle.net/djxnznen/4/
$(document).ready(function(){
$('.right').click(function(){
$(this).parent().hide('slow');
})
})
.duyurular {
background-color: rgba(255, 255, 255, 0.8);
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
color: #212121;
height: 42px;
line-height: 42px;
padding: 0 16px;
}
.duyurular > i {
background-color: #27ae60;
border-radius: 4px 0 0 4px;
color: #fff;
float: left;
font-size: 16px;
height: 42px;
line-height: 42px;
margin: 0 16px 0 -16px;
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
width: 42px;
}
.otomesaj {
float: left;
font-family: "Exo 2",sans-serif;
font-size: 13px;
margin: 1px auto 0;
padding: 0 5px;
width: 680px;
}
.otomesaj ul {
margin: 0;
padding: 0;
}
.duyurus {
color: #212121;
display: none;
list-style: outside none none;
text-align: left;
}
.right{
position:relative;
text-align:right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="duyurular" original-title="">
<i class="fa fa-bullhorn" original-title="">s</i>
<div class="otomesaj" original-title="">
<ul>
<li class="duyurus" style="display: list-item;">Temamız yapım aşamasındadır sürekli yenilenmekte ve geliştirilmektedir.</li>
<li class="duyurus" style="display: none;">denem amaçlı yazılmıştır gerekli değişiklikleri header kısmından yapabilirsiniz...</li>
<li class="duyurus" style="display: none;">deneme için yazıldı temamız özel yapım bir temadır kesinlikle emek temasıdır saygı duyalım.</li>
</ul>
</div>
<div class="right">x</div>
</div>
They are all the same, but my mouse hates me(I click 1 time and he perform a click storm...).

you should give an id to your div and add an onlcick event on it here i gave the id myDiv
var myDiv = document.getElementById("myDiv");
myDiv.onclick = function() { myDiv.style.display = 'none'; };
here the fiddle

"Error: $injector:nomod Module Unavailable"

Hello does anyone know why my it doesn't display 3 instead of {{remain}} ? I got the error :
"Error: $injector:nomod Module Unavailable".
My snippet work here but I don't know why it does not work to my side
/index.html
/app.js
/MyTodoList.js
/style.css
//Inside app.js
var app = angular.module("myapp", []);
//Inside MyTodoList.js
app.controller('TodoCtrl', ['$scope', function ($scope) {
$scope.remain = 3;
}]);
html,
body {
margin: 0;
padding: 0;
}
button {
margin: 0;
padding: 0;
border: 0;
background: none;
font-size: 100%;
vertical-align: baseline;
font-family: inherit;
color: inherit;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
body {
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.4em;
color: #4d4d4d;
width: 550px;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.sapUiTv, .sapUiBtnS {
font: inherit;
font-size: inherit;
}
#todoapp {
background: #fff;
background: rgba(255, 255, 255, 0.9);
margin: 130px 0 40px 0;
border: 1px solid #ccc;
position: relative;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
0 25px 50px 0 rgba(0, 0, 0, 0.15);
}
#todoapp:before {
content: '';
border-left: 1px solid #f5d6d6;
border-right: 1px solid #f5d6d6;
width: 2px;
position: absolute;
top: 0;
left: 40px;
height: 100%;
}
#todoapp input::-webkit-input-placeholder {
font-style: italic;
}
#todoapp input:-moz-placeholder {
font-style: italic;
color: #a9a9a9;
}
#todoapp h1 {
position: absolute;
top: -120px;
width: 100%;
font-size: 70px;
font-weight: bold;
text-align: center;
color: #b3b3b3;
color: rgba(255, 255, 255, 0.3);
text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
}
#header {
padding-top: 15px;
border-radius: inherit;
}
#header:before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
height: 15px;
z-index: 2;
border-bottom: 1px solid #6c615c;
background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px;
border-top-right-radius: 1px;
}
#main {
position: relative;
z-index: 2;
border-top: 1px dotted #adadad;
}
#new-todo,
.sapUiTfBrd.sapUiTfRo.todo,
.sapUiTfBrd.sapUiTfStd.todo {
position: relative;
margin: 0;
margin-right: 153px;
width: 100%;
font-size: 24px;
font-family: inherit;
line-height: 1.4em;
background-color: transparent;
border: 0;
outline: none;
color: #4D4D4D;
padding: 6px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.sapUiTfBrd.sapUiTfStd.todo {
border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
}
.sapUiTfBrd.sapUiTfRo.todo[data-completed="true"] {
color: #a9a9a9;
text-decoration: line-through;
}
#toggle-all {
display: block;
outline: none;
}
#toggle-all input {
z-index: 3;
position: absolute;
text-align: center;
top: 9px;
left: -15px;
width: 65px;
height: 41px;
-webkit-transform: rotate(90deg);
/* transform: rotate(90deg); */
-webkit-appearance: none;
appearance: none;
}
#toggle-all input:before {
content: '»';
font-size: 28px;
color: #d9d9d9;
padding: 0 25px 7px;
}
#toggle-all input:checked:before {
color: #737373;
}
#new-todo {
padding: 15px 15px 16px 60px;
border: none;
background: rgba(0, 0, 0, 0.02);
z-index: 2;
box-shadow: none;
}
#todo-list {
margin: 0;
padding: 0;
list-style: none;
}
.checkbox-align {
padding-top: 7px;
margin-bottom: 0;
vertical-align: middle;
}
#todo-list li {
position: relative;
font-size: 24px;
border-top: 1px dotted #ccc;
}
#todo-list input[type='checkbox'] {
text-align: center;
width: 40px;
/* auto, since non-WebKit browsers doesn't support input styling */
height: auto;
/*
position: absolute;
top: 0;
bottom: 0;
*/
margin: auto 0;
-webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
#todo-list input[type='checkbox']:after {
content: '✔';
line-height: 62px;
font-size: 20px;
color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf;
}
#todo-list input[type='checkbox']:checked:after {
color: #85ada7;
text-shadow: 0 1px 0 #669991;
bottom: 1px;
position: relative;
}
#todo-list input:not([type='checkbox']) {
word-break: break-word;
padding: 15px;
margin-left: 45px;
display: block;
line-height: 1.2em;
-webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s;
}
#todo-list li .destroy {
outline: none;
background-color: transparent;
display: none;
position: absolute;
top: 0;
right: 10px;
bottom: 0;
width: 40px;
height: 40px;
margin: auto 0;
font-size: 22px;
color: #a88a8a;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
#todo-list li .destroy:hover {
text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
}
#todo-list li .destroy:after {
content: '✖';
}
#todo-list li:hover .destroy {
display: block;
}
#todo-list .sapUiRrNoData,
#todo-list .sapUiRrPtb,
#todo-list .sapUiRrFtr {
display: none;
}
#footer {
color: #777;
padding: 0 15px;
position: absolute;
right: 0;
bottom: -31px;
left: 0;
height: 20px;
z-index: -1;
text-align: center;
}
#footer:before {
content: '';
position: absolute;
right: 0;
bottom: 31px;
left: 0;
height: 50px;
z-index: -1;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 6px 0 -3px rgba(255, 255, 255, 0.8),
0 7px 1px -3px rgba(0, 0, 0, 0.3),
0 43px 0 -6px rgba(255, 255, 255, 0.8),
0 44px 2px -6px rgba(0, 0, 0, 0.2);
}
#footer #AllTodos, #footer #ActiveTodos, #footer #CompletedTodos {
color: #83756f;
}
#footer #clear-completed {
color: inherit;
}
#footer .sapUiHLayoutChildWrapper:nth-of-type(1) {
float: left;
text-align: left;
}
#todo-count {
vertical-align: 1px;
}
#todo-count:first-letter {
font-weight: bold;
}
#filters {
margin: 0;
padding: 0 2px 0 0;
position: absolute;
right: 0;
left: 0;
outline: none;
}
#filters .sapUiBtnStd,
#filters .sapUiBtnFoc {
background-color: transparent;
font-weight: normal;
outline: none;
padding-right: 3px;
margin-top: -1px;
}
#filters .sapUiSegButtonSelected.sapUiBtnStd,
#filters .sapUiSegButtonSelected.sapUiBtnAct.sapUiBtnFoc {
font-weight: bold;
}
#footer .sapUiHLayoutChildWrapper:nth-of-type(3) {
float: right;
}
#clear-completed {
float: right;
position: relative;
line-height: 20px;
text-decoration: none;
background: rgba(0, 0, 0, 0.1);
font-size: 11px;
padding: 0 10px;
border-radius: 3px;
box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
height: 20px;
outline: none;
}
#-moz-document url-prefix() {
#clear-completed {
top: -22px;
}
}
#clear-completed:hover {
background: rgba(0, 0, 0, 0.15);
box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
}
#info {
margin: 65px auto 0;
color: #a6a6a6;
font-size: 12px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
text-align: center;
}
#info a {
color: inherit;
}
.hidden{
display:none;
}
hr {
margin: 20px 0;
border: 0;
border-top: 1px dashed #C5C5C5;
border-bottom: 1px dashed #F7F7F7;
}
.learn a {
font-weight: normal;
text-decoration: none;
color: #b83f45;
}
.learn a:hover {
text-decoration: underline;
color: #787e7e;
}
.learn h3,
.learn h4,
.learn h5 {
margin: 10px 0;
font-weight: 500;
line-height: 1.2;
color: #000;
}
.learn h3 {
font-size: 24px;
}
.learn h4 {
font-size: 18px;
}
.learn h5 {
margin-bottom: 0;
font-size: 14px;
}
.learn ul {
padding: 0;
margin: 0 0 30px 25px;
}
.learn li {
line-height: 20px;
}
.learn p {
font-size: 15px;
font-weight: 300;
line-height: 1.3;
margin-top: 0;
margin-bottom: 0;
}
.quote {
border: none;
margin: 20px 0 60px 0;
}
.quote p {
font-style: italic;
}
.quote p:before {
content: '“';
font-size: 50px;
opacity: .15;
position: absolute;
top: -20px;
left: 3px;
}
.quote p:after {
content: '”';
font-size: 50px;
opacity: .15;
position: absolute;
bottom: -42px;
right: 3px;
}
.quote footer {
position: absolute;
bottom: -40px;
right: 0;
}
.quote footer img {
border-radius: 3px;
}
.quote footer a {
margin-left: 5px;
vertical-align: middle;
}
.speech-bubble {
position: relative;
padding: 10px;
background: rgba(0, 0, 0, .04);
border-radius: 5px;
}
.speech-bubble:after {
content: '';
position: absolute;
top: 100%;
right: 30px;
border: 13px solid transparent;
border-top-color: rgba(0, 0, 0, .04);
}
/**body*/.learn-bar > .learn {
position: absolute;
width: 272px;
top: 8px;
left: -300px;
padding: 10px;
border-radius: 5px;
background-color: rgba(255, 255, 255, .6);
transition-property: left;
transition-duration: 500ms;
}
#media (min-width: 899px) {
/**body*/.learn-bar {
width: auto;
margin: 0 0 0 300px;
}
/**body*/.learn-bar > .learn {
left: 8px;
}
/**body*/.learn-bar #todoapp {
width: 550px;
margin: 130px auto 40px auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>MyTodoList</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/angularjs/1.3.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<section id = "todoapp" ng-controller="TodoCtrl">
<header id="header">
<h1>MyTodoList</h1>
<form action="#" id="todo-form">
<input type="text" id="new-todo" placeholder="New task" autofocus autocomplete="off" ng-model="remain">
</form>
</header>
<section id = "main">
<u1 id = "todo-list">
<li>
<div class="view">
<input type="checkbox" class="toggle">
<label>Etendre le linge</label>
<button class="destroy"></button>
</div>
</li>
</u1>
</section>
<footer id="footer">
<span id="todo-count"><strong> {{ remain }} </strong> Tasks remaining
</span>
</footer>
</section>
<script src="MyTodoList.js"></script>
<script src="app.js"></script>
</body>
</html>

The problem is with your cdn as it gives error. Use the below angularjs cdn. It will solve your problem.
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js
See plunkr demo for this :
https://plnkr.co/edit/S6RYmyJE1BPIRpXtldRg?p=preview

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>