Global click counter that counts clicks of all users - javascript

I am quite green in the CSS, HTML and JS, but I wish to create click counter that counts all the clicks made by all the users.
ie. when the counter says "0" and if person A has opened the site and clicks the counter once the person B by clicking the counter once too gets result of "2" instead of "1".
I have watched many videos how to create the counter but it resets once the page is reloaded and that's not what I want.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Counter App</title>
<!-- ---------------- linked css file ----------------- -->
<link rel="stylesheet" href="counter.css">
</head>
<body>
<!-- ----------------html formated --------------- -->
<div class="container">
<main>
<h1>Counter App</h1>
<div class="button-counter">
<button class="btn decreased"> - </button>
<span> 0 </span>
<button class="btn increase"> + </button>
</div>
</main>
</div>
<!-- ---------------- linked js file ---------------- -->
<script src="app.js"></script>
</body>
</html>
// initial value of span ========
let value = 0
// getting value by reference ==========
const span = document.querySelector("span");
const decreased = document.querySelector(".decreased")
const increase = document.querySelector(".increase");
// --------- calling the even function -------------------
decreased.addEventListener("click" , () => {
span.innerHTML=value--;
});
// --------------- event for increase button--------------------
increase.addEventListener("click" , () =>{
span.innerHTML=value++;
})
*{
margin 0%;
padding: 0%;
box-sizing: border-box;
background-color: rgba(255, 166, 0, 0.644);
}
.container
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: orange;
border: 1px solid orange;
border-radius: 20px;
box-shadow: 5px 5px 4px 2px rgb(211, 161, 96);
width: 300px;
height: 200px;
}
h1{
font-size: 30px;
text-align: center;
text-shadow: 2px 2px rgba(5, 5, 5, 5);
color: white;
}
.button-counter{
display: flex;
justify-content: space-around;
align-items: center;
}
button
{
text-align: center;
padding: 10px;
margin: 10px;
font-size: 30px;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: rgba(255, 166, 0, 0.445);
cursor: pointer;
box-shadow: 5px 5px 5px rgba(255, 166, 0, 0.829);
border: 1px solid rgb(231, 230, 230);
font-weight: bolder;
color: white;
}
button:hover{
background-color: #fff;
color: black;
}
span
{
text-align: center;
box-shadow: 5px 5px 4px 2px rgb(150, 143, 121);
font-size: 32px;
font-weight: bolder;
border-radius: 10px;
width: 50px;
border: 1px solid rgb(90, 89, 89);
color: rgb(36, 17, 33);
}


If you want the next user to count from what the previous left, you need to store the data somewhere (for example on a database) and when the page loads first of all you read that value again and show it to the user.
The answer is no, you cannot do that with only CSS, HTML and JS.


Best option to store public data on the frontend is local storage.
window.localStorage.setItem(name, data); // -> set item
window.localStorage.getItem(name); // -> get item
Disadvantages
can be changed using the DevTools
resets if cache is cleared
If you don't want that, you must use a database therefore you need a backend
EDIT: You need a database and a server to be able to shara data between multiple users and/or clients

Related

insert html and css into wordpress

