StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Well you've pretty much outlined for yourself what you need to do so I'll provide an <code>untested</code> outline for how to get something like that working.</p> <pre><code> function animateInDone () { // do something here } function foldReady () { // fold has been scaled for this content let's show it on screen $('#contentBox').animate( {'left':'100px'}, 400, 'swing', complete: animateInDone ); } function contentLoadDone (responseText, textStatus, XMLHTTPStatus) { // new content loaded and displayed on div since we used .load() if (textStatus == 'success') { // change the fold size $('#fold').animate( {height:'350px'}, // or the new height of the contentBox or something else // this can also be {height:'+50px'} 400, 'swing', foldReady ); } else { // handle errors } } function animateOutDone () { // load the new content by using .load or .ajax $('#contentBox').load( 'newcontent.html', complete:contentLoadDone ); } function contentChange () { // animate the content box out $('#contentBox').animate( {'left':window.innerWidth}, 400, 'swing', complete: animateOutDone ); } </code></pre> <p>I'm not sure about the exact syntax for <code>.animate</code> call but you'll be able to figure all the possible options for it from the related docs</p> <ul> <li><a href="http://api.jquery.com/animate/" rel="nofollow">http://api.jquery.com/animate/</a></li> <li><a href="http://api.jquery.com/load/" rel="nofollow">http://api.jquery.com/load/</a></li> <li><a href="http://api.jquery.com/ajax/" rel="nofollow">http://api.jquery.com/ajax/</a></li> </ul> <p>Addition to EDIT 2: You'll need to store the state of the UI some where. This can be as simple as having a variable that just stores the name of the current page, or you could have a class hierarchy where each page has their own class with a different UI in/out animation.</p> <pre><code>var pageHome = function () { this.animIn = function () { // animate home page in } this.animOut = function (newpage) { // animate home page out and set newpage.animIn as the callback for when the animation in done } } var pageNow = pageHome; pageNow.animIn(); </code></pre> <p>I personally love having function objects.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload