vcsharp
  •  vcsharp
  • 88.4% (Honored)
  • YAF Commander Topic Starter
2018-04-09T06:51:04Z
ISSUE
I have noticed that when a user is on post message page, and clicks on Preview button, then for a long post, the preview part is only partially visible with the top part hidden from user view. This is not very intuitive for an end user.

EXPECTED FUNCTIONALITY
I think, when user clicks on Preview button, then the preview message should be wholly visible or at least a maximum part of it should be visible, and top part of preview should always be visible. So, in a worst case scenario, when the post is very long that goes beyond a single page then the preview message should show the top part of message and for seeing the lower part of preview, user would scroll down in the page.

Please take a look at following video, which shows this issue : Preview Message is not fully visible 

I am using yaf 2.2.3.

Sponsor
vcsharp
  •  vcsharp
  • 88.4% (Honored)
  • YAF Commander Topic Starter
2018-04-10T12:36:40Z
The issue can be taken care of by using some client-side coding.

I inserted the following client-script within pages/postmessage.ascx and it solved the problem of preview part not being fully visible for a longer post. A video of how the Preview is scrolled into view can be seen at following url: How Preview message is scrolled into view 

Since Preview button is the only button on this page that posts back to the same page, so we can safely call the method for scrolling Preview message into view in client-side event of pageLoad. This is what is happening in script below.

<script type='text/javascript'>

(function () {
    //returns true if element top is within viewport else returns false
    function isElementInView(element) {
        var emt = $(element);
        var offset = emt.offset();
        var documentScrollTop = $(document).scrollTop();

        if ((offset.top + emt.height()) > ($(window).innerHeight() + documentScrollTop) && offset.top >= documentScrollTop) {
            return false;
        } else if (offset.top < documentScrollTop) {
            return false;
        }
        return true;
    }

    //scrolls top of preview into view
    function scrollPreviewIntoView() {
        var emt = $("[id*='PreviewRow'");
        if (emt.length > 0 && isElementInView(emt[0]) !== true) {
               $(document).scrollTop(emt.offset().top);
        }
    }

    //scroll preview part into full view on postback. (preview button is the only button posting back to postmessage page)
    Sys.Application.add_load(applicationLoadHandler);

    function applicationLoadHandler() {
        scrollPreviewIntoView();
    }
}());

</script>

About Us

The YAF.NET is an open source .NET forum project. YAF.NET is supported by an team of international developers who are build community by building community software.

Powered by Resharper Donate with PayPal button

Project Twitter Updates

Copyright © YetAnotherForum.NET & Ingo Herbote. All rights reserved