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

Fine tuned auto-scrolling

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