11/23/05
I
t's a calculator that floats on the page. Drag it around and use it the same way you would the normal Windows calculator. Select the to close the calculator. If you want it to re-appear, just hit the "Refresh" or "Reload" button on your browser.
W e have tested the code in IE6.0, Firefox1.0.7, Opera8.50, Netscape7.02, Netscape8.0.4 and AOL Explorer1.1. This script worked well in all platforms with no variations observed.
D epending on your knowledge of HTML and javascripts, this is an easy two part copy and paste code that goes in both the <HEAD> and <BODY>* sections of your document with cosmetic reconfigurations within the <HEAD> section (<style> </style> sheet) and a reconfiguration in the <BODY> section for the images you need to upload into your directory.
* The code that goes in the <BODY> section of your document can be placed anywhere you want it to appear initially. Only after you close this effect, the space will disappear and the material surrounding it will come together as if the calculator was nonexistent. Close the calculator to see what we are explaining and then refresh the page to have it reappear.
T he reconfigurations that you can make to the <style> </style> sheet are pretty straight foward and self-explained. Just play around with them until it fits your site. The one reconfiguration we will elaborate on is the transparency factor within these reconfigurations. See below:
Default With Transparency
#demo {
margin:50px;
}
/* delete the style declaration below if you do not want it to be transparent! */
#calculator {
filter:alpha(opacity=85);
-moz-opacity:.85;
opacity:.85;
}
Reconfigured With No Transparency
#demo {
margin:50px;
}
/* delete the style declaration below if you do not want it to be transparent! */
#calculator {
}
I n other words just remove the below and "BE SURE NOT TO REMOVE" the two characters ( { and } ) or the calculator will not move around the page.
<!---------- Remove The Below ---------->
filter:alpha(opacity=85);
-moz-opacity:.85;
opacity:.85;
<!---------- Remove The Above ---------->
N
ow for the only reconfiguration within the <BODY> section of code. There are two images that you need to download, unzip and upload into your directory. If you do not have unzipping capabilities or you prefer not to do it that way, you can save the two below images to your harddrive and then upload them. After you upload the two images into whatever directory you have images, then you must reconfigure the path in the code to call the images.
close.gif width="13" height="13"
q.gif width="16" height="16"
Default Path For Images
<div class="calculatorcontainer">
<div id="version"><a href="http://www.cj-design.com" title="web design uk" onclick="return false">CJ Floating Calculator V1.0</a></div>
<div id="control"><a href="#" onclick="about();return false"><img src="/img/float-calc/q.gif" /></a> <a href="#" onclick="closeCalculator();return false"><img src="/img/float-calc/close.gif" style="position:relative;top:-1px"/></a></div>
<input type="text" name="input" size="16" id="result" onclick="this.focus()" onkeyup="addToCalcDirect(this.value)"><br />
Our Reconfigured Path For Images
<div class="calculatorcontainer">
<div id="version"><a href="http://www.cj-design.com" title="web design uk" onclick="return false">CJ Floating Calculator V1.0</a></div>
<div id="control"><a href="#" onclick="about();return false"><img src="https://www.angelfire.com/ny5/consigliere/images/q.gif"border="0" height="16" width="16" alt="About" /></a> <a href="#" onclick="closeCalculator();return false"><img src="https://www.angelfire.com/ny5/consigliere/images/close.gif"border="0" width="13" height="13" alt="Close Calculator Select Refresh To Have It Re-Appear" style="position:relative;top:-1px"/></a></div>
<input type="text" name="input" size="16" id="result" onclick="this.focus()" onkeyup="addToCalcDirect(this.value)"><br />
N otice in our reconfigurations we have the complete path to call the image plus we have the images completely defined with height, width, border and alt tag. You do not have to really add the complete image tag as we do but it does load quicker if the image path is completely defined as we have it.
I
f you would like to add this effect into your pages, grab the below link and you are there. We hope our tutorial was easy to follow and we covered everything in detail. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ]
[ Rate This Page ]
S
elect the below link and your default email will appear for you to fill out and send this page to your friends.
Search Our Site By Individual letter
[ A ]
[ B ]
[ C ]
[ D ]
[ E ]
[ F ]
[ G ]
[ H ]
[ I ]
[ J-K ]
[ L ] |
Little Tips Directory [ Page 1 ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5 ] [ Page 6 ] [ Page 7 ] |
[ Index Page 1 ]
[ Index Page 2 ]
[ Index Page 3 ]
[ Index Page 4 ]
[ Index Page 5 ] [ Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ] [ Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ] [ News Letter Archives ]
[ Navigation Page ]
[ Archives Of Published Material ] |
If you are part of the ever growing number of webmasters who enjoy
sharing your knowledge with others on web design, join The
Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today
This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.
Copyright © Consigliere Ltd., All Rights Reserved. 2001-