Can a "wizard" html page like this be built using jquery or does it require flash?

I need to build a little wizard that looks like this where you walk a person through a wizard and have an image get updated with each choice. For a few reasons like ipad compatibility, i can't use flash like it is on this website. How close to this user experience can I get from simply using javascript and jquery. Are there any exa开发者_JAVA技巧mples that would do similar things (can't find anything via google with this type of user experience)

I had a good experience using this:

https://github.com/kflorence/jquery-wizard

To implement a multi-step wizard with branching. I just used normal jQuery to add some extra effects like transition animations, etc.

It can be done using JQuery, and you could probably make it very slick. However, Flash and other similar technologies tend to make building this kind of site easier, or at least, requiring a lot less fiddly coding.

Should certainly be possible in HTML5. http://www.html5rocks.com/ is a good site with a showcase of all HTML5 powers.

This is 100% possible without the use of Flash. There are some examples out there of multi-state forms in JavaScript using jQuery that you can look toward for guidance. Two that spring to mind are Living Social and Groupon, they do this but with much less flair as the example you've given.

The key things here are:

1. You are responsible for updating the UI in each part of the form
2. All values go into hidden input fields until the form is completed
3. You are not limited in animation or transition, this can be treated like any other ODM experience
4. Validation should hapen at each state in the form to keep the user from needing to backtrack to fix an error
5. Make use of CSS sprites as you don't want the user to have to wait for images to load

Good luck with your form and feel free to ask any other questions needed to get it done.

As everyone is saying, you can definatly do this with jquery.

I would make most of the animations with simple gifs (like those little shiny sparkles can each be a .gif image).

The hover over effects are pretty easy, you could go as simple as replacing the picture with .hover() function in jquery.

AFAIK The only thing that really can't be done in jQuery is big animations (bigger than what a .gif could hold), having full videos would require a play button using HTML5 (I think) or flash.

it is fairly simple to make this with some css and jquery to switch classes for both the preview image and the form contents.

simply render all wizard steps like hidden divs, and when the user clicks "continue" show the next container in line and hide the previous

in each of the form steps when user clicks on an item, simply add a class to the preview image or replace the src attribute of an image

i would make several images placed one above the other (position absolute) like layers and depending of the user makes in the current step update the appropriate "layer"

the image that loads should be a transparent png of course with a proper z-index.

You might want to look at the HTML5 canvas elements and one of the jQuery plugins that help with canvases like the aptly named canvas.

Here is a sample site that does what you want and more...

http://custom.case-mate.com/imakemycase/

It is based on javascript with the casalab (and possibly jQuery) library.

However such websites admit tingly, is much much harder to create in javascript then flash. As you are require to do most of your graphical creation and editing by code. Which unless you are very code inclined (which i guess many here are, haha). This is an extreamly difficult process. The GUI in flash makes it a much more, drag, drop, link process. For the simple stuff.

Wijmo makes a jquery component exaclty for this purpose:

Wijmo Wizard

It is easy to use and if you know jquery you know wijmo =D

Go for HTML5 and CSS3. If you want compatibility for older browsers (ie7) fall back on modernizer and then use js, otherwise there is nothing here that can't be done with css3 an html5. Here is just one of many examples I found

http://www.romancortes.com/blog/pure-css-coke-can/

Of course it can! Actually canvas element should be enough (see tutorial and some demo). I see nothing there that would require Flash :)

It can be done and the code would not be too difficult to implement if you have basic programming skills.

All you need to do is to adapt the code you find here:

1. http://plugins.jquery.com/project/SmartWizard for the steps of the wizard
2. http://www.sohtanaka.com/web-design/examples/image-rotator/ for the thumbnails/image/text that need to be displayed when the user makes a choice.

The two links contain all of the code you need to implement a site that looks similar to the one you linked and some instructions too.

Regards, A.