Lost Password
Create an Account

Your username must be unique, and cannot be changed later.

We use your email address to email you a secure password and verify your account.

Mixing Asyncpanel and scroller component

Home › Forums › Getting started › Mixing Asyncpanel and scroller component

This topic has 2 voices, contains 1 reply, and was last updated by  sylvain 388 days ago.

Viewing 2 posts - 1 through 2 (of 2 total)
April 27, 2012 at 4:04 am #link

keyclipse

I have tried implementing airplane webapp with scroller capability at the next page… But so far I havent found any success. This is the index.html code

<!DOCTYPE HTML>
<html>
	<head>
		<title>Wink - webapp</title>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

		<link rel="stylesheet" href="./wink/_themes/wink.css" type="text/css">
		<link rel="stylesheet" href="./wink/ui/layout/slidingpanels/css/slidingpanels.css" type="text/css">
		<link rel="stylesheet" href="./wink/ui/xy/spinner/css/spinner.css" type="text/css">
		<link rel="stylesheet" href="./wink/plugins/asyncpanels/css/asyncpanels.css" type="text/css">

		<link rel="stylesheet" href="./css/custom.css" type="text/css">

		<script type="text/javascript" src="./wink/wink.min.js"></script>

		<script type="text/javascript" src="./wink/ui/layout/slidingpanels/js/slidingpanels.js"></script>
		<script type="text/javascript" src="./wink/ui/xy/spinner/js/spinner.js"></script>
		<script type="text/javascript" src="./wink/plugins/asyncpanels/js/asyncpanels.js"></script>

		<script type="text/javascript" src="./wink/ux/window/js/window.js"></script>
		<script type="text/javascript" src="./wink/ux/movementtracker/js/movementtracker.js"></script>
		<script type="text/javascript" src="./wink/ux/inertia/js/inertia.js"></script>
		<script type="text/javascript" src="./wink/ui/layout/scroller/js/scroller.js"></script>

		<script type="text/javascript" src="./js/main.js"></script>

	</head>

	<body>
		<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>
				</ul>
			</div>
		</div>

		<div id="page2">
		<div id="wrapper">
			<div id="scrollContent">
				<ul class="w_list w_border">
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
					<li>Lorem Ipsum askjhdkj aslkdjkasd alshdjhas lkajsd akjshdkjhasd </li>
				</ul>
			</div>
		</div>
		</div>
		<div id="page3">

		</div>

	</body>
</html>

The css code snippet

...
	#wrapper {
		/*
		position: relative;
		z-index: 1;

		overflow: hidden;
		*/
		width: 400px;
	}

	#scrollContent {
		/*
		position: relative;
		*/

	}

	#scrollContent .w_list {
		margin: 0;
	}

And the main.js code snippet

...
		init: function()
		{

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

			document.body.appendChild(this.panels.getDomNode());

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

			var headerHeight = 55;
			var heightRemains = wink.ux.window.height - headerHeight;
			$('wrapper').style.height = heightRemains + "px";

			var properties =
				{
					target: "scrollContent",
					direction: "y"
				};

			var scroller = new wink.ui.layout.Scroller(properties);

			scrollTo(0, 0, 0);

		},
...

Can anyone advise what is wrong? since the scroller does not appear at all

  • This reply was modified 391 days ago by  keyclipse.
April 30, 2012 at 9:15 am #link

sylvain

Hi,

Look at this :
http://www.winktoolkit.org/discussion/topic/header-footer-hide#post-1389
http://www.winktoolkit.org/discussion/topic/how-slide-between-pages-with-persistent-header-and-footer#post-852

Sylvain

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.