<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<style>
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
@import url(http://fonts.googleapis.com/css?family=Montserrat);
/* fontawesome */
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
body{
background:#304653;
}
.container{
border-radius:10px;
height:90px;
margin:50px auto;
overflow: hidden;
position: relative;
width:390px;
}
.valore1{
font-family: "Roboto", Times, serif;
color: #34a534;
left: 60px;
top: 11px;
}
.up,.down{
border-radius:10px;
background:rgba(255,255,255,0.2);
color:rgba(255,255,255,0.5);
float:left;
font-size:20px;
line-height:45px;
text-align:left;
padding-left: 20px;
transition:all .2s linear;
width:auto;
}
.down{margin-left:60px;}
.spann{
width: 5px;
height: 0px;
padding-left: 34px;
}
.check{
background:#f65330;
border-radius:10px;
color:#fff;
cursor:pointer;
font-size:50px;
height:100%;
line-height:90px;
position: absolute;
padding-left:20px;
right:-320px;
transition:all .2s linear;
width:100%;
}
.check:after{
content:'Mark Complete';
font:35px/90px 'Montserrat';
font-style:italic;
height:100%;
padding-left:20px;
}
.down:after{
font-family: FontAwesome;
content: "\f088";
}
.up:after{
font-family: FontAwesome;
content: "\f087";
}
.up:hover{
background:#2ecc71;
color:#fff;
cursor:pointer;
}
.down:hover{
background:#e74c3c;
color:#fff;
cursor:pointer;
}
.ok{
background: #30c3bb;
right: -20px;
}
.scaleDown{
transform:scale(0);
}
</style>
</head>
<body>
<div class="container">
<div class="up fontawesome-thumbs-up" id="update_value"> <div class="valore1"> <span id="value"></span> </div> </div>
<div class="down fontawesome-thumbs-down" id="update_value2"><div class="spann"> <span id="value2"></span></div> </div> <div class="valore2" style="position: absolute"> <span id="value2"></span></div>
</div>
<?php if (isset($_COOKIE['like'])) {
echo "ceeeeeeeeee";
}
?>
<script>
// Mostra il valore indicato
function show_value(data) {
if (data.error == false) {
var container = $('#value'); // decido dove visalizzare
container.html(JSON.parse(data.value));
}
else {
alert(data.error);
}
}
// Mostra il valore al caricamento dall pagina
$('#value').ready(function () {
$.get("controller.php", show_value);
});
// Associa il click alla lettura e stampa della variabile
$('#read_value').click(function () {
$.get("controller.php", show_value);
});
// Associa il click all'incremento e stampa della variabile
$('#update_value').click(function () {
$.post("controller.php", { incrementa: "true" }, show_value);
});
// Mostra il valore al caricamento dall pagina
$('#value').ready(function () {
$.get("controller.php", show_value);
});
</script>
<script>
// Mostra il valore indicato
function show_value2(data) {
if (data.error == false) {
var container = $('#value2'); // decido dove visalizzare
container.html(JSON.parse(data.value));
}
else {
alert(data.error);
}
}
/**********************************************
NON MI PIACE
**********************************************/
// Associa il click alla lettura e stampa della variabile
$('#read_value2').click(function () {
$.get("controller2.php", show_value2);
});
// Associa il click all'incremento e stampa della variabile
$('#update_value2').click(function () {
$.post("controller2.php", { incrementa: "true" }, show_value2);
});
// Mostra il valore al caricamento dall pagina
$('#value2').ready(function () {
$.get("controller2.php", show_value2);
});
</script>
</body>
</html>
