Posted in JavaScript, ColdFusion | Posted on 01-17-2009 | 5,160 views
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:
2<html>
3
4<head>
5<script>
6var origx = 50;
7var origy = 50;
8var origheight = 200;
9var targety = "";
10var moving = false;
11
12function init() {
13 ColdFusion.Window.create('mywin','Windows Rules','win.cfm',{x:origx,y:origy,width:200,height:origheight,draggable:false});
14 window.onscroll = handleScroll;
15}
16
17function handleScroll(e) {
18 var cury = window.scrollY;
19 var win = ColdFusion.Window.getWindowObject('mywin');
20 //var newy = origy+curY;
21 //console.log('set y to '+newy)
22 //win.moveTo(origx,newy);
23 targety = origy+cury;
24 if (!moving) {
25 moving = true;
26 heartbeat = window.setInterval('moveit()', 10);
27 }
28}
29
30function moveit() {
31
32 var win = ColdFusion.Window.getWindowObject('mywin');
33 var pos = win.xy;
34 //find out how far I'm away from target
35 //console.log('my targety is '+targety+' and my current y is '+pos[1])
36 var distance = targety - pos[1];
37
38 if (distance == 0) {
39 window.clearInterval(heartbeat);
40 moving = false;
41 return;
42 }
43
44 //we want to go X%, unless the X% is < threshhold of &, then just go there
45 if(distance > 3 || distance < -3) var tomove = Math.round(0.09 * distance);
46 else var tomove = distance;
47 var newy = pos[1]+tomove;
48 //console.log('my newy is '+newy)
49 win.moveTo(origx,newy);
50}
51</script>
52</head>
53
54<body>
55<h2>Header</h2>
56<cfoutput>#repeatString("<br/>",200)#</cfoutput>
57<h2>Footer</h2>
58
59</body>
60</html>
61
62<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.
@Ray: And about cfwindow? has anyone been able to place it over a flash content?
We're down to less than 5% of our userbase on IE6 and, quite frankly, the customer support cost doesn't balance out the margin on their orders. (Nor even the extra development effort to backport the little things like this.)
Maybe 2009 is the year that everyone can finally move on. Maybe.
http://www.communitymx.com/content/article.cfm?cid...
As an avid reader of your blog, I had to check out the example in my favorite browser (Opera v.9.60, personally fire fox and the stalker script isn't working. Just an FYI.
So if I could type . . . . As an avid reader of your blog, I had to check out the example in my favorite browser (Opera v.9.60, personally fire fox and I don't get along) the stalker script isn't working. Just an FYI.
I'll see if I can find some time to do so (school and work and all that jazz). Plus we are on on MX 7 at the office, so its gonna have to wait until I get home.
"pos is undefined
var distance = targety - pos[1];\n"
error. At first i thought it had to do with win.xy but i tried it with my own cfwindow and its valid in my CF8 even though i didnt see it in ext docs. It gives you the x,y of the window. assuming that the getwindow worked. Firebug didnt seem to help at all. The only way i got it to work was to remove the if statements/case scenarios. Im not that great at javascript so i'll leave the rest to someone else.
[Add Comment] [Subscribe to Comments]