October 11, 2014

Weebly Tricks #78 - jCalculator : Elegant Calculator for your Site

Posted by Domz at 10/11/2014

Calculator for Weebly site

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>

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>

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>

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".



Get email updates and more access! (Free)
Email *
email marketing by activecampaign


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

0 comments:

Have any question? Feel Free To Post Below:

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top