How to fix CFWINDOW so the contents of the window layer are not visible on page load
Right, well I've been having lots of fun playing with the new super-duper CFWINDOW tag in CF8. What this lovely tag does is it allows you to quickly create impressive lookng web 2.0 style windows. The coolest feature of the tag is the ability to set a window as 'modal'. This makes the window one of those where the background of the page is greyed out with only the window being usable.. Very neat for login panel's etc. I'm making extensive use of this technology on the big project I'm currently working on.
Anyway, I became aware of an annoying problem today where the actual contents of the CFWINDOW was appearing at the top of the page while it was loading. Once loading was complete the content would dissapear as the Ajax goodness kicked in to hide it.. Well obviously on a production site this is simply not workable - we can't have our vistors seeing ugly text at the top of the design only to watch it vanish when the page is fully rendered.
Well anyway after an inspired moment about 10 minutes ago I realised that the key was to make sure the generated <div>'s tags that CFWINDOW creates to hold the window contents are set to render off screen. The fix is the incredibly complex piece of CSS ( :) ) that you need to add to your stylesheet:
position:absolute;
left:-200px;
}
This works a treat and ensures that all your CFWINDOW pages are loaded properly.
Thanks for posting this. It was driving me crazy on one site I developed.
This post was a huge help.
Curt
No problem at all! It did my head in for hours before I solved it. I went searching and couldn't find any solutions, just a few reports of the issue.
Glad this has helped you out, though I wonder if it was fixed in CF8 update 1. That's not something I tested.
There are some cool Ajax functions in CF8.. If you haven't checked it out already - CFAJAXPROXY is another essential - really great.
Thanks a lot for your posting. keep rocking.
Is it possible for a cfwindow window to load the contents of the cfwindow AFTER the a button to view the cfwindow is clicked? The problem with my page is that it loads the page really slow since I have about six cfwindows with flash forms loading. Thanks!
I've just checked this out and the way to do this is to use the 'source' attribute. This takes a template as a parameter and will only load it when the user clicks the trigger button / link.
So in your case, just create separate .cfm files for each window or have a single window.cfm handler which you pass params into, to tell it what to render.
E.G window.cfm?mode=userpanel
That should do the trick nicely..
Again, thanks for helping!
Hopefully there is a work-around. If you do find one let me know what it is.
Simple fix but a very annoying problem to solve.
Glad I could help.
I'm redirected to a new page when I click a button in cfwindow and the cfwindow gets closed automatically.Is it possible for the cfwindow to remain open until the user closes it.
I haven't worked with CFWindow for a long time but to do what your looking for you need to use Ajax.
I'd use something like JQuery to use an Ajax load for each link or I think there is a Coldfusion Ajax function to load another page into a div.
In Jquery you'd do something like this:
<javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/...; type="text/javascript"></script>
<javascript language="javascript">
function loadPage(page) {
$("#loader").load(page);
}
</script>
<a href="javascript:loadPage('firstpage.cfm');">First Page</a>
<div id="loader"></div>
In the above, when the user clicks the 'First Page' link, JQuery will be used to load up the firstpage.cfm into the div with id="loader".
I'm sure there is a way to do this in a Coldfusion Ajax way as well.