Content Editable Loses Its Tab/ New Line on Refresh - javascript

I'm trying to have list elements on different lines. Using contenteditable, I am able to do so. However, when I reload the page, the content remains but without the separation between items. As a visual:
(Contenteditable)
Bones:
Bones are cool
Bones are helpful
(After refreshing the page)
Bones: 1. Bones are cool. 2. Bones are helpful.
Here's a video, too. You will likely notice when watching the text copying and pasting itself as well, which is odd: https://drive.google.com/file/d/1yN2oUntxAkPdkXNWCjiWC1XFcNqa_O1j/view
Here's the code as well that you may need to open in JSFiddle because there is local storage:
var app = angular.module("TodoApp", ["LocalStorageModule"]);
app.controller("TodoController", function ($scope, localStorageService) {
if (!localStorageService.get("taskListActive")) {
$scope.tasksActive = [{
text: "Do me next",
priority: 1,
complete: false
},
{
text: "I'm not important",
priority: 0,
complete: false
}
];
} else {
$scope.tasksActive = localStorageService.get("taskListActive");
}
if (!localStorageService.get("taskListComplete")) {
$scope.tasksComplete = [{
text: "I'm already done",
priority: 0,
complete: true
}];
} else {
$scope.tasksComplete = localStorageService.get("taskListComplete");
}
$scope.totalTasks = function () {
console.log($scope.tasksComplete.length);
return $scope.tasksActive.length + $scope.tasksComplete.length;
};
$scope.totalRemaining = function () {
return $scope.tasksActive.length;
};
$scope.totalComplete = function () {
return $scope.tasksActive.length;
};
$scope.todoAdd = function () {
if ($scope.taskInput.name) {
$scope.tasksActive.unshift({
text: $scope.taskInput.name,
priority: $scope.taskInput.priority || 0,
complete: false
});
$scope.taskInput.name = "";
$scope.taskInput.priority = 0;
}
};
$scope.togglePriority = function (task) {
if (task.priority === 0) {
task.priority = 1;
console.log("a");
} else {
task.priority = 0;
}
};
$scope.completeTask = function (task) {
//var task = $scope.tasksActive[index];
task.complete = true;
task.priority = 0;
$scope.tasksActive.splice($scope.tasksActive.indexOf(task), 1);
$scope.tasksComplete.unshift(task);
};
$scope.uncompleteTask = function (task) {
task.complete = false;
$scope.tasksComplete.splice($scope.tasksComplete.indexOf(task), 1);
$scope.tasksActive.unshift(task);
};
$scope.deleteTask = function (task, list) {
if (list == "active") {
$scope.tasksActive.splice($scope.tasksActive.indexOf(task), 1);
} else {
$scope.tasksComplete.splice($scope.tasksComplete.indexOf(task), 1);
}
};
$scope.clearCompleted = function () {
var deleteArr = [];
for (var i = 0; i < $scope.tasksComplete.length; i++) deleteArr.push(i);
for (var i = 0; i < deleteArr.length; i++) {
var task = i;
$scope.tasksComplete.splice($scope.tasksComplete.indexOf(task) - 1, 1);
}
};
$scope.$watch(
"tasksActive",
function (newVal, oldVal) {
console.log("tasksActive");
if (newVal !== null && angular.isDefined(newVal) && newVal !== oldVal) {
localStorageService.add("taskListActive", angular.toJson(newVal));
}
},
true
);
$scope.$watch(
"tasksComplete",
function (newVal, oldVal) {
console.log("tasksComplete");
if (newVal !== null && angular.isDefined(newVal) && newVal !== oldVal) {
localStorageService.add("taskListComplete", angular.toJson(newVal));
}
},
true
);
$scope.contentEdit = function (event, task) {
const newText = event.target.innerText;
if (newText && task) {
task.text = newText;
console.log(event.target.innerText);
}
}
});
*,
*:before,
*:after {
box-sizing: border-box;
}
.max-width {
max-width: 600px;
}
.centered {
margin: auto;
}
.text-center-h {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.list-no-style {
list-style: none outside none;
padding-left: 0;
}
html,
body {
width: 100%;
min-height: 100%;
color: #333;
padding: 20px 20px 20px 10px;
}
html {
font-size: 10px;
}
body {
font-size: 1.6rem;
background: linear-gradient(45deg, #bbdefb 0%, #311b92 100%);
}
p {
margin: 0;
}
.block {
font-size: 0;
margin-bottom: 24px;
}
.block>* {
font-size: medium;
display: inline-block;
vertical-align: top;
}
.block-justify {
text-align: justify;
}
.block-justify:after {
content: '';
display: inline-block;
width: 100%;
}
.block-justify>* {
display: inline-block;
vertical-align: top;
}
.block-table {
display: table;
table-layout: fixed;
width: 100%;
}
.block-table>* {
display: table-cell;
}
.fa {
font-size: 2rem;
color: #bbb;
padding: 0 6px;
transition: color 0.2s ease;
}
.fa.-clickable {
cursor: pointer;
}
button.-add,
.btn.-add {
border: none;
padding: 5px 0 0;
border-bottom: 3px solid #0eb2f0;
background: #56c9f5;
transition: all 0.1s ease;
}
button.-add:hover,
.btn.-add:hover {
background: #6ed1f6;
}
button.-add:active,
.btn.-add:active {
border-bottom-width: 1px;
}
button.-clear,
.btn.-clear {
border: none;
padding: 0;
background: none;
color: #bbb;
}
button.-clear:hover,
.btn.-clear:hover {
color: tomato;
}
.task-list._wrap {
background: #fff;
padding: 20px;
margin-top: 50px;
margin-bottom: 50px;
box-shadow: 18px 18px 0 0 #56c9f5;
}
.task-list._wrap h1 {
font-size: 5rem;
}
.totals._wrap,
.search {
vertical-align: bottom;
}
.totals._wrap {
font-size: 0;
}
.totals._grand-total,
.totals._detail {
display: inline-block;
vertical-align: top;
font-size: medium;
}
.totals._grand-total {
text-align: center;
height: 90px;
padding: 6px 12px;
background: #64b5f6;
color: #fff;
overflow: hidden;
}
.totals._grand-total span {
display: block;
}
.totals._total-number {
font-size: 3rem;
}
.totals._detail p {
height: 60px;
padding: 3px 6px;
}
.search._wrap {
position: relative;
}
.search .fa {
position: absolute;
left: 3px;
top: 50%;
transform: translateY(-50%);
}
.search input.-text {
padding-left: 30px;
}
.add-form._wrap {
position: relative;
height: 80px;
padding: 12px;
border: 1px solid #694ede;
box-shadow: 3px 3px 0 0 #694ede;
}
.add-form input[type="text"] {
width: 100%;
}
.add-form._buttons {
position: absolute;
right: 12px;
padding: 2px;
width: 180px;
font-size: 0;
}
.add-form._checkbox-wrap,
.add-form._submit-button {
display: inline-block;
vertical-align: middle;
font-size: medium;
height: 100%;
}
.add-form._checkbox {
padding: 0 12px;
}
.add-form._checkbox input {
visibility: hidden;
}
.add-form._checkbox .fa:hover {
color: #7b7b7b;
}
.add-form._checkbox input:checked+.fa {
color: tomato;
}
.add-form._submit-button {
height: 42px;
padding: 0 20px;
}
input.-text {
padding: 6px 12px;
height: 46px;
}
input.-add-task {
border: none;
border: 2px solid #64b5f6;
}
input.-search {
border: 2px solid #64b5f6;
}
.task._item {
background: #fff;
box-shadow: 3px 3px 0 0;
border: 1px solid;
overflow: auto;
margin-bottom: 6px;
}
.task._item a {
text-decoration: none;
}
.task.-done-false {
color: #56c9f5;
}
.task.-done-false p,
.task.-done-false a {
color: #333;
}
.task.-done-true {
color: #d5d5d5;
}
.task.-done-true p,
.task.-done-true a {
color: #bbb;
}
.task._task-left,
.task._task-right {
height: 66px;
padding: 10px;
}
.task._task-left {
width: calc(100% - 180px);
margin-bottom: 15px;
height: 100px;
overflow: auto;
}
.task._task-right {
width: 180px;
overflow: auto;
}
.task._task-right .btn {
display: inline-block;
margin-top: 3px;
margin-bottom: 15px;
}
.task._task-right .btn.-priority:hover .fa {
color: #7b7b7b;
}
.task._task-right .btn.-complete:hover .fa,
.task._task-right .btn.-re-open:hover .fa {
color: #0eb2f0;
}
.task._task-right .btn.-clear:hover .fa {
color: tomato;
}
.task.-task-priority-high ._task-left {
padding-left: 28px;
position: relative;
}
.task.-task-priority-high ._task-left:before {
position: absolute;
content: '';
width: 6px;
top: 12px;
bottom: 12px;
left: 12px;
background: tomato;
}
.task.-task-priority-high .btn.-priority .fa {
color: tomato;
}
p {
margin: 1em;
color: #777;
}
p.changed {
color: black;
}
button {
margin: 0 1em;
}
.btn {
display: inline-block;
*display: inline;
padding: 4px 10px 4px;
margin-bottom: 0;
*margin-left: 0.3em;
font-size: 13px;
line-height: 18px;
*line-height: 20px;
color: #333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
*background-color: #e6e6e6;
background-image: -ms-linear-gradient(top, #fff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
background-image: -o-linear-gradient(top, #fff, #e6e6e6);
background-image: linear-gradient(top, #fff, #e6e6e6);
background-image: -moz-linear-gradient(top, #fff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #ccc;
*border: 0;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
*zoom: 1;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn:hover {
background-color: #e6e6e6;
*background-color: #d9d9d9;
color: #333;
text-decoration: none;
background-color: #e6e6e6;
*background-color: #d9d9d9;
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-ms-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
.btn:active {
background-color: #e6e6e6;
*background-color: #d9d9d9;
background-color: #ccc \9;
background-color: #e6e6e6;
background-color: #d9d9d9 \9;
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn:first-child {
*margin-left: 0;
}
.btn:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn.active {
background-color: #e6e6e6;
*background-color: #d9d9d9;
background-color: #ccc \9;
background-color: #e6e6e6;
background-color: #d9d9d9 \9;
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn.disabled {
background-color: #e6e6e6;
*background-color: #d9d9d9;
}
.btn[disabled] {
background-color: #e6e6e6;
*background-color: #d9d9d9;
}
.btn-primary {
background-color: #0074cc;
*background-color: #05c;
background-image: -ms-linear-gradient(top, #08c, #05c);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#05c));
background-image: -webkit-linear-gradient(top, #08c, #05c);
background-image: -o-linear-gradient(top, #08c, #05c);
background-image: -moz-linear-gradient(top, #08c, #05c);
background-image: linear-gradient(top, #08c, #05c);
background-repeat: repeat-x;
border-color: #05c #05c #003580;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-primary:hover {
background-color: #05c;
*background-color: #004ab3;
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-primary:active {
background-color: #05c;
*background-color: #004ab3;
background-color: #004099 \9;
}
.btn-primary.active {
background-color: #05c;
*background-color: #004ab3;
background-color: #004099 \9;
color: rgba(255, 255, 255, 0.75);
}
.btn-primary.disabled {
background-color: #05c;
*background-color: #004ab3;
}
.btn-primary[disabled] {
background-color: #05c;
*background-color: #004ab3;
}
.btn-warning {
background-color: #faa732;
*background-color: #f89406;
background-image: -ms-linear-gradient(top, #fbb450, #f89406);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
background-image: -o-linear-gradient(top, #fbb450, #f89406);
background-image: -moz-linear-gradient(top, #fbb450, #f89406);
background-image: linear-gradient(top, #fbb450, #f89406);
background-repeat: repeat-x;
border-color: #f89406 #f89406 #ad6704;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-warning:hover {
background-color: #f89406;
*background-color: #df8505;
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-warning:active {
background-color: #f89406;
*background-color: #df8505;
background-color: #c67605 \9;
}
.btn-warning.active {
background-color: #f89406;
*background-color: #df8505;
background-color: #c67605 \9;
color: rgba(255, 255, 255, 0.75);
}
.btn-warning.disabled {
background-color: #f89406;
*background-color: #df8505;
}
.btn-warning[disabled] {
background-color: #f89406;
*background-color: #df8505;
}
.btn-danger {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-danger:hover {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-success {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-success:hover {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-info {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-info:hover {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-inverse {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-inverse:hover {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-danger.active {
color: rgba(255, 255, 255, 0.75);
}
.btn-success.active {
color: rgba(255, 255, 255, 0.75);
}
.btn-info.active {
color: rgba(255, 255, 255, 0.75);
}
.btn-inverse.active {
color: rgba(255, 255, 255, 0.75);
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.0/angular.min.js">
</script>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/131045/ngLocalStorage.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</link>
<div ng-app="TodoApp" ng-controller="TodoController" class="task-list _wrap centered max-width text-center-h ng-scope"style="font-family: Arial, sans-serif;">
<h1 style="font-family: Arial, sans-serif;">Notes:</h1>
<div class="block-justify" style="position: relative; left: -153px; top: -14px;">
<div class="totals _wrap text-left">
<div class="totals _detail">
</div>
</div>
<div class="search _wrap text-right">
<input class="input -text -search" type="text" placeholder="Search tasks" ng-model="taskSearch.name" />
<i class="fa fa-search"></i>
</div>
</div>
<form class="add-form _wrap block text-left">
<input class="input -text -add-task" type="text" placeholder="Add a new task" ng-model="taskInput.name" ng-model-instant />
<div class="add-form _buttons text-right">
<p>Priority</p>
<div class="add-form _checkbox-wrap">
<label class="add-form _checkbox"><input class="input -checkbox" type="checkbox" name="priority"
ng-model="taskInput.priority" ng-init="checked=false" parse-int ng-true-value="1"
ng-false-value="0"></i></label>
</div>
<button class="add-form _submit-button btn -add" ng-click="todoAdd()" style="position: relative; left: 18px; top: -3px; height: 47px; transform-origin: 50% 78%;">Add</button>
</div>
</form>
<ul class="list-no-style text-left">
<li ng-repeat="task in tasksActive | filter:taskSearch.name | orderBy:'-priority'"
class="task _item -done-{{ task.complete }} -task-priority-{{ task.priority==true ? 'high' : 'low' }} block-table">
<div class="task _task-left" ;>
<p id="myText" contentEditable class="changed" ng-on-blur="contentEdit($event, task)">
{{ task.text }}
</p>
</div>
<div class="task _task-right text-right">
<a href ng-click="togglePriority(task)" class="btn -task-action -priority"
title="Change priority"><i class="fa fa-exclamation"></i></a>
<a href ng-click="completeTask(task)" class="btn -task-action -complete" title="Complete"><i
class="fa fa-check"></i></a>
<a href ng-click="deleteTask(task,'active')" class="btn -clear" title="Delete"><i
class="fa fa-times-circle"></i></a>
</div>
</li>
<li ng-repeat="task in tasksComplete | filter:taskSearch.name"
class="task _item -done-{{ task.complete }} block">
<p class="task _task-left">{{ task.text }}</p>
<div class="task _task-right text-right">
<a href ng-click="uncompleteTask(task)" class="btn -task-action -re-open" title="Re-open"><i
class="fa fa-undo"></i></a>
<a href ng-click="deleteTask(task,'complete')" class="btn -clear" title="Delete"><i
class="fa fa-times-circle"></i></a>
</div>
</li>
</ul>
<form class="text-right">
<button class="btn -clear" ng-show="tasksComplete.length" ng-click="clearCompleted()">Delete all
completed</button>
</form>
</div>


Just add in your css white-space: pre-wrap; for p
p {
white-space: pre-wrap; /* New Code */
margin: 1em;
color: #777;
}


Instead of binding {{task.text}}, you need to bind the html by using ngBindHtml.
So the first paragraph would be:
<p id="myText" contenteditable class="changed"
ng-on-blur="contentEdit($event, task)"
ng-bind-html="task.text"></p>
The last paragraph:
<p class="task _task-left" ng-bind-html="task.text"></p>
In first line of function contentEdit, instead of innerText assign innerHTML:
const newText = event.target.innerHTML;
Add ngSanitize service to your app.
var app = angular.module("TodoApp", ["LocalStorageModule", 'ngSanitize']);
In your web page include this script after angular is loaded:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.8.0/angular-sanitize.min.js"></script>

Related

Onclick event on search bar suggestions

I have added a search bar with suggestion elements. On click of search bar all the elements is displayed but onclick event is not working on these list suggestion elements.
Have added click event to these suggestions which is stored in li .I want some actions to be performed onclick of these elements
$(document).on("click", ".search.search-list", function(e) {
console.log('clicked')
})
.search {
position: relative;
margin: 0 auto;
width: 300px;
}
.search input {
height: 26px;
width: 100%;
padding: 0 12px 0 25px;
/* background: white url("https://cssdeck.com/uploads/media/items/5/5JuDgOa.png") 8px 6px no-repeat; */
border-width: 1px;
border-style: solid;
border-color: #a8acbc #babdcc #c0c3d2;
border-radius: 13px;
-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-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
}
.search input:focus {
outline: none;
border-color: #66b1ee;
-webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
}
.search input:focus + .results { display: block }
.search .results {
display: none;
position: absolute;
top: 35px;
left: 0;
right: 0;
z-index: 10;
padding: 0;
margin: 0;
border-width: 1px;
border-style: solid;
border-color: #cbcfe2 #c8cee7 #c4c7d7;
border-radius: 3px;
background-color: #fdfdfd;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
background-image: linear-gradient(top, #fdfdfd, #eceef4);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.search .results li { display: block }
.search .results li:first-child { margin-top: -1px }
.search .results li:first-child:before, .search .results li:first-child:after {
display: block;
content: '';
width: 0;
height: 0;
position: absolute;
left: 50%;
margin-left: -5px;
border: 5px outset transparent;
}
.search .results li:first-child:before {
border-bottom: 5px solid #c4c7d7;
top: -11px;
}
.search .results li:first-child:after {
border-bottom: 5px solid #fdfdfd;
top: -10px;
}
.search .results li:first-child:hover:before, .search .results li:first-child:hover:after { display: none }
.search .results li:last-child { margin-bottom: -1px }
.search .results a {
display: block;
position: relative;
margin: 0 -1px;
padding: 6px 40px 6px 10px;
color: #808394;
font-weight: 500;
text-shadow: 0 1px #fff;
border: 1px solid transparent;
border-radius: 3px;
}
.search .results a span { font-weight: 200 }
.search .results a:before {
content: '';
width: 18px;
height: 18px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -9px;
/* background: url("https://cssdeck.com/uploads/media/items/7/7BNkBjd.png") 0 0 no-repeat; */
}
.search .results a:hover {
text-decoration: none;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
border-color: #2380dd #2179d5 #1a60aa;
background-color: #338cdf;
/* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
background-image: linear-gradient(top, #59aaf4, #338cdf); */
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}
:-moz-placeholder {
color: #a7aabc;
font-weight: 200;
}
::-webkit-input-placeholder {
color: #a7aabc;
font-weight: 200;
}
.lt-ie9 .search input { line-height: 26px }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="modal fade" id="search-bar" role="dialog">
<div class="modal-dialog search-modal">
<div class="modal-content search-modal">
<div class="modal-body">
<section class="main">
<form class="search">
<input type="text" class="search-input" name="q" placeholder="Search..." />
<ul class="results" >
<li class="search-list">Search Result #1<br /><span>Description...</span></li>
<li class="search-list">Search Result #2<br /><span>Description...</span></li>
<li class="search-list">Search Result #3<br /><span>Description...</span></li>
<li class="search-list">Search Result #4</li>
</ul>
</form>
</section>
</div>
</div>
</div>
</div>

You just need to make two changes. I'll explain what I did.
The reason why the click event on search-list was not working is because you have defined it in js as .search.search-list. There should be a space between them, like .search .search-list, as #Aioros suggested.
You have displayed the dropdown using CSS :focus, like when the cursor is inside search input, the dropdown should show. Now when the user clicks on one of the items from the dropdown, the focus shifts away from the search input field, thus making the dropdown invisible again. I have used a small jQuery solution to display the dropdown when the user clicks on search field.
$(".search-input").on("click", function(e) {
$(".results").css({
"display": "block"
});
console.log("HEY");
})
$(".search .search-list").on("click", function(e) {
console.log('clicked')
})
.search {
position: relative;
margin: 0 auto;
width: 300px;
}
.search input {
height: 26px;
width: 100%;
padding: 0 12px 0 25px;
/* background: white url("https://cssdeck.com/uploads/media/items/5/5JuDgOa.png") 8px 6px no-repeat; */
border-width: 1px;
border-style: solid;
border-color: #a8acbc #babdcc #c0c3d2;
border-radius: 13px;
-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-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
}
.search input:focus {
outline: none;
border-color: #66b1ee;
-webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
}
/*.search input:focus + .results { display: block }*/
.search .results {
display: none;
position: absolute;
top: 35px;
left: 0;
right: 0;
z-index: 10;
padding: 0;
margin: 0;
border-width: 1px;
border-style: solid;
border-color: #cbcfe2 #c8cee7 #c4c7d7;
border-radius: 3px;
background-color: #fdfdfd;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
background-image: linear-gradient(top, #fdfdfd, #eceef4);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.search .results li {
display: block
}
.search .results li:first-child {
margin-top: -1px
}
.search .results li:first-child:before,
.search .results li:first-child:after {
display: block;
content: '';
width: 0;
height: 0;
position: absolute;
left: 50%;
margin-left: -5px;
border: 5px outset transparent;
}
.search .results li:first-child:before {
border-bottom: 5px solid #c4c7d7;
top: -11px;
}
.search .results li:first-child:after {
border-bottom: 5px solid #fdfdfd;
top: -10px;
}
.search .results li:first-child:hover:before,
.search .results li:first-child:hover:after {
display: none
}
.search .results li:last-child {
margin-bottom: -1px
}
.search .results a {
display: block;
position: relative;
margin: 0 -1px;
padding: 6px 40px 6px 10px;
color: #808394;
font-weight: 500;
text-shadow: 0 1px #fff;
border: 1px solid transparent;
border-radius: 3px;
}
.search .results a span {
font-weight: 200
}
.search .results a:before {
content: '';
width: 18px;
height: 18px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -9px;
/* background: url("https://cssdeck.com/uploads/media/items/7/7BNkBjd.png") 0 0 no-repeat; */
}
.search .results a:hover {
text-decoration: none;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
border-color: #2380dd #2179d5 #1a60aa;
background-color: #338cdf;
/* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
background-image: linear-gradient(top, #59aaf4, #338cdf); */
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}
:-moz-placeholder {
color: #a7aabc;
font-weight: 200;
}
::-webkit-input-placeholder {
color: #a7aabc;
font-weight: 200;
}
.lt-ie9 .search input {
line-height: 26px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="modal fade" id="search-bar" role="dialog">
<div class="modal-dialog search-modal">
<div class="modal-content search-modal">
<div class="modal-body">
<section class="main">
<form class="search">
<input type="text" class="search-input" name="q" placeholder="Search..." />
<ul class="results">
<li class="search-list">Search Result #1<br /><span>Description...</span></li>
<li class="search-list">Search Result #2<br /><span>Description...</span></li>
<li class="search-list">Search Result #3<br /><span>Description...</span></li>
<li class="search-list">Search Result #4</li>
</ul>
</form>
</section>
</div>
</div>
</div>
</div>

Copy and Paste Table Using ContentEditable

This video is a good representation of the issue I am facing: https://drive.google.com/file/d/1jN44lUpnbVDv_m3LuPhlJl6RFUu884jz/view. I cannot copy and paste a table from another a tab without it breaking down. Because this uses local storage, here is a JSFiddle: https://jsfiddle.net/znj537w0/1/.
var app = angular.module("TodoApp", ["LocalStorageModule", 'ngSanitize']);
app.controller("TodoController", function ($scope, localStorageService) {
if (!localStorageService.get("taskListActive")) {
$scope.tasksActive = [{
text: "Do me next",
priority: 1,
complete: false
},
{
text: "I'm not important",
priority: 0,
complete: false
}
];
} else {
$scope.tasksActive = localStorageService.get("taskListActive");
}
if (!localStorageService.get("taskListComplete")) {
$scope.tasksComplete = [{
text: "I'm already done",
priority: 0,
complete: true
}];
} else {
$scope.tasksComplete = localStorageService.get("taskListComplete");
}
$scope.totalTasks = function () {
console.log($scope.tasksComplete.length);
return $scope.tasksActive.length + $scope.tasksComplete.length;
};
$scope.totalRemaining = function () {
return $scope.tasksActive.length;
};
$scope.totalComplete = function () {
return $scope.tasksActive.length;
};
$scope.todoAdd = function () {
if ($scope.taskInput.name) {
$scope.tasksActive.unshift({
text: $scope.taskInput.name,
priority: $scope.taskInput.priority || 0,
complete: false
});
$scope.taskInput.name = "";
$scope.taskInput.priority = 0;
}
};
$scope.togglePriority = function (task) {
if (task.priority === 0) {
task.priority = 1;
console.log("a");
} else {
task.priority = 0;
}
};
$scope.completeTask = function (task) {
//var task = $scope.tasksActive[index];
task.complete = true;
task.priority = 0;
$scope.tasksActive.splice($scope.tasksActive.indexOf(task), 1);
$scope.tasksComplete.unshift(task);
};
$scope.uncompleteTask = function (task) {
task.complete = false;
$scope.tasksComplete.splice($scope.tasksComplete.indexOf(task), 1);
$scope.tasksActive.unshift(task);
};
$scope.deleteTask = function (task, list) {
if (list == "active") {
$scope.tasksActive.splice($scope.tasksActive.indexOf(task), 1);
} else {
$scope.tasksComplete.splice($scope.tasksComplete.indexOf(task), 1);
}
};
$scope.clearCompleted = function () {
var deleteArr = [];
for (var i = 0; i < $scope.tasksComplete.length; i++) deleteArr.push(i);
for (var i = 0; i < deleteArr.length; i++) {
var task = i;
$scope.tasksComplete.splice($scope.tasksComplete.indexOf(task) - 1, 1);
}
};
$scope.$watch(
"tasksActive",
function (newVal, oldVal) {
console.log("tasksActive");
if (newVal !== null && angular.isDefined(newVal) && newVal !== oldVal) {
localStorageService.add("taskListActive", angular.toJson(newVal));
}
},
true
);
$scope.$watch(
"tasksComplete",
function (newVal, oldVal) {
console.log("tasksComplete");
if (newVal !== null && angular.isDefined(newVal) && newVal !== oldVal) {
localStorageService.add("taskListComplete", angular.toJson(newVal));
}
},
true
);
$scope.contentEdit = function (event, task) {
const newText = event.target.innerText;
if (newText && task) {
task.text = newText;
console.log(event.target.innerText);
}
}
});
const newText = event.target.innerHTML;
*,
*:before,
*:after {
box-sizing: border-box;
}
.max-width {
max-width: 600px;
}
.centered {
margin: auto;
}
.text-center-h {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.list-no-style {
list-style: none outside none;
padding-left: 0;
}
html,
body {
width: 100%;
min-height: 100%;
color: #333;
padding: 20px 20px 20px 10px;
}
html {
font-size: 10px;
}
body {
font-size: 1.6rem;
background: linear-gradient(45deg, #bbdefb 0%, #311b92 100%);
}
p {
white-space: pre-wrap;
margin: 1em;
color: #777;
}
.block {
font-size: 0;
margin-bottom: 24px;
}
.block>* {
font-size: medium;
display: inline-block;
vertical-align: top;
}
.block-justify {
text-align: justify;
}
.block-justify:after {
content: '';
display: inline-block;
width: 100%;
}
.block-justify>* {
display: inline-block;
vertical-align: top;
}
.block-table {
display: table;
table-layout: fixed;
width: 100%;
}
.block-table>* {
display: table-cell;
}
.fa {
font-size: 2rem;
color: #bbb;
padding: 0 6px;
transition: color 0.2s ease;
}
.fa.-clickable {
cursor: pointer;
}
button.-add,
.btn.-add {
border: none;
padding: 5px 0 0;
border-bottom: 3px solid #0eb2f0;
background: #56c9f5;
transition: all 0.1s ease;
}
button.-add:hover,
.btn.-add:hover {
background: #6ed1f6;
}
button.-add:active,
.btn.-add:active {
border-bottom-width: 1px;
}
button.-clear,
.btn.-clear {
border: none;
padding: 0;
background: none;
color: #bbb;
}
button.-clear:hover,
.btn.-clear:hover {
color: tomato;
}
.task-list._wrap {
background: #fff;
padding: 20px;
margin-top: 50px;
margin-bottom: 50px;
box-shadow: 18px 18px 0 0 #56c9f5;
}
.task-list._wrap h1 {
font-size: 5rem;
}
.totals._wrap,
.search {
vertical-align: bottom;
}
.totals._wrap {
font-size: 0;
}
.totals._grand-total,
.totals._detail {
display: inline-block;
vertical-align: top;
font-size: medium;
}
.totals._grand-total {
text-align: center;
height: 90px;
padding: 6px 12px;
background: #64b5f6;
color: #fff;
overflow: hidden;
}
.totals._grand-total span {
display: block;
}
.totals._total-number {
font-size: 3rem;
}
.totals._detail p {
height: 60px;
padding: 3px 6px;
}
.search._wrap {
position: relative;
}
.search .fa {
position: absolute;
left: 3px;
top: 50%;
transform: translateY(-50%);
}
.search input.-text {
padding-left: 30px;
}
.add-form._wrap {
position: relative;
height: 80px;
padding: 12px;
border: 1px solid #694ede;
box-shadow: 3px 3px 0 0 #694ede;
}
.add-form input[type="text"] {
width: 100%;
}
.add-form._buttons {
position: absolute;
right: 12px;
padding: 2px;
width: 180px;
font-size: 0;
}
.add-form._checkbox-wrap,
.add-form._submit-button {
display: inline-block;
vertical-align: middle;
font-size: medium;
height: 100%;
}
.add-form._checkbox {
padding: 0 12px;
}
.add-form._checkbox input {
visibility: hidden;
}
.add-form._checkbox .fa:hover {
color: #7b7b7b;
}
.add-form._checkbox input:checked+.fa {
color: tomato;
}
.add-form._submit-button {
height: 42px;
padding: 0 20px;
}
input.-text {
padding: 6px 12px;
height: 46px;
}
input.-add-task {
border: none;
border: 2px solid #64b5f6;
}
input.-search {
border: 2px solid #64b5f6;
}
.task._item {
background: #fff;
box-shadow: 3px 3px 0 0;
border: 1px solid;
overflow: auto;
margin-bottom: 6px;
}
.task._item a {
text-decoration: none;
}
.task.-done-false {
color: #56c9f5;
}
.task.-done-false p,
.task.-done-false a {
color: #333;
}
.task.-done-true {
color: #d5d5d5;
}
.task.-done-true p,
.task.-done-true a {
color: #bbb;
}
.task._task-left,
.task._task-right {
height: 66px;
padding: 10px;
}
.task._task-left {
width: calc(100% - 180px);
margin-bottom: 15px;
height: 100px;
overflow: auto;
}
.task._task-right {
width: 180px;
overflow: auto;
}
.task._task-right .btn {
display: inline-block;
margin-top: 3px;
margin-bottom: 15px;
}
.task._task-right .btn.-priority:hover .fa {
color: #7b7b7b;
}
.task._task-right .btn.-complete:hover .fa,
.task._task-right .btn.-re-open:hover .fa {
color: #0eb2f0;
}
.task._task-right .btn.-clear:hover .fa {
color: tomato;
}
.task.-task-priority-high ._task-left {
padding-left: 28px;
position: relative;
}
.task.-task-priority-high ._task-left:before {
position: absolute;
content: '';
width: 6px;
top: 12px;
bottom: 12px;
left: 12px;
background: tomato;
}
.task.-task-priority-high .btn.-priority .fa {
color: tomato;
}
p {
margin: 1em;
color: #777;
}
p.changed {
color: black;
}
button {
margin: 0 1em;
}
.btn {
display: inline-block;
*display: inline;
padding: 4px 10px 4px;
margin-bottom: 0;
*margin-left: 0.3em;
font-size: 13px;
line-height: 18px;
*line-height: 20px;
color: #333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
*background-color: #e6e6e6;
background-image: -ms-linear-gradient(top, #fff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
background-image: -o-linear-gradient(top, #fff, #e6e6e6);
background-image: linear-gradient(top, #fff, #e6e6e6);
background-image: -moz-linear-gradient(top, #fff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #ccc;
*border: 0;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
*zoom: 1;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn:hover {
background-color: #e6e6e6;
*background-color: #d9d9d9;
color: #333;
text-decoration: none;
background-color: #e6e6e6;
*background-color: #d9d9d9;
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-ms-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
.btn:active {
background-color: #e6e6e6;
*background-color: #d9d9d9;
background-color: #ccc \9;
background-color: #e6e6e6;
background-color: #d9d9d9 \9;
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn:first-child {
*margin-left: 0;
}
.btn:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn.active {
background-color: #e6e6e6;
*background-color: #d9d9d9;
background-color: #ccc \9;
background-color: #e6e6e6;
background-color: #d9d9d9 \9;
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn.disabled {
background-color: #e6e6e6;
*background-color: #d9d9d9;
}
.btn[disabled] {
background-color: #e6e6e6;
*background-color: #d9d9d9;
}
.btn-primary {
background-color: #0074cc;
*background-color: #05c;
background-image: -ms-linear-gradient(top, #08c, #05c);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#05c));
background-image: -webkit-linear-gradient(top, #08c, #05c);
background-image: -o-linear-gradient(top, #08c, #05c);
background-image: -moz-linear-gradient(top, #08c, #05c);
background-image: linear-gradient(top, #08c, #05c);
background-repeat: repeat-x;
border-color: #05c #05c #003580;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-primary:hover {
background-color: #05c;
*background-color: #004ab3;
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-primary:active {
background-color: #05c;
*background-color: #004ab3;
background-color: #004099 \9;
}
.btn-primary.active {
background-color: #05c;
*background-color: #004ab3;
background-color: #004099 \9;
color: rgba(255, 255, 255, 0.75);
}
.btn-primary.disabled {
background-color: #05c;
*background-color: #004ab3;
}
.btn-primary[disabled] {
background-color: #05c;
*background-color: #004ab3;
}
.btn-warning {
background-color: #faa732;
*background-color: #f89406;
background-image: -ms-linear-gradient(top, #fbb450, #f89406);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
background-image: -o-linear-gradient(top, #fbb450, #f89406);
background-image: -moz-linear-gradient(top, #fbb450, #f89406);
background-image: linear-gradient(top, #fbb450, #f89406);
background-repeat: repeat-x;
border-color: #f89406 #f89406 #ad6704;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-warning:hover {
background-color: #f89406;
*background-color: #df8505;
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-warning:active {
background-color: #f89406;
*background-color: #df8505;
background-color: #c67605 \9;
}
.btn-warning.active {
background-color: #f89406;
*background-color: #df8505;
background-color: #c67605 \9;
color: rgba(255, 255, 255, 0.75);
}
.btn-warning.disabled {
background-color: #f89406;
*background-color: #df8505;
}
.btn-warning[disabled] {
background-color: #f89406;
*background-color: #df8505;
}
.btn-danger {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-danger:hover {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-success {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-success:hover {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-info {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-info:hover {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-inverse {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-inverse:hover {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-danger.active {
color: rgba(255, 255, 255, 0.75);
}
.btn-success.active {
color: rgba(255, 255, 255, 0.75);
}
.btn-info.active {
color: rgba(255, 255, 255, 0.75);
}
.btn-inverse.active {
color: rgba(255, 255, 255, 0.75);
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.0/angular.min.js">
</script>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/131045/ngLocalStorage.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</link>
<div ng-app="TodoApp" ng-controller="TodoController" class="task-list _wrap centered max-width text-center-h ng-scope"style="font-family: Arial, sans-serif;">
<h1 style="font-family: Arial, sans-serif;">Notes:</h1>
<div class="block-justify" style="position: relative; left: -153px; top: -14px;">
<div class="totals _wrap text-left">
<div class="totals _detail">
</div>
</div>
<div class="search _wrap text-right">
<input class="input -text -search" type="text" placeholder="Search tasks" ng-model="taskSearch.name" />
<i class="fa fa-search"></i>
</div>
</div>
<form class="add-form _wrap block text-left">
<input class="input -text -add-task" type="text" placeholder="Add a new task" ng-model="taskInput.name" ng-model-instant />
<div class="add-form _buttons text-right">
<p>Priority</p>
<div class="add-form _checkbox-wrap">
<label class="add-form _checkbox"><input class="input -checkbox" type="checkbox" name="priority"
ng-model="taskInput.priority" ng-init="checked=false" parse-int ng-true-value="1"
ng-false-value="0"></i></label>
</div>
<button class="add-form _submit-button btn -add" ng-click="todoAdd()" style="position: relative; left: 18px; top: -3px; height: 47px; transform-origin: 50% 78%;">Add</button>
</div>
</form>
<ul class="list-no-style text-left">
<li ng-repeat="task in tasksActive | filter:taskSearch.name | orderBy:'-priority'"
class="task _item -done-{{ task.complete }} -task-priority-{{ task.priority==true ? 'high' : 'low' }} block-table">
<div class="task _task-left" ;>
<p id="myText" contenteditable class="changed"
ng-on-blur="contentEdit($event, task)"
ng-bind-html="task.text"></p>
</div>
<div class="task _task-right text-right">
<a href ng-click="togglePriority(task)" class="btn -task-action -priority"
title="Change priority"><i class="fa fa-exclamation"></i></a>
<a href ng-click="completeTask(task)" class="btn -task-action -complete" title="Complete"><i
class="fa fa-check"></i></a>
<a href ng-click="deleteTask(task,'active')" class="btn -clear" title="Delete"><i
class="fa fa-times-circle"></i></a>
</div>
</li>
<li ng-repeat="task in tasksComplete | filter:taskSearch.name"
class="task _item -done-{{ task.complete }} block">
<p style="white-space: pre-wrap;" class="task _task-left">{{ task.text }}</p>
<div class="task _task-right text-right">
<a href ng-click="uncompleteTask(task)" class="btn -task-action -re-open" title="Re-open"><i
class="fa fa-undo"></i></a>
<a href ng-click="deleteTask(task,'complete')" class="btn -clear" title="Delete"><i
class="fa fa-times-circle"></i></a>
</div>
</li>
</ul>
<form class="text-right">
<button class="btn -clear" ng-show="tasksComplete.length" ng-click="clearCompleted()">Delete all
completed</button>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.8.0/angular-sanitize.min.js"></script>

Use this:
$scope.contentEdit = function (event, task) {
const newText = event.target.innertHTML;
if (newText && task) {
task.text = newText;
}
}
Change innerText to innerHTML. https://jsfiddle.net/3uvfjdew/

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

How to change the colour of a scrollbar on a web page? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
Can somebody tell me how to change the colour of a scrollbar on a web page?

You can do this with CSS
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb {
background-color: red;
outline: 1px solid darkgrey;
}

You May Use SlimScroll. It also helps more features than adding color.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://rocha.la/misc/jsdemos/slimScroll/jquery.slimscroll.js"></script>
<script>
$(function() {
$('#id_of_div_you_need_scroll').slimScroll({
width: '300px',
height: '200px',
color: '#ffcc00',
/* size: '10px',
position: 'left',
alwaysVisible: true,
distance: '20px',
start: $('#child_image_element'),
railVisible: true,
railColor: '#222',
railOpacity: 0.3,
wheelStep: 10,
allowPageScroll: false,
disableFadeOut: false*/
});
});
</script>

enter code here
$(document).ready(function () {
if (!$.browser.webkit) {
$('.wrapper').html('<p>Sorry! Non webkit users. :(</p>');
}
});
header
{
font-family: 'Lobster', cursive;
text-align: center;
font-size: 25px;
}
#info
{
font-size: 18px;
color: #555;
text-align: center;
margin-bottom: 25px;
}
a{
color: #074E8C;
}
.scrollbar
{
margin-left: 30px;
float: left;
height: 300px;
width: 65px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow
{
min-height: 450px;
}
#wrapper
{
text-align: center;
width: 500px;
margin: auto;
}
/*
* STYLE 1
*/
#style-1::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
/*
* STYLE 2
*/
#style-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #D62929;
}
/*
* STYLE 3
*/
#style-3::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-3::-webkit-scrollbar
{
width: 6px;
background-color: #F5F5F5;
}
#style-3::-webkit-scrollbar-thumb
{
background-color: #000000;
}
/*
* STYLE 4
*/
#style-4::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar-thumb
{
background-color: #000000;
border: 2px solid #555555;
}
/*
* STYLE 5
*/
#style-5::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-5::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-5::-webkit-scrollbar-thumb
{
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%,
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.5, transparent), to(transparent));
}
/*
* STYLE 6
*/
#style-6::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-6::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-6::-webkit-scrollbar-thumb
{
background-color: #F90;
background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}
/*
* STYLE 7
*/
#style-7::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-7::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-7::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-image: -webkit-gradient(linear,
left bottom,
left top,
color-stop(0.44, rgb(122,153,217)),
color-stop(0.72, rgb(73,125,189)),
color-stop(0.86, rgb(28,58,148)));
}
/*
* STYLE 8
*/
#style-8::-webkit-scrollbar-track
{
border: 1px solid black;
background-color: #F5F5F5;
}
#style-8::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-8::-webkit-scrollbar-thumb
{
background-color: #000000;
}
/*
* STYLE 9
*/
#style-9::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-9::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-9::-webkit-scrollbar-thumb
{
background-color: #F90;
background-image: -webkit-linear-gradient(90deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}
/*
* STYLE 10
*/
#style-10::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-10::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-10::-webkit-scrollbar-thumb
{
background-color: #AAA;
border-radius: 10px;
background-image: -webkit-linear-gradient(90deg,
rgba(0, 0, 0, .2) 25%,
transparent 25%,
transparent 50%,
rgba(0, 0, 0, .2) 50%,
rgba(0, 0, 0, .2) 75%,
transparent 75%,
transparent)
}
/*
* STYLE 11
*/
#style-11::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-11::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-11::-webkit-scrollbar-thumb
{
background-color: #3366FF;
border-radius: 10px;
background-image: -webkit-linear-gradient(0deg,
rgba(255, 255, 255, 0.5) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0.5) 75%,
transparent 75%,
transparent)
}
/*
* STYLE 12
*/
#style-12::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
border-radius: 10px;
background-color: #444444;
}
#style-12::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-12::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #D62929;
background-image: -webkit-linear-gradient(90deg,
transparent,
rgba(0, 0, 0, 0.4) 50%,
transparent,
transparent)
}
/*
* STYLE 13
*/
#style-13::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
border-radius: 10px;
background-color: #CCCCCC;
}
#style-13::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-13::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #D62929;
background-image: -webkit-linear-gradient(90deg,
transparent,
rgba(0, 0, 0, 0.4) 50%,
transparent,
transparent)
}
/*
* STYLE 14
*/
#style-14::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
background-color: #CCCCCC;
}
#style-14::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-14::-webkit-scrollbar-thumb
{
background-color: #FFF;
background-image: -webkit-linear-gradient(90deg,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 25%,
transparent 100%,
rgba(0, 0, 0, 1) 75%,
transparent)
}
/*
* STYLE 15
*/
#style-15::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-15::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-15::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #FFF;
background-image: -webkit-gradient(linear,
40% 0%,
75% 84%,
from(#4D9C41),
to(#19911D),
color-stop(.6,#54DE5D))
}
/*
* STYLE 16
*/
#style-16::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-16::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-16::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #FFF;
background-image: -webkit-linear-gradient(top,
#e4f5fc 0%,
#bfe8f9 50%,
#9fd8ef 51%,
#2ab0ed 100%);
}
<div id="wrapper">
<div class="scrollbar" id="style-default">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-1">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-2">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-3">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-4">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-5">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-6">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-7">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-8">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-9">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-10">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-11">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-13">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-14">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-15">
<div class="force-overflow"></div>
</div>
</div>

Changing scrollbar colour is a bit tricky. You can do it using the specific CSS rules, but it's going to be very dependent on the browser you are using.
To solve this, there are plenty of JavaScript plugins that hidde the original scrollbar and set a new one made by html elements, which is fully customizable. You can review this, for example.

How to get value from toggle-button yes/No And show retrieve data in button active

Hiii Everyone,
Below is my code to display toggle button yes/no.What i want to do is based on user selection i want to retrieve data.If they choose Yes toggle button javascript variable should have yes string or else no string.
HTML Code
<label class="switch">
<input class="switch-input" type="checkbox" />
<span class="switch-label" data-on="Yes" data-off="No"></span>
<span class="switch-handle"></span>
</label>
CSS
.switch {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #0088cc;
border-color: #0088cc;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition
========================== */
.switch-label, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
I refreed this code from http://www.htmllion.com/css3-toggle-switch-button.html
Below is the output
I tried this jquery to get get:
alert($(this).attr("data-on"));
I dont know how to get selected button data and similarly after get data it will store in database and i want to retrieve from database either yes or no it should be selected as default which will retrieve from database.How can i do with this.Result which i tried in jquery is returning undefined values.Please anyone help me to get out of this problem.Thanks in advance.

Try this:
(function() {
$(document).ready(function() {
$('.switch-input').on('change', function() {
var isChecked = $(this).is(':checked');
var selectedData;
var $switchLabel = $('.switch-label');
console.log('isChecked: ' + isChecked);
if(isChecked) {
selectedData = $switchLabel.attr('data-on');
} else {
selectedData = $switchLabel.attr('data-off');
}
console.log('Selected data: ' + selectedData);
});
});
})();
For Ref: http://jsbin.com/zizuxo/edit?js,console,output

in pure JS :
var result = document.getElementsByClassName("switch-input")[0].checked ? 'yes' : 'no'
jQuery in compatibility mode :
var result = jQuery('.switch-input').is(':checked')?'yes':'no';

I combined the above
$('.switch-input').on('change', function() {
result = document.getElementsByClassName("switch-input")[0].checked ? 'yes' : 'no';
alert(result);
});

Categories

Resources