Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Term List Navigation Drawer Enhancement #7

Closed
5 tasks done
eeriksp opened this issue May 6, 2018 · 8 comments
Closed
5 tasks done

Term List Navigation Drawer Enhancement #7

eeriksp opened this issue May 6, 2018 · 8 comments
Labels
enhancement New feature or request help wanted Extra attention is needed question Further information is requested
Milestone
v1.1.0

Comments

@eeriksp
Copy link
Member

eeriksp commented May 6, 2018 •
edited
Loading

Add navigation drawer to the left side with a list of all terms in the dictionary. Each term is a link to the term's page.

To do:
@eeriksp eeriksp added enhancement New feature or request help wanted Extra attention is needed question Further information is requested labels May 6, 2018
@eeriksp
Copy link
Member Author

eeriksp commented May 9, 2018

::-webkit-scrollbar { display: none; } hides scrollbar for webkit-based browsers, but not for Firefox.

@eeriksp
Copy link
Member Author

eeriksp commented May 9, 2018 •
edited
Loading

About scrolling:
We have access to the right DOM element, but the scrolling functionality is not working.
Need to form a simplified example and ask somebody, for instance Oskar.

@eeriksp
Copy link
Member Author

eeriksp commented May 10, 2018 •
edited
Loading

Oskar made such a script:

<!DOCTYPE HTML5>
<html>
    <head>
    <script>
      function scrollIntoView(elementId,elementHolder) {
        var myElement = document.getElementById(elementId),
            topPos = myElement.offsetTop-20;
        document.getElementById(elementHolder).scrollTop = topPos;
      }
</script>
    <style>
        #holder div {
            display: block;
            height: 50px;
        }
        #holder {
            overflow: scroll;
            height: 90%;
            width: 25%;
            background: #f5f5f5;
        }
    </style>
    </head>
    <body>
        <div id="holder">
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div id="tester"  style="color:red;">random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
            <div>random text</div>
        </div>
    </body>
    <script>
        setTimeout(function(){scrollIntoView('tester',"holder")},2000);
    </script>
</html>

And it works!

@eeriksp
Copy link
Member Author

eeriksp commented May 10, 2018

Scrolling is now working, but the user needs to activate the function by clicking a button. If the function is called in mounted(), the DOM in not ready yet, and therefore the elements cannot be found.

@eeriksp eeriksp added this to the v1.1.0 milestone May 10, 2018
@eeriksp
Copy link
Member Author

eeriksp commented May 12, 2018

I made a simplified example:
image
Here I am able to access elements created by for loop with mounted() method.

@eeriksp
Copy link
Member Author

eeriksp commented May 16, 2018

Got it working if the term page is reached through search functionality (if termList is loaded before the scroll function is executed).
Not working if the term page is reached directly from URL (and termList is therefore not loaded before).

@eeriksp
Copy link
Member Author

eeriksp commented May 16, 2018

See question and answer here.

@eeriksp
Copy link
Member Author

eeriksp commented May 18, 2018

Everything working as expected.

@eeriksp eeriksp closed this as completed May 18, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request help wanted Extra attention is needed question Further information is requested
Projects
None yet
Milestone
v1.1.0
Development

No branches or pull requests
1 participant
@eeriksp