Skip to content

Addition of flexible body.content container #78

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Addition of flexible body.content container #78

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b17e068
Addition of flexible body.content container
Jul 18, 2014
bb5332c
Addition of flexible body.content container
Jul 18, 2014
7c65e7f
Addition of flexible body.content container
Jul 18, 2014
d672172
Unified steps.js container height animation speed
Jul 21, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion build/jquery.steps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1011,6 +1011,12 @@ function render(wizard, options, state)

refreshStepNavigation(wizard, options, state);
renderPagination(wizard, options, state);

// Set the initial and min height of body content
var initialHeight = wizard.find(".body.current").outerHeight(true),
minHeight = wizard.find(".steps ul[role='tablist']").height();
if (orientation) wizard.find(".content").css("min-height", minHeight + "px");
wizard.find(".content").css("height", initialHeight + "px");
}

/**
Expand Down Expand Up @@ -1218,13 +1224,15 @@ function startTransitionEffect(wizard, options, state, index, oldIndex)

case transitionEffect.slideLeft:
var outerWidth = currentStep.outerWidth(true),
outerHeight = newStep.outerHeight(false),
posFadeOut = (index > oldIndex) ? -(outerWidth) : outerWidth,
posFadeIn = (index > oldIndex) ? outerWidth : -(outerWidth);

currentStep.animate({ left: posFadeOut }, effectSpeed,
function () { $(this)._showAria(false); }).promise();
newStep.css("left", posFadeIn + "px")._showAria()
.animate({ left: 0 }, effectSpeed).promise();
currentStep.parent().animate({"height": outerHeight+"px"},options.transitionEffectSpeed);
break;

default:
Expand Down Expand Up @@ -2012,4 +2020,4 @@ var defaults = $.fn.steps.defaults = {
loading: "Loading ..."
}
};
})(jQuery);
})(jQuery);
6 changes: 3 additions & 3 deletions demo/css/jquery.steps.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@
background: #eee;
display: block;
margin: 0.5em;
min-height: 35em;
/*min-height: 35em;*/
overflow: hidden;
position: relative;
width: auto;
Expand All @@ -165,7 +165,7 @@
float: left;
position: absolute;
width: 95%;
height: 95%;
/*height: 95%;*/
padding: 2.5%;
}

Expand Down Expand Up @@ -379,4 +379,4 @@
.tabcontrol > .content > .body ul > li
{
display: list-item;
}
}
56 changes: 25 additions & 31 deletions demo/vertical.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,37 +50,31 @@ <h1>Basic Demo</h1>

<div id="wizard">
<h2>First Step</h2>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut nulla nunc. Maecenas arcu sem, hendrerit a tempor quis,
sagittis accumsan tellus. In hac habitasse platea dictumst. Donec a semper dui. Nunc eget quam libero. Nam at felis metus.
Nam tellus dolor, tristique ac tempus nec, iaculis quis nisi.</p>
</section>

<h2>Second Step</h2>
<section>
<p>Donec mi sapien, hendrerit nec egestas a, rutrum vitae dolor. Nullam venenatis diam ac ligula elementum pellentesque.
In lobortis sollicitudin felis non eleifend. Morbi tristique tellus est, sed tempor elit. Morbi varius, nulla quis condimentum
dictum, nisi elit condimentum magna, nec venenatis urna quam in nisi. Integer hendrerit sapien a diam adipiscing consectetur.
In euismod augue ullamcorper leo dignissim quis elementum arcu porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum leo velit, blandit ac tempor nec, ultrices id diam. Donec metus lacus, rhoncus sagittis iaculis nec, malesuada a diam.
Donec non pulvinar urna. Aliquam id velit lacus.</p>
</section>

<h2>Third Step</h2>
<section>
<p>Morbi ornare tellus at elit ultrices id dignissim lorem elementum. Sed eget nisl at justo condimentum dapibus. Fusce eros justo,
pellentesque non euismod ac, rutrum sed quam. Ut non mi tortor. Vestibulum eleifend varius ullamcorper. Aliquam erat volutpat.
Donec diam massa, porta vel dictum sit amet, iaculis ac massa. Sed elementum dui commodo lectus sollicitudin in auctor mauris
venenatis.</p>
</section>

