Making a "sticky" CFWINDOW

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:

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 </ul> 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 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.
Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for Extend by Auth0. He focuses on serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support.

Lafayette, LA