Tab content won't show on tab click - javascript

I have some tabs, but it won't show it's content when I click the tab button. The Home tab seems to work, though the content is supposed to be hidden until clicked on. The other tabs are not working still. I am using google chrome.
document.getElementById("home").style.display = "inline";
var tabLinks = new Array();
var contentDivs = new Array();
function init() {
var tabListItems = document.getElementById('tabs').childNodes;
for (var i = 0; i < tabListItems.length; i++) {
if (tabListItems[i].nodeName == "LI") {
var tabLink = getFirstChildWithTagName(tabListItems[i], 'A');
var id = getHash(tabLink.getAttribute('href'));
tabLinks[id] = tabLink;
contentDivs[id] = document.getElementById(id);
}
}
var i = 0;
for (var id in tabLinks) {
tabLinks[id].onclick = showTab();
tabLinks[id].onfocus = function() {
this.blur()
};
if (i == 0) tabLinks[id].className = 'selected';
i++;
}
var i = 0;
for (var id in contentDivs) {
if (i != 0) contentDivs[id].className = 'tabContent hide';
i++;
}
}
function showTab() {
var selectedId = getHash(this.getAttribute('href'));
for (var id in contentDivs) {
if (id == selectedId) {
tabLinks[id].className = 'selected';
contentDivs[id].className = 'tabContent';
} else {
tabLinks[id].className = '';
contentDivs[id].className = 'tabContent hide';
}
}
return false;
}
function getFirstChildWithTagName(element, tagName) {
for (var i = 0; i < element.childNodes.length; i++) {
if (element.childNodes[i].nodeName == tagName) return element.childNodes[i];
}
}
function getHash(url) {
var hashPos = url.lastIndexOf('#');
return url.substring(hashPos + 1);
}
body {
background: url('image/bg1.png');
}
nav {
background: rgba(0, 0, 0, 0);
height: 80px;
border-radius: 0px;
}
nav ul {
width: 50%;
margin: auto;
}
nav ul li {
list-style-type: none;
width: 150px;
margin-top: 15px;
float: left;
border: none;
text-align: center;
}
li a {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
text-decoration: none;
color: #333333;
border-radius: 0px;
text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
line-height: 50px;
display: block;
transition: all ease-in-out 250ms;
}
li a:hover {
background: rgba(255, 255, 255, .2);
box-shadow: 0 8px 8px -6px #333;
color: #222222;
padding: 0px 0px;
text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}
.theme {
background: rgba(0, 0, 0, 0);
float: left;
width: 80px;
text-align: center;
margin-left: 15px;
padding: 10px 15px;
color: #111;
text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
border: none;
transition: all ease-in-out 250ms;
}
.theme:hover {
cursor: pointer;
background: rgba(255, 255, 255, .3);
color: #000;
text-shadow: 0 2px 2px rgba(0, 0, 0, .6);
box-shadow: 0 8px 10px -6px #333;
transition: all ease-in-out 150ms;
border: none;
}
.theme:active {
background: rgba(255, 255, 255, .3);
padding: 10px 15px;
box-shadow: 0 0 0 #333;
color: #000;
text-shadow: 0 0 0 rgba(0, 0, 0, .6);
border: none;
}
.box {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
padding: 100px 200px;
background: rgba(255, 255, 255, .3);
box-shadow: 0 10px 15px -6px #333;
}
div.tabContent {
display: none;
}
hr.style {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
#ordertabs:hover {
background: #AB1F1F;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!DOCTYPE HTML>
<html lang="en-us">
<head>
</head>
<body onload="init()">
<nav>
<ul id="tabs">
<li>
Home
</li>
<li>
Products
</li>
<li>
Order
</li>
<li>
Settings
</li>
</ul>
</nav>
<hr class="style"></hr>
<div class="tabContent" id="home">
<div class="box">
<h2>Welcome</h2>
<div>
<p></p>
<p></p>
</div>
</div>
</div>
<div class="tabContent" id="products">
<div class="box">
<h2>Products</h2>
<div>
<p></p>
<p></p>
</div>
</div>
</div>
<div class="tabContent" id="order">
<div class="box">
<h2>Ready to fail?</h2>
<div>
<p></p>
<ul id="tabs2"> Click to fail
</ul>
<div class="tabContent2">
<div class="box">
<h2>If you are reading this, you failed.</h2>
<div>
<p></p>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
</p>
</div>
</body>
</html>


You are getting the following error in the console:
Uncaught TypeError: this.getAttribute is not a function
This error comes from the following line:
tabLinks[id].onclick = showTab();
You have to use the function as a reference, otherwise it will be executed as soon as the javascript engine gets to parse that line, change it as follows:
tabLinks[id].onclick = showTab;


$(document).ready(function() {
$('#home').show(); // default shows home tab
$('#tabs a').on('click', function() { // on click of nav linnk
var id = $(this).attr('href'); // find corresponding id
$('.tabContent').hide(); // hide all tabContent elements
$(id).show(); // show corresponding clicked tabContent
});
});
body {
background: url('image/bg1.png');
}
nav {
background: rgba(0, 0, 0, 0);
height: 80px;
border-radius: 0px;
}
nav ul {
width: 50%;
margin: auto;
}
nav ul li {
list-style-type: none;
width: 150px;
margin-top: 15px;
float: left;
border: none;
text-align: center;
}
li a {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
text-decoration: none;
color: #333333;
border-radius: 0px;
text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
line-height: 50px;
display: block;
transition: all ease-in-out 250ms;
}
li a:hover {
background: rgba(255, 255, 255, .2);
box-shadow: 0 8px 8px -6px #333;
color: #222222;
padding: 0px 0px;
text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}
.theme {
background: rgba(0, 0, 0, 0);
float: left;
width: 80px;
text-align: center;
margin-left: 15px;
padding: 10px 15px;
color: #111;
text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
border: none;
transition: all ease-in-out 250ms;
}
.theme:hover {
cursor: pointer;
background: rgba(255, 255, 255, .3);
color: #000;
text-shadow: 0 2px 2px rgba(0, 0, 0, .6);
box-shadow: 0 8px 10px -6px #333;
transition: all ease-in-out 150ms;
border: none;
}
.theme:active {
background: rgba(255, 255, 255, .3);
padding: 10px 15px;
box-shadow: 0 0 0 #333;
color: #000;
text-shadow: 0 0 0 rgba(0, 0, 0, .6);
border: none;
}
.box {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
padding: 100px 200px;
background: rgba(255, 255, 255, .3);
box-shadow: 0 10px 15px -6px #333;
}
div.tabContent {
display: none;
}
hr.style {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
#ordertabs:hover {
background: #AB1F1F;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul id="tabs">
<li>
Home
</li>
<li>
Products
</li>
<li>
Order
</li>
<li>
Settings
</li>
</ul>
</nav>
<hr class="style"></hr>
<div class="tabContent" id="home">
<div class="box">
<h2>Welcome</h2>
<div>
<p></p>
<p></p>
</div>
</div>
</div>
<div class="tabContent" id="products">
<div class="box">
<h2>Products</h2>
<div>
<p></p>
<p></p>
</div>
</div>
</div>
<div class="tabContent" id="order">
<div class="box">
<h2>Ready to fail?</h2>
<div>
<p></p>
<ul id="tabs2"> Click to fail
</ul>
<div class="tabContent2">
<div class="box">
<h2>If you are reading this, you failed.</h2>
<div>
<p></p>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>

Related

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/

Content Editable Loses Its Tab/ New Line on Refresh

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>

how to add box under the initial and keep hover state?

I want the second box to hover under the "Download our Mobile App", and still want the hover state to be active so that I can be able to click on the links in the box, I am stuck so can anyone help me, please.
body {
background-color: #f5f5f5;
}
/* ======================START App Platforms===============================*/
header {
position: relative;
}
header .left {
float: left;
}
header .right {
float: right;
}
header .platform-container {
padding: 0 0 0 .5rem;
transition: all .5s ease-in-out;
}
header .platform-container li {
margin: 5px 0;
}
.platform-container:hover {
background-color: #fff;
-webkit-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, .3), 5px 0 20px -5px rgba(0, 0, 0, .3);
-moz-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, .3), 5px 0 20px -5px rgba(0, 0, 0, .3);
box-shadow: -5px 0 20px -5px rgba(0, 0, 0, .3), 5px 0 20px -5px rgba(0, 0, 0, .3);
position: relative;
z-index: 13;
cursor: pointer;
}
header ul {
eight: 30px;
}
header ul li {
margin: 0 5px;
display: inline-block;
list-style: none;
}
header ul li i {
vertical-align: middle;
margin-right: 5px;
font-size: 15px;
}
header ul>li>a,
header ul {
color: #6C6C6C;
text-decoration: none;
}
header ul li.mobile-links,
.mobile-links i {
color: #08a95b !important;
font-weight: 700;
}
header ul li.down-arrow i {
display: inline-block;
color: #bbb;
font-size: 15px;
margin-left: 5px;
}
header .app-platform {
position: absolute;
-webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3);
-moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3);
width: 223.5px;
background-color: #fff;
left: 0;
z-index: 12;
color: #333;
font-size: 14px;
cursor: default;
padding: 5px 0;
display: none;
}
header .platform-container:hover+.app-platform {
display: block;
}
header .mobile-app-link {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
header .mobile-app-link ul {
padding: 0;
}
header .mobile-app-link a {
text-decoration: none;
display: flex;
flex-direction: column;
}
header .mobile-app-link i {
margin: 0 auto;
}
header .mobile-app-link a span {
color: #0095DA!important;
font-size: 14px;
font-weight: 400;
margin: 10px auto;
}
header .mobile-app-container p {
font-size: 12px;
font-style: italic;
padding: 0 5px;
text-align: center;
}
/* ======================END App Platforms===============================*/
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<header>
<ul class="left platform-container">
<li class="mobile-links">
<i style="font-size: 20px" class="fa fa-mobile-phone"></i>Download our Mobile App
</li>
<li class="down-arrow">
<i class="fa fa-caret-down"></i>
</li>
</ul>
<div class="app-platform">
<div class="mobile-app-container">
<div class="mobile-app-link">
<ul>
<li>
<a href="#" target="_blank">
<i style="font-size: 48px;" class="fa fa-android"></i>
<span class="platform">Android</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#" target="_blank">
<i style="font-size: 48px;" class="fa fa-apple"></i>
<span class="platform">iOS</span>
</a>
</li>
</ul>
</div>
<p>Téléchargez-la maintenant!</p>
</div>
</div>
</header>

We need to wrap your .platform-container and .app-platform to a container. Then on that container set its position to relative and add the hover event styles.
.nav-wrapper {
position: relative;
}
.nav-wrapper:hover .app-platform {
display: block;
}
Once you have that all setup, we need now to set the correct position to your .app-platform when shown.
header .app-platform {
position: absolute;
top: 100%;
}
body {
background-color: #f5f5f5;
}
/* ======================START App Platforms===============================*/
header {
position: relative;
}
header .left {
float: left;
}
header .right {
float: right;
}
header .platform-container {
padding: 0 0 0 0.5rem;
transition: all 0.5s ease-in-out;
}
header .platform-container li {
margin: 5px 0;
}
.platform-container:hover {
/* background-color: #fff;
-webkit-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.3),
5px 0 20px -5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.3),
5px 0 20px -5px rgba(0, 0, 0, 0.3);
box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.3),
5px 0 20px -5px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 13;
cursor: pointer; */
}
header ul {
/* height: 30px; */
}
header ul li {
margin: 0 5px;
display: inline-block;
list-style: none;
}
header ul li i {
vertical-align: middle;
margin-right: 5px;
font-size: 15px;
}
header ul>li>a,
header ul {
color: #6c6c6c;
text-decoration: none;
}
header ul li.mobile-links,
.mobile-links i {
color: #08a95b !important;
font-weight: 700;
}
header ul li.down-arrow i {
display: inline-block;
color: #bbb;
font-size: 15px;
margin-left: 5px;
}
header .app-platform {
position: absolute;
top: 100%;
-webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
width: 223.5px;
background-color: #fff;
left: 0;
z-index: 12;
color: #333;
font-size: 14px;
cursor: default;
padding: 5px 0;
display: none;
}
header .mobile-app-link {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
header .mobile-app-link ul {
padding: 0;
}
header .mobile-app-link a {
text-decoration: none;
display: flex;
flex-direction: column;
}
header .mobile-app-link i {
margin: 0 auto;
}
header .mobile-app-link a span {
color: #0095da !important;
font-size: 14px;
font-weight: 400;
margin: 10px auto;
}
header .mobile-app-container p {
font-size: 12px;
font-style: italic;
padding: 0 5px;
text-align: center;
}
.nav-wrapper {
position: relative;
}
.platform-container {
margin: 0;
}
.nav-wrapper:hover .app-platform {
display: block;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<header>
<div class="nav-wrapper left">
<ul class="platform-container">
<li class="mobile-links">
<i style="font-size: 20px;" class="fa fa-mobile-phone"></i>Download our Mobile App
</li>
<li class="down-arrow">
<i class="fa fa-caret-down"></i>
</li>
</ul>
<div class="app-platform">
<div class="mobile-app-container">
<div class="mobile-app-link">
<ul>
<li>
<a href="#" target="_blank">
<i style="font-size: 48px;" class="fa fa-android"></i>
<span class="platform">Android</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#" target="_blank">
<i style="font-size: 48px;" class="fa fa-apple"></i>
<span class="platform">iOS</span>
</a>
</li>
</ul>
</div>
<p>Téléchargez-la maintenant!</p>
</div>
</div>
</div>
</header>

Here's my take on this using JS:
const appPlatform = document.querySelector(".app-platform");
const platformContainerLi = document.querySelector(".platform-container li");
const mobileAppContainer = document.querySelector(".mobile-app-container");
platformContainerLi.onmouseover = function() {
appPlatform.style.display = 'block';
};
mobileAppContainer.onmouseover = function() {
appPlatform.style.display = 'block';
};
mobileAppContainer.onmouseout = function() {
appPlatform.style.display = 'none';
};
Example:
const appPlatform = document.querySelector(".app-platform");
const platformContainerLi = document.querySelector(".platform-container li");
const mobileAppContainer = document.querySelector(".mobile-app-container");
platformContainerLi.onmouseover = function() {
appPlatform.style.display = 'block';
};
mobileAppContainer.onmouseover = function() {
appPlatform.style.display = 'block';
};
mobileAppContainer.onmouseout = function() {
appPlatform.style.display = 'none';
};
body {
background-color: #f5f5f5;
}
/* ======================START App Platforms===============================*/
header {
position: relative;
}
header .left {
float: left;
}
header .right {
float: right;
}
header .platform-container {
padding: 0 0 0 .5rem;
transition: all .5s ease-in-out;
}
header .platform-container li {
margin: 5px 0;
}
.platform-container:hover {
background-color: #fff;
-webkit-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, .3), 5px 0 20px -5px rgba(0, 0, 0, .3);
-moz-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, .3), 5px 0 20px -5px rgba(0, 0, 0, .3);
box-shadow: -5px 0 20px -5px rgba(0, 0, 0, .3), 5px 0 20px -5px rgba(0, 0, 0, .3);
position: relative;
z-index: 13;
cursor: pointer;
}
header ul {
height: 30px;
}
header ul li {
margin: 0 5px;
display: inline-block;
list-style: none;
}
header ul li i {
vertical-align: middle;
margin-right: 5px;
font-size: 15px;
}
header ul>li>a,
header ul {
color: #6C6C6C;
text-decoration: none;
}
header ul li.mobile-links,
.mobile-links i {
color: #08a95b !important;
font-weight: 700;
}
header ul li.down-arrow i {
display: inline-block;
color: #bbb;
font-size: 15px;
margin-left: 5px;
}
header .app-platform {
position: absolute;
-webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3);
-moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3);
width: 223.5px;
background-color: #fff;
left: 0;
z-index: 12;
color: #333;
font-size: 14px;
cursor: default;
padding: 5px 0;
display: none;
}
header .platform-container:hover+.app-platform {
display: block;
}
header .mobile-app-link {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
header .mobile-app-link ul {
padding: 0;
}
header .mobile-app-link a {
text-decoration: none;
display: flex;
flex-direction: column;
}
header .mobile-app-link i {
margin: 0 auto;
}
header .mobile-app-link a span {
color: #0095DA!important;
font-size: 14px;
font-weight: 400;
margin: 10px auto;
}
header .mobile-app-container p {
font-size: 12px;
font-style: italic;
padding: 0 5px;
text-align: center;
}
/* ======================END App Platforms===============================*/
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<header>
<ul class="left platform-container">
<li class="mobile-links">
<i style="font-size: 20px" class="fa fa-mobile-phone"></i>Download our Mobile App
</li>
<li class="down-arrow">
<i class="fa fa-caret-down"></i>
</li>
</ul>
<div class="app-platform">
<div class="mobile-app-container">
<div class="mobile-app-link">
<ul>
<li>
<a href="#" target="_blank">
<i style="font-size: 48px;" class="fa fa-android"></i>
<span class="platform">Android</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#" target="_blank">
<i style="font-size: 48px;" class="fa fa-apple"></i>
<span class="platform">iOS</span>
</a>
</li>
</ul>
</div>
<p>Téléchargez-la maintenant!</p>
</div>
</div>
</header>
And if you want to keep icons below the bar, just adjust z-index also:
platformContainerLi.onmouseover = function() {
appPlatform.style.display = 'block';
appPlatform.style.zIndex = '-1';
};
mobileAppContainer.onmouseover = function() {
appPlatform.style.display = 'block';
appPlatform.style.zIndex = '-1';
};
mobileAppContainer.onmouseout = function() {
appPlatform.style.display = 'none';
appPlatform.style.zIndex = '';
};

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

Show Facebook like box popup if referrer is Facebook [duplicate]

This question already has answers here:
Checking the referrer
(6 answers)
Closed 6 years ago.
I have a Facebook Like Box inside a Popup div. However, I would like the Facebook Like Box to be displayed ONLY when a user entered the site directly from Facebook.
In short:
User came from Facebook: show
User entered URL directly: do not show
User came from google: do not show
How can I check and validate that facebook is the user referrer? Here is my code:
if (document.cookie.indexOf('_visited=1') == -1) {
var delay_popup = 1000;
setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
var date = new Date;
date.setDate(date.getDate() + 1); // текущая дата + 1 день
document.cookie = '_visited=1; path=/; expires=' + date.toUTCString();
}
#parent_popup {
background-color: rgba(0, 0, 0, 0.8);
display: none;
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#popup {
background: #fff;
width: 380px;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border: 10px solid #ddd;
position: relative;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#popup h4 {
font: 28px Monotype Corsiva, Arial;
font-weight: bold;
text-align: center;
color: #008000;
text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
#popup h5 {
font: 24px Monotype Corsiva, Arial;
color: red;
text-align: center;
text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.close {
background-color: rgba(0, 0, 0, 0.8);
border: 2px solid #ccc;
height: 24px;
line-height: 24px;
position: absolute;
right: -24px;
cursor: pointer;
font-weight: bold;
text-align: center;
text-decoration: none;
color: rgba(255, 255, 255, 0.9);
font-size: 16px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
top: -24px;
width: 24px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background-color: rgba(0, 122, 200, 0.8);
}
<div id="parent_popup">
<div id="popup">
<font size="2" style="font-size: 15pt;">
<b style="color: rgb(255, 0, 0);"><center>pls like us !</center></b>
</font>
<center>like box code </center>
<p style="text-align: center;">
<strong><a class="button" href=""></a></strong>
</p>
</div>
</div>

You can use JavaScript to detect the referrer and then show an element if the referer URL matches facebook using .match(regex):
var fblike = document.getElementById('fblike');
var ref = document.referrer;
if (ref.match(/^https?:\/\/([^\/]+\.)?facebook\.com(\/|$)/i)) {
fblike.style.display = 'block';
}
#parent_popup {
background-color: rgba(0, 0, 0, 0.8);
position: fixed; z-index: 1;
top: 0; right: 0; bottom: 0; left: 0;
text-align: center;
}
#popup {
background: #fff;
margin: 10% auto;
width:50%;
padding: 5px 20px 13px 20px;
border: 10px solid #ddd;
position: relative;
border-radius: 10px;
}
#fblike {
display: none;
}
<div id="parent_popup">
<div id="popup">
<div id="fblike"><p>Like us on Facebook!</p></div>
</div>
</div>
Notice how #fblike has display:none by default. When user visits from facebook, the div will show up using the pure JavaScript code: document.getElementById('fblike').style.display = 'block';
Referer regex code from: Checking the referrer with JavaScript

Categories

Resources