discussion

Hi,

Well, I made you a picture it will be easier

So you have a wrapper which will contain both the options panel (the one that’s is revealed when you click on the top left button) and the “container” which will itself contain 2 pages (the one containing the list of components and the one where we will display the test pages).

The wrapper is 100% of the page width and 100% of the page height and it must have an hidden overflow (to prevent you from seing the right side of the “container”).

The options panel is in a relative position and must stick to the left of the wrapper. It will only be your page width-81px

The “container” must be 200% of you wrapper width. It will be in absolute position (top: 0 and left: 0) so it covers the options panel.

Now you’ll just have to translate the “container”, all other parts remain in place.

if you want to display the options panel:

 wink.fx.applyTranslate(wink.byId('container'), window.innerWidth - 81, 0);

if you want to display “page 1″ of the “container:

 wink.fx.applyTranslate(wink.byId('container'), 0, 0);

if you want to display “page 2″ of the “container:

 wink.fx.applyTranslate(wink.byId('container'), -window.innerWidth, 0);

Of course, you’ll also have to add transitions on the container first so that it moves with a slide effect. What we do here, is that we apply an “ease-in-out” translation when we open or close the options panel and we apply a “linear” translation when we move from “page1″ to “page2″

For instance:

wink.fx.apply(wink.byId('container'), {'transition-timing-function': 'ease-in-out'});

You’ll find those various piece of code in “options.js”, “list.js” and “test.js”.

I hope it will help you understand the kitchensink layout

Jérôme

Hi Jerome I would am trying to implement this “option” capability in your example web app. However I do not succeed in applying your asyncpanels in the wrapper div.

can you kindly advise me what is happening?

• This reply was modified 392 days ago by  keyclipse.
• This reply was modified 392 days ago by  keyclipse.
• This reply was modified 392 days ago by  admin.

Hi,

Well, I would do something like this:

The HTML template:

<div id="wrapper" class="wrapper">
	<div id="options">
		options
		<li class="w_list_item w_border_bottom">
			<a href="#" onclick="main.closeOptions()">
				close options
				<span class="w_icon w_chevron"></span>
			</a>
		</li>
	</div>
	<div id="container">
		<div class="w_header_custom">
			<div id="back" class="w_button_custom w_back w_left">
				<input type="button" value="back" onclick="main.panels.slideBack();"/>
			</div>
			<span>wink airlines</span>
		</div>
		<div id="page1">
			<div>
				<ul class="w_list w_border">
					<li class="w_list_item w_border_bottom">
						<a href="#" onclick="main.panels.slideTo('page2')">
							presentation
							<span class="w_icon w_chevron"></span>
						</a>
					</li>
					<li class="w_list_item w_border_bottom">
						<a href="#" onclick="main.panels.slideTo('page3')">
							contact
							<span class="w_icon w_chevron"></span>
						</a>
					</li>
					<li class="w_list_item w_border_bottom">
						<a href="#" onclick="main.openOptions()">
							options
							<span class="w_icon w_chevron"></span>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<div id="page2">
			<!-- presentation content -->
		</div>
		<div id="page3">
			<!-- contact form -->
		</div>
	</div>
</div>

the new styles:

#options
{
	position: relative;

	height: 100%;
	width: 100%;
}

#container
{
	position: absolute;

	left: 0;
	top: 0;

	background: #fff;

	height: 100%;
	width: 100%;
}

And the new JS code:

var main =
	{
		panels: null,

		init: function()
		{
			this.panels = new wink.plugins.AsyncPanels
			(
				{
					duration: 500,
					pages:
					[
					 	'page1',
					 	{id: 'page2', url: './presentation.html'},
					 	{id: 'page3', url: './contact.html'}
					 ]
				}
			);

			wink.byId('container').appendChild(this.panels.getDomNode());
			wink.fx.applyTransformTransition(wink.byId('container'), '400ms');

			wink.subscribe('/slidingpanels/events/slidestart', {context: this, method: 'toggleBackButtonDisplay', arguments: 'start'});
			wink.subscribe('/slidingpanels/events/slideend', {context: this, method: 'toggleBackButtonDisplay', arguments: 'end'});

			scrollTo(0, 0, 0);
		},

		openOptions: function()
		{
			wink.fx.applyTranslate(wink.byId('container'), window.innerWidth - 81, 0);
		},

		closeOptions: function()
		{
			wink.fx.applyTranslate(wink.byId('container'), 0, 0);
		},
...
}

Jérôme

• This reply was modified 392 days ago by  admin.

Thanks Jerome,

This is a really great help. Just what i needed…