Sliding a div across to left and the next div appears_问答_开发者

I have this form Im creating and when you click on the "Next" button I want to slide the next form() across to the left this is my function

jQuery('input[name^=Next]').click(function () {
     current.animate({ marginLeft: -current.width() }, 750);
     current = current.next();
});

That function isn't working the way I want to. it slides the text in the container across not the whole container it could be a css problem for all I know. And my form which has a class name .wikiform doesn't center horizontally. here is my full code. I'm not that experience in javascript so you would be appreciated. cut and paste and try it out

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.4.js"></script>
<script type="text/javascript" language="javascript" src="Scripts/jquery-easing.1.2.pack.js"></script>    <script type="text/javascript" language="javascript">

    (function ($) {
        $.fn.WikiForm = function (options) {

            this.Mode = options.mode || 'CancelOk' || 'Ok' || 'Wizard';
            var current = jQuery('.wikiform .view :first');
            function positionForm() {
                //jQuery('.wikiform').css( {'top':
                jQuery('body')
                    .css('overflow-y', 'hidden');
                jQuery('<div id="overlay"></div>')
                    .insertBefore('.wikiform')
                    .css('top', jQuery(document).scrollTop())
                    .animate({ 'opacity': '0.8' }, 'slow');
                jQuery('.wikiform')
                    .css('height', jQuery('.wikiform .wizard .view:first').height() + jQuery('.wikiform .navigation').height())
                    .css('top', window.screen.availHeight / 2 - jQuery('.wikiform').height() / 2)
                    .css('width', jQuery('.wikiform .wizard .view:first').width())
                    .css('left', -jQuery('.wikiform').width())
                    .animate({ marginLeft: jQuery(document).width() / 2 + jQuery('.wikiform').width() / 2 }, 750);
                jQuery('.wikiform .wizard')
                    .css('overflow', 'hidden')
                    .css('height', jQuery('.wikiform .wizard .view:first').height() );

            }
            if (this.Mode == "Wizard") {
                return this.each(function () {

                    var current = jQuery('.wizard .view :first');
                    var form = jQuery(this);

                    positionForm();

                    jQuery('input[name^=Next]').click(function () {
                        current.animate({ marginLeft: -current.width() }, 750);
                        current = current.next();
                    });
                    jQuery('input[name^=Back]').click(function () {
                        alert("Back");
                    });

                });
            } else if (this.Mode == "CancelOk") {
                return this.each(function () {

                });
            } else {
                return this.each(function () {

                });
            }
        };
    })(jQuery);

    $(document).ready(function () {
        jQuery(window).bind("load", function () {
            jQuery(".wikiform").WikiForm({ mode: 'Wizard', speed:750, ease:"expoinout" });
        });
    });
</script>
<style type="text/css">
    body 
    {
        margin:0px;
    }
    #overlay 
    {
        background-color:Black; position:absolute; top:0; left:0; height:100%; width:100%;
    }
    .wikiform 
    开发者_如何学JAVA{            
        background-color:Green; position:absolute;
    }
    .wikiform .wizard
    {
        clear: both;
    }
    .wizard
    {
        position: relative;
    left: 0; top: 0;
    width: 100%;
    list-style-type: none;

    }
    .wizard .view
    {            
        float:left;
    }
    .view .form
    {

    }        
    .navigation 
    {
        float:right; clear:left
    }
    #view1 
    {
        background-color:Aqua;
        width:300px;
        height:300px;

    }
    #view2
    {
        background-color:Fuchsia;
        width:300px;
        height:300px;           
    }
</style>
<title></title>
</head>
<body><form action="" method=""><div id="layout">
    <div id="header">
        Header
    </div>
    <div id="content" style="height:2000px">
        Content
    </div>
    <div id="footer">
        Footer
    </div>
</div>
<div id="formView1" class="wikiform">
    <div class="wizard">    
        <div id="view1" class="view">
            <div class="form">
                Content 1
            </div>        
        </div>
        <div id="view2" class="view">
            <div class="form">
                Content 2
            </div>        
        </div>             
    </div>
    <div class="navigation">
        <input type="button" name="Back" value=" Back " />
        <input type="button" name="Next " class="Next" value=" Next " />
        <input type="button" name="Cancel" value="Cancel" />
    </div>   
</div></form></body></html>

Try changing this line:

var current = jQuery('.wizard .view :first');

(which was selecting the form element directly under 'view')

to this:

var current = jQuery('.wizard .view:first');
// The first element with a class of 'view' under an element with a class of
// 'wizard'

Update, due to comments below:

To make a simple scrolling widget, you need the following:

An outer <div> with a fixed width and height
An inner <div> with a fixed height and a very long width.
Code to change the left offset of the inner <div>.

You can see a simple example of a widget like this here: http://jsfiddle.net/andrewwhitaker/feJxu/

For the OP's specific problem, I've modified the code that assigns CSS properties to look like this:

    $('.wikiform')
        .css('height', $('.wikiform .wizard .view:first').height() + $('.wikiform .navigation').height())
        .css('top', window.screen.availHeight / 2 - $('.wikiform').height() / 2)
        .css('width', $('.wikiform .wizard .view:first').width())
        .css('left', -$('.wikiform').width())
        .css('overflow', 'hidden') // ADDED
        .animate({marginLeft: $(document).width() / 2 + $('.wikiform').width() / 2
        }, 750);

        $('.wikiform .wizard')
            .css('width', '10000px') // ADDED.  May need to be longer depending on content.
            .css('height', $('.wikiform .wizard .view:first').height());

I've also changed the animation that 'next' does:

$('input[name^=Next]').click(function() {
    $(".wizard").animate({
        left: "-=" + current.width() + "px"
    }, 750);
}); // Similar logic for 'back'

What this is doing is basically altering the left offset of the view with a huge width (.wizard) and scrolling a new form into the view with a fixed width and height (.wikiform). See a working sample here: http://jsfiddle.net/andrewwhitaker/J9L8s/