How to achieve two multi-step forms, one form on each side using CSS transformation


Tags: jquery,html,css3

Problem :

I am trying to create an object which has one form on one side and another on the other side. On top of that each form has multiple steps.

You can see it in action at https://dl.dropboxusercontent.com/u/2986690/test/test2.html I have managed to get CSS transformation right for first form, but in the second form (which triggers when you click "are you a parking seeker?"), when I click "Next" it doesn't move to next step.

Any idea what I am doing wrong?



Solution :

The problem is that all of your scroll functions refer to the "front" class, but the second form uses the "back" class. For example, here's the scroll_left_4 function:

function scroll_left_4(){
    $(".front>div:eq(0)").stop().animate({"margin-left":"-375px"},220);
}

You'll either need to create equivalent functions for the second form doing something like this:

function scroll_left_4b(){
    $(".back>div:eq(0)").stop().animate({"margin-left":"-375px"},220);
}

Or change the code so that is scrolls both front and back at the same time.


    CSS Howto..

    CSS How to add content under fixed position navbar [closed]

    How can I write the javascript script to modify this css file?

    How to set icon of an page using CSS

    How to hide last divider in list of comments using CSS?

    How can I click a specific li without an id or class?

    How do I link to top of a section on the page minus the height of a fixed nav-bar?

    How to make round corners to both inside of a box and its border?

    How to avoid an hover on a menu item to affect the menu items on the right

    how to save the datas which are get from a newsletter? [closed]

    how to use box-sizing:border-box on a fluid element with no height assigned?

    How to keep css elements from moving during transition

    How can I set the style of a dojo-element?

    How Should I Display This Background Using CSS?

    DropDown Menu won't show for more than a second..not working.

    How can I get these images to stop 'flickering' when they switch?

    how to style a symfony2 form button

    How to create dynamic CSS based on user input

    Get the Navbar to show when hovering over header image

    Jquery/CSS, how to have and access multiple (left) panels, while adjusting main content container automatically

    How to make image previews (thumbnails) using html/css

    How do you create a scrolling window over a still background image with CSS?

    css code how to remove space between div class

    How to change the mouse cursor over an embedded flash?

    I have a CSS file in my App_Themes folder - how can I apply it to my web user control?

    Showing an hidden element with an opacity-animation

    How do I make a line not return?

    How to align div blocks to be aligned in grid?

    How to modify this CSS based Accordion to work with multiple accordions on the same page?

    How to draw a checkmark / tick using CSS?

    How can we retrive style from css by selector without creating element?