T
his script displays a floating layer that moves with the page, which contains an "email-this-link" script. The e-mail script automatically captures the URL of the page and opens up your default e- mail with all the pertinent information.
W
e have tested the code in IE6.0, Firefox1.0.6, Opera8.02 and Netscape7.02 and Netscape8.0. This script worked well in all platforms with one variation observed in IE6.0.
In IE6.0 as you scroll up or down on the page, you will notice within the progress bar at the bottom of the screen
"Downloading picture http://www.whatever page this effect is on/float_dots.gif...".
Once you stop scrolling, the image is loaded and all you see is the Explorer icon and the word "Done".
We have determined that the image (float_dots.gif) is some sort of a background image that we can not find. To be sure, we replaced it with another image and it is some sort of invisible background image.
If you remove the image from the code, you will not get the loading of the image message in the progress bar every time you scroll the page. It also appears that the image is not really needed. The script worked perfectly fine in all platforms tested without any variations. See below on what to remove if you want.
<div id="FloatMail" style="position: absolute;
background-color: #000000;
background-image:url('float_dots.gif');
width: 180px;
Remove the code that is color coded. See below:
<div id="FloatMail" style="position: absolute;
background-color: #000000;
background-image:url(' ');
width: 180px;
D
epending on your knowledge of HTML and javascripts, this is an easy one part copy and paste code that gets pasted just above the closing <BODY> tag of your document.
T
he only reconfigurations that you can do are basically for cosmetics and position* of the floating email link itself. Reason being we do not feel a full tutorial is necessary at this time is that the script itself is very self-explanatory and well defined. Just study the script, play around with all the different colors etc. The main thing you need to be concerned with is the positioning of the floating effect itself. You want to make this as unobtrusive and professional without taking away from the integrity of your site by having this effect cover up some of your page. Here again the script is very clear on where and howto.
* We know how annoying something such as this can be if the page is not set up for this effect. That is why we have all our text positioned to the right and set within a defined <table> The only thing on the left is the floating email link. This way there will not be any part of the page that is being blocked by this effect.
I
f you would like to view our source code, be our guest. We have it very well marked on where our table begins and ends.
<div align="right">
<!---------- Start Positioning Table Here ---------->
<p><table bgcolor="#000000" border="0" width="69%"
cellpadding="4" cellspacing="3">
<tr>
<td bgcolor="#000000" align="left" colspan="3">
All Your Page Material Goes Here Except Code For Floating Email Link
<tr></td>
</table>
<!---------- End Positioning Table Here ---------->
<!---------- Script Starts Here ---------->
Floating Email Link Script Goes Here
<!---------- Script Ends Here ---------->
</BODY>
</HTML>
J
ust do all your reconfigurations within the boundaries set forth within the script. See Below:
<!-- Edit the HTML between the div tags to suit your design //-->
<div id="FloatMail" style="position: absolute;
All your reconfigurations will be done between the above and below points.
</form>
</center>
</div>
<!-- End of editable HTML //-->
I
f you would like to add this effect into your pages, grab the below link and you are there. If you have any problems with this, feel free to contact us.
[
Get Code Here ]
Notice you do not have the image loading in the progress bar every time you scroll the page.