Floating Email Link ~ Displays a floating layer that moves with the page. ~ Tested in IE6.0, Netscape7.02, Netscape8.0.3.3, Opera8.02 and Firefox1.0.6

Floating Email Link

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.3.3. 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 tiled 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;

I f you would like to see an example of this script after we removed the image (float_dots.gif, grab the below link and you are there.
[ Example With Image Removed ]

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. See below:

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

*

<script>
/* Floating Mail-This-Link Script C.2004 by CodeLifter.com */

// Insert the entire script just before the </body> tag.
// Set the following two position parameters
// Negative numbers are relative to right (hX) or bottom (vY)
// Positive numbers are relative to left (hX) or (vY) top
// Experiment with values to get positioning exact, and allow
// for the dimensions of the image & form in the positioning

var hX = 10;
var vY = -140;

</script>

The above settings are not the default, this is how we set up ours. The default that comes with the code is

var hX = 340;
var vY = -140;

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



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




Floating Email Link Script Goes Here



</BODY>
</HTML>

O n a note of importance in regards to the above setting for the width="69%". Reason we set the width to a percentage (%) as opposed to an actual pixel size is quite simple. Not all viewers will have the same viewing screen size. By setting the width to a percentage, it will automatically set the percentage to adapt to the screen size it is being viewed from. By setting it to a pixel size, it is a constant and the effect may not be viewed correctly and may cover some pertinent material on your page.

J ust do all your reconfigurations within the boundaries set forth within the script. See Below:



<div id="FloatMail" style="position: absolute;

All your reconfigurations will be done between the above and below points.

</form>
</center>
</div>



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 ] [ Rate This Page ]

Search Our Site By Individual letter

[ A ] [ B ] [ C ] [ D ] [ E ] [ F ] [ G ] [ H ] [ I ] [ J-K ] [ L ]
[ M ] [ N-O ] [ P-Q ] [ R ] [ S ] [ T ] [ U-V ] [ W ] [ X-Y-Z ]

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 ]
[ Link To Us ] [ Alphabet Index ] [ Feedback ] [ On Line Support ] [ FAQ ]
[ Webmaster Utilities ] [ Casino ] [ Banner Exchange ] [ Advanced Site Search ]

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-