v1.0.24

- added demo 8 in examples.
iosscripts · Aug 1, 2012 · cf666f8 · cf666f8
1 parent 6f574d1
commit cf666f8
Show file tree

Hide file tree

Showing 2 changed files with 160 additions and 44 deletions.
diff --git a/_demos/_examples/8-Full-Hieght-Plus-Footer/_css/common.css b/_demos/_examples/8-Full-Hieght-Plus-Footer/_css/common.css
@@ -1,22 +1,44 @@
-html, body, .wrap { 
-	height: 100%;
-	max-height: 100%;
+/* main */
+.main {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 150px;
 }
 
-body > .wrap {
-	height: auto; 
-	min-height: 100%;
+/* footer */
+.footer {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	height: 150px;
+	background: #ddd;
 }
 
-div.main { 
-	padding-bottom: 200px; 
+/* toggle */
+.toggle {
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	width: 80px;
+	height: 80px;
+	border: 2px solid #000;
+	z-index: 2;
+	background: #fff;
 }
 
-.container {
+/* slider 1 */
+.main .slider1Container {
+	position: absolute;
+	top: 0;
+	bottom: 150px;
+	left: 0;
+	right: 0;
 }
 
-/* slider */
-.iosSlider {
+.iosSlider1 {
 	position: relative;
 	top: 0;
 	left: 0;
@@ -25,44 +47,91 @@ div.main {
 	height: 100%;
 }
 
-.iosSlider .slider {
+.iosSlider1 .slider {
 	width: 100%;
 	height: 100%;
 }
 
-.iosSlider .slider .item {
+.iosSlider1 .slider .item {
 	float: left;
 	width: 100%;
 	height: 100%;
 }
 
-.iosSlider .slider .item1 {
+.iosSlider1 .slider .item1 {
 	background: #666;
 }
 
-.iosSlider .slider .item2 {
+.iosSlider1 .slider .item2 {
 	background: #999;
 }
 
-.iosSlider .slider .item3 {
+.iosSlider1 .slider .item3 {
 	background: #aaa;
 }
 
-.iosSlider .slider .item4 {
+.iosSlider1 .slider .item4 {
 	background: #ddd;
 }
 
-.iosSlider .slider .item5 {
+.iosSlider1 .slider .item5 {
 	background: #777;
 }
 
-/* footer */
-.footer {
+/* slider 2 */
+.slider2Container {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	height: 150px;
+}
+
+.iosSlider2 {
 	position: relative;
-	margin-top: -200px;
-	height: 200px;
+	bottom: 0;
+	left: 0;
+	overflow: hidden;
 	width: 100%;
-	padding: 0;
-	clear: both;
+	height: 150px;
+}
+
+.iosSlider2 .slider {
+	width: 100%;
+	height: 100%;
+}
+
+.iosSlider2 .slider .item {
+	float: left;
+	width: 250px;
+	height: 100%;
+}
+
+.iosSlider2 .slider .item1 {
+	background: #666;
+}
+
+.iosSlider2 .slider .item2 {
+	background: #999;
+}
+
+.iosSlider2 .slider .item3 {
 	background: #aaa;
+}
+
+.iosSlider2 .slider .item4 {
+	background: #ddd;
+}
+
+.iosSlider2 .slider .item5 {
+	background: #777;
+}
+
+/* s2hidden */
+.sliderHidden .slider1Container {
+	bottom: 0;
+}
+
+.sliderHidden .slider2Container {
+	display: none;
 }
diff --git a/_demos/_examples/8-Full-Hieght-Plus-Footer/index.html b/_demos/_examples/8-Full-Hieght-Plus-Footer/index.html
@@ -22,10 +22,31 @@
 		<script type="text/javascript">
 			$(document).ready(function() {
 
-				$('.iosSlider').iosSlider({
+				$('.iosSlider1').iosSlider({
 					snapToChildren: true,
-					desktopClickDrag: true,
-					infiniteSlider: true
+					desktopClickDrag: true
+				});
+
+				$('.iosSlider2').iosSlider({
+					snapToChildren: true,
+					desktopClickDrag: true
+				});
+
+				$('.toggle').bind('click', function() {
+
+					if($('.main').hasClass('sliderHidden')) {
+
+						$('.main').removeClass('sliderHidden');
+
+					} else {
+
+						$('.main').addClass('sliderHidden');
+
+					}
+
+					/* call to rerender iosSlider */
+					$('.iosSlider1').iosSlider('update');
+
 				});
 
 			}); 
@@ -36,34 +57,60 @@
 	</head>
 
 	<body>
-
-		<div class = 'wrap'>
-
-    		<div class = 'main'>
 
-				<div class = 'container'>
-
-					<div class = 'iosSlider'>
+		<div class = 'main'>
+
+			<div class = 'slider1Container'>
+
+				<div class = 'iosSlider1'>
+
+					<div class = 'slider'>
 
-						<div class = 'slider'>
-
-							<div class = 'item item1'></div>
-							<div class = 'item item2'></div>
-							<div class = 'item item3'></div>
-							<div class = 'item item4'></div>
-							<div class = 'item item5'></div>
-
-						</div>
+						<div class = 'item item1'>slider 1</div>
+						<div class = 'item item2'></div>
+						<div class = 'item item3'></div>
+						<div class = 'item item4'></div>
+						<div class = 'item item5'></div>
+						<div class = 'item item1'></div>
+						<div class = 'item item2'></div>
+						<div class = 'item item3'></div>
+						<div class = 'item item4'></div>
+						<div class = 'item item5'></div>
 
 					</div>
 
 				</div>
+
+			</div>
+
+			<div class = 'slider2Container'>
+
+				<div class = 'iosSlider2'>
 
+					<div class = 'slider'>
+
+						<div class = 'item item1'>slider 2</div>
+						<div class = 'item item2'></div>
+						<div class = 'item item3'></div>
+						<div class = 'item item4'></div>
+						<div class = 'item item5'></div>
+						<div class = 'item item1'></div>
+						<div class = 'item item2'></div>
+						<div class = 'item item3'></div>
+						<div class = 'item item4'></div>
+						<div class = 'item item5'></div>
+
+					</div>
+
+				</div>
+
 			</div>
 
+			<div class = 'toggle'>show/hide toggle</div>
+
 		</div>
 
-		<div class = 'footer'></div>
+		<div class = 'footer'>footer</div>
 
 	</body>