<h2>Forth Step</h2>
<section>
<p>Quisque at sem turpis, id sagittis diam. Suspendisse malesuada eros posuere mauris vehicula vulputate. Aliquam sed sem tortor.
Quisque sed felis ut mauris feugiat iaculis nec ac lectus. Sed consequat vestibulum purus, imperdiet varius est pellentesque vitae.
Suspendisse consequat cursus eros, vitae tempus enim euismod non. Nullam ut commodo tortor.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in elementum augue. Donec quis nisi dignissim, adipiscing justo in, ultricies lacus. Pellentesque varius ullamcorper nibh, quis mattis massa fermentum in. Phasellus sed turpis in magna interdum adipiscing. Morbi ac commodo nisl. Duis eu nisi a sem pretium tristique vel sed mi. Etiam ut dui sem. Mauris tristique a nisi sit amet varius. Aenean pharetra tellus ac libero tempor vestibulum. Morbi consectetur velit vitae orci congue, facilisis ornare tortor mattis. Nam enim erat, ornare nec eros in, cursus facilisis velit. Sed commodo, justo eget vehicula viverra, risus lorem consequat lorem, sed vulputate purus purus in tortor. Donec ac interdum leo. Proin porttitor dignissim odio, id pellentesque mauris placerat vulputate. In vulputate tempor elementum. Suspendisse aliquam pharetra lorem, id blandit elit suscipit nec.</p>
<p>In cursus laoreet nibh sed molestie. Proin felis nunc, semper ut luctus ut, dapibus at velit. Duis rutrum laoreet nunc sagittis fringilla. Nulla dolor ipsum, tincidunt vel laoreet eget, convallis nec leo. Donec hendrerit nisl at sodales dictum. Curabitur eu purus a urna ullamcorper elementum ac ac lorem. Suspendisse potenti. Proin tellus eros, mattis ut laoreet id, dapibus non lorem. Suspendisse dui nisi, consectetur porttitor rhoncus varius, rhoncus in mauris. Nam non tristique libero.</p>
<p>Vestibulum at ante ac lectus luctus facilisis at vitae magna. Phasellus auctor malesuada nisl mollis mattis. Nullam id porta dui. Praesent ac odio quis sapien hendrerit pellentesque a ac nisl. Aenean volutpat sapien purus, vel molestie est aliquet eget. Donec aliquam volutpat posuere. Praesent id lorem nisl. Cras ac scelerisque libero. Quisque sed tellus sagittis augue pharetra facilisis ut sit amet lectus. Cras non ante posuere, sagittis felis sit amet, eleifend odio.</p>
<p>Morbi libero tellus, vulputate quis nulla vel, ultrices pulvinar ante. Donec tristique sapien vitae consectetur luctus. Quisque rutrum ligula nulla, eget convallis est vulputate id. Curabitur porta ante a lacus egestas, vel elementum lectus suscipit. Maecenas sit amet turpis dictum, dapibus tellus ut, tempor quam. Vestibulum semper magna vel massa consequat faucibus et a ipsum. Pellentesque eget lacus ut magna venenatis molestie quis mollis libero. Donec vitae eleifend eros. Quisque dui nisl, scelerisque a volutpat ut, dignissim vitae sapien. Duis at vulputate odio. Duis condimentum velit erat, sed malesuada eros hendrerit eu. Proin sollicitudin a quam non eleifend. Donec molestie purus tincidunt, rhoncus justo quis, pharetra tellus. Nam in luctus augue.</p>
</section>

