From f3ddbf31b1e2780b106443eacdf1b90d288bc9c7 Mon Sep 17 00:00:00 2001 From: lowrussia Date: Sun, 5 May 2019 19:12:09 +0200 Subject: [PATCH 1/2] d3 test --- index2.html | 118 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 118 insertions(+) create mode 100644 index2.html diff --git a/index2.html b/index2.html new file mode 100644 index 0000000..0e7c777 --- /dev/null +++ b/index2.html @@ -0,0 +1,118 @@ + + + + + + + + + + From 14a53f7f5ee06717b63d6a4c61c7575649416c32 Mon Sep 17 00:00:00 2001 From: lowrussia Date: Sat, 11 May 2019 23:13:49 +0200 Subject: [PATCH 2/2] scroll slider --- css/stylesheet.css | 17 ++++++++++++----- index.html | 22 ++++++++++++++++++---- 2 files changed, 30 insertions(+), 9 deletions(-) diff --git a/css/stylesheet.css b/css/stylesheet.css index ca0844b..84f7914 100644 --- a/css/stylesheet.css +++ b/css/stylesheet.css @@ -1,6 +1,6 @@ body{ position: relative; - margin:1em; + margin:0; padding:0; font-size: 120%; line-height: 1.4; @@ -21,10 +21,10 @@ h1{ div#sliders{ position: fixed; - width: 1000px; - height: 500px; + width: 500px; + height: 400px; top:60px; - left:340px; + right:100px; } div#slider{ float: left; @@ -44,4 +44,11 @@ div.controlpoint{ } #rotterdam li{ list-style: none; -} \ No newline at end of file +} + + +#curve { + padding : 1em; + height: 100vh; + overflow: scroll; +} diff --git a/index.html b/index.html index 238a5f3..f2d49fb 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,7 @@ width : 100%; height : 400px; background: transparent; - } + } #slider2 { position: absolute; top:0; @@ -50,10 +50,25 @@ curve : { width:4, color:"#333", cap:"round" } }); }); + + // scroll + $(document).ready(function() { + $('#slider').bind('slide.pathslider', function(event, slider){ + var scrollPos = slider.percent * ( $('#curve')[0].scrollHeight - $(window).height() ) / 100 + $('#curve').scrollTop(scrollPos); + }); + + $('#slider2').bind('slide.pathslider', function(event, slider){ + var scrollPos = slider.percent * ( $('#curve')[0].scrollHeight - $(window).height() ) / 100 + $('#curve').scrollTop(scrollPos); + }); + + }); +
-

Relearn +

Relearn