CODEWITHSUNDEEP
jqueryhtml
Dan Temple
Dan Temple

Reputation: 1182

Horizontal sliding content

I have a simple HTML form, with 4 steps. I'd like to show a step at a time, with a next button, that when clicked would slide the content horizontally to show the next step.

The only place I've been able to find a similar example is on the homepage of http://www.maritalaffair.co.uk/ <- The Join Now for free box.

I have the basic HTML setup, I'm just not sure how best to implement the jQuery

<form action="#" method="post">
    <div id="fstep_1">
        <p>THIS IS STEP 1</p>
    </div>
    <div id="fstep_2">
        <p>THIS IS STEP 2</p>
    </div>
    <div id="fstep_3">
        <p>This is STEP 3</p>
    </div>
    <div id="fstep_4">
        <p>THIS IS STEP 4</p>
        <input type="submit" value="submit" />
    </div>

    <a href="#">Next</a>
</form>

<div class="steps">
    <span class="fstep_1">1</span>
    <span class="fstep_2">2</span>
    <span class="fstep_3">3</span>
    <span class="fstep_4">4</span>
</div>

http://jsfiddle.net/sAwam/

Upvotes: 0

Views: 4170

Answers (2)

SarathSprakash
SarathSprakash

Reputation: 4624

Working DEMO

Try this

code

  var viewed;
$('.steps a').click(function () {
    viewed = $('.selected');
    if (viewed.attr('id') != 'fstep_4') {
        $('.' + viewed.attr('id')).css('color', 'black');
        viewed.removeClass('selected').animate({
            left: '150%',
        }, 400);
        viewed.next().addClass('selected').animate({
            left: '50%',
        }, 400);
        $('.' + viewed.next().attr('id')).css('color', 'red');
    }

});
$('.steps span').click(function () {

    viewed = $('.selected');
   if (viewed.attr('id').toString() != $(this).attr('class').toString()) {
        $('.' + viewed.attr('id')).css('color', 'black');
        viewed.removeClass('selected').animate({
            left: '150%'
        }, 400);
        $("#" + $(this).attr('class')).addClass('selected').animate({
            left: '50%'
        }, 400);
        $(this).css('color', 'red');
    }
});

html

<div class="container">
    <form action="#" method="post">
        <div id="fstep_1" class="box box1 selected">
            <p>THIS IS STEP 1</p>
        </div>
        <div id="fstep_2" class="box box2">
            <p>THIS IS STEP 2</p>
        </div>
        <div id="fstep_3" class=" box box3">
            <p>This is STEP 3</p>
        </div>
        <div id="fstep_4" class="box box4">
            <p>THIS IS STEP 4</p>
            <input type="submit" value="submit" />
        </div>
    </form>
    <div class="steps"> <a href="#">Next</a>
 <span class="fstep_1">1</span>
 <span class="fstep_2">2</span>
 <span class="fstep_3">3</span>
 <span class="fstep_4">4</span>

    </div>
</div>

css

body {
    padding: 0px;
}
.container {
    position: absolute;
    margin: 0px;
    padding: 0px;
    width: 200px;
    height: 200px;
    left: 40%;
    overflow: hidden;
    cursor: pointer;
}
.container .box {
    position: absolute;
    width: 98%;
    height: 100px;
    text-align: center;
    left: 200%;
    top: 10px;
    margin-left: -50%;
    background: white;
}
#fstep_1 {
    left: 50%;
}
.steps {
    position:fixed;
    top: 150px;
}
.fstep_1 {
    color:red;
}

Upvotes: 1

Thomas Gensou
Thomas Gensou

Reputation: 76

On the steps of your form, it is preferable to use a tab system for cleaner integration.

Here: http://jsfiddle.net/sAwam/6/

I allocation to your div css "display: none;" at the base, and the event I attribution him a class "active" to appear or not the selected step.

With jQuery, we arrive at this result.

Upvotes: 2

Related Questions