Smooth sliding from first div to third

Question

4.00/5 (2 votes)

See more:

Hi,

I think I lack the terminology to find the answer I'm looking for.

I have a 'wizard' like process with 4 steps. Sliding from step 1 to 2, 2 to 3 and 3 to 4 is smooth as well as going back a single step.

Step 2 is optional. The user can click on step 3 from step 1. My transaction will then slide right across step 2. I want to avoid this. If the user slides from step 1 to 3 then it should look like step 1 disappears left and page three appears right as if there was no stage 2. They same if they want to navigate back and review any step from any other.

Is there an easy way to do this or do I have to play with changing page width to zero? Can I instead construct the navigation as and when it is required and just add the pages to the left or right of the current page?

Any advise would be helpful
Thanks
Andy

Edit fiddle - JSFiddle[^]

What I have tried:

Each step is numbered. Here is the simple transition function I use:

JavaScript

var navigate = function (step) {

    var margin = step * -100;

    wizard.animate({ marginLeft: margin + "%" }, { duration: 600, easing: "easeInSine", complete: function () { } });

}

here is a jsFiddle mock up pf the problem
Edit fiddle - JSFiddle[^]

Posted 9-May-16 5:40am

Andy Lanng

Updated 12-May-16 8:54am

v2

Add a Solution

Comments

Richard Deeming 9-May-16 13:44pm

What does the HTML markup and CSS look like? Can you create a simplified demo of the problem in JSFiddle[^]?

Andy Lanng 10-May-16 5:13am

Done ^_^
Edit fiddle - JSFiddle[^]

Shridhar rathi 9-May-16 17:39pm

I would create single page application and then use the "id"s on "div"s to separate the sections. For hidding and showing, I would just use show and hide methods. To have the effect of enabling/disabling the tabs/buttons I would use css classes and have like primary-btn, secondary-btn, etc which would be added or removed when user clicks/completes the section

Andy Lanng 10-May-16 5:13am

The animation is a requirement :S

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2016-05-12T08:54:00

There might be a cleaner way to do this, but this seems to work: Edit fiddle - JSFiddle[^]

Change the styles:

CSS

.page-holder {
  position: relative;
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translate(0, 0);
}
.page.animate {
  transition: transform 0.6s ease-in;
}
.page.left {
  transform: translate(-100%, 0);
}
.page.right {
  transform: translate(100%, 0);
}

Add the class right to all pages except the first:

JavaScript

container.find('.page:not(:first-child)').addClass('right');

Or you could do this in the markup.

Set the height for the page-holder, since I can't find a way in CSS to make it encompass absolutely-positioned children:

JavaScript

var maxHeight = 0;
var container = $('.page-holder');

container.find('.page').each(function(){ 
  maxHeight = Math.max(maxHeight, $(this).height()); 
});

container.height(maxHeight);

Change the else block in the currentPageIndex change watcher:

JavaScript

else {
  var allPages = container.find('.page').removeClass('animate left right');

  // The previous page needs to animate:
  allPages.eq(oldVal).addClass('animate');
  
  // As does the new page:
  var newPage = allPages.eq(newVal).addClass('animate');

  // Move all other pages to the correct side:
  newPage.prevAll('.page').addClass('left');
  newPage.nextAll('.page').addClass('right');
}

And now the pages "hop" correctly. :)

Smooth sliding from first div to third

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us