Yesterday, I decided to add some annotations to the sales page for a resale rights product I’m selling. Part of my motivation was to see whether inserting some comments into the pre-built sales page would convince Google not to treat it as duplicate content. I don’t know whether that will work yet or not, but I thought you might be interested in the code I wrote for the “sticky notes”.

Here’s an example (explanation below):

<html>
<head>
	<title>Test</title>
	<!--
	Stickies JavaScript and CSS code
	(c) 2008 Antone Roundy
	http://AntoneRoundy.com/
	You may freely use this code as long as you keep this copyright notice intact
	-->
	<style type="text/css">
	.sticky-anchor {
		position:relative;
		top:0;
		left:0;
		height:1px;
		width:1px;
		margin-bottom:-15px;
	}
	.sticky-note {
		position:absolute;
		border:1px solid #99991F;
		background-color:#FFFF33;
		width:200px;
	}
	.sticky-message {
		position:relative;
		padding:7px 10px;
		font-size:11pt;
		font-family:comic sans ms,fantasy;
	}
	.sticky-bar {
		position:relative;
		background-color:#D9D92B;
		height:14px;
	}
	.sticky-bar a {
		position:relative;
		display:block;
		height:12px;
		float:right;
		font-size:14px;
		line-height:1em;
		font-family:helvetica,sans serif;
		text-decoration:none;
		font-weight:bold;
	}
	#showallstickies {
		position:fixed;
		top:0;
		right:0;
		width:80px;
		text-align:center;
		border:1px solid #ccd3df;
		background-color:#eef3ff;
		padding:3px 5px;
		font-family:verdana,arial,helvetica,sans serif;
		font-size:10pt;
	}
	</style>
	<script type="text/javascript">
	var stickylist=new Array();
	function ShowAllStickies() {
		for (i=0;i<stickylist.length;i++)
			document.getElementById(stickylist[i]).style.display='block';
	}
	function CloseSticky(s) {
		document.getElementById(s).style.display='none';
	}
	</script>
</head>
<body>

<p>This is some random text that will be used to fill the page.
This is some random text that will be used to fill the page.
This is some random text that will be used to fill the page.</p>

<script type="text/javascript">stickylist.push('s1');</script>
<div class="sticky-anchor">
	<div class="sticky-note" style="left:350px;top:-30px;" id="s1">
		<div class="sticky-bar"><a href="javascript:CloseSticky('s1');">&nbsp;X&nbsp;</a></div>
		<div class="sticky-message">
			This is the message on this sticky note.
		</div>
	</div>
</div>

<p>This is some random text that will be used to fill the page.
This is some random text that will be used to fill the page.
This is some random text that will be used to fill the page.</p>

<script type="text/javascript">stickylist.push('s2');</script>
<div class="sticky-anchor">
	<div class="sticky-note" style="left:140px;top:30px;" id="s2">
		<div class="sticky-bar"><a href="javascript:CloseSticky('s2');">&nbsp;X&nbsp;</a></div>
		<div class="sticky-message">
			This is the message on this sticky note.
		</div>
	</div>
</div>

<p>This is some random text that will be used to fill the page.
This is some random text that will be used to fill the page.
This is some random text that will be used to fill the page.</p>

<div id="showallstickies">
	<a href="javascript:ShowAllStickies();">Show All Stickies</a>
</div>

</body>
</html>

A lot of the code is self-explanatory, so I’ll just touch on a few key points.

.sticky-anchor divs are tiny little divs used to ensure that a sticky is positioned close to the spot where you want them to show up. I put them just below whatever I want them displayed over, and then use a negative “top” position value on the .sticky-note div to move them up.

I gave .sticky-anchor divs a negative bottom margin to pull the content below them up. It might have been even better to float the .sticky-anchor divs so that they wouldn’t affect the vertical position of whatever’s below them at all…but I didn’t think of that at first. Plus, with floats, it’s sometimes tricky to avoid certain bugs in Internet Explorer.

I didn’t set the top and left positions for .sticky-note in the CSS code at the top, because I wanted to position each note a little different. I set the exact positions in the code in the content.

The &nbsp; (non breaking space) before and after the “X” that’s used to close each sticky is there to make the link wider, making it a little easier to hit the X.

#showallstickies isn’t necessary, but if you want people to be able to re-display all the stickies without reloading the page, it can be useful. In some browsers, the CSS code for it (position:fixed…) results in it always appearing in the upper right-hand corner of the browser, even if it’s scrolled. In other browsers, that doesn’t work. So I put the code for that div at the bottom of the page to avoid messing up the formatting of the top of the page.

You need to give each sticky its own unique ID, which needs to be entered in three places — in the call to stickylist.push(), in the id attribute of its sticky-note div, and in the call to CloseSticky().

If you’re not going to have a “Show All Stickies” link, you can remove all of the calls to stickylist.push() and the ShowAllStickies() function.

Want to see what it looks like and how I’m using it? Check out my Affiliate Landmine sales page.

Bookmark This Post: