Develop Reference

How to make a like button for my webpage?

i'm making a webpage where I have different "pictures" that I want like buttons on and when people like it, the number stays and then they can only like each image once. I found a code that I liked however when I refresh the page, all the likes go away. I want them to stay. I'm not the best at explaining or understanding lol.
Here's the code that I found that I liked, but I want to function as it goes away when I refresh. Function like a "vote" button.
/*
* Love button for Design it & Code it
* http://designitcodeit.com/i/9
*/
$('.btn-counter').on('click', function(event, count) {
event.preventDefault();
var $this = $(this),
count = $this.attr('data-count'),
active = $this.hasClass('active'),
multiple = $this.hasClass('multiple-count');
// First method, allows to add custom function
// Use when you want to do an ajax request
/* if (multiple) {
$this.attr('data-count', ++count);
// Your code here
} else {
$this.attr('data-count', active ? --count : ++count).toggleClass('active');
// Your code here
} */
// Second method, use when ... I dunno when but it looks cool and that's why it is here
$.fn.noop = $.noop;
$this.attr('data-count', ! active || multiple ? ++count : --count )[multiple ? 'noop' : 'toggleClass']('active');
});
html {
background: #f5f5f5;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
body {
margin: 30px auto 0 auto;
width: 450px;
font-size: 75%;
}
h3 {
margin-top: 30px;
font-size: 18px;
color: #555;
}
p { padding-left: 10px; }
/*
* Basic button style
*/
.btn {
box-shadow: 1px 1px 0 rgba(255,255,255,0.5) inset;
border-radius: 3px;
border: 1px solid;
display: inline-block;
height: 18px;
line-height: 18px;
padding: 0 8px;
position: relative;
font-size: 12px;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
/*
* Counter button style
*/
.btn-counter { margin-right: 39px; }
.btn-counter:after,
.btn-counter:hover:after { text-shadow: none; }
.btn-counter:after {
border-radius: 3px;
border: 1px solid #d3d3d3;
background-color: #eee;
padding: 0 8px;
color: #777;
content: attr(data-count);
left: 100%;
margin-left: 8px;
margin-right: -13px;
position: absolute;
top: -1px;
}
.btn-counter:before {
transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');
background-color: #eee;
border: 1px solid #d3d3d3;
border-right: 0;
border-top: 0;
content: '';
position: absolute;
right: -13px;
top: 5px;
height: 6px;
width: 6px;
z-index: 1;
zoom: 1;
}
/*
* Custom styles
*/
.btn {
background-color: #dbdbdb;
border-color: #bbb;
color: #666;
}
.btn:hover,
.btn.active {
text-shadow: 0 1px 0 #b12f27;
background-color: #f64136;
border-color: #b12f27;
}
.btn:active { box-shadow: 0 0 5px 3px rgba(0,0,0,0.2) inset; }
.btn span { color: #f64136; }
.btn:hover, .btn:hover span,
.btn.active, .btn.active span { color: #eeeeee; }
.btn:active span {
color: #b12f27;
text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
<h3>Basic button</h3>
<p>
<span>❤</span>
<span>❤</span> Love it
</p>
<h3>Button with counter - active/inactive</h3>
<p>
<span>❤</span>
<span>❤</span> Love it
</p>
<h3>Button with counter for people who likes to click</h3>
<p>
<span>❤</span>
<span>❤</span> Love it
</p>

You actually need back-end for this, but this is a quick solution.
NOTE: the code will not work in the snippet but it regularly works
W3: Window localStorage
Mozilla Window.localStorage
let btn = document.querySelector('#like');
let result = document.querySelector('#result');
localStorage.setItem('likes', 0);
result.innerHTML = localStorage.getItem('likes');
btn.addEventListener('click', addLike());
function addLike(){
localStorage.setItem('likes', parseInt(localStorage.getItem('likes')) + 1);
result.innerHTML = localStorage.getItem('likes');
}
<button id="like">LIKE</button>
<p id="result"></p>
to see the local storage, go to DevTools open application tab, see the local storage there and you can manage it manually

Circle follow cursor after hover on button

I'm trying to remake hover like on this website:
https://www.samsaraubud.com/
When you hover over a button (and only button. I don't want circle over whole website), a circle appers around cursor. I tried so many solutions from codepen after typing "mouse follow" but nothing works.
I have button like this:
https://codepen.io/Aventadorrre/pen/mdyPJbv
body {
padding: 100px;
margin: auto;
}
a {
color: red;
border: 2px solid red;
padding: 20px 50px;
}
Button
and how to make circle around mouse (following mouse) when i hover button?

Consider a radial-gradient as background that you make fixed then simply adjust the position based on the cursor
var h =document.querySelector('.cursor');
document.body.onmousemove = function(e) {
/* 15 = background-size/2 */
h.style.setProperty('background-position',(e.clientX - 15)+'px '+(e.clientY - 15)+'px');
}
body {
padding: 100px 0;
}
a.cursor {
color: red;
border: 2px solid red;
padding: 20px 50px;
background:
radial-gradient(farthest-side,
transparent calc(100% - 3px),
red calc(100% - 2px) calc(100% - 1px),
transparent 100%)
fixed /* Fixed to the screen*/
no-repeat; /* Don't repeat*/
background-size:30px 30px; /* Control the size of the circle */
}
<a class="cursor" href="#">Button</a>
If you want the circle above the text consider pseudo element and the same trick:
var h =document.querySelector('.cursor');
document.body.onmousemove = function(e) {
h.style.setProperty('background-position',(e.clientX - 15)+'px '+(e.clientY - 15)+'px');
}
body {
padding: 100px 0;
}
a.cursor {
color: red;
border: 2px solid red;
padding: 20px 50px;
background-size:0 0;
position:relative;
}
a.cursor::after {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:
radial-gradient(farthest-side,
blue calc(100% - 1px),
transparent 100%)
fixed /* Fixed to the screen*/
no-repeat; /* Don't repeat*/
background-size:30px 30px;
background-position:inherit;
}
<a class="cursor" href="#">Button</a>

Updated
It shows full circle even on the boundaries of the button
const btn = document.querySelector(".button")
const circle = document.querySelector(".circle")
btn.onmouseenter = function() {
circle.classList.add("in")
}
btn.onmousemove = function(e) {
const {
top,
left,
width,
height
} = btn.getBoundingClientRect()
const {
clientY,
clientX
} = e
if (clientX < left || clientY < top || clientX > left + width || clientY > top + height) {
circle.classList.remove("in")
}
circle.style.top = `${clientY - top}px`
circle.style.left = `${clientX - left}px`
};
body {
margin: 20px;
padding: 20px;
}
.button {
padding: 40px 80px;
border: 1px solid grey;
color: blue;
display: inline-block;
position: relative;
}
.circle {
position: absolute;
display: none;
width: 30px;
height: 30px;
border-radius: 50%;
top: 0;
left: 0;
transform: translate(-50%, -50%);
border: 2px solid red;
}
.circle.in {
display: block;
}
<a class="button">
Button
<span class="circle"></span>
</a>
old answer
The answer is extension of the answer by #Temani Afif.
The listener for mousemove is added on the button itself instead of the body, which would result in performance improvement since the cb is only called when you are hovering over the button.
var h = document.querySelector(".cursor");
h.onmousemove = function(e) {
/* 15 = background-size/2 */
h.style.setProperty(
"background-position",
e.clientX - 15 + "px " + (e.clientY - 15) + "px"
);
};
body {
padding: 100px 0;
}
a.cursor {
color: red;
border: 2px solid red;
padding: 20px 50px;
background: radial-gradient( farthest-side, transparent calc(100% - 3px), red calc(100% - 2px) calc(100% - 1px), transparent 100%) fixed/* Fixed to the screen*/
no-repeat;
/* Don't repeat*/
background-size: 0px 0px;
/* by default, circle is of 0px */
}
a.cursor:hover {
background-size: 30px 30px;
/* Control the size of the circle */
}
<a class="cursor" href="#">Button</a>

You can do that with mousemove event. Catch the event and set the location of cirlce while the mouse moves.
window.addEventListener('mousemove', function(e){
document.getElementById("circle").style.display = "block";
document.getElementById("circle").style.left = e.offsetX + "px";
document.getElementById("circle").style.top = e.offsetY + "px";
});
body {
padding: 100px;
margin: auto;
}
a {
color: red;
border: 2px solid red;
padding: 20px 50px;
}
#circle{
width: 30px;
height: 30px;
border: 1px solid red;
border-radius: 50%;
position: fixed;
display: none;
}
Button
<span id="circle"></span>

Customized Alert box in Javascript

I am trying to make customized javascript alert boxes. I found this code which is working fine but I dont know how exactly it is working:
The Javascript is:
function CustomAlert() {
this.render = function(dialog) {
var winW = window.innerWidth;
var winH = window.innerHeight;
var dialogoverlay = document.getElementById('dialogoverlay');
var dialogbox = document.getElementById('dialogbox');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = winH + "px";
dialogbox.style.left = (winW / 2) - (350 * .5) + "px";
dialogbox.style.top = (winH / 2) - (350 * .5) + "px";
dialogbox.style.display = "block";
document.getElementById('dialogboxhead').innerHTML = "Alert!";
document.getElementById('dialogboxbody').innerHTML = dialog;
document.getElementById('dialogboxfoot').innerHTML = '<button id="ok" onclick="Alert.ok()">OK</button>';
};
this.ok = function() {
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
};
}
var Alert = new CustomAlert();
The Stylesheet is:
#dialogoverlay{
display: none;
opacity: .8;
position: fixed;
top: 0px;
left: 0px;
background: #ccc;
width: 100%;
z-index: 10;
}
#dialogbox{
display: none;
position: fixed;
background: #333;
width:350px;
margin: 10px auto;
z-index: 10;
border: 5px solid #1ad;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#dialogbox > div > #dialogboxhead{
background: #111;
font-size:19px;
padding:10px;
color:#CCC;
border: 5px solid #111;
border-radius: 15px 15px 0 0;
-moz-border-radius: 15px 15px 0 0;
-webkit-border-radius: 15px 15px 0 0;
}
#dialogbox > div > #dialogboxbody{
background:#333;
padding:20px;
color:#FFF;
text-align: center;
border: 5px solid #333;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#dialogbox > div > #dialogboxfoot{
background: #333;
padding:10px;
padding-right: 30px;
text-align:right;
border: 5px solid #333;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#ok{
padding-bottom: 2px;
background: url(images/goldbutton.png);
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
width: 62px;
height: 30px;
border: none;
font-size: 12px;
cursor: pointer;
}
And
HTML is:
<div id="dialogoverlay"></div>
<div id="dialogbox">
<div>
<div id="dialogboxhead"></div>
<div id="dialogboxbody"></div>
<div id="dialogboxfoot"></div>
</div>
</div>
<button onclick="alert('You look very ordinary today.')">Default Alert</button>
<button onclick="Alert.render('You look very pretty today.')">Custom Alert</button>
</div>
All of it working fine. But I dont wnat to call this popup function from my HTML code but from another javascript file.
I am facing problem when I am trying call this render() function from another javascript function.
function pop(){
// code to call
// the render function
}

Can't add this piece of jQuery code in the sample

I'm having a bit of trouble adding the following piece of jQuery code in the code. It basically adds dots to words. I tried the following jQuery and when added into the click function it doesn't work. But yet outside of the click function it works.
How do I add it in so that only once the button is clicked, will step 1 appear with the dots following. After 10 seconds make it move to step 2 doing the same things again like step 1. Until I reach step 5 which will show completed and stop flashing?
var dots = 0;
setInterval (type, 1000);
function type()
{
if(dots < 5)
{
$('#dots').append('.');
dots++;
}
else
{
$('#dots').html('');
dots = 0;
}
}
This is what I've managed so far:
jQuery(function($) {
// all jQuery code goes here
$("a").click(function() {
// do something here
// when any anchor is clicked
$("#flash").html("STEP1"); // content inside #myElement will be replaced with that specified
var flash = $('#flash');
function runIt() {
flash.animate({
opacity: '+=1'
}, 400);
flash.animate({
opacity: '+=1'
}, 200);
flash.animate({
opacity: '-=0.9'
}, 600, runIt);
}
runIt();
});
});
.test {
float: left;
}
#flash {
padding: 10px;
}
.content {
font-size: 25px;
font-weight: bold;
width: 100px;
left: 100px;
top: 100px;
color: red;
}
.classname {
-moz-box-shadow: inset 0px 1px 0px 0px #fceaca;
-webkit-box-shadow: inset 0px 1px 0px 0px #fceaca;
box-shadow: inset 0px 1px 0px 0px #fceaca;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffce79), color-stop(1, #eeaf41));
background: -moz-linear-gradient( center top, #ffce79 5%, #eeaf41 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffce79', endColorstr='#eeaf41');
background-color: #ffce79;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topright: 0px;
border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-bottomleft: 0px;
border-bottom-left-radius: 0px;
text-indent: 0;
border: 1px solid #eeb44f;
display: inline-block;
color: #ffffff;
font-family: Arial;
font-size: 15px;
font-weight: bold;
font-style: normal;
height: 40px;
line-height: 40px;
width: 100px;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 0px #ce8e28;
}
.classname:hover {
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #eeaf41), color-stop(1, #ffce79));
background: -moz-linear-gradient( center top, #eeaf41 5%, #ffce79 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeaf41', endColorstr='#ffce79');
background-color: #eeaf41;
}
.classname:active {
position: relative;
top: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">TEXT</div>
<div class="test">
<div id="flash">Start<span id="dots"></span></div>
</div>
It's basically suppose to like a progress bar with 5 different status, start and finish do not flash, steps in between start and finish flash to show progress

Does this work for you?
var dots = 0;
var step = 1;
var flag = false;
var $all = $('#all');
var $flash = $('#flash');
var $dots = $('#dots');
function type()
{
if(dots < 5)
{
$dots.append('.');
dots++;
setTimeout(type, 1000);
}
else
{
$flash.html('Completed');
$dots.html('');
flag = true;
dots = 0;
}
}
function start() {
$flash.html("STEP"+step);
step++;
function runIt() {
$all.animate({opacity:'+=1'}, 400);
$all.animate({opacity:'+=1'}, 200);
if (flag){
return flag = false;
}
$all.animate({opacity:'-=0.9'}, 600, runIt);
}
runIt();
type();
}
$('#text').on('click', start);
I also made some changes in HTML and CSS. Everything is in the demo:
DEMO

How do I make smooth movement of div while moving it with mouse pointer?

<style>
.moveAble {
position: absolute;
display:none;
}
a:hover + div.moveAble {
display: block;
}
.moveAble .qtip {
background-color: #FFF;
background-color: rgba(255,255,255,.95);
border-color: #ccc;
padding: 10px;
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.qtip-default {
border-width: 1px;
border-style: solid;
border-color: #f1d031;
background-color: #ffffa3;
color: #555;
}
.qtip, .qtip {
max-width: 280px;
min-width: 50px;
font-size: 10.5px;
line-height: 12px;
direction: ltr;
}
#nytmm .qtip-content {
border-color: #999;
color: #000;
padding: 4px 7px;
text-align: center;
}
.qtip-content {
position: relative;
padding: 5px 9px;
overflow: hidden;
text-align: left;
word-wrap: break-word;
}
.moveAble .qtip-content h5 {
font: 300 20px/22px "nyt-cheltenham",Georgia,"Times New Roman",serif;
color: #000;
margin: 0;
}
.moveAble .qtip-content h6 {
font: 300 13px/16px 'nyt-franklin',Arial,Helvetica,sans-serif;
margin: 0;
}
</style>
<img src="http://s.jeff.io/img/gifts.png" />
<div class="moveAble">
<div id="qtip-0" class="qtip qtip-default qtip-pos-tr" style="z-index: 15001;">
<div class="qtip-content" id="qtip-0-content">
<h5>Dining Gifts »</h5>
<h6>Pug Muddlers</h6>
</div>
</div>
</div>
<script>
$(document).ready(function(){
var $moveable = $('.moveAble');
$(document).mousemove(function(e){
$('.moveAble').css({'top': e.pageY,'left': e.pageX-(e.pageX/2)});
});
});
</script>
The code above is working but when I move mouse pointer over the image in that div, it is flickering too much. I don't know why it is happening. What should be the change in the code that make it work properly?
DEMO Here

This is how you should have done it. Demo :http://jsfiddle.net/wUAGP/468/
Note adding 'left' : e.pageX+20 makes it even more smoother. Play around.
So, check out a cool .gif I made for you all. Interactive isn't it?
This is because of the gap between the .moveAble and the cursor, so they don't clash.
$(document).ready(function() {
$(document).hover(
//Mouse-over
function(e) {
$(this).mousemove(function(e) {
$('.moveAble').css({
'position' : 'absolute',
'top' : e.pageY,
'left' : e.pageX+20
}).show();
});
},
//Mouse-out
function() {
$('.moveAble').fadeOut(1300);
}
);
}, 'a img' );

All you need to do is change 'left': e.pageX - (e.pageX/2) to just a static number like 10 or 5.
Pretty Demo :)
Javascript:
$(document).ready(function () {
var $moveable = $('.moveAble');
$(document).on({
mouseenter: function () {
$moveable.show();
$(this).on('mousemove', function (evt) {
var e = evt || window.event;
$moveable.css({
top: e.pageY,
left: e.pageX + 5
});
});
},
mouseleave: function () {
$moveable.hide();
}
}, 'a img');
});
CSS (cleaned up and optimized for you):
.qtip {
max-width: 280px;
min-width: 50px;
font-size: 10.5px;
line-height: 12px;
direction: ltr;
background-color: #FFF;
background-color: rgba(255, 255, 255, .95);
border-color: #ccc;
padding: 10px;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.qtip-default {
border-width: 1px;
border-style: solid;
border-color: #f1d031;
background-color: #ffffa3;
color: #555;
}
.qtip-content {
border-color: #999;
color: #000;
position: relative;
padding: 5px 9px;
overflow: hidden;
text-align: left;
word-wrap: break-word;
}
.qtip-content h5 {
font: 300 20px/22px"nyt-cheltenham", Georgia, "Times New Roman", serif;
color: #000;
margin: 0;
}
.qtip-content h6 {
font: 300 13px/16px'nyt-franklin', Arial, Helvetica, sans-serif;
margin: 0;
}
HTML (added inline CSS for hiding and position):
<img src="http://s.jeff.io/img/gifts.png" />
<div class="moveAble" style="display: none;position: absolute;">
<div id="qtip-0" class="qtip qtip-default qtip-pos-tr" style="z-index: 15001;">
<div class="qtip-content" id="qtip-0-content">
<h5>Dining Gifts »</h5>
<h6>Pug Muddlers</h6>
</div>
</div>
</div>
PS - use updated jQuery to avoid possible deprecation/removed components in the future.

Please add some margin between mouse pointer and moveable div, because when mouse inter within moveable div, a:hover not works and moveable div display become "none".
$(document).ready(function(){
var $moveable = $('.moveAble');
$(document).mousemove(function(e){
$moveable.css({'top': e.pageY + 5,'left': e.pageX + 5});
});
});