Image-sequencer: Include a back-to-top Button on scrolling down

[rbhatia46]

We are preparing to participate in Google Code-in, and have reserved this issue for participants in GCI - but we'd love to have your help with another one! Please check out https://code.publiclab.org to see more.

First Timers Only

Hi, this is a first-timers-only issue. This means this has been worked to make it more legible to folks who either haven't contributed to our codebase before, or even folks who haven't contributed to open source before.

If you have contributed before, consider leaving this one for someone new, and looking through our general help wanted issues. Thanks!

The Problem

We want to include a button at the bottom-right corner of the screen in the main UI when we scroll the page to make it easy to go back to top with a smooth scrolling effect, which is currently missing and can be implemented as shown below.

The Solution

We want to layout the button using an tag in HTML, along with font-awesome, then style it using CSS and finally write a few lines of jQuery to make the scrolling part work.

A seperate JavaScript file can be made for this functionality under examples/lib/scrollToTop.js, containing the necessary JavaScript code.

The HTML can be included in the examples/index.html and the CSS in examples/demo.css.

Make sure to include the JavaScript file in the <script> tag before the body ends and the button in the HTML markup above that.

Instance Count = 1

[gitmate[bot]]

GitMate.io thinks the contributors most likely able to help are @tech4GT, and @gitmate[bot].

Possibly related issues are https://github.com/publiclab/image-sequencer/issues/260 (Blur module producing a black 'border' at the top and bottom), https://github.com/publiclab/image-sequencer/issues/231 ("Save as module" button on Dynamic module), https://github.com/publiclab/image-sequencer/issues/36 (What Should Module Logs Include?), and https://github.com/publiclab/image-sequencer/issues/318 (Delete buttons and indices slightly off in demo).

[gitmate[bot]]

GitMate.io thinks the contributors most likely able to help are @tech4GT, and @gitmate[bot].

Possibly related issues are https://github.com/publiclab/image-sequencer/issues/260 (Blur module producing a black 'border' at the top and bottom), https://github.com/publiclab/image-sequencer/issues/231 ("Save as module" button on Dynamic module), https://github.com/publiclab/image-sequencer/issues/36 (What Should Module Logs Include?), and https://github.com/publiclab/image-sequencer/issues/318 (Delete buttons and indices slightly off in demo).

[jywarren]

Love this! Great!

On Fri, Sep 28, 2018, 4:07 PM gitmate[bot] [e-mail] wrote:

GitMate.io https://gitmate.io thinks the contributors most likely able
to help are @tech4GT https://github.com/tech4GT, and @GitMate
https://github.com/GitMate[bot].

Possibly related issues are #260
https://github.com/publiclab/image-sequencer/issues/260 (Blur module
producing a black 'border' at the top and bottom), #231
https://github.com/publiclab/image-sequencer/issues/231 ("Save as
module" button on Dynamic module), #36
https://github.com/publiclab/image-sequencer/issues/36 (What Should
Module Logs Include?), and #318
https://github.com/publiclab/image-sequencer/issues/318 (Delete buttons
and indices slightly off in demo).

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/image-sequencer/issues/346#issuecomment-425579332,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJ902athyJ3hUIn7RZaE9O5h0D_Ayks5ufp2LgaJpZM4XAEX4
.

[tech4GT]

Very nice idea indeed!!

[SidharthBansal]

Published on GCI dashboard

[alfen-yu]

How do I claim this issue??? or open it with Desktop Github?

[SidharthBansal]

For claiming the task just write a comment asking to claim it

For reproducing the task you need to install the software first