Commit d4a8d697 authored by Kjetil Thuen's avatar Kjetil Thuen
Browse files

Fine tuned auto-scrolling

parent 7df96161
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="utf-8">
<title>ScrollMagnifyer</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
......@@ -10,8 +10,13 @@
<style>
body {
font-size: 150%;
background: url(http://subtlepatterns.com/patterns/light_toast.png);
background-color: #028e9b;
color: #5ec4cd;
}
.hero-unit {
color: #ff7800;
background-color: #5ec4cd;
}
ul#studies_list li:first-child {
......@@ -27,10 +32,9 @@
}
ul#studies_list li {
color: #888;
color: #5ec4cd;
overflow: hidden;
text-align: center;
border-bottom: 1px solid #bbb;
border-bottom: 1px solid #5ec4cd;
}
ul#studies_list li div.abstract {
......@@ -38,7 +42,7 @@
}
ul#studies_list li.selected {
color: black;
color: #ff7800;
}
#target {
......@@ -48,30 +52,39 @@
min-height: 1em;
z-index: -2;
position: fixed;
background: rgba(200,237,200,0.8);
background: #5ec4cd;
}
#expansionzone {
position: fixed;
left: 12.5%;
width: 75%;
width: 70%;
left: 15%;
z-index: 2;
display: none;
max-height: 70%;
background: rgba(200,237,200,0.8);
padding: 1em;
background: #5ec4cd;
}
#expansionzone h2 {
text-align: center;
h2 {
margin: 0px;
padding: 0.5em;
}
h2#target {
padding: 0px;
}
#expansionzone div.metadata div.abstract {
max-height: 4em;
max-height: 6em;
margin-bottom: 0.5em;
overflow: hidden;
color: white;
padding: 0em 1em 1em 1em;
}
#expansionzone button {
margin: 0 0 1em 1em ;
}
</style>
<script id="study_list" type="text/x-handlebars-template">
......@@ -90,7 +103,6 @@
var centerOfHeadline = 0;
var target_top = 0;
var scrollTimeout;
var focusedElement;
var jsondata = {};
var scrollVal;
......@@ -99,6 +111,15 @@
var template = Handlebars.compile(source);
var listhtml = template(jsondata);
$('#content').html(listhtml);
register_event_handlers();
}
var register_event_handlers = function() {
$(document).scroll(find_and_select_element);
// $(window).on("touchend", set_selected_element);
$('#studies_list li').click(function() {
set_selected_element($(this).get());
});
}
var initialize_page = function() {
......@@ -121,10 +142,8 @@
}
var show_expanded_info = function() {
console.log("triggered");
var listElem = $('#studies_list li.selected');
$(document).scroll(function() {return false;});
console.log("disabled");
var listElem = $('#studies_list li.selected');
$('html:not(:animated),body:not(:animated)').animate({scrollTop: scrollVal}, 'fast', function() {
$('#target').animate({height: listElem.height()}, 'fast', function() {
details = listElem.find("div.abstract").html();
......@@ -132,23 +151,25 @@
$('#expansionzone').css({top: target_top + $('#target').height()});
$('#expansionzone div.abstract').html(details);
$('#expansionzone').slideDown();
console.log("enabling");
window.clearTimeout(scrollTimeout);
$(document).scroll(set_selected_element);
$(document).scroll(find_and_select_element);
}
});
});
}
var set_selected_element = function() {
var find_and_select_element = function() {
window.clearTimeout(scrollTimeout);
var focusedElement = document.elementFromPoint(horizontalCenter, centerOfHeadline);
set_selected_element(focusedElement);
}
var set_selected_element = function (element) {
window.clearTimeout(scrollTimeout);
$('#expansionzone').fadeOut();
$('ul#studies_list li').removeClass("selected");
focusedElement = document.elementFromPoint(horizontalCenter, centerOfHeadline);
if (focusedElement) {
var listElem = $(focusedElement).closest('li');
if (element) {
var listElem = $(element).closest('li');
if (listElem.is("LI")) {
listElem.addClass('selected');
......@@ -160,8 +181,8 @@
}
}
</script>
</head>
<body>
</head>
<body>
<div class="hero-unit">
<h1>Data fra Skolenesstar</h1>
Finn interresante studier i listen under.
......@@ -172,16 +193,20 @@
<div id="expansionzone">
<div class="metadata">
<div class="abstract lead"></div>
<button class="btn btn-primary"><i class="icon-ok-sign"></i> Velg studie</button>
<button class="btn"><i class="icon-info-sign"></i> Mer metadata</button>
<div class="buttons">
<button class="btn btn-info"><i class="icon-info-sign"></i> Mer metadata</button>
<button class="btn btn-success"><i class="icon-ok-sign"></i> Velg studie</button>
</div>
</div>
</div>
<script>
$('#expansionzone').fadeOut();
initialize_page();
load_data();
$(document).scroll(set_selected_element);
$(window).resize(function() {initialize_page();build_list();});
$(window).resize(function() {
initialize_page();
build_list();
});
</script>
</body>
</body>
</html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment