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>
