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

Bug on short sites #1

Open
csoLs opened this issue Nov 4, 2014 · 6 comments
Open

Bug on short sites #1

csoLs opened this issue Nov 4, 2014 · 6 comments

Comments

@csoLs
Copy link

csoLs commented Nov 4, 2014

If used on a short website (in fact the shorter the weirder behavior), the miniregion height as well as the width/height ratio on the minimap seems to bug... Alot.

This is the 'wrong' behavior:
temp-git
This is seems to be better:
temp-git-right
@princejwesley
Copy link
Owner

Thanks for letting me know. Can you post the page setup with dummy text or send to my email address ([email protected]) for diagnose the issue?

Thanks again!

@csoLs
Copy link
Author

csoLs commented Nov 5, 2014

Sure, no problem! This is a scaled back version, but the bug seems to be consistent on all short sites.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Demo | start.php</title>
    <style type="text/css">
    *, *:before, *:after {
        margin: 0;
        padding: 0;
        border: 0;
        -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
        display: block;
    }
    body {
        margin: 35px 200px 0;
        font-size: 1.25em;
        line-height: 1.5em;
        background: rgb(39,40,34);
        color: rgb(134,134,134);
    }
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="minimap.min.css" />
        <script src="minimap.min.js"></script>
</head>
<body>
    <header class="header" role="banner">       
        <nav role="navigation">
            <a  class="active" href="">
                start <span class="close"></span>
            </a>
            <a  href="about">
                about <span class="close"></span>
            </a>
            <a  href="contact">
                contact <span class="close"></span>
            </a>
        </nav>
    </header>

    <main class="main" role="main">
        <div class="text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <hr>
        <h2>Sub heading</h2>
        <hr>
    </main>
    <footer class="footer minimap noselect" role="contentinfo">
        <div class="copyright">
            <p>Copyright © 2014</p>
        </div>
    </footer>

<script type="text/javascript">
    var previewBody = $('body').minimap({
        heightRatio: 0.2,
        widthRatio: 0.1,
        offsetHeightRatio: 0.06,
        offsetWidthRatio: 0
    });
</script>

</body>
</html>

I'm testing on 1920x1200, both Firefox 33 and chrome 38, and here is an fiddle.

@princejwesley
Copy link
Owner

Added font-size: 1em; in .minimap class to resolve this issue. here is the fiddle. Confirm the fix to push it.

@princejwesley
Copy link
Owner

Closing this issue for now.

@csoLs
Copy link
Author

csoLs commented Nov 9, 2014

Hey, sorry for the lack of response. I've been out of town...

No, adding font-size: 1em does not solve the problem. I believe that the real problem is somewhat related to the scale functionality:

var scale = function() {
    return {
        x: ($window.width() / minimap.width()) * settings.widthRatio,
        y: ($window.height() / minimap.height()) * settings.heightRatio
    };
};

No matter what the content height is, the smallest value for $window.height() will always be the full viewport height, resulting in some weird outstretched minimap if/when the content is shorter than the full viewport. What if you could work around that by using something like document.body.scrollHeight instead?

@princejwesley
Copy link
Owner

I am aware of this problem. I assumed that dom content is always bigger than view-port.
I'll fix this use-case.

Thanks!

@princejwesley princejwesley reopened this Nov 10, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@princejwesley @csoLs