Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
J
jquery-listentryinfo
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
3
Issues
3
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Kjetil Thuen
jquery-listentryinfo
Commits
18effe7e
Commit
18effe7e
authored
Jun 24, 2013
by
Kjetil Thuen
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Initial commit
parents
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
178 additions
and
0 deletions
+178
-0
index.html
index.html
+178
-0
No files found.
index.html
0 → 100644
View file @
18effe7e
<!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"
>
<style>
body
{
margin
:
2em
;
font-size
:
150%
;
background
:
#eee
;
}
ul
#studies_list
li
:first-child
{
margin-top
:
50%
;
}
ul
#studies_list
{
width
:
80%
;
margin
:
auto
;
}
ul
#studies_list
li
:last-child
{
margin-bottom
:
50%
;
}
ul
#studies_list
li
{
color
:
#888
;
max-height
:
190px
;
overflow
:
hidden
;
text-align
:
center
;
}
ul
#studies_list
li
div
.abstract
{
display
:
none
;
}
ul
#studies_list
li
.selected
{
color
:
black
;
}
#targetwrapper
{
position
:
fixed
;
top
:
30%
;
height
:
40%
;
left
:
12.5%
;
width
:
75%
;
}
#target
{
z-index
:
-2
;
border
:
1px
solid
black
;
height
:
1em
;
position
:
relative
;
border-radius
:
5px
;
}
#expansionzone
{
display
:
none
;
border
:
1px
solid
black
;
position
:
relative
;
max-height
:
70%
;
box-shadow
:
5px
5px
5px
rgba
(
100
,
100
,
100
,
0.8
);
border-radius
:
25px
;
background
:
rgba
(
255
,
255
,
255
,
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
scrollTimeout
;
var
focusedElement
;
var
build_list
=
function
(
data
)
{
var
source
=
$
(
"
#study_list
"
).
html
();
var
template
=
Handlebars
.
compile
(
source
);
var
listhtml
=
template
(
data
);
$
(
"
#content
"
).
html
(
listhtml
);
}
var
load_data
=
function
()
{
horizontalCenter
=
Math
.
floor
(
window
.
innerWidth
/
2
);
centerOfHeadline
=
$
(
'
#target
'
).
offset
().
top
-
$
(
window
).
scrollTop
()
+
(
$
(
'
#target
'
).
height
()
/
2
);
$
.
ajax
({
url
:
"
https://nesstar-dev.nsd.uib.no/nesstardrop/study/list
"
,
datatype
:
"
json
"
,
async
:
true
,
context
:
document
.
body
}).
done
(
function
(
data
)
{
build_list
(
data
);
});
}
var
show_expanded_info
=
function
()
{
var
listElem
=
$
(
focusedElement
).
closest
(
'
li
'
);
if
(
listElem
.
is
(
"
LI
"
))
{
var
listElemTop
=
listElem
.
offset
().
top
;
var
scrollVal
=
listElemTop
-
centerOfHeadline
+
(
$
(
'
#target
'
).
height
()
/
4
);
$
(
document
).
scroll
(
function
()
{
return
false
;});
$
(
'
html:not(:animated),body:not(:animated)
'
).
animate
({
scrollTop
:
scrollVal
},
'
fast
'
,
function
()
{
$
(
document
).
scroll
(
set_selected_element
);
$
(
'
#target
'
).
height
(
listElem
.
height
());
listElem
.
addClass
(
'
selected
'
);
details
=
listElem
.
find
(
"
div.abstract
"
).
html
();
if
(
details
!=
null
)
{
$
(
'
#expansionzone div.abstract
'
).
html
(
details
);
$
(
'
#expansionzone
'
).
fadeIn
();
}
});
}
}
var
set_selected_element
=
function
()
{
$
(
'
#expansionzone
'
).
fadeOut
();
$
(
'
ul#studies_list li
'
).
removeClass
(
"
selected
"
);
$
(
'
#targetwrapper
'
).
hide
();
focusedElement
=
document
.
elementFromPoint
(
horizontalCenter
,
centerOfHeadline
);
if
(
focusedElement
)
{
window
.
clearTimeout
(
scrollTimeout
);
scrollTimeout
=
window
.
setTimeout
(
show_expanded_info
,
500
);
}
else
{
$
(
'
#expansionzone
'
).
hide
();
}
$
(
'
#targetwrapper
'
).
show
();
}
</script>
</head>
<body>
<div
id=
"content"
>
</div>
<div
id=
"targetwrapper"
>
<h2
id=
"target"
></h2>
<div
id=
"expansionzone"
>
<div
class=
"metadata"
>
<div
class=
"abstract lead"
></div>
<button
class=
"btn btn-primary"
>
Velg studie
</button>
<button
class=
"btn btn-primary"
>
Mer metadata
</button>
</div>
</div>
</div>
<script>
$
(
'
#expansionzone
'
).
fadeOut
();
load_data
();
$
(
document
).
scroll
(
set_selected_element
);
</script>
</body>
</html>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment