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

How to change the body background with a button?

For an assignment at school I need to make the background of my body change into the background of whatever button (div) I click on.
I don't get what I'm doing wrong here. Don't I have to use querySelector() and then add .style.backgroundImage to make it change?
function btnClick() {
var bgImg = document.querySelector('body').style.backgroundImage = "url(https://www.planwallpaper.com/static/cache/86/dd/86ddabfea12cf403e6a7e5850f272cc9.jpg)";
// was url(../img/img1.png)
}
.Btn {
border-radius: 100%;
background-color: #CCC;
width: 128px;
height: 128px;
border: 2px solid white;
box-shadow: 1px 1px 10px black;
}
.Btn:hover {
cursor: pointer;
}
#Btn1 {
background-image: url(https://www.planwallpaper.com/static/cache/86/dd/86ddabfea12cf403e6a7e5850f272cc9.jpg);
background-size: cover;
background-repeat: none;
}
<div class="Btn" onclick="btnClick ()" id="Btn1"></div>

Displaying some text when mouse is over an input text box

I have an input text box, on which I would like to display some text area when the user's mouse get over it, giving to him informations on the text to enter.
here is my HTML code :
<html>
<body>
<style type="text/css">
.mouseover
{
}
</style>
<span onmouseover="this.classname='mouseover'" onmouseout="this.classename=''"></span>
<input id="mybox" type="text" />
</body>
</html>
What is the best CSS trick that would help to do that ?
Thank you for help in advance.

You can do all of this with CSS. Play around with CSS triangles for the tooltip but what you're mainly looking for is to use the :hover pseudo-class. No need for Javascript.
.input {
position: relative;
}
.tooltip {
display: none;
padding: 10px;
}
.input:hover .tooltip {
background: blue;
border-radius: 3px;
bottom: -60px;
color: white;
display: inline;
height: 30px;
left: 0;
line-height: 30px;
position: absolute;
}
.input:hover .tooltip:before {
display: block;
content: "";
position: absolute;
top: -5px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid blue;
}
http://jsfiddle.net/v8xUL/1/

You can use Jquery Tooltip:
Jquery Tooltip

Just one more way to do that...
Filldle Demo
For me in IE8 OK DEMO
<input type="text">
<span>Some Text inside... </span>
span {
background-color: rgba(0,102,255,.15);
border: 2px solid rgba(0,102,255,.5);
border-radius: 10px;
color: #000;
display: none;
padding: 10px;
position: relative;
}
span:before {
content: "";
border-style: solid;
border-width: 0 15px 15px 15px;
border-color: transparent transparent rgba(0,102,255,.5) transparent;
height: 0;
position: absolute;
top: -17px;
width: 0;
}
input {
display: block
}
input:hover + span {
display: inline-block;
margin: 10px 0 0 10px
}

* simple css-based tooltip */
.tooltip {
background-color:#000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
display:none;
color:#fff;
text-align:left;
font-size:12px;
/* outline radius for mozilla/firefox only */
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
}
// select all desired input fields and attach tooltips to them
$("#myform :input").tooltip({
// place tooltip on the right edge
position: "center right",
// a little tweaking of the position
offset: [-2, 10],
// use the built-in fadeIn/fadeOut effect
effect: "fade",
// custom opacity setting
opacity: 0.7
});
got to this link http://jquerytools.org/demos/tooltip/form.html

Try this property it's asp but may work for your case
ErrorMessage="Your Message";

How do I prevent only the page turn event in Ibooks fixed layout book?

I'm trying to create a stop/start button for an ibooks read-aloud fixed layout book, and I want to prevent the page from turning at the location of this button. The HTML element is as follows.
<p ibooks:readaloud="startstop" id="rass" ontouchstart="prevent(event)">SS</p>
The javascript is as follows.
function prevent(event){
event.preventDefault();
}
So ibooks:readaloud attribute makes the read aloud start and stop when the p tag is touched, however, preventing default behavior of on touch also prevents the behavior of the ibooks:read aloud attribute.
Is there a way for me to manually start and stop the read aloud, or to prevent only the page turn?

Add this code to your HTML file:
<p ibooks:readaloud="startstop" id="rass">✵</p>
And put this into your CSS file:
html p#raplay {
top: 955px;
left: 700px;
color: green;
padding: 0px 6px 0 10px;
background: white;
border: 2px solid black;
border-radius: 15px;
}
html p#rastop {
top: 955px;
left: 700px;
padding: 0px 6px 0 10px;
color: red;
display: none;
background: white;
border: 2px solid black;
border-radius: 15px;
}
html p#rass {
top: 955px;
left: 700px;
padding: 2px 6px 4px 8px;
color: green;
background: white;
line-height: 40px;
border: 2px solid black;
border-radius: 15px;
}
html.-ibooks-media-overlay-enabled p#raplay {
display: none;
}
html.-ibooks-media-overlay-enabled p#rastop {
display: block;
}
if that p tag click, the read aloud will stop. that is the default of the read aloud. you dont need to use javascript.

div styles in html page

All,
How to make the div more presentable in the below code.
i.e, on mouseover the div should look like as same as title attribute or even better
And the text on it should also look presentable
<style type="text/css">
#div1 { width: 200px; height: 30px; background-color: #a9a9a9; color: #fff; position: absolute; }
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(window).mouseover(function(event){
$("#div1").css({'top': event.pageY, 'left': event.pageX});
});
});
</script>
<div id="div1">move me</div>
Thanks.....

How about this:
<style type="text/css">
#div1 {
font-size: 12px;
font-family: helvetica;
background-color: #ffffaa;
color: black;
position: absolute;
border-left: solid 1px #d0d0d0;
border-top: solid 1px #d0d0d0;
border-right: solid 1px #a0a0a0;
border-bottom: solid 1px #a0a0a0;
padding: 1px;
}
</style>
It looks a bit like the title tool tip (but be aware, that every user can have a different configuration via OS or browser) and it adds a light 3d effect. If you are using CSS3, you can also use gradients, round corners and shadows, which can look nice.

How about this:
$(function(){
$(window).mouseover(function(event){
$("#div1").css({'color': '#0000ff'});
$("#div1").css({'font-weight': 'bold'});
$("#div1").css({'background-color': '#00ff00'});
});
});

I think you should switch from "mouseover" to "mousemove", because it's a bit of a smoother effect:
$(window).mousemove(function(event){
$("#div1").css({'top': event.pageY, 'left': event.pageX});
});
As for the look, here's the Windows tooltip look (if that's what you wanted):
<style type="text/css">
#div1
{
color: #000;
background: #FDFFC9;
border: 1px solid #000;
font: 12px Arial, sans-serif;
padding: 5px;
position: absolute;
}
</style>
And here's something you might like:
<style type="text/css">
#div1
{
color: #FFF;
background: #5289BF;
border: 1px solid #369;
border-width: 0 2px 2px 0;
font: bold 15px Arial, serif;
padding: 10px;
position: absolute;
}
</style>