Mar
28

CF Presenter under X-rays

10 comments Posted by: Nahuel

(or CF Presenter without its skin)


Before:

After:

All the changes were possible thanks to the implementation of CSS in flash forms. The code is exactly the same in both examples. The only difference is that one has CSS and the other is in its default plain vanilla skin that comes with cfform.

Although the CSS properties have to be placed inline and it's not possible to have them in an external file, the ability of skin our forms with CSS is a very nice feature.

PS: the source is coming

View the example without CSS
View the example with CSS

Category: CFForm | ColdFusion |

10 Comments so far

Write yours
Bolo
very nice
Alex
2. Alex wrote on March 28, 2005 at 9:30 AM
Really looking forward to seeing that source... great work guys...
twoedge
3. twoedge wrote on March 28, 2005 at 10:48 AM
The styled version seems to run MUCH slower than the non-styled one. I wonder if it is because of the font difference. I assume in the un-styled one you are using non-embedded system fonts, but that does not seem to be the case in the styled version.
<br/>
It is very noticeably different, but looks good. As always, the fight between performance and appearance wages on...
Nahuel
Hi twoedge
This is on purpuse, it is part of the style.
In the accordion I added the style "openDuration:1500;" to make the transition between the slides slower.
When you see the non-styled version you get the default speed of the accordion.
Tim Cunningham
5. Tim Cunningham wrote on March 29, 2005 at 3:58 AM
An odd characteristic about it: if you initially view it in a browser window that is not maximized, and then you maximize the window, the flash form keeps the same dimensions as it was when it was not maximized.

I have been searching the web and the MM docs, to see if there is some onresize event or action script method to dynamically resize the cfform. If found this action script: http://www.mustardlab.com/developer/flash/objectresize/ but don't see how to incorporate it into a cfform.

Tim Cunningham
Felipe
6. Felipe wrote on June 11, 2005 at 12:32 AM
"Although the CSS properties have to be placed inline and it's not possible to have them in an external file"

Just a tip:

You can create a "css.cfm" page that set the style as varables ie:
<cfset stinput = 'background-color: ##cc3300; background-alpha:56;
border-color:##ffffff; border-cap-color:##ffffff;'>

Then include it with cfinclude, so you can set the style like this:
<cfinput type="text" name="email" style="#stinput#">

So when you chage something in the css.cfm page it will update all your presentation.
John Farrar
7. John Farrar wrote on June 14, 2005 at 7:59 PM
OK... when will the teaser turn public? We would like to get flash presenter if you could make it available.
Tom
I NEED THIS CODE 8-). Looks great and I am currently on a project where it would be a tremendous contribution. Please advise on when you will be posting the source. Kind Regards
Nahuel
Hi Tom,
The code is available for download in the following link:
http://www.asfusion.com/blog/entry/cf-presenter-source-code
Brian
10. Brian wrote on October 31, 2007 at 6:08 PM
Hi there. Would it be possible for you guys to post the source for the CFPresenter version without the skin? I'm having a difficult time removing the skin for this without breaking it. Thanks!!!

Leave your comment

Comment etiquette: As a gesture to those subscribed to this post, please keep your comments relevant to the post.

Your email address will never be displayed.
Email is gravatar enabled.Gravatar are the pictures you see next to the comments. If you like to have one, visit gravatar



Allowed tags:

<code>
All other tags will be shown as such, when in doubt, use the preview.




Preview:

Refresh Preview
1. You wrote on