Fixed Position, Edge-Hugging Clickable Image

Occasionally, I see a clickable image on the left or right side of web pages, right at the edge of the browser window.

I wanted one for myself. And I thought maybe you would, too.

The clickable image is contained in a div. Other content can also be in the div, hugging one of the browser window edges. The div stays in position during scrolling.

Examples of use:

• Click to open another div with a subscription form.

• Present a reminder.

• Publish an ad.

• Click to tweet the page.

• Click to open a menu of more destinations.

The image is noticed because it does not move when the rest of the page is scrolled. Yet, it is not intrusive.

How It Works

It works a little different depending on whether the div containing the image or other content is at the left or right edge of the browser window.

If at the left edge of the browser window, the image appears as soon as the div is loaded into the browser. Otherwise, JavaScript positions the div immediately after the page has completed loading.

The div has a CSS style position:fixed to keep it in position during page scrolls.

A note about IE: The Internet Explorer browser recognizes CSS style position:fixed only if the web page has a !DOCTYPE specified. Many later versions of web page creation software specify a !DOCTYPE for you. If you create web pages manually, this Willmaster article has some !DOCTYPE examples.

If the window is resized, the JavaScript repositions the div.

The Div With The Image

The image or other content at the left or right edge of the window is in a div. Here is an example.

<div 
   id="feedicon" 
   style="display:none; 
          z-index:999; 
          position:fixed; 
          width:32px; 
          height:32px; 
          top:250px; 
          left:0px;">
<a href="//www.willmaster.com/index.xml" target="_blank">
<img src="//www.willmaster.com/images/feed-icon32x32.png" border="0" width="32" height="32" alt="RSS" title="RSS">
</a>
</div>

The example div contains a linked image.

The div is required to have an id value if it is to be positioned at the right edge of the browser window. Otherwise, the id is not required for positioning.

Let's go over each of the CSS properties in the example div.

All the CSS properties in the example are required. Some of the values may be changed. Additional CSS properties may be added as needed for your implementation.

• display:none;
  If the div is to be at the right edge of the window, leave this property and value as is.

  Otherwise, if the div is to be at the left edge of the window, change the value to "block" (no quotes). Like:

  display:block;

• z-index:999;
  The z-index property value is large enough to put the div on top of other elements on the page. A z-index value of 999 should be okay for most pages. Change it to a larger number, if necessary.

• position:fixed;
  This property and value need to be as is.

• width:32px;
  Change the value to reflect the width of the div.

• height:32px;
  Change the value to reflect the height of the div.

• top:250px;
  Change the value to the number of pixels down from the top the div shall be positioned at.

• left:0px;
  If the div is to be at the right edge of the window, leave this property and value as is.

  Otherwise, if the div is to be at the left edge of the window, the value may remain zero or may be changed to provide a pixel or several of space between the left edge of the window and the div.

Put whatever image or other content you want into the div.

Insert the div into the source code of a test web page to see how it works.

The JavaScript

The following JavaScript positions the div containing the image so it hugs the right edge of the browser window.

If the div is to remain at the left edge of the browser window, do not use this JavaScript.

<script type="text/javascript"><!--
/* Div Placement At Right Edge Of Window
   Version 1.0
   October 18, 2009
   https://www.willmaster.com/
   Copyright 2009 Bontrager Connection, LLC
*/

 /***************************/
/* Three places to customize */


// Place 1:
// Specify the width of the div and its border width.

var DivWidth = 32;
var BorderWidth = 0; // 0 (zero) if no border


// Place 2:
// Specify the id value of the div to place.

var DivID = "feedicon";


// Place 3:
// Specify how much space (number of pixels) between div and right window edge.

var SpaceAtEdge = 2;


 /* No other customizations required. */
/*************************************/
DivWidth = parseInt(DivWidth) + parseInt(SpaceAtEdge) + (parseInt(BorderWidth)*2);

function AppendOnloadResizeEvents(f)
{
   var cache = window.onload;
   if(typeof window.onload != 'function') { window.onload = f; }
   else
   {
      window.onload = function()
      {
         if(cache) { cache(); }
         f();
      };
   }
   cache = window.onresize;
   if(typeof window.onresize != 'function') { window.onresize = f; }
   else
   {
      window.onresize = function()
      {
         if(cache) { cache(); }
         f();
      };
   }
} // function AppendOnloadResizeEvents()

function WindowHasScrollbar() {
var ht = 0;
if(document.all) {
   if(document.documentElement) { ht = document.documentElement.clientHeight; }
   else { ht = document.body.clientHeight; }
   } 
else { ht = window.innerHeight; }
if (document.body.offsetHeight > ht) { return true; }
else { return false; }
} // WindowHasScrollbar()

function NailItIntoPlace(ledge) {
var did = document.getElementById(DivID);
did.style.left = ledge + "px";
did.style.display = "block";
} // function NailItIntoPlace()

function PlaceTheContent() {
if(document.documentElement && document.documentElement.clientWidth) { NailItIntoPlace(document.documentElement.clientWidth-DivWidth); }
else {
   if(navigator.userAgent.indexOf('MSIE') > 0) { NailItIntoPlace(document.body.clientWidth-DivWidth+19); }
   else {
      var scroll = WindowHasScrollbar() ? 0 : 15;
      if(typeof window.innerWidth == 'number') { NailItIntoPlace(window.innerWidth-DivWidth-15+scroll); }
      else { NailItIntoPlace(document.body.clientWidth-DivWidth+15); }
      }
   }
} // function PlaceTheContent()

AppendOnloadResizeEvents(PlaceTheContent);
//--></script>

The JavaScript has three places to customized. All are near the top, clearly marked.

1. The first has to do with the size of the div containing the image. Here, you'll specify the width of the div and the width of the border ("0" if no border). Specify in number of pixels.

2. The second requires the value of the div's id attribute.

3. The third provides an opportunity to move the div away from the right-hand edge of the browser window. Specify the number of pixels or 0 for no space between div and window edge.

Put the JavaScript somewhere in the BODY area of the web page. Near the end of the BODY area is best if other JavaScript assigns values to be performed immediately after the page is loaded.

The JavaScript may be put into an external file to be imported into your web pages. See the Importing JavaScript From An External File article for how to set it up.

 
To reiterate, if the div with the image or other content is to be at the left side of the browser window, only the div needs to be in the web page. If the div is to be at the right side, then both the div and the JavaScript are required.

Will Bontrager