how can i correctly implement html and css to wordpress site? inserting into html section caused this:
enter image description here
enter image description here
and i want it to look like this: check pic
enter image description here
i dont want other text to be in box shadow
* {
box-sizing: border-box;
}
div.cenovy_box {
width: 100%;
outline: 1px solid #f2f1f1 !important;
box-shadow: 0px 5px 10px #d3d3d3;
float: left;
}
div.fotkavboxe {
display: flex;
float: left;
width: 30%;
margin-left: 50px;
}
h1.nadpis_p {
border-bottom: 2px solid #20d796;
font-family: "poppins";
text-align: center;
padding-bottom: 10px;
}
div.tlacidlo {
clear: both;
width: 30%;
display: flex;
}
.k_predajcovi {
font-family: "poppins";
background-color: #000000;
color: #ffffff;
font-size: 20px;
cursor: pointer;
padding: 10px 20px;
border: solid #000000 2px;
opacity: 1;
transition: 0.3s;
}
.k_predajcovi:hover {
color: #000000;
background-color: #fff;
opacity: 1;
}
p.cena_v_boxe {
width: 30%;
font-size: 25px;
font-family: "poppins";
float: left;
}
img.fotka {
background-color: #000000;
border: 2px #555;
opacity: 1;
transition: 0.3s;
}
img.fotka:hover {
color: #fff;
opacity: 0.5;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
</head>
<body>
<div class="cenovy_box">
<div class="obsah">
<h1 class="nadpis_p">Brutálna vychytávka</h1>
</div>
<div class="fotkavboxe">
<a href="https://www.banggood.com/Xiaomi-Redmi-Note-10-Pro-Global-Version-6GB-128GB-108MP-Quad-Camera-6_67-inch-120Hz-AMOLED-Display-33W-Fast-Charge-Snapdragon-732G-Octa-Core-4G-Smartphone-p-1828679.html?cur_warehouse=HK&ID=62464446304721&rmmds=search"
target="_blank"><img class="fotka" src="https://imgaz.staticbg.com/thumb/large/oaupload/banggood/images/FE/BE/525e460f-581a-46ee-b737-1fe3d9492492.jpg.webp" alt="redmi note 10" style="width: 200px; height:200px;"></a>
</div>
<div class="cena">
<p class="cena_v_boxe">20€</p>
</div>
<div class="tlacidlo">
<button class="k_predajcovi" onclick="window.location.href = 'https://www.google.sk';">
K predajcovi
</button>
</div>
</div>
</body>
</html>
can you please help mw with inserting this code into articles? i want to adding it into articles just html (css will be in custom css settings) i am unable to code my own plugin, so this how i am making this

How to Upload an HTML File to WordPress
1) Navigate to your Admin Dashboard.
2) Click 'Pages' in the left sidebar.
3) Choose an existing page or create a new one.
4) Click 'Add Block.'
5) Add a 'File' block.
6) Choose your HTML file.

How to do search by input leaflet?

I need your help, I am using the Leaflet library, I would like to put the address search, but not the search inside the map, but yes, with an input, outside the map:
enter image description here
However, I saw that it can be done, Nominatim even uses it (https://nominatim.openstreetmap.org/), but there are no explanations on how to do it.
The Code looks like this
var target = document.getElementById('map');
document.addEventListener('DOMContentLoaded', function(e){ //executa o código somente após carregar o DOM
var optionsMap = {
center: [-21.511263, -51.434978],
zoom: 15
}
// criação do mapa
let map = new L.map(target, optionsMap);
map.doubleClickZoom.disable();
//adicionar uma camada de bloco do OpenStreetMap
let basemap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
}); basemap.addTo(map);
});
/*Imports*/
#import 'reset.css';
#import 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
#import 'https://unpkg.com/leaflet#1.6.0/dist/leaflet.css';
#import 'popup.css';
/*Geral*/
body{
background-color: rgb(109, 164, 182);
font-family: Arial, Helvetica, sans-serif;
}
.titulo{
padding: 0.5em;
color: white;
text-align: center;
font-size: 3em;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
/*Section*/
.campo{
padding: 1em;
background-color: rgba(255, 255, 255, 0.5);
width: 80%;
height: 80%;
border-radius: 1em;
box-shadow: 0px 2px 6.35px 0.35px rgba(0, 0, 0, 0.3);
}
.pesquisa{
border: none;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
width: 92%;
padding: 10px;
}
.btn{
border: none;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
padding: 10px;
margin-left: 0em;
margin-top: 0em;
}
.btn:hover{
background-color: rgb(90, 136, 221, 0.3);
}
#map{
width: auto;
height: 500px;
border: none;
border-radius: 1em;
box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3);
}
/*Footer*/
footer{
padding: 1em;
text-align: center;
color: white;
}
footer a {
color: white;
text-decoration: none;
}
footer a:hover{
font-weight: bold;
}
<!DOCTYPE html>
<html lang="pt-Br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet - Nominatim</title>
<link rel="stylesheet" href="css/estilos.css">
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
</head>
<body>
<div class="container">
<header>
<h1 class="titulo">Maps Leaflet - Nominatim</h1>
</header>
<section class="campo container">
<div class="container">
<input class="pesquisa" type="text"><input class="btn" type="button" value="Ok!">
</div>
<br>
<div id="map" class="container"></div>
</section>
<footer>cortelucas</footer>
</div>
<script src="js/map.js"></script>
</body>
</html>
I sincerely ask for your help!

