HTML sliding form

Question

I have a three-page registration form, which is shared between the three tabs that were created at boot time. I want to move one page to another after checking the current page. Here is what I mean demo . I tried implementing this demo, but the code has changed too much for me. So, here is a demonstration of what I still have: bin . As you can see, the 2nd and 3rd tabs are disabled until the first tab is checked correctly. Having selected the option and clicking continue, I want it to slide into the second tab. I tried something like this:

$(".tab-content div").animate({left: "0px"}, { duration: 350, easing: 'easeInOutCirc' }); 

But that didn't work, so how do I do this?

Answer 1

I worked on jsFiddle at http://jsfiddle.net/technotarek/ymxn4/ .

The revised JS is generally given below. Note that the fiddle contains some new CSS. I also changed the HTML, but besides the # tab-container div, it was all just for the sake of appearance. The solution works with Twitter Bootstrap in the recommended order according to the documentation at http://twitter.github.com/bootstrap/javascript.html#tabs

 var selector; var selectorID; activateTab('#myTab a:first'); function activateTab(selectorID) { $(selectorID).tab('show') .closest('.disabled').removeClass('disabled'); } function deactivateTab(selector) { $(selector).off('click.twbstab') .closest('li').addClass('disabled'); } $('.btn-demo').on('click',function() { selector = '#myTab a[href="'+$(this).data('activate')+'"]'; selectorID = $(selector).attr('href'); }); var val1 = $('#frmtype1').validate( { errorPlacement: function(error, element) {}, // prevent the standard error message from showing, rather you use the inline-text rules: { 'Reg_type': { required: true } } }); // validate 1st form $('#frmtype1').submit(function(e) { // validate the first page if(val1.form()) { $('.help-inline').hide(); activateTab(selector); } else { $('.help-inline').show(); } return false; }); // validate 2nd form $('#frmtype2').submit(function(e) { // validate the second page activateTab(selector); return false; }); // if 2nd or 3rd tab is clicked, validate as if the form was submitted $('#myTab li:eq(1) a, #myTab li:eq(2) a').click(function(e) { selectorID = $(this).attr('href'); // validate the first page if(val1.form()) { $('.help-inline').hide(); activateTab(this); $(selectorID).tab('show'); } else { $('.help-inline').show(); } return false; }); // re-position all tab-panes, except the active pane, so that they are prepared for the slide effect $(".tab-pane").css("position", "relative"); $(".tab-pane").not(".active").animate({ left: "1000px" }); // perform slide effect $('a[data-toggle="tab"]').on('show', function (e) { lastPane = $(e.relatedTarget).attr('href'); $(lastPane).animate({left: "1000px"}, 300) currPane = $(e.target).attr('href'); $(currPane).animate({left: "0px"}, 300); });​ 

The key to making everything work is at the very end of the script (starting with "// re-position ..."). Please note that the reason your source code did not work is partly due to the fact that you did not include the attenuation library used in the demo version (for a comment by forty-two), but also because the code in the demo used to create the effect tabs is fundamentally different from how tabs work in Twitter Bootstrap.

Answer 2

What you had was almost there

The idea is that you place your divs side by side and move them together when you move the tabs.

To make it work, give each of your divs a starting point, for example. 0px, 400px, 800px and position: relative:

  <div class="tab-pane active" id="options" style="left: 0; position: relative;"> <div class="tab-pane" id="information" style="left: 400px; position: relative;"> 

In the slide view, all divs 400px further to the left, animating the left property:

  $(".tab-content div#options").animate({left: "-400px"}, { duration: 350, easing: 'easeInOutCirc' }); $(".tab-content div#information").animate({left: "0px"}, { duration: 350, easing: 'easeInOutCirc' }); 

Note that I changed the selector to target specific divs, not all divs in tab-content.

Here is a link to bin with my changes .

I just made the first two divs, but you should get an idea from this.

Hope this helps.

Answer 3

Take a look at this modified version of your code:

http://jsbin.com/asarek/21/edit

In particular, I added some CSS and JS so that they work closer to your example:

JS:

 var currentPanel = jQuery(this).parent(); $(".tab-content").animate({left: "-"+currentPanel.width()+"px"}, { duration: 350, easing: 'easeInOutCirc' }); 

This code moves the contents of the tab to the left relative to the width of this currentPanel , which in this case is your first form. You will need to determine the width for each of your panels and move their parent container ( .tab-content ) to the left according to where each of them is.

CSS puts all panels on one line (using the inline block). It uses an extra shell that contains tab-content and hides overflow.

CSS

  .tab-wrapper { overflow:hidden; width:500px; } .tab-content { position:relative; white-space:nowrap; overflow:visible; } .tab-content .tab-pane { display:inline-block; } 

What my example does not do is to include the sliding effect in the clicks of the tab. The example you provided allows you to check which link is clicked. You can do this in the same way by checking the selector parameter and moving it to the left according to which panel should be displayed. Let me know if you want me to further illustrate this.

Answer 4

Js bin

I found your problem ...

  $(".tab-content div").css({position: 'absolute'}).animate({left: "-400px"}, 350); 

First, your div needs absolute positioning. Easier to do in CSS.

 .tab-content div {position:absolute;} 

Second using something like

 "-400px" 

will move the div -400px to its original position, where

 "400px" 

will move the div 400px from 0, placing it at + 400px.

Answer 5

Are jQuery UI Slide and Drop effects to suit your needs? They must be configurable (left to right).