<h2>Second Step</h2>
<section>
<p>Donec mi sapien, hendrerit nec egestas a, rutrum vitae dolor. Nullam venenatis diam ac ligula elementum pellentesque. In lobortis sollicitudin felis non eleifend. Morbi tristique tellus est, sed tempor elit. Morbi varius, nulla quis condimentum dictum, nisi elit condimentum magna, nec venenatis urna quam in nisi. Integer hendrerit sapien a diam adipiscing consectetur. In euismod augue ullamcorper leo dignissim quis elementum arcu porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum leo velit, blandit ac tempor nec, ultrices id diam. Donec metus lacus, rhoncus sagittis iaculis nec, malesuada a diam. Donec non pulvinar urna. Aliquam id velit lacus.</p>
</section>

<h2>Third Step</h2>
<section>
<p>Morbi ornare tellus at elit ultrices id dignissim lorem elementum. Sed eget nisl at justo condimentum dapibus. Fusce eros justo, pellentesque non euismod ac, rutrum sed quam. Ut non mi tortor. Vestibulum eleifend varius ullamcorper. Aliquam erat volutpat. Donec diam massa, porta vel dictum sit amet, iaculis ac massa. Sed elementum dui commodo lectus sollicitudin in auctor mauris venenatis.</p>
</section>

<h2>Forth Step</h2>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in elementum augue. Donec quis nisi dignissim, adipiscing justo in, ultricies lacus. Pellentesque varius ullamcorper nibh, quis mattis massa fermentum in. Phasellus sed turpis in magna interdum adipiscing. Morbi ac commodo nisl. Duis eu nisi a sem pretium tristique vel sed mi. Etiam ut dui sem. Mauris tristique a nisi sit amet varius. Aenean pharetra tellus ac libero tempor vestibulum. Morbi consectetur velit vitae orci congue, facilisis ornare tortor mattis. Nam enim erat, ornare nec eros in, cursus facilisis velit. Sed commodo, justo eget vehicula viverra, risus lorem consequat lorem, sed vulputate purus purus in tortor. Donec ac interdum leo. Proin porttitor dignissim odio, id pellentesque mauris placerat vulputate. In vulputate tempor elementum. Suspendisse aliquam pharetra lorem, id blandit elit suscipit nec.</p>
<p>In cursus laoreet nibh sed molestie. Proin felis nunc, semper ut luctus ut, dapibus at velit. Duis rutrum laoreet nunc sagittis fringilla. Nulla dolor ipsum, tincidunt vel laoreet eget, convallis nec leo. Donec hendrerit nisl at sodales dictum. Curabitur eu purus a urna ullamcorper elementum ac ac lorem. Suspendisse potenti. Proin tellus eros, mattis ut laoreet id, dapibus non lorem. Suspendisse dui nisi, consectetur porttitor rhoncus varius, rhoncus in mauris. Nam non tristique libero.</p>
<p>Vestibulum at ante ac lectus luctus facilisis at vitae magna. Phasellus auctor malesuada nisl mollis mattis. Nullam id porta dui. Praesent ac odio quis sapien hendrerit pellentesque a ac nisl. Aenean volutpat sapien purus, vel molestie est aliquet eget. Donec aliquam volutpat posuere. Praesent id lorem nisl. Cras ac scelerisque libero. Quisque sed tellus sagittis augue pharetra facilisis ut sit amet lectus. Cras non ante posuere, sagittis felis sit amet, eleifend odio.</p>
<p>Morbi libero tellus, vulputate quis nulla vel, ultrices pulvinar ante. Donec tristique sapien vitae consectetur luctus. Quisque rutrum ligula nulla, eget convallis est vulputate id. Curabitur porta ante a lacus egestas, vel elementum lectus suscipit. Maecenas sit amet turpis dictum, dapibus tellus ut, tempor quam. Vestibulum semper magna vel massa consequat faucibus et a ipsum. Pellentesque eget lacus ut magna venenatis molestie quis mollis libero. Donec vitae eleifend eros. Quisque dui nisl, scelerisque a volutpat ut, dignissim vitae sapien. Duis at vulputate odio. Duis condimentum velit erat, sed malesuada eros hendrerit eu. Proin sollicitudin a quam non eleifend. Donec molestie purus tincidunt, rhoncus justo quis, pharetra tellus. Nam in luctus augue.</p>
</section>
</div>
</div>
</body>
</html>
</html>