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

Fine tuned auto-scrolling

parent 7df96161
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ScrollMagnifyer</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css" rel="stylesheet">
<style>
body {
font-size: 150%;
background: url(http://subtlepatterns.com/patterns/light_toast.png);
}
ul#studies_list li:first-child {
}
ul#studies_list {
width: 80%;
margin: auto;
}
ul#studies_list li:last-child {
margin-bottom: 20em;
}
ul#studies_list li {
color: #888;
overflow: hidden;
text-align: center;
border-bottom: 1px solid #bbb;
}
ul#studies_list li div.abstract {
display: none;
}
ul#studies_list li.selected {
color: black;
}
#target {
top: 20%;
height: 10%;
width: 100%;
min-height: 1em;
z-index: -2;
position: fixed;
background: rgba(200,237,200,0.8);
}
#expansionzone {
position: fixed;
left: 12.5%;
width: 75%;
z-index: 2;
display: none;
max-height: 70%;
background: rgba(200,237,200,0.8);
padding: 1em;
}
#expansionzone h2 {
text-align: center;
}
#expansionzone div.metadata div.abstract {
max-height: 4em;
margin-bottom: 0.5em;
overflow: hidden;
}
</style>
<script id="study_list" type="text/x-handlebars-template">
<ul class="nav nav-list" id="studies_list">
{{#each studies}}
<li id="{{id}}">
<h2>{{name}}</h2>
<div class="abstract">{{abstractText}}</div>
</li>
{{/each}}
</ul>
</script>
<script>
var horizontalCenter = Math.floor(window.innerWidth/2);
var centerOfHeadline = 0;
var target_top = 0;
var scrollTimeout;
var focusedElement;
var jsondata = {};
var scrollVal;
var build_list = function() {
var source = $('#study_list').html();
var template = Handlebars.compile(source);
var listhtml = template(jsondata);
$('#content').html(listhtml);
}
var initialize_page = function() {
target_top = $('#content').position().top;
$('#target').css({top: target_top});
horizontalCenter = Math.floor(window.innerWidth/2);
centerOfHeadline = $('#target').offset().top - $(window).scrollTop() + ($('#target').height() / 2);
}
var load_data = function() {
$.ajax({
url: "https://nesstar-dev.nsd.uib.no/nesstardrop/study/list",
datatype: "json",
async: true,
context: document.body
}).done(function(data) {
jsondata = data;
build_list();
});
}
var show_expanded_info = function() {
console.log("triggered");
var listElem = $('#studies_list li.selected');
$(document).scroll(function() {return false;});
console.log("disabled");
$('html:not(:animated),body:not(:animated)').animate({scrollTop: scrollVal}, 'fast', function() {
$('#target').animate({height: listElem.height()}, 'fast', function() {
details = listElem.find("div.abstract").html();
if (details != null) {
$('#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);
}
});
});
}
<head>
<meta charset="utf-8">
<title>ScrollMagnifyer</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css" rel="stylesheet">
<style>
body {
background-color: #028e9b;
color: #5ec4cd;
}
.hero-unit {
color: #ff7800;
background-color: #5ec4cd;
}
ul#studies_list li:first-child {
}
ul#studies_list {
width: 80%;
margin: auto;
}
ul#studies_list li:last-child {
margin-bottom: 20em;
}
ul#studies_list li {
color: #5ec4cd;
overflow: hidden;
border-bottom: 1px solid #5ec4cd;
}
ul#studies_list li div.abstract {
display: none;
}
ul#studies_list li.selected {
color: #ff7800;
}
#target {
top: 20%;
height: 10%;
width: 100%;
min-height: 1em;
z-index: -2;
position: fixed;
background: #5ec4cd;
}
#expansionzone {
position: fixed;
width: 70%;
left: 15%;
z-index: 2;
display: none;
max-height: 70%;
background: #5ec4cd;
}
h2 {
margin: 0px;
padding: 0.5em;
}
h2#target {
padding: 0px;
}
#expansionzone div.metadata div.abstract {
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">
<ul class="nav nav-list" id="studies_list">
{{#each studies}}
<li id="{{id}}">
<h2>{{name}}</h2>
<div class="abstract">{{abstractText}}</div>
</li>
{{/each}}
</ul>
</script>
<script>
var horizontalCenter = Math.floor(window.innerWidth/2);
var centerOfHeadline = 0;
var target_top = 0;
var scrollTimeout;
var jsondata = {};
var scrollVal;
var build_list = function() {
var source = $('#study_list').html();
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() {
target_top = $('#content').position().top;
$('#target').css({top: target_top});
horizontalCenter = Math.floor(window.innerWidth/2);
centerOfHeadline = $('#target').offset().top - $(window).scrollTop() + ($('#target').height() / 2);
}
var load_data = function() {
$.ajax({
url: "https://nesstar-dev.nsd.uib.no/nesstardrop/study/list",
datatype: "json",
async: true,
context: document.body
}).done(function(data) {
jsondata = data;
build_list();
});
}
var set_selected_element = function() {
window.clearTimeout(scrollTimeout);
$('#expansionzone').fadeOut();
$('ul#studies_list li').removeClass("selected");
var show_expanded_info = function() {
$(document).scroll(function() {return false;});
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();
if (details != null) {
$('#expansionzone').css({top: target_top + $('#target').height()});
$('#expansionzone div.abstract').html(details);
$('#expansionzone').slideDown();
$(document).scroll(find_and_select_element);
}
});
});
}
var find_and_select_element = function() {
window.clearTimeout(scrollTimeout);
var focusedElement = document.elementFromPoint(horizontalCenter, centerOfHeadline);
set_selected_element(focusedElement);
}
focusedElement = document.elementFromPoint(horizontalCenter, centerOfHeadline);
var set_selected_element = function (element) {
window.clearTimeout(scrollTimeout);
$('#expansionzone').fadeOut();
$('ul#studies_list li').removeClass("selected");
if (focusedElement) {
var listElem = $(focusedElement).closest('li');
if (element) {
var listElem = $(element).closest('li');
if (listElem.is("LI")) {
listElem.addClass('selected');
scrollVal = listElem.offset().top - $('#studies_list').position().top;
scrollTimeout = window.setTimeout(show_expanded_info, 500);
if (listElem.is("LI")) {
listElem.addClass('selected');
scrollVal = listElem.offset().top - $('#studies_list').position().top;
scrollTimeout = window.setTimeout(show_expanded_info, 500);
}
} else {
$('#expansionzone').hide();
}
} else {
$('#expansionzone').hide();
}
}
</script>
</head>
<body>
<div class="hero-unit">
<h1>Data fra Skolenesstar</h1>
Finn interresante studier i listen under.
</div>
<div id="content">
</div>
<h2 id="target"></h2>
<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>
}
</script>
</head>
<body>
<div class="hero-unit">
<h1>Data fra Skolenesstar</h1>
Finn interresante studier i listen under.
</div>
<div id="content">
</div>
</div>
<script>
$('#expansionzone').fadeOut();
initialize_page();
load_data();
$(document).scroll(set_selected_element);
$(window).resize(function() {initialize_page();build_list();});
</script>
</body>
<h2 id="target"></h2>
<div id="expansionzone">
<div class="metadata">
<div class="abstract lead"></div>
<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();
$(window).resize(function() {
initialize_page();
build_list();
});
</script>
</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