Ok, I'm not really a huge fan of CFWINDOW, despite this being the second blog post in a row about them. That being said, I thought I'd recreate a trick (see PS below) with CFWINDOW that maybe some folks will find useful. The trick involves keeping CFWINDOW in a position and making it stick there as you scroll. It is probably best if you see it live:

http://www.coldfusionjedi.com/demos/stalker/wintest.cfm

Scroll down and note the CFWINDOW will adjust itself back to the original position. The code simply uses JavaScript to do the following:

  • Notice scrolls
  • When they scroll, note the position of the scroll and start an interval
  • Figure out how far 'off' the CFWINDOW is from where it should be and go 90% of the way there.
  • If the distance is less than some threshold, just set it and stop the interval

A bit silly, but fun! The complete code is here:

<cfajaximport tags="cfwindow" /> <html>

<head> <script> var origx = 50; var origy = 50; var origheight = 200; var targety = ""; var moving = false;

function init() { ColdFusion.Window.create('mywin','Windows Rules','win.cfm',{x:origx,y:origy,width:200,height:origheight,draggable:false}); window.onscroll = handleScroll; }

function handleScroll(e) { var cury = window.scrollY; var win = ColdFusion.Window.getWindowObject('mywin'); //var newy = origy+curY; //console.log('set y to '+newy) //win.moveTo(origx,newy); targety = origy+cury; if (!moving) { moving = true; heartbeat = window.setInterval('moveit()', 10); } }

function moveit() {

var win = ColdFusion.Window.getWindowObject('mywin'); var pos = win.xy; //find out how far I'm away from target //console.log('my targety is '+targety+' and my current y is '+pos[1]) var distance = targety - pos[1];

if (distance == 0) { window.clearInterval(heartbeat); moving = false; return; }

//we want to go X%, unless the X% is < threshhold of &, then just go there if(distance > 3 || distance < -3) var tomove = Math.round(0.09 * distance); else var tomove = distance; var newy = pos[1]+tomove; //console.log('my newy is '+newy) win.moveTo(origx,newy); } </script> </head>

<body> <h2>Header</h2> <cfoutput>#repeatString("<br/>",200)#</cfoutput> <h2>Footer</h2>

</body> </html>

<cfset ajaxOnLoad("init")>

p.s. Ok, so this effect has been done before, and probably with better JavaScript, but I think, stress think I was the first one to do it. Way back in the old days, around 96 or so, the company I worked for did a lot of custom web development for Netscape. One day we were tasked to do a company timeline for them. The timeline was a very wide graph inside a frame. The timeline tracked 3 things I think, and they wanted a little control you could click to turn on/off the lines. The problem was that as you scrolled along the timeline, you lost the little control doohicky.

I created what I called the Stalker, a bit of JS code that simply did, well, what I described above. I was pretty surprised when it actually worked. Later on I wrote an IE compatible version and eventually wrapped it into a custom tag for the Allaire ColdFusion tag gallery. Unfortunately the company I worked for back then wasn't really into the OS thing so the tag was encrypted and it belonged to them. Anyway, not trying to brag (ok, maybe I am) but I thought it was an interesting story.

Ok, another quick side story to this side story. I did some Perl work at Netscape and would, from time to time, check their intranet. They had a stats page for netscape.com. If I remember right the #s were insane, something like millions and millions of hits per day - all from folks who didn't know how to change their homepage. The Perl project is a story for another day.