Hochschulprojekte
/
f1vis
0
0
Fork 0
Code Issues Pull Requests Activity

Added the first steps of the course selection

This commit is contained in:
Marcel 2017-12-22 09:40:26 +01:00
parent 4eb25265c2
commit a16974a7e0
3 changed files with 73 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
css/main.css
View File

@ -36,3 +36,22 @@ body {
fill: none;
stroke-width: 2px;
}
.frame { width: 100%; height: 160px; padding: 0; }
.frame .slidee { margin: 0; padding: 0; height: 100%; list-style: none; }
.frame .slidee li { float: left; margin: 0 5px 0 0; padding: 0; width: 120px; height: 100%; }
.scrollbar {
width: 100%;
height: 10px;
background-color: hsl(0, 0%, 94.1%);
}
.scrollbar .handle {
width: 100px; /* overriden if dynamicHandle: 1 */
height: 100%;
background: #222;
}
.slidee li {
border: 1px solid black;
}

30
index.html
View File

@ -46,6 +46,34 @@
</div>
</form>
</div>
<div class="content-box chart-box strecken-selector">
<div class="frame">
<ul class="slidee">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
<div class="scrollbar">
<div class="handle"></div>
</div>
</div>
<div class="content-box chart-box">
<div id="lineGraphBox"></div>
@ -72,6 +100,7 @@
<script src="js/jquery/jquery-3.2.1.min.js"></script>
<script src="js/popper/popper.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/sly/sly.min.js"></script>
<!-- D3.js and our own JavaScript
================================================== -->
@ -82,5 +111,6 @@
<script type="text/javascript" src="js/queries.js"></script>
<script type="text/javascript" src="js/diagrams.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

24
js/main.js
View File

@ -5,6 +5,30 @@
*/
preprocessor.load(function(data) {
var $frame = $('.strecken-selector');
var $slidee = $frame.children('ul').eq(0);
var $wrap = $frame.parent();
var options = {
horizontal: 1,
itemNav: 'basic',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 3,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
pagesBar: $wrap.find('.pages'),
activatePageOn: 'click',
speed: 300,
elasticBounds: 1,
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
};
$('.frame').sly(options);
// Some sample code for a year selector - TODO: Improve a lot and move somewhere else
var yearSelector = $("#seasonByYearSelector");
var seasons = processor.getSeasonsWithLapData();