As I said yesterday I prepared a working example working on the GeoJSON format. I slightly modified autosuggest my application.
I have connected with the nominatim and also added the option of working on a static GeoJSON file.
I prepared a branche - autosuggest+nominatim and the working example nominatim-leaflet-search
Of course, as much as I could test in a short time, but you have to reckon with the fact that there may be some errors. Gzip code, weighs around 8KB so it's not bad.
UPDATE
I prepared a project on github Leaflet.Autocomplete showing the work of the plugin and as much as I could explain how it works.

Create and Append new divs on button click with vanilla javascript

//hide element
function hide(x) {
var elems = document.getElementsByClassName(x);
for (var i = 0; i < elems.length; i += 1) {
elems[i].style.display = 'none';
}
}
//show element
function show(x) {
var elems = document.getElementsByClassName(x);
for (var i = 0; i < elems.length; i += 1) {
elems[i].style.display = 'block';
}
}
/* *************** listWrapper *************** */
var boardContainer = document.getElementsByClassName('board-container');
var newList = document.createElement('div'); //create new list-wrapper for holding lists
newList.className = 'new-list'; //assign id or class to div
newList.classList.add("list-wrapper"); //add another classname to the new-list div
//Check to see if a board-container exists and creates it if it does not exist and appends it to its parentNode
var boardContainerExist = true;
if (boardContainer === null) {
boardContainer = document.createElement('div');
boardContainer.class = 'board-container';
// adds the newly created element to the DOM
boardContainerExist = false;
}
for (var i = 0; i < boardContainer.length; i++) {
document.body.appendChild(newList); //add list-wrapper to the body/ or to the DOM
// document.getElementsByClassName("new-list") += "list-wrapper";
boardContainer[i].insertBefore(newList, boardContainer[i].childNodes[0]); //append new-list before the first-child
// document.getElementsByClassName('board-container')[0].appendChild(newList);
}
//create list-container
var listContainer = document.createElement('div');
listContainer.className = 'list-container';
//create list-head-container
var listHeadContainer = document.createElement('div');
listHeadContainer.className = 'list-head-container';
//create div to hold textarea
var textareaContainer = document.createElement('div');
textareaContainer.className = 'textarea-container';
//create textarea for lists
var textareaElement = document.createElement('textarea');
textareaElement.setAttribute("type", "text");
textareaElement.setAttribute("class", "textarea-title");
textareaElement.setAttribute("overflow", "break-word");
textareaElement.setAttribute("placeholder", "Enter list title...");
//create div container for ellipsis
//Note: The icon with three dots is called an ellipsis
var ellipsisContainer = document.createElement('div');
ellipsisContainer.className = 'ellipsis-container';
// create list to hold ellipsis
var ellipsisLink = document.createElement('a');
ellipsisLink.className = 'ellipsisLink';
ellipsisLink.setAttribute('href', '#');
ellipsisLink.innerHTML = '...';
//Add inner elements
newList.appendChild(listContainer); //add list-container inside new-list
listContainer.appendChild(listHeadContainer); //add list-head-container inside list-container
listHeadContainer.appendChild(textareaContainer); //add textarea container inside list-head-holder
textareaContainer.appendChild(textareaElement); //add textarea container inside textarea-container
textareaContainer.appendChild(ellipsisContainer); //add ellipsis container inside textarea-container
ellipsisContainer.appendChild(ellipsisLink); //add ellipsis link inside ellipsis container
var titleTaker = document.getElementsByClassName('list-input').value;
textareaElement.innerHTML = titleTaker;
body {
font-family: 'Roboto', sans-serif;
font-family: 'Open Sans', sans-serif;
color: rgb(12, 57, 83);
}
/* *************** boardWrapper *************** */
.board-wrapper {
position: relative;
/* flex-grow: 1; */
font-size: 14px;
}
.board-container {
display: flex;
flex-direction: row;
background-color: transparent;
}
.list-wrapper.first-wrapper {
width: 280px;
background-color: rgb(237, 239, 240);
border-radius: 3px;
/*** for rounded corners ***/
height: auto;
margin-left: 10px;
}
.list-wrapper {
width: 280px;
background-color: rgb(237, 239, 240);
border-radius: 3px;
/*** for rounded corners ***/
}
div.list-wrapper:first-child {
display: none;
margin-left: 5px;
}
.list-content {
height: 900px;
}
.list-content {
background-color: blue;
height: 100px;
width: 280px;
}
form {
/* padding: 5px; */
display: flex;
flex-direction: column;
}
a.list-links {
text-decoration: none;
color: rgb(255, 255, 255);
padding: 10px 20px 10px 5px;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 3px;
}
a.list-links:hover {
background-color: rgba(0, 0, 0, 0.5);
}
span.add-another-list {
display: none;
}
.fa-plus {
font-size: 14px;
}
span.link-selector {
padding: 10px;
/* background-color: rgba(0,0,0,0.3); */
}
.add-list-button-container {
padding-top: 5px;
padding-bottom: 2px;
}
input[type=text].list-input {
display: block;
background-color: rgb(255, 255, 255);
border: 1px solid rgb(127, 170, 199);
border-radius: 3px;
height: 30px;
margin: 5px;
box-shadow: 0 0 0 1px rgb(127, 170, 199);
font-size: 14px;
padding-left: 10px;
display: none;
}
.add-list-button-container {
margin: 0 5px 5px;
display: none;
}
input[type=submit].list-input-button {
color: rgb(255, 255, 255);
background-color: #5aac44;
box-shadow: 0 1px 0 0 #3f6f21;
background-color: rgb(90, 172, 68);
box-shadow: 0 1px 2px 0 rgb(46, 73, 39);
border: none;
font-size: 14px;
height: 30px;
padding-left: 14px;
padding-right: 14px;
margin-right: 10px;
font-weight: 700;
}
.fa-times {
color: rgb(131, 140, 145);
font-size: 18px;
}
.textarea-container {
display: flex;
flex-direction: row;
}
textarea {
display: block;
word-wrap: break-word;
overflow: hidden;
padding: 5px 10px;
background-color: rgb(255, 255, 255);
border: 1px solid rgb(127, 170, 199);
border-radius: 3px;
font-size: 14px;
outline: none;
/* Removes the blue glow from around textarea */
resize: none;
/* Removes resize handle */
}
.textarea-title {
box-shadow: 0 0 0 1px rgb(127, 170, 199);
height: 20px;
max-height: 120px;
margin-top: 6px;
margin-left: 10px;
/* clear: right !important; */
}
.ellipsis-container {
margin-top: 6px;
margin-left: 47px;
border-radius: 3px;
}
.ellipsis-container:hover {
background-color: rgba(214, 218, 220, 0.8);
}
.ellipsis-container a.ellipsisLink {
font-size: 21px;
padding-left: 10px;
padding-right: 10px;
display: block;
text-align: center;
/* width: 16px; */
line-height: 20px;
text-decoration: none;
color: rgb(131, 140, 145);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie-edge">
<title></title>
<!-- Link to CSS -->
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!-- Link to Font-Awesome 5 -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<!--Link to google fonts - Roboto and Open sans (400, 400 italics, 700 bold, 700 italics)-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i|Roboto" rel="stylesheet">
</head>
<body>
<!-- *************** boardWrapper *************** -->
<div class="board-wrapper">
<div class="board-container">
<!-- New lists are being created dynamically via javascript and are being placed here -->
<div class="list-wrapper first-wrapper">
<form onsubmit="return show('list-wrapper');">
<a class="list-links" href="#" onclick="hide('list-links'); show('list-input'); show('add-list-button-container'); ">
<span class="link-selector">
<span class="plus-icon"><i class="fas fa-plus"></i></span>
<span class="add-list">Add list</span>
<span class="add-another-list">Add another list</span>
</span>
</a>
<input type="text" class="list-input" required minlength="1" autocomplete="off" maxlength="500" placeholder="Enter list title...">
<div class="add-list-button-container">
<input class="list-input-button" type="submit" value="Add List" required minlength="1" maxlength="500" placeholder="Enter list title...">
<a class="list-close-button" href="#"><i class="fas fa-times"></i></a>
</div>
</form>
<!-- end of form -->
<!-- list content -->
</div>
<!-- end of list-wrapper -->
</div>
<!-- end of board-container -->
</div>
<!-- end of board-wrapper -->
<!-- Link to JavaScript -->
<script src="js/scripts.js"></script>
</body>
</html>
ther answers but none really covers all my issues.
So here's what I want to do
I'm working on a project to clone Trello using only HTML, CSS and vanilla JavaScript. I'm fairly new to javaScript and I'm trying to create multiple lists and I started by creating dynamic lists.
Here's what should happen:
1. A new list (which is really a div with a textarea) should be added (to the left side of the screen) each time the user writes text into the input field and clicks on the ***Add a list*** button.
2. The input that the user adds should be transferred over to new list as a title heading for that list. This title should be editable (meaning the user should be able to change the title text whenever he/she wants to.
Here are the issues I'm having:
1. The current code only allows me to add one single list.
2. I'm also not able to transfer text from the input field to the new list (in the textarea) --- what is now being transferred is the word 'undefined'.
3. Also, the list and buttons disappear after it has been clicked
It was suggested that I use unique IDs for the list but I just don't know how to do that as yet.
Link to the code on Codepen: https://codepen.io/Joanc/pen/MZjJvy
Really appreciate and looking forward to your help
//hide element
function hide(x) {
var elems = document.getElementsByClassName(x);
for (var i = 0; i < elems.length; i += 1) {
elems[i].style.display = 'none';
}
}
//show element
function show(x) {
var elems = document.getElementsByClassName(x);
for (var i = 0; i < elems.length; i += 1) {
elems[i].style.display = 'block';
}
}
/* *************** listWrapper *************** */
var boardContainer = document.getElementById('board-container');
var newList = document.createElement('div'); //create new list-wrapper for holding lists
newList.className = 'new-list'; //assign id or class to div
newList.classList.add("list-wrapper"); //add another classname to the new-list div
document.body.appendChild(newList); //add list-wrapper to the body/ or to the DOM
var boardContainer = document.getElementById('board-container');
boardContainer.insertBefore(newList, boardContainer.childNodes[0]); //append new-list before the first-child
//
//create list-container
var listContainer = document.createElement('div');
listContainer.className = 'list-container';
//create list-head-container
var listHeadContainer = document.createElement('div');
listHeadContainer.className = 'list-head-container';
//create div to hold textarea
var textareaContainer = document.createElement('div');
textareaContainer.className = 'textarea-container';
//create textarea for lists
var textareaElement = document.createElement('textarea');
textareaElement.setAttribute("type", "text");
textareaElement.setAttribute("class", "textarea-title");
textareaElement.setAttribute("overflow", "break-word");
textareaElement.setAttribute("placeholder", "Enter list title...");
//create div container for ellipsis
//Note: The icon with three dots is called an ellipsis
var ellipsisContainer = document.createElement('div');
ellipsisContainer.className = 'ellipsis-container';
// create list to hold ellipsis
var ellipsisLink = document.createElement('a');
ellipsisLink.className = 'ellipsisLink';
ellipsisLink.setAttribute('href', '#');
ellipsisLink.innerHTML = '...';
//Add inner elements
newList.appendChild(listContainer); //add list-container inside new-list
listContainer.appendChild(listHeadContainer); //add list-head-container inside list-container
listHeadContainer.appendChild(textareaContainer); //add textarea container inside list-head-holder
textareaContainer.appendChild(textareaElement); //add textarea container inside textarea-container
textareaContainer.appendChild(ellipsisContainer); //add ellipsis container inside textarea-container
ellipsisContainer.appendChild(ellipsisLink); //add ellipsis link inside ellipsis container
//grabbing user input and assigning it to title textarea
var titleTaker = document.getElementsByClassName('list-input').value;
textareaElement.innerHTML = titleTaker;
body {
font-family: 'Roboto', sans-serif;
font-family: 'Open Sans', sans-serif;
color: rgb(12, 57, 83);
}
/* *************** boardWrapper *************** */
.board-wrapper {
position: relative;
/* flex-grow: 1; */
font-size: 14px;
}
#board-container {
display: flex;
flex-direction: row;
}
.list-wrapper.first-wrapper {
width: 280px;
background-color: rgb(237, 239, 240);
border-radius: 3px;
/*** for rounded corners ***/
height: auto;
margin-left: 10px;
}
.list-wrapper {
width: 280px;
background-color: rgb(237, 239, 240);
border-radius: 3px;
/*** for rounded corners ***/
}
div.list-wrapper:first-child {
display: none;
margin-left: 5px;
}
.list-content {
height: 900px;
}
#board-container {
background-color: transparent;
}
.list-content {
background-color: blue;
height: 100px;
width: 280px;
}
form {
/* padding: 5px; */
display: flex;
flex-direction: column;
}
a.list-links {
text-decoration: none;
color: rgb(255, 255, 255);
padding: 10px 20px 10px 5px;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 3px;
}
a.list-links:hover {
background-color: rgba(0, 0, 0, 0.5);
}
span.add-another-list {
display: none;
}
.fa-plus {
font-size: 14px;
}
span.link-selector {
padding: 10px;
/* background-color: rgba(0,0,0,0.3); */
}
.add-list-button-container {
padding-top: 5px;
padding-bottom: 2px;
}
input[type=text].list-input {
display: block;
background-color: rgb(255, 255, 255);
border: 1px solid rgb(127, 170, 199);
border-radius: 3px;
height: 30px;
margin: 5px;
box-shadow: 0 0 0 1px rgb(127, 170, 199);
font-size: 14px;
padding-left: 10px;
display: none;
}
.add-list-button-container {
margin: 0 5px 5px;
display: none;
}
input[type=submit].list-input-button {
color: rgb(255, 255, 255);
background-color: #5aac44;
box-shadow: 0 1px 0 0 #3f6f21;
background-color: rgb(90, 172, 68);
box-shadow: 0 1px 2px 0 rgb(46, 73, 39);
border: none;
font-size: 14px;
height: 30px;
padding-left: 14px;
padding-right: 14px;
margin-right: 10px;
font-weight: 700;
}
.fa-times {
color: rgb(131, 140, 145);
font-size: 18px;
}
.textarea-container {
display: flex;
flex-direction: row;
}
textarea {
display: block;
word-wrap: break-word;
overflow: hidden;
padding: 5px 10px;
background-color: rgb(255, 255, 255);
border: 1px solid rgb(127, 170, 199);
border-radius: 3px;
font-size: 14px;
outline: none;
/* Removes the blue glow from around textarea */
resize: none;
/* Removes resize handle */
}
.textarea-title {
box-shadow: 0 0 0 1px rgb(127, 170, 199);
height: 20px;
max-height: 120px;
margin-top: 6px;
margin-left: 10px;
/* clear: right !important; */
}
.ellipsis-container {
margin-top: 6px;
margin-left: 47px;
border-radius: 3px;
}
.ellipsis-container:hover {
background-color: rgba(214, 218, 220, 0.8);
}
.ellipsis-container a.ellipsisLink {
font-size: 21px;
padding-left: 10px;
padding-right: 10px;
display: block;
text-align: center;
/* width: 16px; */
line-height: 20px;
text-decoration: none;
color: rgb(131, 140, 145);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie-edge">
<title></title>
<!-- Link to CSS -->
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!-- Link to Font-Awesome 5 -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<!--Link to google fonts - Roboto and Open sans (400, 400 italics, 700 bold, 700 italics)-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i|Roboto" rel="stylesheet">
</head>
<body>
<!-- *************** boardWrapper *************** -->
<div class="board-wrapper">
<div id="board-container">
<div class="list-wrapper first-wrapper">
<form onsubmit="return show('list-wrapper');">
<a class="list-links" href="#" onclick="hide('list-links'); show('list-input'); show('add-list-button-container'); ">
<span class="link-selector">
<span class="plus-icon"><i class="fas fa-plus"></i></span>
<span class="add-list">Add list</span>
<span class="add-another-list">Add another list</span>
</span>
</a>
<input type="text" class="list-input" required minlength="1" autocomplete="off" maxlength="500" placeholder="Enter list title...">
<div class="add-list-button-container">
<input class="list-input-button" type="submit" value="Add List" required minlength="1" maxlength="500" placeholder="Enter list title...">
<a class="list-close-button" href="#"><i class="fas fa-times"></i></a>
</div>
</form>
<!-- end of form -->
<!-- list content -->
</div>
<!-- end of list-wrapper -->
</div>
<!-- end of board-container -->
</div>
<!-- end of board-wrapper -->
<!-- Link to JavaScript -->
<script src="js/scripts.js"></script>
</body>
</html>

Joan, because the javascript needed to be changed substantially I have created a simpler version of the code you are working on. With comments to call out how the functions would work. I hope it helps though.
// This method creates a single work item on the board and assigns click methods.
var createNewWorkItem = function(itemContainer) {
if(itemContainer && (typeof itemContainer.appendChild !== undefined)) {
var workItemActionPanel = document.createElement('div');
workItemActionPanel.setAttribute('class', 'work-item-panel' );
workItemActionPanel.onclick = closeWorkItemActionPanel;
var workItem = document.createElement('div');
workItem.setAttribute( 'class', 'work-item' );
workItem.onclick = showWorkItemActionPanel;
workItem.appendChild(workItemActionPanel);
itemContainer.appendChild(workItem);
}
};
// This is called when user clicks the action panel, closes it and calls to create
// a new work item
var closeWorkItemActionPanel = function(e) {
e.currentTarget.style.display = 'none';
var board = document.getElementById("workBoard");
createNewWorkItem(board);
e.stopPropagation() ;
};
// This is called when user clicks on a work item and shows the action panel
var showWorkItemActionPanel = function(e) {
var actionPanel = e.currentTarget.childNodes[0];
if(actionPanel.className !== 'work-item-panel') {
e.currentTarget.childNodes.forEach(node => {
if(node.className == 'work-item-panel') actionPanel = node;
});
}
actionPanel.style.display = 'inline-block';
};
// Initialize when the document has loaded.
(function(){
var board = document.getElementById("workBoard");
createNewWorkItem(board);
})();
.work-board {
background-color: aqua;
height: 500px;
border: 3px solid blue;
border-radius: 5px;
}
.work-item {
margin: 5px;
display: inline-block;
width: 50px;
height: 50px;
background-color: coral;
border-radius: 5px;
}
.work-item-panel {
margin: 5px;
height: 40px;
width: 40px;
display: none;
background-color: red;
}
<div id="workBoard" class="work-board">
</div>
I am using repl to write this, you can fork and play here: https://repl.it/#PaulThomas1/PTSimpleWorkBoardSample

jQuery: divs on top of each other while this is not needed

Currently, I am working on a project to generate a dynamic card page. This page is based on the input of a specific json feed (e.g. a user role).
profile.json
{
"Messages": "card1",
"Activities": "card2",
"Agenda": "card3",
"Users": "card4",
"Charts": "card5"
}
Next, I use jQuery and Kendo UI to create cards. First, I need to extract the information from the json feed. As you may notice, every card will be placed inside a div. And every div will be appended to the cards div:
Below is code of index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../../style/font-awesome.css">
<link rel="stylesheet" href="/style/cards.css" />
<script src="../lib/jquery.min.js"></script>
<script src="../lib/custom/effects.min.js"></script>
</head>
<body>
<div id="cards"></div>
<script>
$.getJSON("profile.json", function (data) {
$.each(data, function (key, val) {
var card = "<div id='" + val + "' height='180' width='175'></div>";
$("#cards").append(card);
$('#' + val).load(val + '/index.html');
});
});
</script>
</body>
</html>
Every card does have some simple styling:
One of the card (card7/index.html)
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
html {
overflow: hidden;
}
a {
color: #428bca;
text-decoration: none;
}
#card7 {
width: 150px;
height: 150px;
position: relative;
}
.front {
padding: 10px;
text-align: center;
position: absolute;
width: 140px;
height: 140px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 1px;
background-color: #f5f4f5;
}
.back {
font-size: smaller;
padding: 10px;
text-align: left;
position: absolute;
width: 140px;
height: 140px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 1px;
background-color: #f5f4f5;
}
.front:hover, .back:hover {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px;
}
img {
border-radius: 5px 5px 0 0;
}
.badge:after {
content: "1";
position: absolute;
background: rgba(255, 0, 0, 0.85);
height: 2rem;
top: 1rem;
right: 2rem;
width: 2rem;
text-align: center;
line-height: 2rem;
font-size: 1rem;
border-radius: 50%;
color: white;
}
.seeBack {
margin-top: -30px;
margin-right: -10px;
float: right;
border-style: solid;
border-width: 0 0 40px 40px;
border-color: transparent;
}
.seeBack:hover {
border-color: transparent transparent #428bca transparent;
transition: 0.5s;
}
.seeFront {
margin-top: 10px;
margin-left: -10px;
float: left;
border-style: solid;
border-width: 40px 0 0 40px;
border-color: transparent;
}
.seeFront:hover {
border-color: transparent transparent transparent #428bca;
}
</style>
</head>
<body>
<div id="card7">
<div class="front">
<i class="fa fa-undo fa-5x"></i>
<h4><b>Tijdlijn</b></h4>
<div class="seeBack"></div>
</div>
<div class="back">
<p>Situatie vorige week</p>
<p>Situatie vorige maand</p>
<p>Situatie vorig jaar</p>
<div class="seeFront"></div>
</div>
</div>
<script>
$(document).ready(function () {
kendo.fx($("#card7")).flip("horizontal", $(".back"), $(".front")).play();
var card = kendo.fx($("#card7")),
flip = card.flip("horizontal", $(".front"), $(".back"));
flip.duration(100);
$(".seeBack").click(function () {
flip.stop().play();
});
$(".seeFront").click(function () {
flip.stop().reverse();
});
});
</script>
</body>
</html>
As you may expect, the program itself does not work properly. All cards will be displayed on top of each other in index.html, although they are placed in various div. I don't know what the problem is and I cannot fix this. Hopefully one can help me.
All cards are placed on top of each other.

