jQuery Mobile -App Google Forms

index.html

<!-- Start of second page -->
<div data-role="page" id="second-page">
	<div id="myheader" data-role="header" data-position="fixed" data-theme="a">
		<a data-icon="bars" class="ui-btn-left" href="#mypanel">Menu</a>
		<a data-icon="audio" class="ui-btn-right" href="#">Audio</a>
		<h1>How's the weather?</h1>
	</div>
	<!-- /header -->

	<div role="main" class="ui-content">
		<div id="sun">
			<div id="cloud1" class="cloud">
				<img src="http://jorgecardoso.eu/teaching/ldm-media/clouds/c8.png" />
			</div>
			<div id="cloud2" class="cloud">
			<img src="http://jorgecardoso.eu/teaching/ldm-media/clouds/c2.png" />
			</div>
			<div id="cloud3" class="cloud">
			<img src="http://jorgecardoso.eu/teaching/ldm-media/clouds/c3.png" />
			</div>
			<div id="cloud4" class="cloud">
			<img src="http://jorgecardoso.eu/teaching/ldm-media/clouds/c4.png" />
			</div>
			<div class="cloud">
			<img src="http://jorgecardoso.eu/teaching/ldm-media/clouds/c5.png" />
			</div>
			<div class="cloud">
			<img src="http://jorgecardoso.eu/teaching/ldm-media/clouds/c6.png" />
			</div>
		</div>
		
	</div>
	<!-- /content -->


	<div data-role="footer" data-position="fixed" data-theme="a" data-tap-toggle="false">
		<input type="range" name="slider-1" id="slider-1" value="0" min="0" max="100">
	</div>
	<!-- /footer -->
</div>
<!-- /page -->

<!-- Start of first page -->
<div data-role="page" id="first-page">
	<div id="myheader" data-role="header" data-position="fixed" data-theme="a">
		<a data-icon="bars" class="ui-btn-left" href="#mypanel">Menu</a>
		<a data-icon="audio" class="ui-btn-right" href="#">Audio</a>
		<h1>First page (this header is fixed)</h1>
	</div>
	<!-- /header -->

	<div role="main" class="ui-content">
		<iframe src="https://docs.google.com/forms/d/1VR6Annw7qUWe29Nnb365CYDXyq3UBb1p0kXPl09GyTU/viewform?embedded=true" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
	</div>
	<!-- /content -->


</div>
<!-- /page -->


<!-- Start of third page -->
<div data-role="page" id="third-page">
	<div role="main" class="ui-content">
		<p>I'm the third in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
		<p><a href="#first-page">Back to First</a></p>
		<p><a href="#second-page">Back to Second</a></p>
	</div>
	<!-- /content -->
</div>
<!-- /page -->

<div data-role="panel" id="mypanel" data-display="push" data-theme="a">
	<!-- panel content goes here -->
	<h3>I'm a panel</h3>
	<ul data-role="listview">
		<li><a href="#first-page">Page 1</a></li>
		<li><a href="#second-page">Page 2</a></li>
		<li><a href="#third-page">Page 3</a></li>
	</ul>
</div>
<!-- /panel -->

jQuery Mobile -App Google Forms.markdown

jQuery Mobile -App Google Forms

A Pen by Jorge C. S. Cardoso on CodePen.

License.

script.js

console.clear();

$(function() {
	$("[data-role='header'], [data-role='footer']").toolbar();

	var $clouds = $(".cloud");
	
	// set the moving direction arbitrarily
	$clouds.each(function() {
		$(this).attr("data-direction", (Math.random() > 0.5 ? "1" : "-1"));
		$(this).attr("data-scale", (Math.random()*5+1));
	});

	$("#slider-1").on("change", function(ev) {
		console.log(this.value);
		var val = this.value;
		$clouds.each(function() {
			$this = $(this);
			var dir = parseInt($this.data("direction"));
			var scale = parseInt($this.data("scale"));
			var translate = 50 + parseInt(val)*dir*scale;
			console.log("dir: " + dir + " value: " + translate);
			$this.css("left", translate+"%");
		});
	});
	
	$("#mypanel").panel().enhanceWithin();

	/*$("#mypanel a").on("click", function(ev) {
		$("#myheader h1").text($(this).text());
	});
	*/

	$(":mobile-pagecontainer").on("pagecontainershow", function(event, ui) {

		switch (ui.toPage.attr("id")) {
			case "first-page":
				$("#myheader h1").text("First page");
				break;
			case "second-page":
				$("#myheader h1").text("Second page");
				break;
			case "third-page":
				$("#myheader h1").text("Third page");
				break;
		}

	});
});

scripts

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>

style.css

html,
body {
	height: 100%;
}

iframe {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
}

#first-page .ui-content {
	/* specify page */
	position: absolute;
	top: 0px;
	right: 0;
	bottom: 0px;
	left: 0;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}

#second-page {
	height:100%;
}
#second-page .ui-panel-wrapper{
	height:100%;
}
#second-page .ui-content{
	height:100%;
	background: #87e0fd;
	background: radial-gradient(ellipse at center, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
	
}

#sun {
	background: url(http://jorgecardoso.eu/teaching/ldm-media/sun/Sun-02-Smile.svg) center no-repeat;
	background-size: 150px 150px;
	height:100%;
}

#sun div {
	
	position:absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%) scale(1.2, 1.7);
}

styles

<link href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" rel="stylesheet" />