I have almost figured it out but still doesn't quite work the way i want it to. my problem is this part. It scrolls the first element to the left but the second element just appears and doesn't scroll does anyone know what todo here.
var i = jQuery('.wikiform .wizard .view').size();
jQuery('.wikiform .navigation input[name^=Next]').click(function () {
jQuery('.wikiform .wizard .view').each(function (j) {
jQuery(this).animate({ marginLeft: -(current.next().width() * (i - j)) }, 750);
/*line above Im having problems with ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
current = current.next();
j++;
});
});
my complete code down below test it out and see what Im doing wrong
(function ($) {
$.fn.WikiForm = function (options) {
this.Mode = options.mode || 'CancelOk' || 'Ok' || 'Wizard';
var current = jQuery('.wikiform .view:first');
function positionForm() {
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 () {
positionForm();
//alert(current.next().width());
var i = jQuery('.wikiform .wizard .view').size();
jQuery('.wikiform .navigation input[name^=Next]').click(function () {
jQuery('.wikiform .wizard .view').each(function (j) {
jQuery(this).animate({ marginLeft: -(current.next().width() * (i - j)) }, 750);
current = current.next();
j++;
});
});
jQuery('.wikiform .navigation input[name^=Back]').click(function () {
});
});
} 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" });
});
});
<style type="text/css">
body
{
margin:0px;
}
#overlay
{
background-color:Black; position:absolute; top:0; left:0; height:100%; width:100%;
}
.wikiform
{
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>
