How to create a live preview on a website?

Asked by sdeutsch (4263

) September 12th, 2008

I’m building a web store for a friend who makes custom stationery (wedding invitations, birth announcements, etc.) She’d like to have customers choose the color, font and text, and be able to provide them with a preview of roughly what the invite will look like. It could be a live updating thing (like those spiffy fluther comment previews below), or it could be a button that you click to see the preview – either one would be fine.

I’ve never built something like this into a website before, so any hints on where to start would be appreciated!

Observing members: 0

Composing members: 0

4 Answers

Flex

http://www.adobe.com/products/flex/

windex (2932

)“Great Answer” (0

) Flag as…

AJAX ftw.

Anaphase (773

)“Great Answer” (0

) Flag as…

Yeah, you could do this with Flash or Flex, but you could also do it with web standards using XHTML/CSS/Javascript (Ajax). Basically, you’d have form elements (or fancier controls) for the user to select colors, fonts, and enter text, and the Javascript would take those values and produce a preview, most likely updating any time a change is made in one of those controls.

Tone (470

)“Great Answer” (2

) Flag as…

Thanks for all the tips – it looks like Javascript is going to be the easiest way to go, so I’ll give that a shot…

sdeutsch (4263

)“Great Answer” (0

) Flag as…