Use static or relative position for .front and .back divs
Read that article about positioning for more info http://www.w3schools.com/cssref/pr_class_position.asp

Why isn't my stylesheet overwritting bootstrap's?

I read millons of time that if you define a bootstrap class in your own CSS stylesheet you will overwrite them so your created element will have your predefined style as you want.
While this is true to half of the page, my input button using the class form-control it just won't work, and I can't figure it out the reason why, as anybody else is having this problem.
Here's a snippet with my issue:
var searcher = document.getElementById('buscador');
searcher.addEventListener("click", function()
{
var master = searcher.parentNode;
searcher.removeChild(searcher.childNodes[0]);
searcher.style.animationName = "expandismo";
searcher.style.animationDuration = "1s";
setTimeout(function(){
master.removeChild(searcher);
var barraSearch = document.createElement('input');
barraSearch.setAttribute('type', 'text');
barraSearch.setAttribute('id', 'barraSearch');
barraSearch.setAttribute('class', 'form-control');
barraSearch.setAttribute('placeholder', 'Buscar...');
var spanCheto = document.createElement('span');
var botonCheto = document.createElement('button');
var secondSpan = document.createElement('span');
spanCheto.setAttribute('class', 'input-group-btn');
botonCheto.setAttribute('class', 'btn btn-default');
secondSpan.setAttribute('class', 'glyphicon glyphicon-search');
secondSpan.setAttribute('aria-hidden', 'true');
botonCheto.appendChild(secondSpan);
spanCheto.appendChild(botonCheto);
master.appendChild(barraSearch);
barraSearch.focus();
}, 1000);
}, false);
.container-fluid
{
text-align: center;
}
#toplane
{
color: white;
background-image: url(citybackground.jpg);
background-size: 100% 100%;
min-height: 400px;
}
#botlane
{
}
#headone
{
margin-top: 130px;
color: black;
text-shadow: 0px 0px 12px white, 0px 0px 8px white, 0px 0px 3px white, 0px 0px 5px white;
font-family: "Times New Roman", Times, monospace;
font-size: 60px;
}
#buscador
{
color: #595959;
width: 40px;
height: 40px;
border-radius: 18px;
background-color: lightgrey;
cursor: text;
}
#buscador:hover
{
background-color: lightgrey;
opacity: 1;
}
#buscador:active
{
background-color: white;
}
.input-group
{
width: 100%;
text-align: center;
}
.form-control
{
width: 70%;
border-radius: 18px;
background-color: lightgrey;
height: 40px;
padding-left: 10px;
font-size: 20px;
color: black;
}
.form-control:focus
{
box-shadow: 0px 0px 5px #66d9ff;
box-shadow: 0px 0px 10px #66d9ff;
box-shadow: 0px 0px 8px #66d9ff;
box-shadow: 0px 0px 12px #66d9ff;
}
#keyframes expandismo
{
from{width: 40px}
to{width: 70%}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Price Surfer FAQ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="wean1.css">
</head>
<body>
<div class="container-fluid" id="toplane">
<h1 id="headone">PRICE SURFER FAQ</h1>
<div class="input-group">
<button id="buscador"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</div>
</div>
<div class="container-fluid" id="botlane">
</div>
<script type="text/javascript" src="wean1.js"></script>
</body>
</html>

.container-fluid .input-group .form-control{
/* yous css*/
}
This is because the bootstrap get the .form-control with two clases and this type of selection .input-group .form-control is stronger then just .form-control
.input-group .form-control{
}
Use this website to calculate which selector is stronger .
Check this screenshot the first selectors have 3 points and the second has only two so doesn't matter where you place the first selectors are stronger than second. Every id has 100 points , classes have 10 points and tags have 1 point

You should add !important with the property that is not being picked.
Like:
.form-control
{
width: 70%!important;
border-radius: 18px!important;
background-color: lightgrey!important;
height: 40px;
padding-left: 10px;
font-size: 20px;
color: black;
}

Categories

Resources