I'm back and I brought a rare widget for rare websites. It's a JQuery calculator to cater simple computations straight from your Weebly site. It comes with a clean design, no ads and totally free.
FILES NEEDED
How to use these files? Click Here!
FOOTER CODE
Where to place these codes? Click Here!
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://mwtdatabase.weebly.com/files/theme/jcalculator.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#testinput').calculator();
});
function popitup(url) {
newwindow=window.open(url,'name','height=300,width=600');
if (window.focus) {newwindow.focus()}
return false;
}
</script>
<script src="http://mwtdatabase.weebly.com/files/theme/jcalculator.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#testinput').calculator();
});
function popitup(url) {
newwindow=window.open(url,'name','height=300,width=600');
if (window.focus) {newwindow.focus()}
return false;
}
</script>
Note:
Red text - Change with your own site address
HEADER CODE
Where to place these codes? Click Here!
<link rel="stylesheet" type="text/css" href="http://mwtdatabase.weebly.com/files/theme/jcalculator.css" media="screen">
<style>
.demonstration {
margin: 0 auto;
background: none;
font-family: Roboto;
padding:0;
color: #5e5e5e;
text-align: center;
}
.demonstration .jcalculator_wrap {
width: 300px;
margin: 0 auto;
}
.demonstration .jcalculator_wrap input {
border: 0;
padding: 20px 30px;
width: 300px;
color: #5e5e5e;
font-size: 24px;
font-family: Roboto;
border-radius: 5px;
outline: 0;
border: 4px solid #D8D8D8;
}
.demonstration .jcalculator_wrap input:focus {
border-color: #37BE42;
border-radius: 5px 5px 0 5px;
}
.demonstration .jcalculator_wrap input:focus .jcalculator {
display: block;
}
.wcustomhtml {
overflow-y: visible !important;
overflow-x: visible !important;
}
</style>
<style>
.demonstration {
margin: 0 auto;
background: none;
font-family: Roboto;
padding:0;
color: #5e5e5e;
text-align: center;
}
.demonstration .jcalculator_wrap {
width: 300px;
margin: 0 auto;
}
.demonstration .jcalculator_wrap input {
border: 0;
padding: 20px 30px;
width: 300px;
color: #5e5e5e;
font-size: 24px;
font-family: Roboto;
border-radius: 5px;
outline: 0;
border: 4px solid #D8D8D8;
}
.demonstration .jcalculator_wrap input:focus {
border-color: #37BE42;
border-radius: 5px 5px 0 5px;
}
.demonstration .jcalculator_wrap input:focus .jcalculator {
display: block;
}
.wcustomhtml {
overflow-y: visible !important;
overflow-x: visible !important;
}
</style>
Notes:
Red text - Change with your site address.
Green text - Change with the width you preferred for your input box.
BODY CODE
Where to place these codes? Click Here!
<div class="demonstration">
<div class="container">
<input id="testinput" type="text" placeholder="click here to calculate" />
</div>
</div>
<div class="container">
<input id="testinput" type="text" placeholder="click here to calculate" />
</div>
</div>
Note:
Red text - Change with the text you want to initially appear on the input box.
CONCLUSION
This widget might not be useful for to but we need to include this on our collection for future use. There are many calculator widgets out there but this one is free with no ads. Credit to the code creator.
This tutorial uses one of the "10 Capsulated Tips".
0 comments:
Have any question? Feel Free To Post Below: