Slide navigation problem multiple div movement
Posted
by
littleMan
on Stack Overflow
See other posts from Stack Overflow
or by littleMan
Published on 2010-12-26T06:45:52Z
Indexed on
2010/12/26
6:54 UTC
Read the original article
Hit count: 255
Filed under:
JavaScript
|jQuery
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>
© Stack Overflow or respective owner
