Pārlūkot izejas kodu

Got custom scrollbars setup.

Nathaniel van Diepen 10 gadi atpakaļ
vecāks
revīzija
f3f45a56bc
4 mainītis faili ar 65 papildinājumiem un 5 dzēšanām
  1. 12 0
      css/style.css
  2. 42 1
      data/index.template.html
  3. 6 3
      index.php
  4. 5 1
      js/index.js

+ 12 - 0
css/style.css

@@ -0,0 +1,12 @@
+html,body{
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	padding: 0;
+	margin: 0;
+}
+#content{
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+}

+ 42 - 1
data/index.template.html

@@ -1,4 +1,45 @@
 <h1>
 	{{title}}
 </h1>
-Welcome to bugs!
+Welcome to bugs!
+<div class="scroll" style="width:100%;height:500px;overflow:hidden;border-style:solid;border-color:black;border-width:1px;">
+	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet nunc aliquet sapien elementum commodo. Etiam sodales sodales nibh. Fusce aliquet ligula sit amet magna luctus consectetur. In in porttitor lectus. Morbi vel nibh egestas, laoreet tortor quis, lobortis nisl. Donec blandit rhoncus massa. Maecenas feugiat auctor leo sed luctus. Vestibulum interdum mollis magna. Quisque elementum egestas neque ut lobortis. Maecenas orci dui, eleifend et velit id, aliquet molestie ante. Vivamus ac dignissim eros. Suspendisse vel facilisis diam. Pellentesque eu enim sit amet mauris suscipit ultrices lobortis at ipsum. Integer at porttitor nisi. Aenean commodo arcu velit, vel sodales libero pellentesque vitae. Aliquam sed nulla tincidunt, cursus mi quis, euismod nibh.
+	<br/>
+	Proin egestas eros nec urna pharetra molestie. Praesent varius tincidunt libero eget tristique. Ut eu diam et lacus dignissim congue. Quisque dignissim dolor leo, in suscipit elit ornare a. Integer sit amet cursus neque, ut auctor lorem. Suspendisse id lacus fringilla, fermentum libero at, laoreet augue. Donec quis consequat dolor, vel varius risus.
+	<br/>
+	Donec pellentesque, quam vel sagittis vestibulum, augue dui rhoncus turpis, eu vulputate metus justo et ante. Duis bibendum ante et augue rhoncus imperdiet. Vivamus ac arcu consectetur, tempor justo id, tincidunt felis. Fusce mi mi, adipiscing sit amet rutrum vitae, pretium ac metus. Nulla ultrices ligula imperdiet, semper odio in, dignissim lectus. Aliquam vel dui hendrerit, vestibulum elit at, volutpat lacus. Proin convallis cursus pellentesque. Nullam convallis congue justo, eget elementum odio molestie et. Maecenas enim lacus, blandit ac neque non, malesuada egestas felis. Pellentesque pharetra sed risus non mollis. Fusce eu volutpat dui. Phasellus commodo sem laoreet, laoreet metus vel, posuere ante. Cras elementum venenatis nunc et cursus.
+	<br/>
+	Nulla mollis, eros at sollicitudin hendrerit, elit mi mattis purus, commodo ornare nisi enim aliquam libero. Ut cursus ipsum at facilisis fringilla. Quisque vulputate libero tortor, eu ornare elit pharetra nec. Mauris tincidunt neque fermentum mi gravida rutrum. Vestibulum bibendum mollis est, nec accumsan lacus adipiscing sed. Cras id elit justo. Nulla adipiscing nulla nec felis lacinia, et mattis lectus euismod.
+	<br/>
+	Nam quis erat tortor. Vivamus consequat vehicula purus non porta. Vivamus elementum vitae tellus eu lobortis. Aliquam erat volutpat. Proin facilisis vel dui sit amet condimentum. Fusce eget dui in neque sollicitudin convallis quis pulvinar ipsum. Nulla at aliquam lacus. Pellentesque pulvinar imperdiet diam, sed scelerisque enim pulvinar quis. Aliquam et nulla non risus tempor rutrum quis sit amet erat.
+	<br/>
+	Curabitur vel elit sollicitudin, suscipit enim ac, pulvinar libero. Suspendisse potenti. Integer quis lectus et justo interdum pulvinar. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur auctor purus eros, sit amet accumsan turpis porta vehicula. Donec ac nisl urna. Aenean ac nisl in diam egestas porttitor. Fusce lacinia ipsum sit amet augue convallis sagittis. Proin vitae orci nec nunc malesuada venenatis eget sit amet quam. Aenean tincidunt justo vel venenatis sodales. Proin lobortis nisi eros, id commodo mi malesuada sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris accumsan quam non diam lobortis molestie. Maecenas sit amet risus felis. Aenean euismod cursus purus et tincidunt. Nullam tincidunt, urna nec placerat tincidunt, odio neque dapibus magna, at condimentum nunc quam id purus.
+	<br/>
+	Sed mollis vitae nulla in sollicitudin. Quisque porta mattis arcu a iaculis. Morbi blandit varius ipsum eget imperdiet. Phasellus quis sem porta, porttitor mauris id, imperdiet augue. Curabitur at lorem sapien. In ultricies turpis nec est fermentum, eget pretium lacus tempus. Quisque gravida elementum libero eu hendrerit. Vivamus odio leo, rhoncus quis sapien eu, convallis rhoncus risus. Integer quis mattis magna, sit amet consectetur enim. Praesent euismod ante nec egestas tincidunt. Ut dictum feugiat purus. Etiam scelerisque gravida nisi vel malesuada. Ut sit amet dui ut lectus euismod bibendum nec et eros. Ut vel dolor in eros sagittis pretium.
+	<br/>
+	Sed mollis facilisis adipiscing. Nullam nec imperdiet ante. Donec volutpat nibh justo. Praesent leo dui, commodo ac arcu quis, mattis porttitor magna. Nulla facilisi. Nam id pharetra risus, sed congue nisl. Nullam non purus vitae mi eleifend semper. Quisque neque odio, luctus vel nibh sed, accumsan sagittis tortor. Aenean mattis tincidunt eros et tristique. Sed vel sapien ultrices, tincidunt nunc eget, accumsan magna.
+	<br/>
+	Praesent pulvinar metus eu eros interdum, vel tempus odio dictum. Pellentesque molestie erat sit amet gravida vestibulum. Vivamus venenatis enim id magna venenatis suscipit at sed urna. Pellentesque libero mi, tristique ornare adipiscing in, imperdiet ac ligula. In hac habitasse platea dictumst. Sed nec suscipit orci, ac convallis tortor. Quisque et posuere leo. Nulla eu faucibus urna. Etiam facilisis orci a erat fermentum sodales. Donec adipiscing nulla eget lobortis sollicitudin.
+	<br/>
+	Nulla quis mattis tellus. Praesent tempus neque felis, nec porttitor ipsum tristique sit amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam nulla nisi, eleifend et magna a, ultricies suscipit risus. Donec nec mi porta, accumsan erat malesuada, dictum sapien. Nunc dolor sem, volutpat vel lacus nec, aliquam auctor est. Suspendisse vel urna turpis. Vestibulum vitae pulvinar turpis, eu laoreet velit. Fusce nisl odio, consequat ac hendrerit a, sodales a lectus. Suspendisse viverra varius rutrum.
+	<br/>
+	Suspendisse ac mauris quis arcu feugiat gravida. Nam at cursus dui. Nam pharetra commodo arcu. Donec molestie a leo quis semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed cursus ornare orci. Proin eu sagittis turpis. Vivamus faucibus at augue vulputate luctus. Cras fringilla sem sed purus eleifend, sed ultrices augue suscipit. Cras tempus, neque pulvinar vehicula accumsan, nisl nibh laoreet risus, non fermentum ligula odio ut neque. Donec ultrices sodales sapien ut laoreet. Nunc id pulvinar tortor. Donec facilisis neque id justo aliquet molestie. Nunc ac tincidunt eros, ut vulputate augue. Integer mi elit, commodo nec suscipit iaculis, aliquet sed risus.
+	<br/>
+	Vestibulum luctus massa sit amet dui euismod, in fermentum nulla rhoncus. Ut et sem aliquet, porttitor velit vel, condimentum diam. Phasellus et fringilla orci. Morbi malesuada libero sed felis aliquet, ac sollicitudin ipsum dapibus. Vestibulum gravida, lorem vel blandit pulvinar, tortor lorem rhoncus urna, eu lacinia lacus arcu nec tellus. Pellentesque consequat ante quis augue imperdiet, et blandit mi tincidunt. Nam feugiat turpis viverra, sagittis erat quis, molestie elit. Nullam et lectus porta mi tempor fringilla nec et lorem. Donec nulla arcu, fringilla quis accumsan a, dapibus vitae tellus. Suspendisse sollicitudin tellus non lectus eleifend dignissim.
+	<br/>
+	Pellentesque ullamcorper felis sed nulla dignissim posuere. Donec ornare mi at convallis mollis. Ut rutrum ornare nunc at adipiscing. Nulla facilisi. In facilisis libero ultrices est vestibulum venenatis. Phasellus porttitor vehicula lorem, et pulvinar libero ultricies ac. Phasellus sed diam non felis lobortis volutpat. Integer interdum iaculis semper. Sed felis mauris, congue ut est ac, fermentum adipiscing mauris.
+	<br/>
+	Cras tempor cursus erat sit amet bibendum. Etiam vel convallis risus. Phasellus viverra diam ut arcu tincidunt, fringilla semper urna facilisis. Donec convallis vitae nibh nec consectetur. Cras ultrices libero vel fringilla vestibulum. Pellentesque ut dapibus nibh. Mauris mauris elit, semper eget mauris at, vulputate tempor lacus. Integer nunc leo, semper eget odio non, molestie aliquet ipsum. Suspendisse sit amet tortor vel metus rhoncus pellentesque. Donec risus arcu, gravida dapibus molestie quis, posuere a est. Morbi ut molestie dui. Phasellus at eleifend ipsum, a vulputate ante.
+	<br/>
+	Sed sit amet lobortis nisi. Sed at felis sed turpis accumsan iaculis. Sed dapibus, magna eget ornare porta, massa lacus commodo massa, eu lobortis nibh nunc in orci. Quisque sagittis lacinia tellus. Nunc in tortor leo. In in neque facilisis, euismod dolor porttitor, fermentum ante. Nam tincidunt, urna commodo eleifend tempor, tellus elit accumsan lorem, at vulputate dolor nibh luctus justo. Nulla non lacus leo. Vestibulum ut justo accumsan, ornare neque sit amet, ultrices turpis. Sed sed volutpat elit, vitae sollicitudin enim. Maecenas at cursus orci. Nulla non enim tortor.
+	<br/>
+	Proin non nulla eros. Ut felis nunc, feugiat ut fermentum non, blandit sed orci. Integer pharetra felis at magna viverra pretium. Phasellus at nisi dolor. Etiam in metus velit. Nam sollicitudin ipsum sit amet sapien ultrices, vitae sagittis odio aliquam. Duis blandit enim at nunc ultrices varius.
+	<br/>
+	Nunc et lectus at massa imperdiet condimentum sit amet a urna. Aliquam a est a turpis dapibus porta et ut quam. Mauris mattis turpis eget velit cursus aliquam. Nullam quam massa, sagittis vel leo nec, ultricies semper purus. Donec venenatis tempor justo et placerat. Cras ac enim tortor. Sed placerat, ante ac cursus sollicitudin, dui nunc convallis metus, id dapibus nisl leo vitae ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam tellus erat, euismod a diam ut, aliquam vulputate dolor. Praesent quis turpis sit amet nibh aliquam convallis non vitae quam. Cras facilisis ligula rhoncus augue aliquet, adipiscing ornare metus suscipit. Morbi pulvinar, urna ac pretium congue, tortor tellus condimentum lacus, quis pellentesque urna eros nec dolor. Aliquam erat volutpat. Maecenas a turpis ut dolor lacinia dapibus. Sed gravida mi nec consectetur venenatis. Donec vulputate lorem elit, vel eleifend lectus ultricies a.
+	<br/>
+	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel consequat tellus. Duis aliquet massa a luctus venenatis. Mauris vestibulum erat eu magna ullamcorper aliquet. Nam dapibus nunc ut auctor ornare. Nulla elementum magna sed dictum dictum. Integer id elit et nisl venenatis facilisis. Vestibulum viverra metus enim, quis auctor sapien malesuada at. Fusce dapibus orci id velit elementum rhoncus. Vestibulum eu lacus id lorem mattis ornare. Aenean enim tellus, vehicula sed mi nec, vulputate laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec semper viverra arcu id auctor. Ut malesuada eros enim. Quisque vel bibendum velit.
+	<br/>
+	Mauris eu sodales erat. Ut a viverra velit. Cras vitae ante sed nulla malesuada euismod et in mauris. Duis nec dui odio. Praesent non congue risus, quis elementum ligula. Mauris ipsum magna, tincidunt in ipsum eget, suscipit pretium tellus. Phasellus quis vestibulum quam, eget luctus leo. Cras fermentum adipiscing gravida. Vivamus posuere mauris id dolor tincidunt, ut aliquet massa malesuada. Duis lobortis lorem sit amet arcu convallis condimentum. Aliquam nec sagittis arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras auctor velit nec scelerisque lobortis.
+	<br/>
+	Etiam condimentum non est condimentum viverra. Donec molestie sapien at libero ullamcorper, sed malesuada quam accumsan. Integer viverra, sem nec sodales tincidunt, ante nibh congue est, sit amet venenatis nisl lacus eu enim. Cras in convallis dui, quis ornare nisl. Mauris nec volutpat dui, non cursus mauris. Quisque bibendum, ligula ut condimentum egestas, nisl tortor bibendum lorem, ut consectetur orci elit id erat. Donec gravida lacinia elit, id pulvinar purus congue eu. Curabitur feugiat tristique ligula a mollis. 
+</div>

+ 6 - 3
index.php

@@ -9,8 +9,11 @@
 		<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
 		<script src="js/jquery.history.js"></script>
 		<script src="js/index.js"></script>
-		<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/black-tie/jquery-ui.css"/>
-		<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
+		<link href="http://code.jquery.com/ui/1.10.3/themes/black-tie/jquery-ui.css" rel="stylesheet" type="text/css"/>
+		<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css"/>
+		<link href="css/style.css" rel="stylesheet" type="text/css"/>
 	</head>
-	<body></body>
+	<body>
+		<div id="content"></div>
+	</body>
 </html>

+ 5 - 1
js/index.js

@@ -13,7 +13,11 @@
 			switch(State.data.type){
 				case 'template':
 					$.get('api.php',State.data,function(d){
-						$('body').html(Handlebars.compile(d.template)(d.context));
+						$('#content').html(Handlebars.compile(d.template)(d.context)).mCustomScrollbar('destroy');
+						$('#content,.scroll').mCustomScrollbar({
+							theme: 'dark-2',
+							scrollInertia: 0
+						});
 					},'json');
 				break;
 				default: